@charset "UTF-8";
/* Scss Document */
html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  --vw: 100vw;
}
html.preload {
  font-size: 1px !important;
}
html.preload * {
  transition: none !important;
  visibility: hidden;
  max-width: 100%;
}
@media (max-width: 585.98px) {
  html {
    font-size: calc(var(--vw) / 384);
  }
}
@media (min-width: 586px) and (max-width: 767.98px) {
  html {
    font-size: 1.5px;
  }
}
@media (min-width: 768px) and (max-width: 1799.98px) {
  html {
    font-size: calc(var(--vw) / 1440);
  }
}
@media (min-width: 1800px) {
  html {
    font-size: 1.25px;
  }
}
@media print {
  html {
    font-size: 0.2mm;
  }
}

* {
  box-sizing: border-box;
}

.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

[id] {
  scroll-margin-top: 16px;
}
@media screen and (min-width: 768px), print {
  [id] {
    scroll-margin-top: 32px;
  }
}

.is-anchor-up [id] {
  scroll-margin-top: 110px;
}
@media screen and (min-width: 768px), print {
  .is-anchor-up [id] {
    scroll-margin-top: 130px;
  }
}

body {
  font-size: 14rem;
  font-weight: 400;
  color: #191B39;
  background: #fafafa;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  line-break: strict;
  word-break: break-word;
  min-width: 320rem;
  font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", Arial, sans-serif;
  margin: 0;
  padding: 100rem 0 0;
  letter-spacing: -0.1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: justify;
  transition: background-color 0.7s;
}
@media screen and (min-width: 768px), print {
  body {
    font-size: 16rem;
    padding: 180rem 0 0;
  }
}
body.is-show-column {
  background: #D2DBEE;
}

html.modal-on,
body.modal-on {
  overflow: hidden;
}

[lang=en],
.en {
  font-family: "Inter", sans-serif;
}

button,
input,
textarea,
select {
  font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", Arial, sans-serif;
  font-size: 12rem;
}
@media screen and (min-width: 768px), print {
  button,
  input,
  textarea,
  select {
    font-size: 16rem;
  }
}

.tal {
  text-align: left !important;
}

.tar {
  text-align: right !important;
}

.tac {
  text-align: center !important;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.mt0 {
  margin-top: 0 !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mt-l {
  margin-top: 32rem !important;
}
@media screen and (min-width: 768px), print {
  .mt-l {
    margin-top: 64rem !important;
  }
}

@media screen and (min-width: 768px), print {
  .inner {
    width: 1360rem;
    margin: 0 auto;
  }
  .inner-medium {
    width: 1000rem;
    margin: 0 auto;
  }
  .inner-narrow {
    width: 860rem;
    margin: 0 auto;
  }
  .spOnly {
    display: none !important;
  }
  .pcTal {
    text-align: left !important;
  }
  .pcTar {
    text-align: right !important;
  }
  .pcTac {
    text-align: center !important;
  }
}
@media screen and (max-width: 767.98px) {
  .spTal {
    text-align: left !important;
  }
  .spTar {
    text-align: right !important;
  }
  .spTac {
    text-align: center !important;
  }
  .inner,
  .inner-medium,
  .inner-narrow {
    width: 100%;
    padding: 0 16rem;
    box-sizing: border-box;
  }
  .pcOnly {
    display: none !important;
  }
}
.touchdevice .clickdeviceOnly {
  display: none;
}

.clickdevice .touchdeviceOnly {
  display: none;
}

section {
  margin: 120rem 0 80rem;
}
@media screen and (min-width: 768px), print {
  section {
    margin: 120rem 0;
  }
}

nav,
header,
footer,
article,
figure {
  margin: 0;
  padding: 0;
}

p {
  margin: 16rem 0;
}

h1,
h2,
h3,
h4,
h5 {
  text-align: left;
}
h1 .en,
h2 .en,
h3 .en,
h4 .en,
h5 .en {
  font-weight: 300;
}
h1 .ja,
h2 .ja,
h3 .ja,
h4 .ja,
h5 .ja {
  font-weight: 700;
}

em {
  font-style: normal;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
img.round4 {
  border-radius: 4rem;
}
img.round8 {
  border-radius: 4rem;
}
@media screen and (min-width: 768px), print {
  img.round8 {
    border-radius: 8rem;
  }
}

mark {
  text-decoration-color: #f8ffa2;
  text-decoration: underline;
  text-decoration-thickness: 0.6em;
  text-underline-offset: -0.2em;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.gray {
  color: #BDBDBD;
}

i[class^=icon-] {
  line-height: 1px;
  width: 24rem;
  aspect-ratio: 1;
  display: block;
}
i[class^=icon-] svg {
  width: 100%;
  aspect-ratio: 1;
}

.icon-arrow {
  position: relative;
  overflow: hidden;
}
.icon-arrow svg {
  transition: translate 0.3s;
}
.icon-arrow svg:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px), print {
  button:hover .icon-arrow svg, a:hover .icon-arrow svg {
    translate: 150% 0;
  }
}

.icon-menu-acc {
  width: 24rem;
  aspect-ratio: 1;
  position: relative;
  display: block;
}
.icon-menu-acc::before, .icon-menu-acc::after {
  content: "";
  width: 2rem;
  height: 16rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  background: #191B39;
  transition: transform 0.5s;
}
.icon-menu-acc::before {
  transform: translate(-50%, -50%) rotate(90deg);
}
.is-open .icon-menu-acc::after {
  transform: translate(-50%, -50%) rotate(-90deg);
}

/*-----------------------------------------------------------------------------------*/
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 300;
  padding: 16rem;
  transition: transform 0.5s;
}
body:not(.is-scroll-up):not(.is-menu-open) #header {
  transform: translateY(-100%);
}
@media screen and (min-width: 768px), print {
  #header:has(.has-mega.is-open)::before {
    opacity: 1;
  }
}
@media screen and (max-width: 767.98px) {
  #header:has(.menu-btn.is-active)::before {
    opacity: 1;
  }
}
#header::before {
  content: "";
  opacity: 0;
  position: fixed;
  inset: 0;
  background-color: rgba(56, 57, 57, 0.7);
  display: block;
  pointer-events: none;
  transition: opacity 0.5s;
}
#header .header-inner {
  background: #fafafa;
  border-radius: 4rem;
  position: relative;
}
@media screen and (max-width: 767.98px) {
  #header .header-inner {
    height: 56rem;
    padding: 8rem;
    display: grid;
    grid-template-columns: 1fr 40rem;
    align-items: center;
  }
}
@media screen and (min-width: 768px), print {
  #header .header-inner {
    height: 86rem;
    padding: 0 24rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
#header .logo {
  width: 155rem;
}
@media screen and (min-width: 768px), print {
  #header .logo {
    width: 221rem;
  }
}

/*-----------------------------------------------------------------------------------*/
@media screen and (max-width: 767.98px) {
  #gnavi {
    display: none;
    position: fixed;
    inset: 80rem 16rem 16rem 16rem;
    background-color: #fafafa;
    border-radius: 4rem;
    padding: 8rem 24rem 24rem;
    overflow: auto;
  }
}
#gnavi > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 768px), print {
  #gnavi > ul {
    display: flex;
    align-items: center;
    gap: 24rem;
  }
}
#gnavi > ul > li {
  margin: 0;
  padding: 0;
  line-height: 1;
}
@media screen and (max-width: 767.98px) {
  #gnavi > ul > li {
    border-bottom: 1px solid #BDBDBD;
  }
}
#gnavi > ul > li.document, #gnavi > ul > li.inquiry {
  border: none;
}
#gnavi > ul > li.document a, #gnavi > ul > li.inquiry a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56rem;
  border-radius: 4rem;
}
@media screen and (min-width: 768px), print {
  #gnavi > ul > li.document a, #gnavi > ul > li.inquiry a {
    padding: 0 24rem;
    text-decoration: none;
  }
}
#gnavi > ul > li.document {
  padding: 16rem 0 8rem;
}
@media screen and (min-width: 768px), print {
  #gnavi > ul > li.document {
    padding: 0;
    margin: 0 -20rem 0 0;
  }
}
#gnavi > ul > li.document a {
  background: #dcdcdc;
}
@media screen and (min-width: 768px), print {
  #gnavi > ul > li.document a {
    transition: background-color 0.3s, color 0.3s;
  }
  #gnavi > ul > li.document a:hover {
    background: #525252;
    color: #fff;
  }
}
#gnavi > ul > li.inquiry a {
  background: #191B39;
  border: 1px solid #191B39;
  color: #fff;
}
@media screen and (min-width: 768px), print {
  #gnavi > ul > li.inquiry a {
    transition: background-color 0.3s, color 0.3s;
  }
  #gnavi > ul > li.inquiry a:hover {
    background: #fff;
    color: #191B39;
  }
}
#gnavi > ul > li > a {
  font-weight: 700;
  display: grid;
  align-items: center;
  font-weight: bold;
  padding: 16rem 0;
}
@media screen and (max-width: 767.98px) {
  #gnavi > ul > li > a {
    grid-template-columns: 1fr 24rem;
  }
}
@media screen and (min-width: 768px), print {
  #gnavi > ul > li > a {
    text-decoration-color: transparent;
    text-decoration-line: underline;
    text-underline-offset: 5rem;
    transition: text-decoration-color 0.3s;
  }
  #gnavi > ul > li > a:hover {
    text-decoration-color: currentColor;
  }
  #gnavi > ul > li > a.nolink {
    text-decoration: none;
  }
}
@media screen and (max-width: 767.98px) {
  #gnavi > ul > li > a i {
    order: 2;
  }
}
#gnavi > ul > li.has-mega {
  position: relative;
}
@media screen and (min-width: 768px), print {
  #gnavi > ul > li.has-mega > a,
  #gnavi > ul > li.has-mega > span {
    grid-template-columns: 24rem 1fr;
    gap: 8rem;
  }
}
#gnavi .mega {
  display: none;
}
@media screen and (min-width: 768px), print {
  #gnavi .mega {
    position: absolute;
    top: 56rem;
    left: 50%;
    translate: -50% 0;
    width: 380rem;
    padding-top: 24rem;
  }
  #gnavi .mega .mega__inner {
    background: #fafafa;
    padding: 24rem;
    border-radius: 8rem;
  }
}
#gnavi .mega ul {
  margin: 8rem 0 24rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16rem;
}
@media screen and (min-width: 768px), print {
  #gnavi .mega ul {
    margin: 0;
    padding: 0;
  }
}
#gnavi .mega ul li {
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 768px), print {
  #gnavi .mega ul li.top-link {
    border-bottom: 1px solid #BDBDBD;
    padding-bottom: 16rem;
  }
}
@media screen and (max-width: 767.98px) {
  #gnavi .mega a {
    display: block;
  }
  #gnavi .mega a i {
    display: none;
  }
}
@media screen and (min-width: 768px), print {
  #gnavi .mega a {
    font-weight: bold;
    display: grid;
    grid-template-columns: 1fr 24rem;
    align-items: center;
  }
  #gnavi .mega a i {
    order: 2;
  }
}

/*-----------------------------------------------------------------------------------*/
#footer {
  margin-top: 24rem;
  position: relative;
  padding: 0 0 48rem;
}
@media screen and (min-width: 768px), print {
  #footer {
    margin-top: 64rem;
    padding: 0 0 32rem;
  }
}
@media screen and (min-width: 768px), print {
  #footer .inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
#footer address {
  font-style: normal;
}
#footer address .logo {
  width: 199rem;
}
@media screen and (min-width: 768px), print {
  #footer address .logo {
    width: 177rem;
    margin-bottom: 40rem;
  }
}
#footer address .logo img {
  width: 100%;
}
#footer address p {
  font-size: 14rem;
}
@media screen and (min-width: 768px), print {
  #footer address p {
    margin: 0 0 8rem;
  }
}
#footer address .copyright {
  font-size: 10rem;
  color: #989898;
}
@media screen and (max-width: 767.98px) {
  #footer address .copyright {
    position: absolute;
    bottom: 16rem;
    width: 100%;
    left: 0;
    margin: 0;
    text-align: center;
  }
}
#footer #fnavi {
  font-size: 14rem;
  margin-top: 24rem;
}
@media screen and (min-width: 768px), print {
  #footer #fnavi {
    margin: 0;
    width: 640rem;
    display: flex;
    justify-content: space-between;
    align-items: start;
  }
  #footer #fnavi a {
    transition: color 0.3s;
  }
  #footer #fnavi a:hover {
    color: #989898;
  }
}
#footer #fnavi > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 767.98px) {
  #footer #fnavi > ul {
    border-top: 1px solid #BDBDBD;
  }
  #footer #fnavi > ul + ul {
    margin-top: -1px;
  }
}
@media screen and (min-width: 768px), print {
  #footer #fnavi > ul {
    display: grid;
    gap: 24rem;
  }
}
#footer #fnavi > ul > li {
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 767.98px) {
  #footer #fnavi > ul > li {
    border-bottom: 1px solid #BDBDBD;
  }
}
@media screen and (min-width: 768px), print {
  #footer #fnavi > ul > li {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
  #footer #fnavi > ul > li.bb:not(:first-child) {
    -moz-column-break-before: column;
         break-before: column;
  }
}
#footer #fnavi > ul > li > a {
  font-weight: bold;
  padding: 16rem 0;
  display: block;
  line-height: 24rem;
}
@media screen and (min-width: 768px), print {
  #footer #fnavi > ul > li > a {
    padding: 0;
  }
}
#footer #fnavi > ul > li > a.sp-acchead {
  display: grid;
  grid-template-columns: 1fr 24rem;
}
@media screen and (min-width: 768px), print {
  #footer #fnavi > ul > li > a.nolink {
    pointer-events: none;
    color: #989898;
  }
}
#footer #fnavi > ul ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 767.98px) {
  #footer #fnavi > ul ul {
    display: none;
    padding: 0 16rem 8rem;
  }
}
@media screen and (min-width: 768px), print {
  #footer #fnavi > ul ul {
    display: grid !important;
    gap: 8rem;
    height: auto !important;
    margin: 8rem 0 0 !important;
    padding: 0 !important;
  }
}
#footer #fnavi > ul ul > li {
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 767.98px) {
  #footer #fnavi > ul ul > li {
    margin-bottom: 8rem;
  }
}
#footer .catchcopy {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 24rem;
  text-align: left;
}
@media screen and (min-width: 768px), print {
  #footer .catchcopy {
    align-items: center;
    width: 100%;
    margin-top: 64rem;
  }
}
#footer .catchcopy .en {
  font-weight: 700;
  font-size: 48rem;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 768px), print {
  #footer .catchcopy .en {
    font-size: 129rem;
  }
}
#footer .catchcopy .en span {
  color: #BDBDBD;
}
#footer .catchcopy .ja {
  font-weight: 500;
  font-size: 24rem;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.menu-btn {
  width: 40rem;
  aspect-ratio: 1;
  text-align: center;
  background-color: #191B39;
  border-radius: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  padding: 0;
  outline: none;
  border: none;
}
.menu-btn path {
  transform-origin: center;
  transition: transform 0.3s, opacity 0.3s;
}
.menu-btn.is-active path:nth-of-type(1) {
  animation: burger1 0.3s linear;
  transform: rotate(45deg) translate(0%, 7.5%);
}
.menu-btn.is-active path:nth-of-type(2) {
  animation: burger2 0.3s linear;
  transform: rotate(-45deg) translate(0%, -7.5%);
}
.menu-btn.is-close path:nth-of-type(1) {
  animation: burger1-rev 0.3s linear;
  transform: rotate(0) translate(0%, 0%);
}
.menu-btn.is-close path:nth-of-type(2) {
  animation: burger2-rev 0.3s linear;
  transform: rotate(0) translate(0%, 0%);
}

@keyframes burger1 {
  0% {
    transform: rotate(0) translate(0%, 0%);
  }
  50% {
    transform: rotate(0) translate(0%, 7.5%);
  }
  100% {
    transform: rotate(45deg) translate(0%, 7.5%);
  }
}
@keyframes burger2 {
  0% {
    transform: rotate(0) translate(0%, 0%);
  }
  50% {
    transform: rotate(0) translate(0%, -7.5%);
  }
  100% {
    transform: rotate(-45deg) translate(0%, -7.5%);
  }
}
@keyframes burger1-rev {
  0% {
    transform: rotate(45deg) translate(0%, 7.5%);
  }
  50% {
    transform: rotate(0) translate(0%, 7.5%);
  }
  100% {
    transform: rotate(0) translate(0%, 0%);
  }
}
@keyframes burger2-rev {
  0% {
    transform: rotate(-45deg) translate(0%, -7.5%);
  }
  50% {
    transform: rotate(0) translate(0%, -7.5%);
  }
  100% {
    transform: rotate(0) translate(0%, 0%);
  }
}
/*-----------------------------------------------------------------------------------*/
a {
  color: currentColor;
  text-decoration: none;
}
@media screen and (min-width: 768px), print {
  a {
    will-change: transform, opacity;
    transform: translateZ(0);
  }
}

p a {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.3s;
}
@media screen and (min-width: 768px), print {
  p a:hover {
    text-decoration-color: transparent;
  }
}

a.arrow-link {
  display: inline-grid;
  grid-template-columns: 1fr 24rem;
  font-weight: bold;
  align-items: center;
  gap: 16rem;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.3s;
}
@media screen and (min-width: 768px), print {
  a.arrow-link:hover {
    text-decoration-color: currentColor;
  }
}

a:has(> .icon-external) {
  display: inline-grid;
  grid-template-columns: 1fr 24rem;
  align-items: center;
  gap: 8rem;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.3s;
}
@media screen and (min-width: 768px), print {
  a:has(> .icon-external):hover {
    text-decoration-color: transparent;
  }
}

a.btn {
  display: grid;
  grid-template-columns: 1fr 24rem;
  align-items: center;
  gap: 16rem;
  border: 1px solid currentColor;
  border-radius: 4rem;
  padding: 16rem;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
  text-decoration: none !important;
  max-width: 240rem;
}
@media screen and (min-width: 768px), print {
  a.btn {
    display: inline-grid;
    min-width: 176rem;
    max-width: none;
  }
}
a.btn span {
  text-align: left;
}
@media screen and (min-width: 768px), print {
  a.btn:hover {
    color: #fff;
    background: #191B39;
    border-color: #191B39;
  }
}
@media screen and (min-width: 768px), print {
  a.btn--white:hover {
    color: #191B39;
    background: #fff;
  }
}
a.btn--blue {
  border-color: #191B39;
  background: #191B39;
  color: #fff;
}
@media screen and (min-width: 768px), print {
  a.btn--blue:hover {
    color: #191B39;
    background: #fff;
  }
}
a.btn--back {
  grid-template-columns: 24rem 1fr;
}
a.btn--back .icon-arrow {
  order: 1px;
  transform: scaleX(-1);
}
a.btn--back > span {
  order: 2;
  text-align: right;
}
a.btn:has(.icon-external) {
  text-decoration: none;
}

/*-----------------------------------------------------------------------------------*/
.cmn-ttl {
  font-weight: bold;
  margin: 0 0 32rem;
}
@media screen and (min-width: 768px), print {
  .cmn-ttl {
    margin-bottom: 64rem;
  }
}
.cmn-ttl [lang=en] {
  font-size: 72rem;
  line-height: 1.2;
  display: block;
}
@media screen and (min-width: 768px), print {
  .cmn-ttl [lang=en] {
    font-size: 112rem;
  }
}
.cmn-ttl [lang=ja] {
  display: block;
  margin-top: 4rem;
  font-size: 16rem;
}

/*-----------------------------------------------------------------------------------*/
.sub-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sub-links ul li {
  margin: 0;
  padding: 0;
}
.sub-links .links1 {
  display: grid;
  gap: 16rem;
}
@media screen and (min-width: 768px), print {
  .sub-links .links1 {
    grid-template-columns: repeat(2, 492rem);
    justify-content: center;
  }
}
.sub-links .links1 a {
  display: block;
  position: relative;
  border: 1px solid #191B39;
  border-radius: 4rem;
  padding: 12rem 12rem 10rem;
  transition: color 0.3s, background-color 0.3s;
}
@media screen and (min-width: 768px), print {
  .sub-links .links1 a {
    padding: 16rem;
  }
  .sub-links .links1 a:hover {
    background: #191B39;
    color: #fff;
  }
  .sub-links .links1 a:hover img {
    scale: 105%;
  }
}
.sub-links .links1 img {
  transition: scale 0.3s;
  will-change: scale;
}
.sub-links .links1 figure {
  overflow: hidden;
  border-radius: 4rem;
}
.sub-links .links1 p {
  margin: 0;
  display: grid;
  font-weight: 700;
  font-size: 14rem;
  margin-top: 8rem;
  line-height: 1.2;
  grid-template-columns: 1fr 24rem;
  align-items: center;
}
@media screen and (min-width: 768px), print {
  .sub-links .links1 p {
    font-size: 20rem;
    margin-top: 16rem;
  }
}
.sub-links .links2 {
  margin-top: 80rem;
  display: grid;
  gap: 8rem;
}
.sub-links .links2 a {
  display: block;
  border-radius: 8rem;
  padding: 32rem 16rem;
  height: 342rem;
  position: relative;
}
@media screen and (min-width: 768px), print {
  .sub-links .links2 a {
    height: 339rem;
    padding: 0 64rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    transition: color 0.3s, background-color 0.3s;
  }
}
.sub-links .links2 [lang=en] {
  display: block;
  font-weight: 700;
  font-size: 64rem;
  line-height: 1.2;
  margin-bottom: 4rem;
}
@media screen and (min-width: 768px), print {
  .sub-links .links2 [lang=en] {
    font-size: 112rem;
  }
}
.sub-links .links2 [lang=ja] {
  display: block;
}
.sub-links .links2 i {
  width: 40rem;
  position: absolute;
  right: 16rem;
  bottom: 32rem;
}
@media screen and (min-width: 768px), print {
  .sub-links .links2 i {
    width: 80rem;
    right: 64rem;
    bottom: 50%;
    translate: 0 50%;
  }
}
.sub-links .links2 li:nth-of-type(1) a {
  background: #191B39;
  color: #fff;
  border: 1px solid #191B39;
}
@media screen and (min-width: 768px), print {
  .sub-links .links2 li:nth-of-type(1) a:hover {
    background-color: #fafafa;
    color: #191B39;
  }
}
.sub-links .links2 li:nth-of-type(2) a {
  background: #dcdcdc;
}
@media screen and (min-width: 768px), print {
  .sub-links .links2 li:nth-of-type(2) a:hover {
    background-color: #525252;
    color: #fff;
  }
}

/*-----------------------------------------------------------------------------------*/
#pagetitle {
  margin: 0;
}
#pagetitle + section {
  margin-top: 64rem;
}
@media screen and (min-width: 768px), print {
  #pagetitle + section {
    margin-top: 96rem;
  }
}
#pagetitle h1 {
  margin: 0 0 24rem;
}
@media screen and (min-width: 768px), print {
  #pagetitle h1 {
    margin: 0 0 32rem;
  }
}
#pagetitle h1 [lang=en] {
  font-size: 72rem;
  font-weight: 700;
  display: block;
  line-height: 1;
  margin-bottom: 8rem;
}
@media screen and (min-width: 768px), print {
  #pagetitle h1 [lang=en] {
    font-size: 112rem;
    line-height: 1.2;
    margin-bottom: 0;
  }
}
#pagetitle h1 [lang=en] span {
  color: #BDBDBD;
}
#pagetitle h1 [lang=ja] {
  font-size: 16rem;
  font-weight: 500;
  display: block;
}
#pagetitle h1 .ja--small {
  font-size: 14rem;
  font-weight: 700;
  line-height: 1.2;
  display: block;
}
#pagetitle h1 .ja--large {
  font-size: 47rem;
  font-weight: 700;
  line-height: 1.2;
  display: block;
}
@media screen and (min-width: 768px), print {
  #pagetitle h1 .ja--large {
    font-size: 64rem;
  }
}
@media screen and (min-width: 768px), print {
  #pagetitle .lead {
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
  }
}
#pagetitle .lead strong {
  display: block;
  margin-bottom: 8rem;
}
#pagetitle .contact {
  text-align: right;
  margin-top: 24rem;
}
@media screen and (max-width: 767.98px) {
  #pagetitle .btn {
    max-width: 100%;
  }
}
#pagetitle .btn > span:has(.blue) {
  display: flex;
  white-space: nowrap;
  align-items: center;
}
#pagetitle .btn .blue {
  background: #191B39;
  color: #fff;
  margin: -16rem 16rem -16rem -16rem;
  padding: 8rem 16rem;
}
@media screen and (min-width: 768px), print {
  #pagetitle .btn .blue {
    padding: 16rem;
  }
}

/*-----------------------------------------------------------------------------------*/
.breadcrumbs {
  font-size: 12rem;
  font-weight: 500;
  margin-bottom: -64rem;
  text-align: left;
}
@media screen and (min-width: 768px), print {
  .breadcrumbs {
    margin-top: -24rem;
  }
}
.breadcrumbs:last-child {
  margin-bottom: 0;
}
.breadcrumbs .inner > span {
  display: flex;
}
.breadcrumbs a {
  color: #BDBDBD;
  white-space: nowrap;
}
.breadcrumbs a::after {
  content: "─";
  pointer-events: none;
  display: inline-block;
  margin: 0 0.5em;
}
.breadcrumbs .breadcrumb_last {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

/*-----------------------------------------------------------------------------------*/
@media screen and (max-width: 767.98px) {
  .scrollable {
    overflow-x: auto;
    position: relative;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 16rem -16rem 16rem;
    padding: 0 16rem;
  }
  .scrollable img {
    width: 200%;
    max-width: 200%;
  }
}
@media screen and (max-width: 767.98px) {
  .scrollable::-webkit-scrollbar {
    display: none;
  }
  .scrollable-bar {
    position: relative;
    margin-top: 5px;
    color: #D2DBEE;
    font-weight: 700;
    margin: 8rem 0 16rem;
  }
  .scrollable-bar .scrollbar {
    position: relative;
    height: 100%;
    width: 100%;
    height: 1px;
    background: #BDBDBD;
    margin-top: 4rem;
  }
  .scrollable-bar .scrollbar .bar {
    position: absolute;
    height: 4px;
    width: 30%;
    background: #191B39;
    cursor: pointer;
    left: 0;
    border-radius: 100rem;
    margin-top: -2rem;
  }
}
/*-----------------------------------------------------------------------------------*/
.pager {
  margin-top: 40rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40rem;
}
.pager .prev a,
.pager .next a {
  display: grid;
  gap: 16rem;
  font-weight: 700;
}
@media screen and (min-width: 768px), print {
  .pager .prev a,
  .pager .next a {
    text-decoration-color: transparent;
    text-decoration-line: underline;
    text-underline-offset: 5rem;
    transition: text-decoration-color 0.3s;
  }
  .pager .prev a:hover,
  .pager .next a:hover {
    text-decoration-color: currentColor;
  }
}
.pager .prev a {
  grid-template-columns: 24rem 1fr;
}
.pager .prev a i {
  transform: scaleX(-1);
}
.pager .next a {
  grid-template-columns: 1fr 24rem;
}
.pager .back {
  width: 100%;
  text-align: center;
}
@media screen and (max-width: 767.98px) {
  .pager .back {
    width: 60%;
    margin: 0 auto;
  }
}

/*-----------------------------------------------------------------------------------*/
.privacymark {
  border: 1px solid #BDBDBD;
  border-radius: 4rem;
  overflow: hidden;
  width: 72rem;
  background: #fff;
  padding: 4rem;
}
@media screen and (min-width: 768px), print {
  .privacymark {
    margin-top: 40rem;
  }
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
#kv {
  margin: 0;
}
@media screen and (min-width: 768px), print {
  #kv .inner {
    width: 1032rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 570rem;
  }
}
#kv .text em {
  font-weight: 500;
  font-size: 20rem;
  display: block;
  margin-bottom: 4rem;
}
@media screen and (min-width: 768px), print {
  #kv .text em {
    font-size: 32rem;
  }
}
#kv .text .catchcopy {
  font-size: 56rem;
  font-weight: 700;
  line-height: 1;
  font-family: "Inter", sans-serif;
}
@media screen and (min-width: 768px), print {
  #kv .text .catchcopy {
    font-size: 140rem;
  }
}
#kv .text .catchcopy .ruby {
  position: relative;
}
@media screen and (min-width: 768px), print {
  #kv .text .catchcopy .ruby {
    margin-bottom: 16rem;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
  }
}
#kv .text .catchcopy .rt {
  font-size: 12rem;
  text-align: center;
  font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", Arial, sans-serif;
  margin-top: -0.7em;
  line-height: 1;
  position: absolute;
  bottom: -0.5em;
  left: 50%;
  translate: -50% 0;
}
@media screen and (min-width: 768px), print {
  #kv .text .catchcopy .rt {
    font-size: 14rem;
  }
}
:root {
  --kv-offset: 16rem;
}

@media screen and (min-width: 768px), print {
  :root {
    --kv-offset: 32rem;
  }
}
.kv-slide-wrapper {
  padding: 0 0 104rem 0;
  position: relative;
  width: 248rem;
  margin: 32rem auto 0;
  transform: translate(calc(-1 * var(--kv-offset)), 0);
}
@media screen and (min-width: 768px), print {
  .kv-slide-wrapper {
    width: 438rem;
    margin: 0;
    transform: none;
    padding-bottom: 136rem;
  }
}

.kv-slide {
  height: 272rem;
}
@media screen and (min-width: 768px), print {
  .kv-slide {
    height: 434rem;
  }
}

.kv-card {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 248rem;
  height: 272rem;
  border-radius: 8rem;
  transition: transform 0.45s ease, opacity 0.45s ease, background-color 0.45s ease;
}
@media screen and (min-width: 768px), print {
  .kv-card {
    width: 374rem;
    height: 434rem;
  }
}
.kv-card a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  text-decoration: none;
  color: #fff;
  padding: 0 0 0 32rem;
}
@media screen and (min-width: 768px), print {
  .kv-card a {
    padding-left: 56rem;
  }
}
.kv-card.rank-1 {
  transform: translate3d(0, 0, 0);
  z-index: 3;
  background: #191B39;
}
.kv-card.rank-2 {
  transform: translate3d(var(--kv-offset), var(--kv-offset), 0);
  z-index: 2;
  background: #282D64;
}
.kv-card.rank-2 a {
  pointer-events: none;
}
.kv-card.rank-3 {
  transform: translate3d(calc(var(--kv-offset) * 2), calc(var(--kv-offset) * 2), 0);
  z-index: 1;
  background: #434896;
}
.kv-card.rank-3 a {
  pointer-events: none;
}
.kv-card.is-exit {
  transition: transform 0.45s ease, opacity 0.45s ease;
  transform: translate3d(calc(-1 * var(--kv-offset)), calc(-1 * var(--kv-offset)), 0);
  opacity: 0;
  z-index: 4;
  background: #191B39;
}
.kv-card.is-enter {
  transition: none !important;
  transform: translate3d(calc(var(--kv-offset) * 3), calc(var(--kv-offset) * 3), 0);
  opacity: 0;
}
.kv-card.is-enter.is-shown {
  transition: transform 0.45s ease, opacity 0.45s ease;
  transform: translate3d(calc(var(--kv-offset) * 2), calc(var(--kv-offset) * 2), 0);
}
.kv-card .icon img {
  width: 48rem;
  aspect-ratio: 1;
}
@media screen and (min-width: 768px), print {
  .kv-card .icon img {
    width: 88rem;
  }
}
.kv-card strong {
  font-size: 40rem;
  line-height: 1.2;
  display: block;
  margin: 4rem 0 16rem;
}
@media screen and (min-width: 768px), print {
  .kv-card strong {
    font-size: 64rem;
  }
}
.kv-card p {
  margin: 0;
  font-size: 16rem;
  display: inline-grid;
  grid-template-columns: 1fr 24rem;
  align-items: center;
  gap: 8rem;
  font-weight: 700;
}

.kv-dot {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  position: absolute;
  bottom: 24rem;
  right: 40rem;
}
@media screen and (min-width: 768px), print {
  .kv-dot {
    right: 72rem;
  }
}
.kv-dot i {
  font-style: normal;
  background-color: #BDBDBD;
  overflow: hidden;
  text-indent: -999em;
  width: 8rem;
  aspect-ratio: 1;
  border-radius: 100rem;
}
.kv-dot i.is-active {
  background-color: #191B39;
}

.kv-playbtn {
  cursor: pointer;
}
.kv-playbtn img {
  width: 24rem;
  aspect-ratio: 1;
}
.kv-playbtn[aria-pressed=true] img {
  content: url("/assets/images/top/play.svg");
}
.kv-playbtn[aria-pressed=false] img {
  content: url("/assets/images/top/pause.svg");
}

.kv-progress_btn {
  background: #ccc;
  width: 56rem;
  height: 56rem;
  border-radius: 100rem;
  padding: 2rem;
  position: absolute;
  right: -32rem;
  bottom: 0;
}
@media screen and (min-width: 768px), print {
  .kv-progress_btn {
    right: 0;
  }
}
.kv-progress_btn button {
  background: #fff;
  width: 100%;
  height: 100%;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  border: none;
  border-radius: 100rem;
  position: relative;
  z-index: 2;
}

@property --start {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --end {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.kv-progress {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  color: currentColor;
  --start: 0deg;
  --end: 0deg;
  background: conic-gradient(transparent var(--start), currentColor var(--start) var(--end), transparent var(--end));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.kv-progress.is-running {
  opacity: 1;
  animation: kv-progress 3.5s linear infinite;
}
.kv-progress.is-first {
  opacity: 1;
  animation: kv-progress-first 3.5s linear forwards;
}

@keyframes kv-progress {
  0% {
    --start: 0deg;
    --end: 360deg;
  }
  14% {
    --start: 360deg;
    --end: 360deg;
  }
  15% {
    --start: 0deg;
    --end: 0deg;
  }
  90% {
    --start: 0deg;
    --end: 360deg;
  }
  100% {
    --start: 0deg;
    --end: 360deg;
  }
}
@keyframes kv-progress-first {
  0% {
    --start: 0deg;
    --end: 0deg;
  }
  90% {
    --start: 0deg;
    --end: 360deg;
  }
  100% {
    --start: 0deg;
    --end: 360deg;
  }
}
/*-----------------------------------------------------------------------------------*/
#top-news {
  margin-top: 64rem;
}
#top-news .frame {
  background: #efefef;
  border-radius: 8rem;
  padding: 24rem;
}
@media screen and (min-width: 768px), print {
  #top-news .frame {
    padding: 40rem 56rem;
  }
}
#top-news .newslist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12rem;
  font-weight: 500;
}
@media screen and (min-width: 768px), print {
  #top-news .newslist {
    gap: 16rem;
  }
}
#top-news .newslist li {
  margin: 0;
  padding: 0;
}
#top-news .newslist a {
  display: grid;
  gap: 2rem;
}
@media screen and (min-width: 768px), print {
  #top-news .newslist a {
    grid-template-columns: 7em 1fr;
    transition: opacity 0.3s;
    gap: 8rem;
  }
  #top-news .newslist a:hover {
    opacity: 0.7;
  }
}
#top-news .newslist a time {
  display: block;
  color: #989898;
}
#top-news .more {
  margin-top: 16rem;
  text-align: right;
}

/*-----------------------------------------------------------------------------------*/
#top-benefits {
  margin-bottom: 0;
}
@media screen and (max-width: 767.98px) {
  #top-benefits .cmn-ttl [lang=en] {
    line-height: 1;
    margin: 0 0 10rem;
  }
}
#top-benefits .grid {
  display: grid;
}
@media screen and (min-width: 768px), print {
  #top-benefits .grid {
    grid-template-columns: 1fr 1fr;
    gap: 32rem;
    align-items: center;
  }
}
@media screen and (min-width: 768px), print {
  #top-benefits .grid .btns {
    text-align: right;
  }
}
/*-----------------------------------------------------------------------------------*/
#top-agileone {
  margin-top: 32rem;
}
#top-agileone .grid {
  display: grid;
}
@media screen and (min-width: 768px), print {
  #top-agileone .grid {
    grid-template-columns: 1fr 1fr;
    gap: 32rem;
    align-items: center;
  }
}
#top-agileone ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8rem;
}
@media screen and (max-width: 767.98px) {
  #top-agileone ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
#top-agileone ul li {
  margin: 0;
  padding: 0;
}
#top-agileone ul li a {
  align-items: center;
  padding: 16rem;
  height: 168rem;
  border-radius: 4rem;
  transition: background-color 0.3s, color 0.3s;
  position: relative;
  display: block;
}
@media screen and (min-width: 768px), print {
  #top-agileone ul li a {
    height: 200rem;
    padding: 0 32rem;
    display: grid;
    grid-template-columns: 1fr 40rem;
  }
}
#top-agileone ul li a i {
  width: 40rem !important;
}
@media screen and (max-width: 767.98px) {
  #top-agileone ul li a i {
    position: absolute;
    bottom: 16rem;
    right: 16rem;
  }
}
#top-agileone ul li:nth-of-type(1) a {
  background: #191B39;
  color: #fff;
}
@media screen and (min-width: 768px), print {
  #top-agileone ul li:nth-of-type(1) a:hover {
    background: #D2DBEE;
    color: #191B39;
  }
}
#top-agileone ul li:nth-of-type(2) a {
  background: #dcdcdc;
}
@media screen and (min-width: 768px), print {
  #top-agileone ul li:nth-of-type(2) a:hover {
    background: #191B39;
    color: #fff;
  }
}
#top-agileone h2 {
  margin: 0 0 -8rem;
}
@media screen and (min-width: 768px), print {
  #top-agileone h2 {
    margin: 0 0 24rem;
  }
}
#top-agileone h2 .ja {
  font-size: 16rem;
  display: block;
  margin-bottom: 4rem;
}
@media screen and (min-width: 768px), print {
  #top-agileone h2 .ja {
    font-size: 24rem;
  }
}
#top-agileone h2 .en {
  display: block;
  line-height: 1.1;
  font-weight: 700;
  font-size: 64rem;
  text-align: left;
}
@media screen and (min-width: 768px), print {
  #top-agileone h2 .en {
    font-size: 88rem;
  }
}
#top-agileone h2 .en span {
  color: #BDBDBD;
}
#top-agileone h3 {
  margin: 0;
  line-height: 1.2;
  font-size: 20rem;
  font-weight: 700;
}
@media screen and (min-width: 768px), print {
  #top-agileone h3 {
    font-size: 32rem;
  }
}
@media screen and (max-width: 767.98px) {
  #top-agileone figure {
    margin-bottom: 8rem;
  }
}
@media screen and (min-width: 768px), print {
  #top-agileone figure {
    margin-top: 32rem;
  }
}

/*-----------------------------------------------------------------------------------*/
#top-service {
  margin-bottom: 0;
}
#top-service .inner {
  position: relative;
}
@media screen and (min-width: 768px), print {
  #top-service h2 + .btn {
    position: absolute;
    top: 54rem;
    right: 0;
    margin: 0;
  }
}
#top-service ol {
  display: grid;
  margin: 32rem 0 0;
  padding: 0;
  list-style: none;
  gap: 8rem;
}
#top-service ol li {
  color: #fff;
  padding: 0 16rem 24rem;
  border-radius: 4rem;
  margin: 0;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 768px), print {
  #top-service ol li {
    height: 333rem;
    padding: 48rem 730rem 0 48rem;
    border-radius: 8rem;
  }
}
#top-service ol li:nth-of-type(1) {
  background: #191B39;
}
#top-service ol li:nth-of-type(2) {
  background: #282D64;
}
#top-service ol li:nth-of-type(3) {
  background: #353A7D;
}
#top-service ol li:nth-of-type(4) {
  background: #434896;
}
#top-service ol li:nth-of-type(5) {
  background: #5258AC;
}
@media screen and (max-width: 767.98px) {
  #top-service ol .btn {
    width: 70%;
  }
}
@media screen and (min-width: 768px), print {
  #top-service ol .btn {
    position: absolute;
    bottom: 48rem;
    left: 48rem;
  }
}
#top-service .num {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 20rem;
  display: block;
}
@media screen and (min-width: 768px), print {
  #top-service .num {
    font-size: 24rem;
  }
}
#top-service h3 {
  margin: 0;
  font-weight: 700;
  font-size: 32rem;
  line-height: 1.5;
}
@media screen and (min-width: 768px), print {
  #top-service h3 {
    font-size: 40rem;
    white-space: nowrap;
    position: relative;
  }
}
@media screen and (max-width: 767.98px) {
  #top-service h3.en {
    font-size: 44rem;
    line-height: 1.2;
  }
}
@media screen and (max-width: 767.98px) {
  #top-service p {
    font-size: 14rem;
    margin-top: 10rem;
  }
}
@media screen and (min-width: 768px), print {
  #top-service p {
    margin: 8rem 0 0;
  }
}
#top-service figure {
  margin: 0 -16rem 16rem;
}
@media screen and (min-width: 768px), print {
  #top-service figure {
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
  }
}
#top-service figure img {
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
@media screen and (max-width: 767.98px) {
  #top-service figure img {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 25%, #000 100%);
            mask-image: linear-gradient(to top, transparent 0%, #000 25%, #000 100%);
  }
}
@media screen and (min-width: 768px), print {
  #top-service figure img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 25%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 25%, #000 100%);
    height: 100%;
  }
}

/*-----------------------------------------------------------------------------------*/
#top-case {
  margin-top: 48rem;
}
#top-case .inner {
  position: relative;
}
#top-case h2 {
  font-size: 32rem;
  margin: 0 0 16rem;
}
@media screen and (min-width: 768px), print {
  #top-case h2 {
    margin-bottom: 32rem;
  }
}
#top-case h2 + .btn {
  margin: 0 0 24rem;
}
@media screen and (min-width: 768px), print {
  #top-case h2 + .btn {
    position: absolute;
    right: 0;
    top: 1rem;
    margin: 0;
  }
}
#top-case .top-casestudy-slide {
  overflow: hidden;
  position: relative;
  margin: 0 -16rem;
  padding: 0 0 80rem;
}
@media screen and (min-width: 768px), print {
  #top-case .top-casestudy-slide {
    min-height: 620rem;
    margin: 0;
    padding: 0 0 0;
  }
}
#top-case .swiper {
  overflow: visible;
  position: static !important;
}
@media screen and (max-width: 767.98px) {
  #top-case .swiper {
    min-height: 0 !important;
  }
}
@media screen and (min-width: 768px), print {
  #top-case .swiper {
    margin-left: -340rem;
  }
}
#top-case .swiper-navigation {
  position: absolute;
  right: 0;
  bottom: 60rem;
}
@media screen and (min-width: 768px), print {
  #top-case .swiper-navigation {
    bottom: 40rem;
  }
}
#top-case .swiper-pagination {
  position: absolute;
  left: inherit;
  display: flex;
  gap: 16rem;
  width: auto;
}
@media screen and (max-width: 767.98px) {
  #top-case .swiper-pagination {
    bottom: -40rem;
    right: 100rem;
  }
}
@media screen and (min-width: 768px), print {
  #top-case .swiper-pagination {
    top: 15rem;
    height: 8rem;
    right: 100rem;
    bottom: inherit;
    text-align: right;
  }
}
#top-case .swiper-pagination-bullet {
  margin: 0;
  aspect-ratio: 1;
  width: 8rem;
  height: auto;
  background: #BDBDBD;
  opacity: 1;
  display: block;
}
#top-case .swiper-pagination-bullet-active {
  background: #191B39;
}
#top-case .swiper-button-next, #top-case .swiper-button-prev {
  margin: 0;
  background: none;
  color: #191B39;
  border: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 40rem;
  height: 40rem;
}
#top-case .swiper-button-next::after, #top-case .swiper-button-prev::after {
  font-size: 32rem;
}
@media screen and (max-width: 767.98px) {
  #top-case .swiper-button-next {
    top: inherit;
    bottom: -56rem;
  }
}
@media screen and (max-width: 767.98px) {
  #top-case .swiper-button-prev {
    top: inherit;
    bottom: -56rem;
    left: inherit;
    right: 50rem;
  }
}
@media screen and (min-width: 768px), print {
  #top-case .swiper-button-prev {
    left: inherit;
    right: 50rem;
  }
}
#top-case .swiper-slide {
  width: 85%;
  padding: 0 0 0 16rem;
}
@media screen and (min-width: 768px), print {
  #top-case .swiper-slide {
    width: 324rem;
    transition: width 0.2s, padding-right 0.2s;
    padding: 0 16rem 0 0;
    box-sizing: content-box;
  }
  #top-case .swiper-slide-next {
    width: 664rem;
    padding-right: 32rem;
  }
}
#top-case .swiper-slide figure {
  border: 1px solid #bdbdbd;
  overflow: hidden;
  border-radius: 4rem;
}
#top-case .swiper-slide img {
  transition: scale 0.3s;
  will-change: scale;
  width: 100%;
}
#top-case .swiper-slide h3 {
  font-size: 14rem;
  color: black;
  margin: 8rem 0 0;
  text-decoration-color: transparent;
  text-decoration-line: underline;
  text-underline-offset: 5rem;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.3s;
}
@media screen and (min-width: 768px), print {
  #top-case .swiper-slide h3 {
    font-size: 20rem;
    margin: 12rem 0 0;
  }
}
#top-case .swiper-slide p {
  margin: 4rem 0 4rem;
}
@media screen and (min-width: 768px), print {
  #top-case .swiper-slide p {
    margin: 8rem 0 8rem;
  }
}
#top-case .swiper-slide ul {
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
}
#top-case .swiper-slide ul li {
  margin: 0;
  padding: 0 8rem;
  font-size: 12rem;
  color: #191B39;
  font-weight: 500;
  border: 1px solid #BDBDBD;
  border-radius: 4rem;
}
@media screen and (min-width: 768px), print {
  #top-case a:hover {
    background: #191B39;
  }
  #top-case a:hover h3 {
    text-decoration-color: currentColor;
  }
  #top-case a:hover img {
    scale: 105%;
  }
}

/*-----------------------------------------------------------------------------------*/
#top-column {
  padding: 200rem 0;
}
@media screen and (min-width: 768px), print {
  #top-column {
    padding: 100rem 0 300rem 0;
  }
}
#top-column .grid {
  display: grid;
}
@media screen and (min-width: 768px), print {
  #top-column .grid {
    grid-template-columns: 1fr 1fr;
    gap: 32rem;
    position: relative;
  }
}
@media screen and (min-width: 768px), print {
  #top-column .text .btn {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
#top-column .list {
  margin-top: 32rem;
}
#top-column .list h3 {
  font-size: 14rem;
  margin: 8rem 0 4rem;
  line-height: 1.2;
  text-decoration-color: transparent;
  text-decoration-line: underline;
  text-underline-offset: 5rem;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.3s;
}
@media screen and (min-width: 768px), print {
  #top-column .list h3 {
    font-size: 16rem;
    margin: 16rem 0 8rem;
  }
}
#top-column .list img {
  transition: scale 0.3s;
  will-change: scale;
}
#top-column .list figure {
  border: 1px solid #bdbdbd;
  overflow: hidden;
  border-radius: 4rem;
}
#top-column .list > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16rem;
}
@media screen and (min-width: 768px), print {
  #top-column .list > ul {
    grid-template-columns: 1fr 1fr;
  }
}
#top-column .list > ul > li {
  margin: 0;
  padding: 0;
}
#top-column .list > ul ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  color: #989898;
  gap: 8rem;
  font-size: 14rem;
}
#top-column .list > ul ul > li {
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 768px), print {
  #top-column .list a:hover {
    background: #191B39;
  }
  #top-column .list a:hover h3 {
    text-decoration-color: currentColor;
  }
  #top-column .list a:hover img {
    scale: 105%;
  }
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.benefits-anchor {
  margin: 64rem 0 -48rem;
  position: relative;
}
@media screen and (min-width: 768px), print {
  .benefits-anchor {
    margin: 96rem 0 -64rem;
  }
}
.benefits-anchor ul {
  margin: 0;
  padding: 24rem 16rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16rem;
  background: #efefef;
  border-radius: 4rem;
}
@media screen and (min-width: 768px), print {
  .benefits-anchor ul {
    padding: 24rem 32rem;
    gap: 32rem;
  }
}
.benefits-anchor ul li {
  margin: 0;
  padding: 0;
}
.benefits-anchor ul a {
  display: inline-grid;
  grid-template-columns: 1fr 24rem;
  gap: 8rem;
}
.benefits-anchor ul a .icon-arrow2 {
  transform: rotate(90deg);
  transition: transform 0.3s;
}
@media screen and (min-width: 768px), print {
  .benefits-anchor ul a {
    text-decoration-color: transparent;
    text-decoration-line: underline;
    text-underline-offset: 5rem;
    transition: text-decoration-color 0.3s;
  }
  .benefits-anchor ul a:hover {
    text-decoration-color: currentColor;
  }
  .benefits-anchor ul a:hover .icon-arrow2 {
    transform: rotate(90deg) translateX(3rem);
  }
}

/*-----------------------------------------------------------------------------------*/
.benefits-section h2 {
  font-size: 40rem;
  font-weight: 700;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
#reason ol {
  display: grid;
  margin: 32rem 0 0;
  padding: 0;
  list-style: none;
  gap: 8rem;
}
#reason ol li {
  margin: 0;
  padding: 24rem 16rem 24rem;
  color: #fff;
  border-radius: 4rem;
  overflow: hidden;
}
@media screen and (min-width: 768px), print {
  #reason ol li {
    height: 325rem;
    border-radius: 8rem;
    position: relative;
    padding: 48rem 0 0 48rem;
  }
}
#reason ol li:nth-of-type(1) {
  background: #191B39;
}
#reason ol li:nth-of-type(2) {
  background: #282D64;
}
#reason ol li:nth-of-type(3) {
  background: #353A7D;
}
#reason ol li:nth-of-type(4) {
  background: #434896;
}
#reason .num {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16rem;
  display: block;
  margin-bottom: 8rem;
}
@media screen and (min-width: 768px), print {
  #reason .num {
    font-size: 24rem;
    margin-bottom: 0;
  }
}
#reason h3 {
  margin: 0;
  font-weight: 700;
  font-size: 24rem;
}
@media screen and (min-width: 768px), print {
  #reason h3 {
    font-size: 40rem;
  }
}
@media screen and (min-width: 768px), print {
  #reason p {
    margin: 8rem 0 32rem;
  }
}

/*-----------------------------------------------------------------------------------*/
@media screen and (min-width: 768px), print {
  #flow img {
    width: 100%;
  }
}

/*-----------------------------------------------------------------------------------*/
#numbers .grid {
  display: grid;
  gap: 8rem;
  font-weight: 700;
  margin: 0 0 24rem;
}
@media screen and (min-width: 768px), print {
  #numbers .grid {
    grid-template-columns: repeat(12, 1fr);
  }
}
#numbers .grid .col {
  background: #191B39;
  border-radius: 4rem;
  color: #fff;
  padding: 48rem 16rem;
  font-size: 32rem;
  text-align: center;
}
@media screen and (min-width: 768px), print {
  #numbers .grid .col {
    padding: 48rem 32rem;
  }
}
@media screen and (min-width: 768px), print {
  #numbers .grid .col:nth-of-type(1) {
    grid-column: span 8;
    display: grid;
    grid-template-columns: 1fr 180rem;
    align-items: center;
    padding: 104rem 96rem;
    text-align: left;
  }
  #numbers .grid .col:nth-of-type(1) h3 {
    margin: 0 0 24rem;
  }
  #numbers .grid .col:nth-of-type(1) i {
    grid-row: span 2;
    margin: 0;
  }
}
#numbers .grid .col:nth-of-type(1) .number {
  font-size: 104rem;
}
@media screen and (min-width: 768px), print {
  #numbers .grid .col:nth-of-type(1) .number {
    font-size: 176rem;
  }
}
@media screen and (min-width: 768px), print {
  #numbers .grid .col:nth-of-type(2) {
    grid-column: span 4;
    display: grid;
    place-content: center;
    text-align: left;
  }
  #numbers .grid .col:nth-of-type(2) h3 {
    width: 100%;
  }
}
@media screen and (min-width: 768px), print {
  #numbers .grid .col:nth-of-type(3) {
    grid-column: span 5;
  }
}
#numbers .grid .col:nth-of-type(3) .number {
  font-size: 104rem;
}
@media screen and (min-width: 768px), print {
  #numbers .grid .col:nth-of-type(3) .number {
    font-size: 160rem;
  }
}
@media screen and (min-width: 768px), print {
  #numbers .grid .col:nth-of-type(4) {
    grid-column: span 7;
    text-align: center;
  }
  #numbers .grid .col:nth-of-type(4) h3 {
    text-align: center;
  }
}
#numbers .grid h3 {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 28rem;
  margin: 0 auto 24rem;
}
@media screen and (min-width: 768px), print {
  #numbers .grid h3 {
    margin: 0 auto 40rem;
  }
}
#numbers .grid .number {
  font-family: "Inter", sans-serif;
  font-size: 112rem;
  line-height: 0.8;
  display: inline-block;
}
@media screen and (min-width: 768px), print {
  #numbers .grid .number {
    font-size: 136rem;
  }
}
#numbers .grid i {
  width: 158rem;
  display: block;
  margin: -16rem auto 8rem;
}
@media screen and (min-width: 768px), print {
  #numbers .grid i {
    margin: -16rem auto 16rem;
  }
}
#numbers .grid i img {
  width: 100%;
}
#numbers .grid dl {
  margin: 0 auto;
  padding: 0;
  width: -moz-fit-content;
  width: fit-content;
  display: grid;
  gap: 24rem;
}
@media screen and (min-width: 768px), print {
  #numbers .grid dl {
    gap: 48rem;
  }
}
#numbers .grid dl > div {
  display: grid;
  gap: 16rem;
}
@media screen and (min-width: 768px), print {
  #numbers .grid dl > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 64rem;
  }
}
#numbers .grid dl dt {
  margin: 0;
  padding: 0;
  font-size: 26rem;
  -moz-text-align-last: left;
       text-align-last: left;
}
#numbers .grid dl dd {
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 768px), print {
  #numbers .btns {
    text-align: center;
  }
}

/*-----------------------------------------------------------------------------------*/
#industry ul.tags {
  margin: 0 0 64rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4rem;
}
@media screen and (min-width: 768px), print {
  #industry ul.tags {
    grid-template-columns: repeat(4, 1fr);
    gap: 8rem;
  }
}
#industry ul.tags li {
  margin: 0;
  padding: 0;
  background: #dcdcdc;
  text-align: center;
  height: 56rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4rem;
  font-weight: 700;
}

/*-----------------------------------------------------------------------------------*/
.marquee {
  display: grid;
  gap: 24px;
  line-height: 1;
  font-size: 48rem;
  color: #BDBDBD;
}

.marquee__row {
  --duration: 60s;
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
}

.marquee__list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: -moz-max-content;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marquee__list li {
  flex: 0 0 auto;
  display: grid;
  align-items: center;
  gap: 16rem;
  padding-right: 40rem;
}
.marquee__row--right .marquee__track {
  transform: translateX(-25%);
  animation: marquee-right var(--duration) linear infinite;
}

.marquee__row--left .marquee__track {
  animation: marquee-left var(--duration) linear infinite;
}

@keyframes marquee-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0%);
  }
}
/*-----------------------------------------------------------------------------------*/
#agileone {
  margin-bottom: 0;
}
#agileone .assignment {
  display: grid;
  gap: 32rem;
}
@media screen and (min-width: 768px), print {
  #agileone .assignment {
    grid-template-columns: repeat(2, 1fr);
    gap: 8rem;
  }
}
#agileone .assignment a {
  border: 1px solid #BDBDBD;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 4rem;
  gap: 10rem;
  padding: 24rem 16rem;
  transition: background-color 0.3s, color 0.3s;
}
@media screen and (min-width: 768px), print {
  #agileone .assignment a {
    height: 144rem;
    padding: 0;
  }
}
#agileone .assignment a:hover, #agileone .assignment a.is-active {
  background: #191B39;
  color: #fff;
  border-color: #191B39;
}
#agileone .assignment a .ttl {
  display: block;
  font-weight: 700;
  font-size: 24rem;
}
@media screen and (min-width: 768px), print {
  #agileone .assignment a .ttl {
    font-size: 32rem;
  }
}
#agileone .assignment a .icon-arrow {
  transform: rotate(90deg);
}
#agileone {
  /* 
  .sp-tab {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 64rem;
    gap: 4rem;

    button {
      border: 1px solid s.$gray;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      border-radius: 4rem;
      height: 96rem;

      background: s.$base;
      font-weight: 700;
      font-size: 16rem;

      &.is-active {
        background: s.$black;
        color: #fff;
        border-color: s.$black;
      }
    }

  } */
}

.agileone-section {
  display: none;
  margin-top: 40rem;
}
@media screen and (min-width: 768px), print {
  .agileone-section {
    margin-top: 64rem;
  }
}
.agileone-section.is-active {
  display: block;
}
.agileone-section h2.hidden-title {
  display: none;
}
.agileone-section h3 {
  margin: 0 0 24rem;
  font-size: 24rem;
}
.agileone-section .assignment h3 {
  text-align: center;
}
.agileone-section .assignment ul {
  margin: 0 auto 16rem;
  padding: 16rem;
  list-style: none;
  background: #e6e6e6;
  position: relative;
  border-radius: 4rem;
  font-weight: 700;
  display: grid;
  gap: 8rem;
}
@media screen and (min-width: 768px), print {
  .agileone-section .assignment ul {
    padding: 32rem 64rem;
    width: -moz-fit-content;
    width: fit-content;
    gap: 12rem;
  }
}
.agileone-section .assignment ul li {
  margin: 0;
  padding: 0 0 0 1em;
  text-indent: -1em;
}
.agileone-section .assignment ul li::before {
  content: "・";
}
.agileone-section .assignment ul em {
  color: #6373CA;
  font-style: normal;
}
.agileone-section .assignment ul + .icon-arrow {
  display: block;
  margin: 0 auto;
  color: #E6E6E6;
  width: 44rem;
}
.agileone-section .goal {
  font-size: 24rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40rem;
}
.agileone-section .goal em {
  text-decoration-color: #b3c4e7;
  text-decoration-line: underline;
  text-underline-offset: -5rem;
  text-decoration-thickness: 8rem;
}
.agileone-section .lead {
  margin-bottom: 64rem;
}
@media screen and (min-width: 768px), print {
  .agileone-section .lead {
    text-align: center;
  }
}
.agileone-section .grid {
  display: grid;
  gap: 40rem;
  margin: 0 0 64rem;
}
@media screen and (min-width: 768px), print {
  .agileone-section .grid .col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32rem;
    align-items: center;
  }
  .agileone-section .grid .col:nth-of-type(2) .text {
    order: 2;
  }
}
.agileone-section .grid figure {
  border: 1px solid #BDBDBD;
  border-radius: 4rem;
  overflow: hidden;
}
.agileone-section .outline {
  margin-top: 48rem;
}
.agileone-section .outline h3 {
  font-size: 16rem;
  margin: 40rem 0 -8rem;
}
@media screen and (min-width: 768px), print {
  .agileone-section .outline h3 {
    font-size: 20rem;
  }
}
.agileone-section .outline h4 {
  text-align: center;
  background: #e6e6e6;
  font-size: 14rem;
  padding: 8rem;
  margin: 24rem 0 16rem;
}
.agileone-section .outline dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rem;
}
@media screen and (min-width: 768px), print {
  .agileone-section .outline dl {
    display: flex;
    gap: 32rem;
    justify-content: center;
  }
}
@media screen and (min-width: 768px), print {
  .agileone-section .outline dl > div {
    width: 194rem;
  }
}
.agileone-section .outline dl dt {
  font-weight: 700;
  margin: 0 0 4rem;
  text-align: center;
}
.agileone-section .outline dl dt small {
  font-size: 14rem;
  display: block;
}
.agileone-section .outline dl dt figure {
  border: 1px solid #191B39;
  border-radius: 4rem;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  margin: 0 0 8rem;
}
.agileone-section .outline dl dt figure img {
  width: 100%;
}
.agileone-section .outline dl dd {
  margin: 0;
  padding: 0;
  font-size: 12rem;
}
.agileone-section .outline dl ul {
  margin: 0;
  padding: 0;
}
.agileone-section .outline dl ul li {
  margin: 0;
  padding: 0 0 0 16rem;
  list-style: none;
  position: relative;
  font-size: 12rem;
}
.agileone-section .outline dl ul li::before {
  content: "●";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0.3);
}
.agileone-section .outline .btns {
  margin-top: 32rem;
  text-align: center;
}
.agileone-section .outline .btns .btn {
  margin: 0 auto;
}
.agileone-section .relation {
  margin: 64rem 0;
}
.agileone-section .relation h3 {
  font-size: 32rem;
}
@media screen and (min-width: 768px), print {
  .agileone-section .relation h3 {
    font-size: 40rem;
  }
}
.agileone-section .relation ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 24rem;
}
@media screen and (min-width: 768px), print {
  .agileone-section .relation ul {
    grid-template-columns: repeat(3, 1fr);
  }
}
.agileone-section .relation ul li {
  margin: 0;
  padding: 0;
}
.agileone-section .relation ul h4 {
  font-size: 16rem;
  margin: 8rem 0 0;
  text-decoration-color: transparent;
  text-decoration-line: underline;
  text-underline-offset: 5rem;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.3s;
}
@media screen and (min-width: 768px), print {
  .agileone-section .relation ul h4 {
    font-size: 20rem;
    margin: 16rem 0 0;
  }
}
.agileone-section .relation ul p {
  margin: 0;
}
@media screen and (min-width: 768px), print {
  .agileone-section .relation ul a:hover img {
    transform: scale(1.1);
  }
  .agileone-section .relation ul a:hover h4 {
    text-decoration-color: #191B39;
  }
}
.agileone-section .relation ul figure {
  border: 1px solid #bdbdbd;
  overflow: hidden;
  border-radius: 4rem;
  aspect-ratio: 750/420;
}
.agileone-section .relation ul img {
  transition: transform 0.3s;
  will-change: transform;
  max-width: 200%;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  -o-object-fit: cover;
     object-fit: cover;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.service-anchor {
  margin: 64rem 0 -16rem;
}
@media screen and (min-width: 768px), print {
  .service-anchor {
    margin: 96rem 0 -64rem;
  }
}
.service-anchor ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4rem;
  list-style: none;
}
@media screen and (min-width: 768px), print {
  .service-anchor ul {
    grid-template-columns: repeat(5, 1fr);
    gap: 16rem;
  }
}
.service-anchor ul li {
  margin: 0;
  padding: 0;
}
.service-anchor a {
  display: grid;
  border: 1px solid #191B39;
  border-radius: 4rem;
  padding: 8rem 8rem 8rem 8rem;
  text-align: left;
  gap: 24rem;
  align-items: center;
  grid-template-columns: 82rem 1fr;
  font-size: 14rem;
}
@media screen and (min-width: 768px), print {
  .service-anchor a {
    gap: 16rem;
  }
  .service-anchor a:hover img {
    scale: 1.1;
  }
}
.service-anchor figure {
  border-radius: 0 4rem 4rem 0;
  overflow: hidden;
}
.service-anchor img {
  transition: scale 0.3s;
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}

#service article {
  margin-top: 64rem;
}
@media screen and (min-width: 768px), print {
  #service article {
    margin-top: 40rem;
  }
}
#service article:nth-of-type(1) .frame {
  background: #191B39;
}
#service article:nth-of-type(2) .frame {
  background: #282D64;
}
#service article:nth-of-type(3) .frame {
  background: #353A7D;
}
#service article:nth-of-type(4) .frame {
  background: #434896;
}
#service article:nth-of-type(5) .frame {
  background: #5258AC;
}
#service .frame {
  color: #fff;
  padding: 0 16rem 24rem;
  border-radius: 4rem;
  margin: 0 0 32rem;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 768px), print {
  #service .frame {
    height: 333rem;
    padding: 48rem 730rem 0 48rem;
    margin-bottom: 24rem;
    border-radius: 8rem;
  }
}
#service .frame .num {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 24rem;
  display: block;
}
#service .frame h2 {
  margin: 0;
  font-weight: 700;
  font-size: 28rem;
  line-height: 1.4;
}
@media screen and (min-width: 768px), print {
  #service .frame h2 {
    font-size: 40rem;
    white-space: nowrap;
    position: relative;
  }
}
@media screen and (max-width: 767.98px) {
  #service .frame p {
    font-size: 14rem;
  }
}
@media screen and (min-width: 768px), print {
  #service .frame p {
    margin: 8rem 0 0;
  }
}
@media screen and (max-width: 767.98px) {
  #service .frame .btn {
    width: 70%;
  }
}
@media screen and (min-width: 768px), print {
  #service .frame .btn {
    position: absolute;
    bottom: 48rem;
    left: 48rem;
  }
}
#service .frame figure {
  margin: 0 -16rem 16rem;
}
@media screen and (min-width: 768px), print {
  #service .frame figure {
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
  }
}
#service .frame figure img {
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
@media screen and (max-width: 767.98px) {
  #service .frame figure img {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 25%, #000 100%);
            mask-image: linear-gradient(to top, transparent 0%, #000 25%, #000 100%);
  }
}
@media screen and (min-width: 768px), print {
  #service .frame figure img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 25%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 25%, #000 100%);
    height: 100%;
  }
}
#service .grid {
  display: grid;
  gap: 24rem;
}
@media screen and (min-width: 768px), print {
  #service .grid {
    grid-template-columns: repeat(3, 1fr);
  }
  #service .grid:not(:has(.col:nth-of-type(2))) {
    grid-template-columns: 1fr;
  }
  #service .grid:not(:has(.col:nth-of-type(2))) .col {
    display: grid;
    grid-template-columns: 1fr 688rem;
    gap: 24rem;
    align-items: center;
  }
  #service .grid:not(:has(.col:nth-of-type(2))) .col figure {
    order: 2;
  }
}
#service .col {
  text-align: right;
}
#service .col figure {
  overflow: hidden;
  border-radius: 4rem;
  border: 1px solid #BDBDBD;
  margin: 0 0 12rem;
}
@media screen and (min-width: 768px), print {
  #service .col figure {
    margin-bottom: 16rem;
  }
}
#service .col h3 {
  font-size: 16rem;
  margin: 0;
}
@media screen and (min-width: 768px), print {
  #service .col h3 {
    font-size: 20rem;
  }
}
#service .col p {
  text-align: justify;
  margin: 8rem 0;
}

/*-----------------------------------------------------------------------------------*/
#service-child-contents {
  margin: 64rem 0 80rem 0;
}
@media screen and (min-width: 768px), print {
  #service-child-contents {
    margin: 96rem auto 120rem;
    display: grid;
    grid-template-columns: 320rem 1fr;
    gap: 48rem;
  }
}
#service-child-contents .sticky-anchor ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 768px), print {
  #service-child-contents .sticky-anchor ul {
    position: sticky;
    top: 120rem;
    left: 0;
  }
}
#service-child-contents .sticky-anchor ul li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid currentColor;
  transition: color 0.3s, border-bottom-color 0.3s;
}
@media screen and (min-width: 768px), print {
  #service-child-contents .sticky-anchor ul li {
    color: #BDBDBD;
  }
  #service-child-contents .sticky-anchor ul li:hover, #service-child-contents .sticky-anchor ul li:has(> a.is-current) {
    color: #191B39;
  }
}
#service-child-contents .sticky-anchor a {
  display: grid;
  grid-template-columns: 1fr 24rem;
  padding: 16rem 0;
}
@media screen and (min-width: 768px), print {
  #service-child-contents .sticky-anchor a {
    display: block;
  }
}
#service-child-contents .sticky-anchor a i {
  transform: rotate(90deg);
}
@media screen and (min-width: 768px), print {
  #service-child-contents .sticky-anchor a i {
    display: none;
  }
}
#service-child-contents .service-child {
  display: grid;
  gap: 64rem;
  margin-top: 64rem;
}
@media screen and (min-width: 768px), print {
  #service-child-contents .service-child {
    margin: 0;
  }
}
#service-child-contents section {
  margin: 0;
  padding: 16rem 0 0;
  border-top: 1px solid #191B39;
}
@media screen and (min-width: 768px), print {
  #service-child-contents section:not(:has(> .num)) {
    padding-top: 40rem;
  }
}
#service-child-contents .num {
  font-family: "Inter", sans-serif;
  font-weight: 700;
}
@media screen and (min-width: 768px), print {
  #service-child-contents .title {
    display: grid;
    grid-template-columns: 1fr 484rem;
    gap: 24rem;
  }
  #service-child-contents .title .text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #service-child-contents .title .text p {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 767.98px) {
  #service-child-contents .title .text:not(:has(.lead)) {
    margin-bottom: 24rem;
  }
}
#service-child-contents .title h2 {
  font-size: 32rem;
  margin: 0;
}
@media screen and (min-width: 768px), print {
  #service-child-contents .title h2 {
    font-size: 40rem;
  }
}
#service-child-contents .title h2 small {
  font-size: 16rem;
  font-weight: 400;
  display: block;
}
#service-child-contents .title small.note {
  font-size: 14rem;
  color: #7c7c7c;
  display: block;
  margin-top: 8rem;
}
@media screen and (max-width: 767.98px) {
  #service-child-contents .title small.note {
    margin: 4rem 0 -12rem;
  }
}
#service-child-contents .thumb {
  overflow: hidden;
  border-radius: 4rem;
  border: 1px solid #BDBDBD;
  aspect-ratio: 358/160;
}
@media screen and (min-width: 768px), print {
  #service-child-contents .thumb {
    aspect-ratio: 484/272;
  }
}
#service-child-contents .thumb img {
  max-width: calc(100% + 1px);
}
#service-child-contents .lead2 {
  margin: 32rem 0;
}
#service-child-contents .lead2 strong {
  display: block;
  font-size: 20rem;
}
#service-child-contents .example {
  background: #dcdcdc;
  border-radius: 4rem;
  padding: 16rem;
  margin: 40rem 0;
}
@media screen and (min-width: 768px), print {
  #service-child-contents .example {
    margin: 48rem 0;
    padding: 24rem;
  }
}
#service-child-contents .example h3 {
  margin: 0 0 8rem;
  font-size: 16rem;
  font-weight: 400;
}
#service-child-contents .example ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#service-child-contents .example ul li {
  font-size: 13.9rem;
  margin: 0;
  padding: 4rem 8rem;
  color: #fff;
  background-color: #191B39;
  border-radius: 4rem;
}
#service-child-contents .flow {
  text-align: center;
}
#service-child-contents .flow img {
  width: var(--pc-width, 100%);
}
#service-child-contents ul.partners {
  margin: 0 0 32rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8rem;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 768px), print {
  #service-child-contents ul.partners {
    margin: 0 0 48rem;
    gap: 24rem;
    grid-template-columns: repeat(3, 1fr);
  }
}
#service-child-contents ul.partners:last-child {
  margin-bottom: 0;
}
#service-child-contents ul.partners li {
  margin: 0;
  padding: 0;
  border: 1px solid #BDBDBD;
  border-radius: 4rem;
  overflow: hidden;
}
#service-child-contents ol.point {
  margin: 40rem 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 24rem;
}
@media screen and (min-width: 768px), print {
  #service-child-contents ol.point {
    margin: 48rem 0;
  }
}
#service-child-contents ol.point:last-child {
  margin-bottom: 0;
}
#service-child-contents ol.point li {
  margin: 0;
  padding: 0;
}
#service-child-contents ol.point .number {
  font-size: 14rem;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  line-height: 1.2;
}
#service-child-contents ol.point h4 {
  font-weight: 700;
  font-size: 20rem;
  margin: 0;
}
#service-child-contents ol.point h5 {
  font-weight: 700;
  font-size: 16rem;
  margin: 16rem 0 8rem;
}
#service-child-contents ol.point p {
  margin: 8rem 0 0;
}
#service-child-contents ol.point p small {
  display: block;
  font-size: 12rem;
}
#service-child-contents ol.package {
  margin: 40rem 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}
@media screen and (min-width: 768px), print {
  #service-child-contents ol.package {
    margin: 48rem 0;
  }
}
#service-child-contents ol.package:last-child {
  margin-bottom: 0;
}
#service-child-contents ol.package li {
  margin: 0;
  padding: 32rem 0;
  display: grid;
  gap: 8rem 24rem;
  border-top: 1px solid #BDBDBD;
  grid-template-columns: 175rem 1fr;
  align-items: start;
}
@media screen and (min-width: 768px), print {
  #service-child-contents ol.package li {
    grid-template-columns: 200rem 1fr;
    gap: 24rem;
  }
}
#service-child-contents ol.package li:first-child {
  padding-top: 0;
  border: none;
}
#service-child-contents ol.package li:last-child {
  padding-bottom: 0;
}
#service-child-contents ol.package figure {
  overflow: hidden;
  border-radius: 4rem;
  border: 1px solid #BDBDBD;
  margin: 0 auto;
}
@media screen and (min-width: 768px), print {
  #service-child-contents ol.package figure {
    width: 200rem;
  }
}
@media screen and (max-width: 767.98px) {
  #service-child-contents ol.package .text {
    display: contents;
  }
}
#service-child-contents ol.package h3 {
  font-size: 20rem;
  margin: 0;
}
@media screen and (min-width: 768px), print {
  #service-child-contents ol.package h3 {
    font-size: 28rem;
    display: grid;
    grid-template-columns: 88rem 1fr;
    gap: 8rem 12rem;
  }
}
#service-child-contents ol.package h3 > small {
  font-size: 14rem;
  font-weight: 400;
  display: block;
  margin-bottom: 4rem;
  grid-column: span 2;
}
#service-child-contents ol.package h3 em {
  background: #191B39;
  color: #fff;
  border-radius: 4rem;
  padding: 0 10rem;
  font-family: "Inter", sans-serif;
  display: grid;
  place-content: center;
}
@media screen and (max-width: 767.98px) {
  #service-child-contents ol.package h3 em {
    margin: 4rem 0;
    width: -moz-fit-content;
    width: fit-content;
  }
}
#service-child-contents ol.package h3 > span {
  display: block;
}
@media screen and (max-width: 767.98px) {
  #service-child-contents ol.package h3 > span {
    line-height: 1.3;
  }
}
#service-child-contents ol.package h3 > span small {
  display: block;
  font-size: 14rem;
}
@media screen and (max-width: 767.98px) {
  #service-child-contents ol.package h3 > span small {
    margin-top: 4rem;
  }
}
@media screen and (min-width: 768px), print {
  #service-child-contents ol.package h3 > span small {
    font-size: 20rem;
  }
}
#service-child-contents ol.package p {
  display: grid;
  gap: 8rem;
}
@media screen and (max-width: 767.98px) {
  #service-child-contents ol.package p {
    font-size: 10rem;
    margin: 8rem 0 0;
    grid-column: span 2;
  }
}
@media screen and (min-width: 768px), print {
  #service-child-contents ol.package p {
    margin: 16rem 0 8rem;
    font-size: 12rem;
  }
}
#service-child-contents ol.package p strong {
  display: block;
  font-size: 14rem;
}
@media screen and (min-width: 768px), print {
  #service-child-contents ol.package p strong {
    font-size: 16rem;
  }
}
#service-child-contents ol.package .btns {
  margin-top: 8rem;
  gap: 10rem;
  flex-wrap: wrap;
}
@media screen and (max-width: 767.98px) {
  #service-child-contents ol.package .btns {
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 768px), print {
  #service-child-contents ol.package .btns {
    float: right;
    display: flex;
  }
}
#service-child-contents ul.newspaper {
  margin: 40rem 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 32rem 16rem;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}
@media screen and (min-width: 768px), print {
  #service-child-contents ul.newspaper {
    margin: 48rem 0;
  }
}
#service-child-contents ul.newspaper:last-child {
  margin-bottom: 0;
}
#service-child-contents ul.newspaper li {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8rem;
}
@media screen and (min-width: 768px), print {
  #service-child-contents ul.newspaper li {
    grid-template-columns: 152rem 1fr;
    gap: 24rem;
  }
}
#service-child-contents ul.newspaper figure {
  overflow: hidden;
  border-radius: 4rem;
  border: 1px solid #BDBDBD;
  margin: 0 auto;
  aspect-ratio: 1;
  width: 100%;
}
#service-child-contents ul.newspaper figure img {
  width: 100%;
}
@media screen and (min-width: 768px), print {
  #service-child-contents ul.newspaper .text {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }
}
#service-child-contents ul.newspaper h3 {
  font-size: 14rem;
  margin: 0;
}
@media screen and (min-width: 768px), print {
  #service-child-contents ul.newspaper h3 {
    font-size: 16rem;
  }
}
#service-child-contents ul.newspaper p {
  margin: 4rem 0;
}
#service-child-contents ul.newspaper a {
  float: right;
  font-weight: 700;
  text-decoration-color: transparent;
}
@media screen and (min-width: 768px), print {
  #service-child-contents ul.newspaper a {
    margin-top: auto;
    align-self: flex-end;
  }
}
#service-child-contents ul.newspaper a:hover {
  text-decoration-color: currentColor;
}
#service-child-contents .other-media {
  background: #e6e6e6;
  padding: 16rem;
  border-radius: 4rem;
  margin: 16rem 0;
}
@media screen and (min-width: 768px), print {
  #service-child-contents .other-media {
    text-align: center;
    margin: 24rem 0;
  }
}
#service-child-contents .other-media + .btns,
#service-child-contents .casestudy-slide + .btns {
  margin: 32rem 0;
}
@media screen and (max-width: 767.98px) {
  #service-child-contents .other-media + .btns,
  #service-child-contents .casestudy-slide + .btns {
    display: grid;
    gap: 16rem;
    justify-content: center;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 768px), print {
  #service-child-contents .other-media + .btns,
  #service-child-contents .casestudy-slide + .btns {
    margin: 48rem 0;
    display: flex;
    gap: 16rem;
    justify-content: center;
  }
}
#service-child-contents .contact-notice {
  background: #e6e6e6;
  font-weight: 700;
  padding: 24rem 16rem;
  border-radius: 4rem;
  font-size: 16rem;
}
@media screen and (min-width: 768px), print {
  #service-child-contents .contact-notice {
    text-align: center;
  }
}
#service-child-contents .contact-notice a {
  text-decoration: underline;
  transition: text-decoration-color 0.3s;
}
@media screen and (min-width: 768px), print {
  #service-child-contents .contact-notice a:hover {
    text-decoration-color: transparent;
  }
}

/*-----------------------------------------------------------------------------------*/
.casestudy-slide {
  margin: 0 -16rem;
  padding: 0 0 64rem;
  overflow: hidden;
}
@media screen and (min-width: 768px), print {
  .casestudy-slide {
    margin: 0;
    padding: 0;
  }
}
.casestudy-slide:not(:has(.swiper-slide:nth-of-type(2))) {
  padding-bottom: 0;
}
.casestudy-slide:not(:has(.swiper-slide:nth-of-type(2))) .swiper-pagination,
.casestudy-slide:not(:has(.swiper-slide:nth-of-type(2))) button {
  display: none;
}
@media screen and (max-width: 767.98px) {
  .casestudy-slide:not(:has(.swiper-slide:nth-of-type(3))) .swiper-slide:last-child {
    margin-right: 16rem;
  }
}
.casestudy-slide .swiper {
  overflow: visible;
  padding-bottom: 0 !important;
}
@media screen and (min-width: 768px), print {
  .casestudy-slide .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16rem;
  }
}
.casestudy-slide .swiper-pagination {
  position: absolute;
  left: inherit;
  display: flex;
  gap: 16rem;
  width: auto;
}
@media screen and (max-width: 767.98px) {
  .casestudy-slide .swiper-pagination {
    bottom: -40rem;
    right: 100rem;
  }
}
@media screen and (min-width: 768px), print {
  .casestudy-slide .swiper-pagination {
    display: none;
  }
}
.casestudy-slide .swiper-pagination-bullet {
  margin: 0;
  aspect-ratio: 1;
  width: 8rem;
  height: auto;
  background: #BDBDBD;
  opacity: 1;
  display: block;
}
.casestudy-slide .swiper-pagination-bullet-active {
  background: #191B39;
}
.casestudy-slide .swiper-button-next, .casestudy-slide .swiper-button-prev {
  margin: 0;
  background: none;
  color: #191B39;
  border: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 40rem;
  height: 40rem;
}
@media screen and (min-width: 768px), print {
  .casestudy-slide .swiper-button-next, .casestudy-slide .swiper-button-prev {
    display: none;
  }
}
.casestudy-slide .swiper-button-next::after, .casestudy-slide .swiper-button-prev::after {
  font-size: 32rem;
}
@media screen and (max-width: 767.98px) {
  .casestudy-slide .swiper-button-next {
    top: inherit;
    bottom: -56rem;
  }
}
@media screen and (max-width: 767.98px) {
  .casestudy-slide .swiper-button-prev {
    top: inherit;
    bottom: -56rem;
    left: inherit;
    right: 50rem;
  }
}
@media screen and (min-width: 768px), print {
  .casestudy-slide .swiper-button-prev {
    left: inherit;
    right: 50rem;
  }
}
.casestudy-slide .swiper-slide {
  width: 85%;
  padding: 0 0 0 16rem;
}
@media screen and (min-width: 768px), print {
  .casestudy-slide .swiper-slide {
    width: auto;
    padding: 0;
  }
}

/*-----------------------------------------------------------------------------------*/
.portal {
  position: relative;
}
.portal img {
  border-radius: 4rem;
}
.portal .frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3D(-50%, -50%, 0);
  background: #fff;
  border-radius: 4rem;
  padding: 20rem 16rem;
}
@media screen and (min-width: 768px), print {
  .portal .frame {
    padding: 64rem 48rem;
  }
}
.portal .frame h3 {
  text-align: center;
  font-size: 24rem;
  white-space: nowrap;
  margin: 0 0 24rem;
}
.portal .frame h3 small {
  font-size: 16rem;
  display: block;
  font-weight: 400;
}
.portal .frame .btn {
  display: grid;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  max-width: 100%;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
#js-cards {
  opacity: 1;
  transition: opacity 0.25s ease;
}

#js-cards.is-fading {
  opacity: 0;
}

#js-cards .case-card.is-hidden {
  display: none;
}

/*-----------------------------------------------------------------------------------*/
#casestudies .filter {
  margin: 0 0 40rem;
  background: #EFEFEF;
  padding: 24rem;
}
@media screen and (min-width: 768px), print {
  #casestudies .filter {
    padding: 24rem 32rem;
  }
}
@media screen and (min-width: 768px), print {
  #casestudies .filter {
    margin: 0 0 64rem;
  }
}
#casestudies .filter fieldset {
  border: none;
  display: grid;
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 768px), print {
  #casestudies .filter fieldset {
    display: flex;
    gap: 64rem;
  }
}
#casestudies .filter .legend {
  margin: 0 0 8rem;
  padding: 0;
  font-size: 24rem;
  font-weight: 700;
}
@media screen and (min-width: 768px), print {
  #casestudies .filter .legend {
    margin: 0;
  }
}
#casestudies .filter ul {
  margin: 0;
  padding: 8rem 0 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8rem 16rem;
}
@media screen and (min-width: 768px), print {
  #casestudies .filter ul {
    flex: 1;
    padding-top: 4rem;
  }
}
#casestudies .filter ul li {
  margin: 0;
  padding: 0;
}
#casestudies .filter label {
  color: #191B39;
  border: 1px solid #BDBDBD;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
  cursor: pointer;
  font-size: 12rem;
  padding: 3rem 6rem;
  border-radius: 4rem;
  display: block;
  font-weight: 500;
}
@media screen and (min-width: 768px), print {
  #casestudies .filter label {
    font-size: 14rem;
    padding: 4rem 8rem;
  }
}
#casestudies .filter label:has(:checked) {
  color: #fff;
  background: #191B39;
  border-color: #191B39;
}
#casestudies .filter label input {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}
#casestudies #js-result-summary {
  display: none;
}

/*-----------------------------------------------------------------------------------*/
.case-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
  margin: 40rem 0 0;
}
@media screen and (min-width: 768px), print {
  .case-pagination {
    margin: 64rem 0 0;
    gap: 16rem;
  }
}
.case-pagination button {
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  color: #BDBDBD;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  transition: color 0.3s;
  padding: 0 6rem;
  font-size: 16rem;
}
.case-pagination button:hover {
  color: #191B39;
}
.case-pagination button.is-active {
  color: #191B39;
}
.case-pagination button:first-child, .case-pagination button:last-child {
  width: 44rem;
  height: 44rem;
  border-radius: 100rem;
  border: 1px solid #BDBDBD;
  color: #191B39;
  display: grid;
  place-content: center;
}
.case-pagination button:first-child {
  transform: scaleX(-1);
  margin-right: 8rem;
}
.case-pagination button:last-child {
  margin-left: 8rem;
}
.case-pagination button:disabled {
  opacity: 0;
}

/*-----------------------------------------------------------------------------------*/
#casestudies-article {
  margin-top: 0;
}
#casestudies-article section {
  margin: 64rem 0;
}
@media screen and (min-width: 768px), print {
  #casestudies-article section {
    margin: 80rem 0;
  }
}
#casestudies-article .article-header h1 {
  margin: 4rem 0 16rem;
  padding: 0;
  font-size: 32rem;
  line-height: 1.5;
}
@media screen and (min-width: 768px), print {
  #casestudies-article .article-header h1 {
    font-size: 40rem;
  }
}
#casestudies-article .article-header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
}
#casestudies-article .article-header ul li {
  margin: 0;
  padding: 0 8rem;
  font-size: 12rem;
  color: #191B39;
  font-weight: 500;
  border: 1px solid #BDBDBD;
  border-radius: 4rem;
}
@media screen and (min-width: 768px), print {
  #casestudies-article .article-header ul li {
    font-size: 14rem;
  }
}
#casestudies-article h2 {
  font-size: 32rem;
  margin: 0 0 16rem;
}
@media screen and (min-width: 768px), print {
  #casestudies-article h2 {
    font-size: 40rem;
  }
}
#casestudies-article .gallery {
  margin: 32rem auto;
}
@media screen and (min-width: 768px), print {
  #casestudies-article .gallery {
    margin: 40rem auto;
  }
}
#casestudies-article .gallery .gallery__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: center;
}
#casestudies-article .gallery img {
  aspect-ratio: 800/450;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#casestudies-article .gallery .gallery__main {
  background: #fff;
  border-radius: 4rem;
  overflow: hidden;
}
#casestudies-article .gallery .gallery__main img {
  transition: opacity 0.8s;
  -o-object-fit: contain;
     object-fit: contain;
}
#casestudies-article .gallery .gallery__main img.is-fade {
  opacity: 0;
}
#casestudies-article .gallery .thumb {
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s;
  border-radius: 4rem;
  overflow: hidden;
  width: 83rem;
}
@media screen and (min-width: 768px), print {
  #casestudies-article .gallery .thumb {
    width: 244rem;
  }
}
#casestudies-article .gallery .thumb.is-active {
  opacity: 1;
}
#casestudies-article .youtube-list {
  margin: 32rem 0;
  display: grid;
  gap: 24rem;
  align-items: start;
}
@media screen and (min-width: 768px), print {
  #casestudies-article .youtube-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 40rem;
  }
}
#casestudies-article .youtube-list .youtube-item {
  display: grid;
}
#casestudies-article .youtube-list h3 {
  margin: 8rem 0 0;
  order: 2;
  font-size: 12rem;
}
@media screen and (min-width: 768px), print {
  #casestudies-article .youtube-list h3 {
    font-size: 14rem;
  }
}
#casestudies-article .youtube-list iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  vertical-align: top;
}
#casestudies-article .issues-solution .issues,
#casestudies-article .issues-solution .solution {
  border-radius: 4rem;
  padding: 16rem;
  margin: 40rem 0;
}
@media screen and (min-width: 768px), print {
  #casestudies-article .issues-solution .issues,
  #casestudies-article .issues-solution .solution {
    margin: 48rem 0;
    padding: 24rem;
  }
}
#casestudies-article .issues-solution h3 {
  margin: 0 0 16rem;
  font-size: 32rem;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}
@media screen and (min-width: 768px), print {
  #casestudies-article .issues-solution h3 {
    font-size: 40rem;
    margin-bottom: 24rem;
  }
}
#casestudies-article .issues-solution ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;
}
#casestudies-article .issues-solution ul li {
  font-size: 13.9rem;
  margin: 0;
  padding: 4rem 8rem;
  border-radius: 4rem;
}
#casestudies-article .issues-solution .arrow {
  text-align: center;
  margin: -34rem 0;
  line-height: 1px;
}
#casestudies-article .issues-solution .arrow svg {
  width: 56rem;
}
#casestudies-article .issues {
  background: #dcdcdc;
}
#casestudies-article .issues ul li {
  color: #fff;
  background-color: #191B39;
}
#casestudies-article .solution {
  border: 1px solid #7c7c7c;
}
#casestudies-article .solution ul li {
  background: #D2DBEE;
  font-weight: 700;
}
#casestudies-article .section-arrow {
  text-align: center;
  margin: 48rem 0 -32rem;
  line-height: 1px;
}
@media screen and (min-width: 768px), print {
  #casestudies-article .section-arrow {
    margin-bottom: -48rem;
  }
}
#casestudies-article .section-arrow svg {
  width: 110rem;
}
#casestudies-article .detail h3 {
  margin-bottom: 8rem;
}
#casestudies-article .detail h3 + p {
  margin-top: 0;
}
#casestudies-article .detail .btns {
  margin-top: 32rem;
}
@media screen and (min-width: 768px), print {
  #casestudies-article .detail .btns {
    margin-top: 64rem;
  }
}
#casestudies-article .detail .btn {
  width: 100%;
  max-width: 100%;
  font-size: 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rem 24rem;
  margin: 0 auto;
}
@media screen and (min-width: 768px), print {
  #casestudies-article .detail .btn {
    width: 400rem;
    padding: 24rem;
  }
}
/*-----------------------------------------------------------------------------------*/
.case-cards {
  display: grid;
  gap: 40px;
}
@media screen and (min-width: 768px), print {
  .case-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 48rem 24rem;
  }
}

@media screen and (min-width: 768px), print {
  .case-card a:hover img {
    transform: scale(1.1);
  }
  .case-card a:hover h3,
  .case-card a:hover h4 {
    text-decoration-color: #191B39;
  }
}
.case-card figure {
  border: 1px solid #bdbdbd;
  overflow: hidden;
  border-radius: 4rem;
  aspect-ratio: 750/420;
}
.case-card img {
  transition: transform 0.3s;
  will-change: transform;
  max-width: 200%;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  -o-object-fit: cover;
     object-fit: cover;
}
.case-card h3,
.case-card h4 {
  font-size: 14rem;
  color: #191B39;
  margin: 8rem 0 0;
  text-decoration-color: transparent;
  text-decoration-line: underline;
  text-underline-offset: 5rem;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.3s;
}
@media screen and (min-width: 768px), print {
  .case-card h3,
  .case-card h4 {
    font-size: 16rem;
    margin: 12rem 0 0;
  }
}
.case-card h3:has(.icon-external),
.case-card h4:has(.icon-external) {
  display: inline-grid;
  grid-template-columns: 1fr 24rem;
  gap: 16rem;
  align-items: center;
}
.case-card p {
  margin: 4rem 0 4rem;
}
@media screen and (min-width: 768px), print {
  .case-card p {
    margin: 8rem 0 8rem;
  }
}
.case-card ul {
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
}
.case-card ul li {
  margin: 0;
  padding: 0 8rem;
  font-size: 12rem;
  color: #191B39;
  font-weight: 500;
  border: 1px solid #BDBDBD;
  border-radius: 4rem;
}
@media screen and (min-width: 768px), print {
  .case-card ul li {
    font-size: 14rem;
  }
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.wp-pagination {
  margin: 40rem 0 0;
}
@media screen and (min-width: 768px), print {
  .wp-pagination {
    margin: 64rem 0 0;
  }
}
.wp-pagination div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
}
@media screen and (min-width: 768px), print {
  .wp-pagination div {
    gap: 16rem;
  }
}
.wp-pagination .page-numbers {
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  color: #BDBDBD;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  transition: color 0.3s;
  display: block;
  padding: 0 6rem;
}
.wp-pagination .page-numbers:hover {
  color: #191B39;
}
.wp-pagination .page-numbers.current {
  color: #191B39;
}
.wp-pagination .page-numbers.prev, .wp-pagination .page-numbers.next {
  width: 44rem;
  height: 44rem;
  border-radius: 100rem;
  border: 1px solid #BDBDBD;
  color: #191B39;
  display: grid;
  place-content: center;
  padding: 0;
}
.wp-pagination .page-numbers.prev {
  transform: scaleX(-1);
  margin-right: 8rem;
}
.wp-pagination .page-numbers.next {
  margin-left: 8rem;
}
.wp-pagination .page-numbers.disabled {
  opacity: 0;
}

/*-----------------------------------------------------------------------------------*/
#news ul.newslist2 {
  margin: 0;
  padding: 0;
  list-style: none;
}
#news ul.newslist2 li {
  margin: 0 0 24rem;
  padding: 0 0 24rem;
  border-bottom: 1px solid #BDBDBD;
}
#news ul.newslist2 a {
  display: grid;
  grid-template-columns: 114rem 1fr;
  gap: 16rem;
  align-items: start;
  position: relative;
}
@media screen and (min-width: 768px), print {
  #news ul.newslist2 a {
    grid-template-columns: 214rem 1fr;
    gap: 24rem;
  }
  #news ul.newslist2 a::after {
    content: "";
    height: 1px;
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: -24rem;
    background: #191B39;
    transform: scaleX(0) translateY(1px);
    transition: transform 0.5s;
    transform-origin: left top;
  }
}
#news ul.newslist2 a:hover::after {
  transform: scaleX(1) translateY(1px);
}
#news ul.newslist2 a:hover img {
  transform: scale(1.1);
}
#news ul.newslist2 figure {
  border-radius: 4rem;
  overflow: hidden;
  aspect-ratio: 114/64;
}
#news ul.newslist2 figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s;
}
#news ul.newslist2 .text {
  display: flex;
  flex-wrap: wrap;
  gap: 5rem 8rem;
  align-items: center;
}
@media screen and (min-width: 768px), print {
  #news ul.newslist2 .text {
    gap: 8rem 8rem;
  }
}
#news ul.newslist2 time {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  color: #989898;
  transform: translateY(1rem);
}
#news ul.newslist2 .category {
  border: 1px solid #989898;
  color: #191B39;
  font-size: 12rem;
  display: inline-block;
  font-style: normal;
  font-weight: 500;
  padding: 0 8rem;
  border-radius: 4rem;
}
#news ul.newslist2 .title {
  display: block;
  width: 100%;
}

/*-----------------------------------------------------------------------------------*/
#news-article {
  margin-top: 0;
}
#news-article .article-header {
  display: flex;
  flex-wrap: wrap;
  gap: 5rem 8rem;
  align-items: center;
  margin: 0 0 40rem;
}
@media screen and (min-width: 768px), print {
  #news-article .article-header {
    gap: 8rem 8rem;
  }
}
#news-article .article-header time {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  color: #989898;
  transform: translateY(1rem);
}
#news-article .article-header .category {
  border: 1px solid #989898;
  color: #191B39;
  font-size: 12rem;
  display: inline-block;
  font-style: normal;
  font-weight: 500;
  padding: 0 8rem;
  border-radius: 4rem;
}
#news-article .article-header h1 {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 32rem;
}
@media screen and (min-width: 768px), print {
  #news-article .article-header h1 {
    font-size: 40rem;
  }
}
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
#profile dl,
#recruit dl {
  margin: 0;
  padding: 0;
}
#profile dl dt,
#recruit dl dt {
  margin: 0;
  padding: 0;
}
#profile dl dd,
#recruit dl dd {
  margin: 0;
  padding: 0;
}
#profile dl.primary,
#recruit dl.primary {
  display: grid;
  gap: 16rem;
  margin: 0 auto;
}
@media screen and (min-width: 768px), print {
  #profile dl.primary,
  #recruit dl.primary {
    gap: 0;
  }
}
#profile dl.primary > div,
#recruit dl.primary > div {
  display: grid;
  gap: 16rem;
  border-bottom: 1px solid #BDBDBD;
  padding-bottom: 16rem;
}
@media screen and (min-width: 768px), print {
  #profile dl.primary > div,
  #recruit dl.primary > div {
    grid-template-columns: 200rem 1fr;
    gap: 8rem;
    border: none;
    padding: 0;
  }
}
#profile dl.primary > div > dt,
#recruit dl.primary > div > dt {
  font-weight: 700;
}
@media screen and (min-width: 768px), print {
  #profile dl.primary > div > dt,
  #recruit dl.primary > div > dt {
    padding: 24rem 16rem;
    border-bottom: 1px solid #BDBDBD;
  }
}
@media screen and (min-width: 768px), print {
  #profile dl.primary > div > dd,
  #recruit dl.primary > div > dd {
    padding: 24rem 16rem;
    border-bottom: 1px solid #BDBDBD;
  }
}
@media screen and (min-width: 768px), print {
  #profile dl dl,
  #recruit dl dl {
    display: grid;
    gap: 4rem;
  }
}
#profile dl dl > div,
#recruit dl dl > div {
  display: grid;
  grid-template-columns: 8em 1fr;
}
#profile dl ol,
#recruit dl ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: num;
}
@media screen and (min-width: 768px), print {
  #profile dl ol,
  #recruit dl ol {
    display: grid;
    gap: 4rem;
  }
}
#profile dl ol li,
#recruit dl ol li {
  margin: 0;
  padding: 0 0 0 1em;
  counter-increment: num;
  text-indent: -1em;
}
#profile dl ol li::before,
#recruit dl ol li::before {
  content: counter(num) ". ";
}
#profile dl ul,
#recruit dl ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 768px), print {
  #profile dl ul.links,
  #recruit dl ul.links {
    display: grid;
    gap: 4rem;
  }
}
#profile dl ul li,
#recruit dl ul li {
  margin: 0;
  padding: 0;
}
#profile dl ul.access li,
#recruit dl ul.access li {
  text-indent: -1em;
  padding: 0 0 0 1em;
}
#profile dl ul.access li::before,
#recruit dl ul.access li::before {
  content: "●";
  transform: scale(0.3);
  display: inline-block;
  text-indent: 0;
}
#profile dl iframe,
#recruit dl iframe {
  width: 100%;
  height: 354rem;
  margin: 16rem auto;
}
@media screen and (min-width: 768px), print {
  #profile dl iframe,
  #recruit dl iframe {
    height: 277rem;
  }
}

/*-----------------------------------------------------------------------------------*/
#history dl {
  margin: 0;
  padding: 0;
  margin: 0 auto;
  display: grid;
  gap: 48rem;
  position: relative;
  overflow: hidden;
}
#history dl::before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  top: 10rem;
  left: 111rem;
  display: block;
  background-color: #BDBDBD;
}
@media screen and (min-width: 768px), print {
  #history dl::before {
    left: 121rem;
  }
}
#history dl > div {
  display: grid;
  grid-template-columns: 120rem 1fr;
  gap: 16rem;
  position: relative;
}
@media screen and (min-width: 768px), print {
  #history dl > div {
    grid-template-columns: 130rem 1fr;
    gap: 24rem;
  }
}
#history dl > div:last-child::before {
  content: "";
  width: 10rem;
  height: 100%;
  background: #fafafa;
  position: absolute;
  top: 10rem;
  left: 106rem;
  display: block;
}
@media screen and (min-width: 768px), print {
  #history dl > div:last-child::before {
    left: 116rem;
  }
}
#history dl dt {
  margin: 0;
  padding: 0;
  position: relative;
}
#history dl dt::after {
  content: "";
  width: calc(8rem + 1px);
  aspect-ratio: 1;
  background-color: #191B39;
  position: absolute;
  z-index: 2;
  left: 107rem;
  top: 0.5em;
  border-radius: 100rem;
  transform-origin: center center;
}
@media screen and (min-width: 768px), print {
  #history dl dt::after {
    left: 117rem;
  }
}
#history dl dd {
  margin: 0;
  padding: 0;
}

/*-----------------------------------------------------------------------------------*/
#purpose .frame {
  display: grid;
  gap: 8rem;
}
@media screen and (min-width: 768px), print {
  #purpose .frame {
    grid-template-columns: repeat(2, 1fr);
  }
}
#purpose .corpprate-message {
  background: #191B39;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8rem;
  aspect-ratio: 1;
}
@media screen and (min-width: 768px), print {
  #purpose .corpprate-message {
    aspect-ratio: auto;
  }
}
#purpose .corpprate-message .catchcopy {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 80rem;
  color: #fff;
  line-height: 1.1;
}
@media screen and (min-width: 768px), print {
  #purpose .corpprate-message .catchcopy {
    font-size: 128rem;
  }
}
#purpose .corpprate-message .catchcopy span {
  color: #7c7c7c;
}
#purpose .text {
  border-radius: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24rem 16rem;
  border: 1px solid #191B39;
}
@media screen and (min-width: 768px), print {
  #purpose .text {
    padding: 64rem;
  }
}
#purpose .text h2 {
  font-size: 24rem;
  margin: 0 0 24rem;
}
@media screen and (min-width: 768px), print {
  #purpose .text h2 {
    font-size: 40rem;
  }
}
#purpose .text h2 span {
  color: #BDBDBD;
}
#purpose .text p {
  margin: 12rem 0 0;
}
#purpose .text p b span {
  color: #BDBDBD;
}

/*-----------------------------------------------------------------------------------*/
#recruit h2 {
  margin: 64rem 0 32rem;
  font-size: 32rem;
}
@media screen and (min-width: 768px), print {
  #recruit h2 {
    margin-top: 96rem;
    font-size: 40rem;
  }
}
#recruit .contact a {
  gap: 0;
}
#recruit .privacymark {
  margin-top: 0;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
@media screen and (min-width: 768px), print {
  #notfound {
    text-align: center;
  }
}
#notfound .btn {
  margin-top: 32rem;
}
@media screen and (min-width: 768px), print {
  #notfound .btn {
    margin-top: 32rem;
  }
}

/*-----------------------------------------------------------------------------------*/
#contact .lead,
#catalog .lead {
  margin-bottom: 40rem;
}
@media screen and (min-width: 768px), print {
  #contact .lead,
  #catalog .lead {
    text-align: center;
    margin-bottom: 64rem;
  }
}
#contact .form,
#catalog .form {
  background: #eee;
  height: 800rem;
  display: grid;
  place-content: center;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*//*# sourceMappingURL=common.css.map */