@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=arrow_circle_right,mail,open_in_new,verified&display=block");
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
    scroll-behavior: smooth;
  }
}
body, html {
  width: 100%;
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: pretty;
}

a {
  text-decoration: none;
  color: inherit;
}

html {
  --menu-color: #000;
  --menu-hover-color: #008fd0;
  --background-color: #f0f0f0;
  --text-color: #333;
  --block-grey: #eff3f8;
  --block-light: #f7f9fb;
  --hr-color: #f0f0f0;
  --tag-color: #3dbae0;
  --dot-color1: #1b5aa5;
  --dot-color2: #008fd0;
  --dot-color3: #3dbae0;
  --article-width: 840px;
}

body {
  font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "Osaka", sans-serif;
}

a {
  -webkit-transition: color 0.1s ease-in-out;
  transition: color 0.1s ease-in-out;
}

.page-header {
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hr-color);
  position: fixed;
  z-index: 100;
  height: 58px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-inline: 20px;
}
.page-header .logo {
  width: 100px;
}
.page-header .nav-menu-container .toggle {
  position: relative;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 5px;
}
@media only screen and (min-width: 768px) {
  .page-header .nav-menu-container .toggle {
    display: none;
  }
}
.page-header .nav-menu-container .toggle span {
  display: inline-block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: absolute;
  z-index: 1;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--text-color);
  width: 64%;
}
.page-header .nav-menu-container .toggle span:nth-of-type(1) {
  top: 15px;
}
.page-header .nav-menu-container .toggle span:nth-of-type(2) {
  top: 23px;
}
.page-header .nav-menu-container .toggle span:nth-of-type(3) {
  top: 31px;
}
.page-header .nav-menu-container .toggle.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  -webkit-transform: translateY(6px) rotate(-225deg);
          transform: translateY(6px) rotate(-225deg);
}
.page-header .nav-menu-container .toggle.active span:nth-of-type(2) {
  -webkit-transform: rotate(-225deg);
          transform: rotate(-225deg);
  opacity: 0;
}
.page-header .nav-menu-container .toggle.active span:nth-of-type(3) {
  top: 30px;
  left: 18px;
  -webkit-transform: translateY(-6px) rotate(-135deg);
          transform: translateY(-6px) rotate(-135deg);
}
.page-header .nav-menu-container .nav-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5vw;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media only screen and (max-width: 768px) {
  .page-header .nav-menu-container .nav-menu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 1rem;
    padding-block: 2rem;
    position: absolute;
    inset: 0;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98);
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    transition: -webkit-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  }
}
.page-header .nav-menu-container .nav-menu.open_menu_sp {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.page-header .nav-menu-container .nav-menu li a {
  display: block;
  font-weight: 500;
  font-size: 1rem;
  color: var(--menu-color);
  position: relative;
}
.page-header .nav-menu-container .nav-menu li a:hover {
  color: var(--menu-hover-color);
}
@media only screen and (max-width: 768px) {
  .page-header .nav-menu-container .nav-menu li a {
    text-align: center;
    padding: 10px;
    font-size: 1.5rem;
    font-weight: 600;
  }
}

section {
  isolation: isolate;
  overflow: hidden;
}

.page-footer {
  background-color: var(--block-grey);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 20px;
  text-align: center;
}
.page-footer .width-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.9rem;
}
@media only screen and (max-width: 768px) {
  .page-footer .width-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
    font-size: 0.75rem;
  }
}
.page-footer p {
  margin: 0;
  color: var(--text-color);
}

#error {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2em;
  height: 90vh;
}
#error h1 {
  font-size: 3rem;
  text-align: center;
  color: var(--text-color);
  margin-bottom: 0.5em;
}
#error p {
  text-align: center;
}

.buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5em;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-block: 3em;
}
.buttons .btn-primary {
  margin-block: 0;
}

.btn.contact {
  position: relative;
  padding-right: 3em;
}
.btn.contact::after {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  content: "mail";
  font-size: 1.25em;
  position: absolute;
  right: 1em;
  top: 50%;
  translate: 0 -50%;
  font-weight: normal;
}
.btn.link {
  position: relative;
  padding-right: 3em;
  background-color: transparent;
  color: var(--menu-color);
  border: 1px solid;
}
.btn.link::after {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  content: "open_in_new";
  font-size: 1.25em;
  position: absolute;
  right: 1em;
  top: 50%;
  translate: 0 -50%;
  font-weight: normal;
}

.btn-primary {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 300px;
  text-align: center;
  padding: 0.75rem 3rem;
  margin: 2em auto;
  background-color: var(--text-color);
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 2rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.btn-primary:hover {
  background-color: var(--menu-hover-color);
  color: #fff;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
@media only screen and (max-width: 768px) {
  .btn-primary {
    font-size: 1.125rem;
    padding: 0.75rem 2rem;
  }
}

.section-title {
  font-family: "Roboto", sans-serif;
  position: relative;
  font-size: 2rem;
  font-weight: 700;
  margin-block: 3em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5em;
}
.section-title.is-tight {
  margin-block: 1.5em;
}
.section-title.sub {
  margin-block: 3em 1.5em;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.section-title.sub span {
  --dot-size: .25em;
  bottom: 50%;
  left: 50%;
  translate: -50% 50%;
}
@media only screen and (max-width: 768px) {
  .section-title.sub span {
    --dot-size: .20em;
    left: auto;
    right: 1em;
  }
}
.section-title span {
  --dot-size: .20em;
  position: absolute;
  bottom: calc(var(--dot-size) * -2);
  display: block;
  width: var(--dot-size);
  height: var(--dot-size);
  background-color: var(--dot-color2);
  border-radius: 50%;
}
.section-title span::before, .section-title span::after {
  content: "";
  position: absolute;
  right: calc(var(--dot-size) * 2);
  top: 0;
  display: block;
  width: var(--dot-size);
  height: var(--dot-size);
  background-color: var(--dot-color1);
  border-radius: 50%;
}
.section-title span::after {
  left: calc(var(--dot-size) * 2);
  background-color: var(--dot-color3);
}
.section-title span:nth-of-type(2)::before {
  right: auto;
  left: calc(var(--dot-size) * 2);
}
.section-title span:nth-of-type(2)::after {
  right: auto;
  left: calc(var(--dot-size) * 4);
}
@media only screen and (max-width: 768px) {
  .section-title {
    font-size: 1.75rem;
    margin-bottom: 2em;
  }
}

.center-healine {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-block: 1.5em;
}
@media only screen and (max-width: 768px) {
  .center-healine {
    font-size: 1.25rem;
  }
}

.width-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
@media only screen and (max-width: 768px) {
  .width-container {
    padding: 15px;
  }
}

.width-article {
  max-width: var(--article-width);
  margin: 0 auto;
}

.section-intro {
  position: relative;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--block-grey)), to(#fff));
  background-image: linear-gradient(180deg, var(--block-grey) 0%, #fff 100%);
  padding-top: 60px;
}
@media only screen and (max-width: 768px) {
  .section-intro {
    padding-top: 40px;
  }
}
.section-intro .cube {
  --pattern-color: #f0f0f0;
  --base-delay: 2s;
  position: absolute;
  top: 80%;
  left: 45vw;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: solid 1px #e1eff1;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);
          transform: scale(0) rotate(0deg) translate(-50%, -50%);
  -webkit-animation: cube 12s ease-in forwards infinite;
          animation: cube 12s ease-in forwards infinite;
}
.section-intro .cube:nth-child(2n) {
  border-color: #d6e9ec;
}
.section-intro .cube:nth-child(2) {
  -webkit-animation-delay: var(--base-delay);
          animation-delay: var(--base-delay);
  left: 25vw;
  top: 40%;
}
.section-intro .cube:nth-child(3) {
  -webkit-animation-delay: calc(var(--base-delay) * 2);
          animation-delay: calc(var(--base-delay) * 2);
  left: 75vw;
  top: 50%;
}
.section-intro .cube:nth-child(4) {
  -webkit-animation-delay: calc(var(--base-delay) * 3);
          animation-delay: calc(var(--base-delay) * 3);
  left: 90vw;
  top: 10%;
}
.section-intro .cube:nth-child(5) {
  -webkit-animation-delay: calc(var(--base-delay) * 4);
          animation-delay: calc(var(--base-delay) * 4);
  left: 10vw;
  top: 85%;
}
.section-intro .cube:nth-child(6) {
  -webkit-animation-delay: calc(var(--base-delay) * 5);
          animation-delay: calc(var(--base-delay) * 5);
  left: 50vw;
  top: 10%;
}
@-webkit-keyframes cube {
  from {
    -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);
            transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(20) rotate(960deg) translate(-50%, -50%);
            transform: scale(20) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
  }
}
@keyframes cube {
  from {
    -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);
            transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(20) rotate(960deg) translate(-50%, -50%);
            transform: scale(20) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
  }
}
.section-intro .cpot-main-logo {
  position: relative;
}
@media (prefers-reduced-motion: no-preference) {
  .section-intro .cpot-main-logo {
    opacity: 0;
    -webkit-animation: logoflip 3s 0s ease-in-out forwards;
            animation: logoflip 3s 0s ease-in-out forwards;
  }
}
@-webkit-keyframes logoflip {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(90deg) rotateX(10deg);
            transform: rotateY(90deg) rotateX(10deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) rotateX(0deg);
            transform: rotateY(0deg) rotateX(0deg);
  }
}
@keyframes logoflip {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(90deg) rotateX(10deg);
            transform: rotateY(90deg) rotateX(10deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) rotateX(0deg);
            transform: rotateY(0deg) rotateX(0deg);
  }
}
.section-intro .intro-logo-container {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  position: relative;
  width: 400px;
  margin: 8em auto;
}
@media (prefers-reduced-motion: no-preference) {
  .section-intro .intro-logo-container {
    -webkit-transform: scale(1.5) translateX(0);
            transform: scale(1.5) translateX(0);
    -webkit-animation: logocontainer 3s 0s ease-in-out forwards;
            animation: logocontainer 3s 0s ease-in-out forwards;
  }
}
@media only screen and (max-width: 768px) {
  .section-intro .intro-logo-container {
    width: 300px;
  }
}
@-webkit-keyframes logocontainer {
  0% {
    -webkit-transform: scale(1.5) translateX(0);
            transform: scale(1.5) translateX(0);
  }
  100% {
    -webkit-transform: scale(1) translateX(0);
            transform: scale(1) translateX(0);
  }
}
@keyframes logocontainer {
  0% {
    -webkit-transform: scale(1.5) translateX(0);
            transform: scale(1.5) translateX(0);
  }
  100% {
    -webkit-transform: scale(1) translateX(0);
            transform: scale(1) translateX(0);
  }
}
.section-intro .intro-logo-container .logo-dots {
  --base-delay: 1s;
  position: absolute;
  top: 45%;
  left: 69.5%;
  width: 3%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--dot-color1);
  translate: -160% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .section-intro .intro-logo-container .logo-dots {
    -webkit-animation: dot 2.5s var(--base-delay) forwards;
            animation: dot 2.5s var(--base-delay) forwards;
    opacity: 0;
  }
}
.section-intro .intro-logo-container .logo-dots:nth-child(2) {
  translate: 0 0;
  -webkit-animation-delay: calc(var(--base-delay) + 0.5s);
          animation-delay: calc(var(--base-delay) + 0.5s);
  background-color: var(--dot-color2);
}
.section-intro .intro-logo-container .logo-dots:nth-child(3) {
  translate: 160% 0;
  -webkit-animation-delay: calc(var(--base-delay) + 1s);
          animation-delay: calc(var(--base-delay) + 1s);
  background-color: var(--dot-color3);
}
@-webkit-keyframes dot {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes dot {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.section-intro article {
  position: relative;
  display: grid;
  grid-template-columns: 70px 40% 1fr;
  gap: 20px;
  justify-items: start;
}
@media only screen and (max-width: 768px) {
  .section-intro article {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
}
.section-intro article h2 {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 1.5rem;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .section-intro article h2 {
    text-align: center;
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
  }
}
@media only screen and (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .section-intro article h2 {
    opacity: 0;
    translate: -20px 0;
    -webkit-animation: fadeIn 2s 1s ease-out forwards;
            animation: fadeIn 2s 1s ease-out forwards;
  }
}
.section-intro article p {
  letter-spacing: 0.02em;
  line-height: 2.2;
  font-weight: 500;
  margin-block: 1rem;
}
@media only screen and (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .section-intro article p {
    opacity: 0;
    translate: 0 20px;
    -webkit-animation: fadeIn 2.5s ease-out forwards;
            animation: fadeIn 2.5s ease-out forwards;
  }
  .section-intro article p:nth-child(1) {
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s;
  }
  .section-intro article p:nth-child(2) {
    -webkit-animation-delay: 1.6s;
            animation-delay: 1.6s;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
.section-intro article ul {
  list-style: none;
  margin: 0;
  padding: 0;
  place-self: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  gap: 1.75rem;
}
@media only screen and (max-width: 768px) {
  .section-intro article ul {
    gap: 1rem;
  }
}
.section-intro article ul li {
  --keyword-delay: .2s;
  letter-spacing: 0.05em;
  text-align: center;
  font-weight: 600;
  color: #fff;
  padding: 0.5rem 1.25rem;
  background-color: var(--text-color);
  border-radius: 5px;
}
@media only screen and (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .section-intro article ul li {
    opacity: 0;
    -webkit-animation: keyword 5s 1s ease-in-out forwards;
            animation: keyword 5s 1s ease-in-out forwards;
  }
  .section-intro article ul li:nth-child(1) {
    -webkit-transform: translateX(-10%);
            transform: translateX(-10%);
    -webkit-animation-delay: var(--keyword-delay);
            animation-delay: var(--keyword-delay);
  }
  .section-intro article ul li:nth-child(2) {
    -webkit-transform: translateX(10%);
            transform: translateX(10%);
    -webkit-animation-delay: calc(var(--keyword-delay) * 2);
            animation-delay: calc(var(--keyword-delay) * 2);
  }
  .section-intro article ul li:nth-child(3) {
    -webkit-transform: translateX(-10%);
            transform: translateX(-10%);
    -webkit-animation-delay: calc(var(--keyword-delay) * 3);
            animation-delay: calc(var(--keyword-delay) * 3);
  }
  .section-intro article ul li:nth-child(4) {
    -webkit-transform: translateX(10%);
            transform: translateX(10%);
    -webkit-animation-delay: calc(var(--keyword-delay) * 4);
            animation-delay: calc(var(--keyword-delay) * 4);
  }
  .section-intro article ul li:nth-child(5) {
    -webkit-transform: translateX(-10%);
            transform: translateX(-10%);
    -webkit-animation-delay: calc(var(--keyword-delay) * 5);
            animation-delay: calc(var(--keyword-delay) * 5);
  }
}
@-webkit-keyframes keyword {
  0% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) skewX(-10deg);
            transform: translateX(0) skewX(-10deg);
    opacity: 1;
  }
}
@keyframes keyword {
  0% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) skewX(-10deg);
            transform: translateX(0) skewX(-10deg);
    opacity: 1;
  }
}

.section-service {
  overflow: hidden;
  position: relative;
  padding-bottom: 10px;
}
.section-service .service-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.section-service .service-list::after {
  content: "";
  position: absolute;
  left: -50px;
  top: 50%;
  width: 200%;
  height: calc(100% + 50px);
  -webkit-transform: translate(0, -50%) skewX(-10deg);
          transform: translate(0, -50%) skewX(-10deg);
  border-radius: 30px 0 0 60px;
  background-color: var(--block-grey);
  z-index: -1;
  opacity: 0.5;
}
@media only screen and (max-width: 768px) {
  .section-service .service-list::after {
    -webkit-transform: translate(0, -50%) skewX(0);
            transform: translate(0, -50%) skewX(0);
    opacity: 0.5;
  }
}
.section-service .service-list.is-small {
  margin-bottom: 2rem;
  background-color: var(--block-light);
  padding: 2rem;
  border-radius: 30px;
}
.section-service .service-list.is-small::after {
  display: none;
}
.section-service .service-list.is-small .service-item {
  padding: 0px 45px 20px 20px;
}
.section-service .service-list.is-small .service-item::after {
  font-size: 2rem;
}
.section-service .service-list.is-small .service-item h3 {
  font-size: 1.5rem;
}
@media only screen and (max-width: 768px) {
  .section-service .service-list.is-small .service-item h3 {
    font-size: 1.25rem;
  }
}
.section-service .service-list.is-small .service-item p {
  font-size: 0.9rem;
}
@media only screen and (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .section-service .service-list.animate.show::after {
    -webkit-transform: translate(0, -50%) skewX(-10deg) scale(1, 1);
            transform: translate(0, -50%) skewX(-10deg) scale(1, 1);
    opacity: 0.5;
  }
  .section-service .service-list.animate.show .service-item {
    opacity: 1;
    translate: 0 0;
  }
}
@media only screen and (max-width: 768px) {
  .section-service .service-list {
    grid-template-columns: 1fr;
  }
}
.section-service .service-list .service-item {
  font-family: "Roboto", sans-serif;
  display: block;
  position: relative;
  padding: 30px 86px 30px 30px;
  border-bottom: 1px solid var(--hr-color);
}
@media only screen and (max-width: 768px) {
  .section-service .service-list .service-item {
    padding-right: 50px;
  }
}
@media only screen and (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .section-service .service-list .service-item.animate {
    -webkit-transition: all 2s;
    transition: all 2s;
    opacity: 0;
    translate: 0 50px;
  }
  .section-service .service-list .service-item.animate:nth-child(1) {
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
  }
  .section-service .service-list .service-item.animate:nth-child(2) {
    -webkit-transition-delay: 0.4s;
            transition-delay: 0.4s;
  }
  .section-service .service-list .service-item.animate:nth-child(3) {
    -webkit-transition-delay: 0.6s;
            transition-delay: 0.6s;
  }
  .section-service .service-list .service-item.animate:nth-child(4) {
    -webkit-transition-delay: 0.8s;
            transition-delay: 0.8s;
  }
  .section-service .service-list .service-item.animate:nth-child(5) {
    -webkit-transition-delay: 1s;
            transition-delay: 1s;
  }
}
.section-service .service-list .service-item::after {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  content: "arrow_circle_right";
  position: absolute;
  right: 0;
  top: 50%;
  font-size: 3rem;
  -webkit-transform: translateY(-50%) scale(1);
          transform: translateY(-50%) scale(1);
  color: var(--menu-hover-color);
  font-weight: normal;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform-origin: center;
          transform-origin: center;
}
@media only screen and (max-width: 768px) {
  .section-service .service-list .service-item::after {
    font-size: 2rem;
  }
}
.section-service .service-list .service-item:hover::after {
  -webkit-transform: translate(10px, -50%) scale(1.2);
          transform: translate(10px, -50%) scale(1.2);
  color: var(--text-color);
}
.section-service .service-list .service-item h3 {
  font-size: 1.7rem;
  font-weight: 600;
}
@media only screen and (max-width: 768px) {
  .section-service .service-list .service-item h3 {
    font-size: 1.5rem;
  }
}
.section-service .service-list .service-item p {
  margin-top: 1rem;
  font-size: 1rem;
}

.section-news .news-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.section-news .news-list li a {
  position: relative;
  display: grid;
  grid-template-columns: 120px auto 1fr;
  gap: 1.25em;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  padding-block: 30px;
  padding-inline: 30px 60px;
  border-radius: 5px;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  border-bottom: 1px solid var(--hr-color);
}
@media only screen and (max-width: 768px) {
  .section-news .news-list li a {
    grid-template-columns: 135px 1fr;
    justify-items: flex-start;
    gap: 1em;
  }
}
.section-news .news-list li a:hover::after {
  color: var(--menu-hover-color);
  -webkit-transform: translateY(-50%) translateX(0.5rem) scale(1.2);
          transform: translateY(-50%) translateX(0.5rem) scale(1.2);
}
.section-news .news-list li a::after {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  content: "arrow_circle_right";
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #ccc;
  font-weight: 300;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
@media only screen and (max-width: 768px) {
  .section-news .news-list li a::after {
    right: 10px;
  }
}
.section-news .news-list li a .news-date {
  font-family: "Roboto", sans-serif;
  color: var(--text-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5px;
}
@media only screen and (max-width: 768px) {
  .section-news .news-list li a .news-date {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 10px;
  }
}
.section-news .news-list li a .news-date span {
  display: none;
  font-size: 0.7rem;
  text-align: center;
  color: #fff;
  background-color: var(--tag-color);
  padding: 2px 10px;
  border-radius: 5px;
}
@media only screen and (max-width: 768px) {
  .section-news .news-list li a h3 {
    grid-column: 1/3;
  }
}
.section-news .news-list li a .news-title {
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--menu-color);
}
.section-news .news-list li a .news-tag {
  font-size: 0.65rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background-color: var(--tag-color);
  padding: 3px 10px;
  border-radius: 5px;
}

.section-about table {
  width: 800px;
  max-width: 100%;
  border-collapse: collapse;
  margin: 0 auto 2em;
}
@media only screen and (max-width: 768px) {
  .section-about table {
    width: 100%;
  }
}
.section-about table th, .section-about table td {
  padding: 2em;
  text-align: left;
  border-top: 1px solid var(--hr-color);
}
@media only screen and (max-width: 768px) {
  .section-about table th, .section-about table td {
    padding: 0.5rem;
  }
}
.section-about table th {
  font-weight: bold;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  .section-about table th {
    font-size: 0.9rem;
  }
}
@media only screen and (max-width: 768px) {
  .section-about table td {
    font-size: 10px;
  }
}

.section-service-detail {
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--block-grey)), color-stop(30vw, #fff));
  background-image: linear-gradient(180deg, var(--block-grey) 0%, #fff 30vw);
}
.section-service-detail .service-title {
  font-size: 3rem;
  margin-block: 2.5em 1.5em;
}
.section-service-detail .service-title span {
  --dot-size: .3em;
}
@media only screen and (max-width: 768px) {
  .section-service-detail .service-title {
    font-size: 1.75rem;
    margin-bottom: 2em;
  }
}
.section-service-detail p {
  font-size: 1.125rem;
  line-height: 2.2;
  font-weight: 500;
  margin-block: 1rem;
}
@media only screen and (max-width: 768px) {
  .section-service-detail p {
    font-size: 1rem;
    line-height: 1.8;
  }
}
.section-service-detail p.lead {
  font-size: 1.25rem;
  margin-bottom: 2em;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .section-service-detail p.lead {
    font-size: 1.25rem;
  }
}
.section-service-detail .service-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.75rem;
}
@media only screen and (max-width: 768px) {
  .section-service-detail .service-feature-list {
    gap: 1rem;
  }
}
.section-service-detail .service-feature-list li {
  font-size: 1.25rem;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: 1.5em;
}
@media only screen and (max-width: 768px) {
  .section-service-detail .service-feature-list li {
    font-size: 1rem;
    gap: 1em;
  }
}
.section-service-detail .service-feature-list li span {
  white-space: nowrap;
  font-family: "Roboto", sans-serif;
  display: block;
  font-size: 1rem;
  color: #fff;
  padding: 0.25rem 0.75rem;
  background-color: var(--tag-color);
  border-radius: 5px;
}
@media only screen and (max-width: 768px) {
  .section-service-detail .service-feature-list li span {
    font-size: 0.75rem;
  }
}
.section-service-detail .service-example-list {
  list-style: none;
  margin: 0 0 3em;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
@media only screen and (max-width: 768px) {
  .section-service-detail .service-example-list {
    gap: 1rem;
  }
}
.section-service-detail .service-example-list li {
  background-image: -webkit-gradient(linear, left top, right top, from(var(--block-grey)), to(#fff));
  background-image: linear-gradient(90deg, var(--block-grey) 0%, #fff 100%);
  border-radius: 10px;
  -webkit-transform: skewX(-8deg);
          transform: skewX(-8deg);
  font-size: 1.25rem;
  position: relative;
  letter-spacing: 0.05em;
  padding-block: 1em;
  padding-left: 3em;
}
@media only screen and (max-width: 768px) {
  .section-service-detail .service-example-list li {
    font-size: 1rem;
    gap: 1em;
  }
}
.section-service-detail .service-example-list li::before {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  content: "verified";
  font-size: 1.25em;
  position: absolute;
  left: 0.75em;
  top: 50%;
  translate: 0 -50%;
  color: var(--tag-color);
}

.section-news-detail {
  font-size: 1.125rem;
}
.section-news-detail .width-container {
  max-width: 1140px;
}
.section-news-detail .news-header {
  margin-block: 5rem 0;
}
.section-news-detail .news-header .news-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.5em;
  margin-block: 0.5rem;
  font-size: 0.85rem;
}
.section-news-detail .news-header .news-info span {
  font-size: 0.65rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background-color: var(--tag-color);
  padding: 3px 10px;
  border-radius: 5px;
}
.section-news-detail .news-header .news-title {
  font-size: 2rem;
  margin-block: 0 1em;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .section-news-detail .news-header .news-title {
    font-size: 1.75rem;
  }
}
.section-news-detail a {
  color: var(--dot-color1);
}
.section-news-detail a:hover {
  color: var(--dot-color3);
}
.section-news-detail h2 {
  font-size: 1.5rem;
  margin-block: 1.25em;
}
@media only screen and (max-width: 768px) {
  .section-news-detail h2 {
    font-size: 1.25rem;
    margin-block: 1.125em;
  }
}
.section-news-detail .text-center {
  text-align: center;
}
.section-news-detail .text-center h2 {
  font-size: 1.8rem;
  font-weight: 300;
}
@media only screen and (max-width: 768px) {
  .section-news-detail .text-center h2 {
    font-size: 1.625rem;
  }
}
.section-news-detail p {
  font-size: 1.125rem;
  line-height: 2.2;
  font-weight: 500;
  margin-block: 1rem;
}
@media only screen and (max-width: 768px) {
  .section-news-detail p {
    font-size: 1rem;
    line-height: 1.8;
  }
}
.section-news-detail p.lead {
  font-size: 1.25rem;
  margin-bottom: 2em;
}
@media only screen and (max-width: 768px) {
  .section-news-detail p.lead {
    font-size: 1.125rem;
  }
}
.section-news-detail figure {
  margin: 0 0 1rem;
}
.section-news-detail .list-none {
  list-style: none;
  padding: 0;
  margin: 0;
}
.section-news-detail .list-none li {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  line-height: 2.1;
}
@media only screen and (max-width: 768px) {
  .section-news-detail .list-none li {
    font-size: 1rem;
  }
}
.section-news-detail dl {
  font-size: 1rem;
}
.section-news-detail dl dt {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.section-news-detail dl dd {
  margin-bottom: 0.5rem;
}

#policy article {
  font-size: 0.875rem;
}
#policy h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
#policy h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
#policy p {
  font-size: 1rem;
  line-height: 2;
}
#policy ol {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
}
#policy ol li .second-list-number {
  font-weight: 600;
}
#policy ol li p {
  margin-block: 0 0.5rem;
  line-height: 2;
}