@charset "UTF-8";

/*---------------------------------------------
  共通
  ---------------------------------------------*/

html {
  overflow-x: hidden;
}

/* 基本フォントサイズ（PC）（新設） */

@media screen and (min-width: 1200px), print {
  html {
    font-size: max(1rem, .95svw);
  }
}


/* 基本フォントサイズ（SP）（上書き） */

@media screen and (max-width: 767px) {
  html {
    font-size: min(4.26666svw, var(--fontsize-sp));
  }
}


/* スクロールバー（新設） */

:root {--scrollbar-width: 0;}
.sb10 {--scrollbar-width: 10px;}
.sb11 {--scrollbar-width: 11px;}
.sb12 {--scrollbar-width: 12px;}
.sb13 {--scrollbar-width: 13px;}
.sb14 {--scrollbar-width: 14px;}
.sb15 {--scrollbar-width: 15px;}
.sb16 {--scrollbar-width: 16px;}
.sb17 {--scrollbar-width: 17px;}
.sb18 {--scrollbar-width: 18px;}
.sb19 {--scrollbar-width: 19px;}
.sb20 {--scrollbar-width: 20px;}
.sb21 {--scrollbar-width: 21px;}
.sb22 {--scrollbar-width: 22px;}
.sb23 {--scrollbar-width: 23px;}
.sb24 {--scrollbar-width: 24px;}
.sb25 {--scrollbar-width: 25px;}


/* スキップリンク */

.mod .skiplink {
  position: fixed;
  display: flex;
  width: 100%;
  height: 2.5rem;
  margin-top: -2.5rem;
  left: 0;
  background: var(--color-main);
  color: var(--color-white);
  font-size: var(--f14px);
  z-index: 1000;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  transition: transform .4s ease-in-out;
}
html:not(.sp) .mod .skiplink:hover {
  color: var(--color-white);
  text-decoration: underline;
}
.mod .skiplink:focus {
  transform: translate3d(0, 2.5rem, 0);
}


/* ナビゲーション（新設） */

.mod nav ul {
  margin: 0;
  line-height: 1;
}

.mod nav ul li {
  margin: 0;
  padding: 0;
}
.mod nav ul li:before {
  content: none;
}

.mod nav ul li a {
  text-decoration: none;
  line-height: 1.4;
}


/* レイアウト（新設） */

.col1-1 {
  width: 100%;
}

.inline-block {
  display: inline-block;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

@media screen and (min-width: 768px), print {

  .sticky {
    position: sticky;
    top: calc(var(--fixed-header-height-pc) + 2rem);
    left: 0;
  }

  .mod .content:has(.sticky),
  .mod .content.bg-img:has(.sticky) {
    overflow: visible;
  }
  
  .mod .pc-mt0 {margin-top: 0 !important;}
  .mod .pc-mb0 {margin-bottom: 0 !important;}
  .mod .pc-ml0 {margin-left: 0 !important;}
  .mod .pc-mr0 {margin-right: 0 !important;}
  .mod .pc-pt0 {padding-top: 0 !important;}
  .mod .pc-pb0 {padding-bottom: 0 !important;}
  .mod .pc-pl0 {padding-left: 0 !important;}
  .mod .pc-pr0 {padding-right: 0 !important;}


  /* FireFox バグフィックス */
  
  .mod .col-set:not(.no-gutter):not(.gutter1) {
    flex-wrap: nowrap;
  }

}



/*---------------------------------------------
  ヘッダー（新設）
  ---------------------------------------------*/

header {
  display: flex;
  min-height: var(--fixed-header-height-pc);
  padding: .5rem 2.083333svw;
  font-size: var(--f14px);
  line-height: 1.4;
  background-color: rgba(255, 255, 255, .5);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: min(1.8rem, 2svw);
  -webkit-backdrop-filter: blur(min(1.875rem, 2.083333svw));
  backdrop-filter: blur(min(1.875rem, 2.083333svw));
  transition: transform .4s ease-in-out;
}
.skiplink:focus + header {
  transform: translate3d(0, 2.5rem, 0) !important;
}
.header-show header {
  transition: transform .4s ease-in-out !important; 
}

.header-logo a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  text-decoration: none;
}

.mod .logo {
  position: relative;
  display: flex;
  margin: 0;
  align-items: center;
}
.logo:before {
  content: "";
  position: absolute;
  display: block;
  width: 1px;
  height: 100%;
  top: 0;
  left: 9.5rem;
  background-color: var(--color-black);
}

.logo-bank {
  width: 8.875rem;
}

.logo-group {
  width: 6.75rem;
  margin: 0 0 0 1.25rem;
}

.mod .site-title {
  margin: 0 0 0 1.6666svw;
  color: var(--color-txt);
  font-weight: 500;
  text-decoration: none;
}

@media screen and (max-width: 1439px) {

  .header-logo .site-title {width: 6.7rem;}
  
}

@media screen and (min-width: 768px) and (max-width: 1299px), print {

  .header-nav li:nth-of-type(1) a {width: 5rem;}
  .header-nav li:nth-of-type(2) a {width: 4.7rem;}
  .header-nav li:nth-of-type(3) a {width: 3.6rem;}
  .header-nav li:nth-of-type(4) a {width: 3.4rem;}
  
}

@media screen and (min-width: 768px), print {

  .header-nav {
    display: flex;
    align-items: center;
    gap: 2svw;
  }

  .header-nav ul {
    display: flex !important;
    align-items: center;
    gap: 1.5svw;
  }

  .mod .header-nav li a {
    color: var(--color-txt);
    text-align: center;
  }

  html:not(.sp) .mod .header-nav li a:hover span,
  html:not(.sp) .mod .header-nav li a:focus span {
    color: var(--color-txt);
  }
  .mod .header-nav li.current a span {
    color: var(--color-main) !important;
  }

  .mod .btn-entry {
    width: auto !important;
    margin: 0;
  }

  .mod .btn-entry a {
    min-width: 0;
    min-height: 3.125rem;
    margin: 0;
    padding: 0;
  }
  
  .mod .btn-entry a span {
    padding: 0 3svw 0 1.5svw;
  }
  .mod .btn-entry a span:after {
    width: 1rem;
    height: 1rem;
    top: .25rem;
  }

}

@media screen and (max-width: 767px) {

  header {
    display: block;
    min-height: 0;
    padding: 0;
    -webkit-backdrop-filter: blur(1.875rem);
    backdrop-filter: blur(1.875rem);
    transition: transform .4s ease-in-out; 
  }
  .is-scrolling-down header {
    transform: translate3d(0, -100%, 0) !important;
  }

  .header-logo {
    position: absolute;
    z-index: 1;
    width: 11.5rem;
    top: .75rem;
    left: 4svw;
  }

  .header-logo .logo:before {
    height: 24px;
    left: 6.4375rem;
  }
  
  .header-logo .logo-bank {
    width: 6rem;
    min-height: 24px;
  }

  .header-logo .logo-group {
    width: 4.625rem;
    min-height: 24px;
    margin: 0 0 0 .875rem;
  }

  .header-logo .site-title {
    width: 100%;
    min-height: 24px;
    margin: 0;
    padding: .5rem 0 0 1.5rem;
    font-size: var(--f10px);
  }

  .header-nav {
    width: 100%;
    padding: var(--fixed-header-height-sp) 0 0;
    font-size: var(--f16px);
  }

  .mod .header-nav ul {
    display: none;
    max-height: calc(100svh - var(--fixed-header-height-sp));
    padding: 0 2.6666svw 1.875rem;
    overflow: auto;
  }

  .mod .header-nav li a {
    display: block;
    padding: 1.25rem 4svw;
    color: var(--color-black);
    text-decoration: none;
    border-bottom: solid 1px rgba(40,42,43,.15);
  }

  .mod .header-nav li.current a span {
    color: var(--color-main);
  }

  .sp-btn-entry {
    position: absolute;
    display: block;
    width: 3.75rem;
    height: 3.125rem;
    top: .625rem;
    right: calc(2.6666svw + 3.75rem);
    margin: 0 !important;
    line-height: var(--lineheight-subtext);
    background-color: var(--color-main);
    border-radius: var(--radius-button) 0 0 var(--radius-button);
  }

  .sp-btn-entry a {
    display: block;
    font-size: var(--f10px);
    color: var(--color-white) !important;
    text-decoration: none;
  }

  .sp-btn-entry a span {
    display: block;
    height: 100%;
    padding: 2rem 0 0;
    text-align: center;
  }
  .sp-btn-entry span:after {
    content: "";
    position: absolute;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    top: .425rem;
    left: 50%;
    translate: -50% 0;
    mask-image: url(../images/icon_entry.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--color-white);
  }


  /* メニューボタン */

  .mod #btn-menu {
    position: absolute;
    width: 3.75rem;
    height: 3.125rem;
    top: .625rem;
    right: 2.6666svw;
    margin: 0;
    background-color: transparent;
    overflow: visible;
    transition: none;
  }
  html:not(.sp) .mod #btn-menu:hover {
    background-color: transparent;
  }

  .mod #btn-menu button {
    padding: 1.775rem 0 0;
    text-indent: 0;
    font-size: var(--f10px);
    color: var(--color-white);
    background-color: var(--color-main);
    border-left: solid 1px rgba(255, 255, 255, .2);
    border-radius: 0 var(--radius-button) var(--radius-button) 0;
  }

  .mod #btn-menu button:before {
    top: 1.2125rem;
    right: 1.3125rem;
    background-color: var(--color-white);
  }
  .mod #btn-menu button:after {
    top: 1.65rem;
    right: 1.3125rem;
    background-color: var(--color-white);
  }
  .mod #btn-menu:after {
    top: .775rem;
    right: 1.3125rem;
    background-color: var(--color-white);
  }
  .mod #btn-menu.on button:before {
    right: 1.875rem;
  }
  .mod #btn-menu.on button:after {
    top: 1.2125rem;
  }
  .mod #btn-menu.on:after {
    top: 1.2125rem;
  }

}


/*---------------------------------------------
  コンテンツエリア
  ---------------------------------------------*/

/* レイアウト（上書き） */

main {
  padding: 0 2.083333svw;
}

.mod .row {
  max-width: none;
  height: 100%;
  padding: 0 4.861111svw;
}

section {
  overflow: visible;
}


/* ページタイトル（新設） */

.page-title {
  padding: 5.625rem 0 0; 
}

.page-title .content {
  padding-bottom: 2.5rem !important;
}

.page-title hgroup {
  min-height: max(16rem, 18svw);
  overflow: hidden;
}
.page-title:has(.img) hgroup {
  min-height: max(26rem, 25svw);
}

.mod .page-title .txt-en {
  margin: 0 0 .125rem;
}

.page-title h1 {
  margin: 0 0 1rem;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.6;
}

.mod .page-title .heading {
  margin: 0 0 2rem;
}

.page-title .txt-sub {
  line-height: 1.6;
  color: var(--color-note);
}

.page-title .img {
  min-height: 32.5rem;
  margin-bottom: 0;
}

.mod .page-title p {
  margin: 0 0 1rem;
}

.mod .page-title .lead {
  font-size: var(--f20px);
  font-weight: 500;
}

@media screen and (min-width: 768px) {
  .mod .page-title .h2-en {
    font-size: min(7.8svw, 6.5rem);
  }
}



/* パンくずリスト（上書き） */

.mod .breadcrumb ol {
  margin: 0;
  line-height: 1.4;
  font-size: var(--f12px);
}

.mod .breadcrumb ol li {
  margin: 0 !important;
  font-weight: 500;
  color: var(--color-black);
  vertical-align: middle;
}
.breadcrumb li:not(:last-child):after {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .75rem;
  margin: 0 .8em;
  background-image: url(../images/icon_breadcrumb.svg);
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: middle;
}

.mod .breadcrumb ol li a {
  display: inline-block;
  min-height: 24px;
  text-decoration: none;
  font-weight: 400;
  color: var(--color-note);
  vertical-align: middle;
}


/* テキスト（上書き） */

body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  letter-spacing: .03em;
  counter-reset: number 0; 
}

.txt-en {
  text-transform: uppercase;
  letter-spacing: 0;
}

.mod .copy {
  font-size: 3rem;
  font-weight: 500;
  color: var(--color-black);
}


/* 見出し（新設） */

.mod h2:not([class*=heading]),
.mod .heading1 {
  margin: 0 0 1.25rem;
  font-weight: 600;
}

.mod h3:not([class*=heading]),
.mod .heading2 {
  margin: 4.375rem 0 1.25rem;
  color: var(--color-black);
  font-weight: 600;
}

.mod h3:not([class*=heading]):after,
.mod .heading2:after {
  content: "";
  display: block;
  width: 1.875rem;
  height: .125rem;
  margin: .625rem 0 0;
  background-color: var(--color-main);
}

.mod h4:not([class*=heading]),
.mod .heading3 {
  color: var(--color-black);
  position: relative;
  margin: 2.5rem 0 1.25rem;
  font-weight: 600;
}

.mod h5:not([class*=heading]),
.mod .heading4 {
  position: relative;
  margin: 1.875rem 0 1.25rem;
  color: var(--color-black);
  font-weight: 600;
}

.mod h6:not([class*=heading]),
.mod .heading5 {
  position: relative;
  margin: 1.875rem 0 1rem;
  color: var(--color-black);
  font-weight: 600;
}

.mod .txt-white h3:not([class*=heading]):after,
.mod .txt-white h4:not([class*=heading]):after,
.mod .txt-white h5:not([class*=heading]):after,
.mod .txt-white h6:not([class*=heading]):after,
.mod .txt-white .heading3:after,
.mod .txt-white .heading4:after,
.mod .txt-white .heading5:after,
.mod .txt-white .heading6:after,
.mod .txt-white ul li:before {
  background-color: var(--color-white);
}
.mod .txt-white h4:not([class*=heading]) {
  border-bottom-color: color-mix(in srgb, var(--color-white) 20%, transparent);
}


/* 画像（上書き） */

.img {
  border-radius: var(--radius-panel-pc);
  overflow: hidden;
}
.img img {
  border-radius: var(--radius-panel-pc);
}

.img.cover {
  position: relative;
  height: 100%;
}

.img.cover img,
.content.img.cover img {
  position: absolute;
  width: 100%;
  height: 100% !important;
  top: 0;
  left: 0;
  object-fit: cover;
}

.mod .content.img.cover {
  min-height: max(37.5rem, 40svw);
}

.mod .content.img + .content {
  padding-top: 6.25rem !important;
}


/* コンテンツエリア（上書き） */

.mod .content {
  position: relative;
  border-radius: var(--radius-box-pc);
}
.mod .content.bg-img {
  height: 100%;
  padding-top: 4.375rem;
  padding-bottom: 4.375rem;
  overflow: hidden;
}
.content + .content,
.content + .col-set,
.col-set + .content,
.page-title + .content,
.page-title + .col-set {
  margin: var(--col-space-wide-gutter1) 0 0;
}


/* カラム（上書き） */

.mod .col-set.gutter1 {
  row-gap: var(--col-space-wide-gutter1);
}


/* 画像＋テキスト（上書き） */

.mod .thumb-set .img {
  margin-right: 2.7777svw;
  padding-right: 0;
}

.mod .thumb-set img {
  border-radius: 50%;
}


/* リンクエフェクト（新設） */

@media screen and (min-width: 768px), print {

  [data-txt] {
    position: relative;
    display: inline-block;
    min-height: 24px;
    text-decoration: none;
    overflow: hidden;
  }

  [data-txt] span {
    display: flex;
    min-height: 24px;
    align-items: center;
  }
  html:not(.sp) a[data-txt]:hover span,
  html:not(.sp) a[data-txt]:focus span,
  html:not(.sp) a:hover [data-txt] span,
  html:not(.sp) a:focus [data-txt] span {
    color: inherit;
    opacity: 0;
    transition: transform .4s ease-out, opacity .4s linear;
    transform: translate3d(0, -100%, 0);
  }

  [data-txt]:after {
    content: attr(data-txt);
    display: flex;
    min-height: 24px;
    color: var(--color-main);
    opacity: 0;
    align-items: center;
  }
  html:not(.sp) a[data-txt]:hover:after,
  html:not(.sp) a[data-txt]:focus:after,
  html:not(.sp) a:hover [data-txt]:after,
  html:not(.sp) a:focus [data-txt]:after {
    opacity: 1;
    transition: transform .4s ease-out, opacity .4s linear;
    transform: translate3d(0, -100%, 0);
  }

  /* ページ内リンク*/
  main [data-txt][href^="#"]:not([href="#"]) span {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
  main [data-txt][href^="#"]:not([href="#"]):after {
    transform: translate3d(0, -100%, 0);
    opacity: 1;
  }
  main [data-txt][href^="#"]:not([href="#"]):hover span,
  main [data-txt][href^="#"]:not([href="#"]):focus span {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  main [data-txt][href^="#"]:not([href="#"]):hover:after,
  main [data-txt][href^="#"]:not([href="#"]):focus:after {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }

}

@media screen and (max-width: 767px) {

  a[data-txt] {
    height: auto !important;
  }

}


/* ボタン（上書き） */

.mod .btn {
  width: 100%;
}

.btn-set {
  width: 100%;
}

.mod .btn-set .btn + .btn {
  margin-top: var(--col-space-wide-gutter1);
}

.mod .btn > * {
  position: relative;
  display: flex !important;
  min-width: min(17.5rem, 100%);
  min-height: 4.375rem;
  text-align: left;
  align-items: center;
  font-size: var(--f15px);
  transition: none;
  overflow: hidden;
}
html:not(.sp) .mod .btn > *:hover {
  opacity: 1;
}
.mod .btn > *:not(.ghost):before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: background-color .3s linear;
}
html:not(.sp) .mod .btn > *:not(.ghost):hover:before,
html:not(.sp) .mod .btn > *:not(.ghost):focus:before {
  background-color: rgba(0, 0, 0, .2);
}

.mod .btn span {
  position: relative;
  width: 100%;
  padding: 0 2.75rem 0 1.5rem;
}
.mod .btn span:after {
  width: 1.5rem;
  height: 1.5rem;
  right: .75rem;
  transition: none;
}
html:not(.sp) .mod .btn > *:not([class*="icon-"]):hover span:after,
html:not(.sp) .mod .btn > *:not([class*="icon-"]):focus span:after {
  transform: none;
  animation: link-icon .4s ease-out;
}

.mod .btn a:has(i) span:after {
  content: none;
}
.mod .btn a[target="_blank"] i {
  right: .75rem;
}
.mod .btn a[target="_blank"] i:after {
  background-color: var(--color-white);
}


/* ラベル（上書き） */

.mod .label span {
  position: relative;
  padding: .4375rem 0;
  font-size: var(--f14px);
  font-weight: 500;
  color: var(--color-main) !important;
  line-height: 1.6;
  background-color: transparent;
}
.mod .label span[class*="icon-"] {
  padding-left: 1.5rem;
}
.mod .label span:before {
  content: "";
  position: absolute;
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  top: calc(50% - .5625rem);
  left: 0;
  background-repeat: no-repeat;
  background-size: contain;
}
.mod .label span.icon-engineer:before {
  background-image: url(../images/job_icon_engineer.svg);
}
.mod .label span.icon-planner:before {
  background-image: url(../images/job_icon_planner.svg);
}
.mod .label span.icon-designer:before {
  background-image: url(../images/job_icon_designer.svg);
}


/* パネル（上書き） */

.mod .panel-covered {
  min-height: max(25svw, 26.25rem);
  overflow: visible;
}
.mod .gutter1.col-set:not(.no-gutter) .panel-covered {
  margin-bottom: 0;
}

.mod .panel-covered:before,
.mod .panel-covered > a:before {
  content: none;
}

.mod .panel-covered .img{
  margin: 0;
}

.mod .panel-vertical .label span,
.mod .panel-horizontal .label span,
.mod .panel-covered .label span {
  font-size: var(--f14px);
}

.mod .img > a:after,
.mod a .img:after,
.mod .panel-horizontal > a:after,
.mod .panel-covered .txt:not(.bottom):before {
  content: none;
}

.mod .img > a img,
.mod .img > a .bg-img,
.mod a .img img,
.mod a .img .bg-img {
	transition: transform .4s ease-out;
}
html:not(.sp) .mod .img > a:hover img, 
html:not(.sp) .mod .img > a:hover .bg-img, 
html:not(.sp) .mod a:hover .img img, 
html:not(.sp) .mod a:hover .img .bg-img,
html:not(.sp) .mod .img > a:focus img, 
html:not(.sp) .mod .img > a:focus .bg-img, 
html:not(.sp) .mod a:focus .img img, 
html:not(.sp) .mod a:focus .img .bg-img {
  transform: scale(1.07);
}


/* 画像上＋テキスト下パネル（上書き） */

.mod .panel-vertical {
  background-color: transparent;
}

.mod .panel-vertical > a {
  height: 100%;
  background-color: rgba(255, 255, 255, .7);
  border-radius: var(--radius-panel-pc) var(--radius-panel-pc);
  transition: background-color .3s linear;
}
html:not(.sp) .mod .panel-vertical > a:hover,
html:not(.sp) .mod .panel-vertical > a:focus {
  background-color: rgba(255, 255, 255, 1);
}

.mod .panel-vertical .img {
  display: block;
  border-radius: var(--radius-panel-pc) var(--radius-panel-pc) 0 0;
}

.mod .panel-vertical .img img {
  border-radius: 0;
}

.mod .panel-vertical .txt {
  padding: 1.875rem min(2.5rem, 2.7777svw) .625rem;
}
.mod .panel-vertical > a .txt {
  padding-bottom: 3.125rem;
}

.mod .panel-vertical .txt > * {
  position: relative;
}

.mod .panel-vertical .heading {
  font-weight: 500;
}

.mod .panel-vertical p:not(.link-icon) {
  color: var(--color-note);
}

.mod .panel-vertical > .label,
.mod .panel-vertical > a > .label {
  position: absolute;
  z-index: 1;
  top: auto;
  bottom: 1.25rem;
  left: min(2.5rem, 2.7777svw);
  margin: 0;
}


/* 画像左＋テキスト右パネル（上書き） */

.mod .panel-horizontal {
  min-height: max(25svw, 26.25rem);
  background-color: transparent;
  overflow: visible;
}

.mod .panel-horizontal .img {
  border-radius: var(--radius-panel-pc) 0 0 var(--radius-panel-pc);
}

.mod .panel-horizontal .img img {
  border-radius: 0;
}

.mod .panel-horizontal .txt {
  padding: 3.125rem calc(2.75rem + 3svw) 3.125rem 4.861111svw;
  border-radius: 0 var(--radius-panel-pc) var(--radius-panel-pc) 0;
}

.mod .panel-horizontal .h2-en,
.mod .panel-horizontal .h3-en {
  line-height: .9;
  color: var(--color-black);
}

.mod .panel-horizontal .txt .heading {
  color: var(--color-main);
  font-size: var(--f28px);
  font-weight: 500;
}

.mod .panel-horizontal .txt > p {
  margin-bottom: 0;
  line-height: 2;
}

.mod .panel-horizontal a .txt:has(i):after {
  content: none;
}
.mod .panel-horizontal a[target="_blank"] i {
  margin: 0;
  right: calc(1.5svw + .625rem);
}
.panel-horizontal a[target="_blank"] i:after {
  background-color: var(--color-main);
}


/* 画像パネル（上書き） */

.mod .panel-covered * {
  color: var(--color-txt) !important;
}

.mod .panel-covered .txt {
    width: 100%;
    padding: 2.5rem min(3.125rem, 3.472222svw) .625rem;
}

.mod .panel-covered .heading {
    font-weight: 500;
}


/* ボックス（上書き） */

.mod .box {
  padding: var(--elm-space-wide) 2.7777svw 0;
}
.mod .content.bg-img .box {
  background-color: rgba(255, 255, 255, .7);
}
.mod .gutter1 .box {
  margin-bottom: 0;
}


/* 画像リンクアイコン（新設） */

:not([class*="panel"]) > a:has(i:not(.sr-only)) {
  position: relative;
  padding: 0 1.625rem 0 0;
  text-decoration: none;
  display: inline-block;
}

a i {
  position: absolute;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  top: calc(50% - .6875rem);
  right: 0;
}

a i img {
  width: 100%;
  max-width: none;
}

main a[href^="#"]:not([href="#"]) i {
  rotate: 90deg;
}

html:not(.sp) main a[href^="#"]:not([href="#"]):hover i,
html:not(.sp) main a[href^="#"]:not([href="#"]):focus i {
  animation: link-icon .4s ease-out;
}


/* リンクアイコン大（新設＋上書き） */

.mod .panel-covered > a .txt:before,
.mod .panel-vertical > a:before,
.mod .panel-horizontal > a .txt:before,
.panel-link > a:before,
.btn-cta > a:before {
  content: "" !important;
  position: absolute;
  display: block;
  width: 2.75rem !important;
  height: 2.75rem !important;
  right: 1.5svw;
  border: solid 1px rgba(0, 71, 143, .3);
  border-radius: 100%;
}
.mod .panel-covered > a .txt:after,
.mod .panel-vertical > a:after,
.mod .panel-horizontal > a .txt:after,
.panel-link > a:after,
.btn-cta > a:after,
a[target="_blank"] i:after {
  content: "";
  position: absolute;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  right: calc(1.5svw + .625rem);
  mask-image: url(../images/icon_link.svg);
  background-color: var(--color-main);
}
.mod .panel-covered > a .txt:before {
  top: auto !important;
  left: auto !important;
  bottom: 1.25rem;
  background-color: var(--color-main) !important;
  border: 0 none;
}
.mod .panel-vertical > a:before {
  z-index: 1;
  top: auto;
  bottom: 1.25rem;
  left: auto;
  background-color: transparent !important;
  opacity: 1 !important;
  transition: none;
}
.mod .panel-covered > a .txt:after {
  bottom: 1.875rem;
  background-color: var(--color-white);
}
.mod .panel-vertical > a:after {
  bottom: 1.875rem;
}
.mod .panel-horizontal > a .txt:before,
.panel-link a:before,
.btn-cta a:before {
  top: calc(50% - 1.375rem);
}
.mod .panel-horizontal > a .txt:after,
.panel-link a:after,
.btn-cta a:after {
  top: calc(50% - .75rem);
}
a[target="_blank"] i:after {
  top: -18%;
  right: -16%;
  rotate: -45deg;
  scale: .6;
}

html:not(.sp) .mod .panel-covered > a:hover .txt:not(.bottom):after,
html:not(.sp) .mod .panel-vertical > a:hover:after,
html:not(.sp) .mod .panel-horizontal > a:hover .txt:after,
html:not(.sp) .panel-link a:hover:after,
html:not(.sp) .btn-cta a:hover:after,
html:not(.sp) a:hover i:after,
html:not(.sp) .mod .panel-covered > a:focus .txt:not(.bottom):after,
html:not(.sp) .mod .panel-vertical > a:focus:after,
html:not(.sp) .mod .panel-horizontal > a:focus .txt:after,
html:not(.sp) .panel-link a:focus:after,
html:not(.sp) .btn-cta a:focus:after,
html:not(.sp) a:focus i:after {
  animation: link-icon .4s ease-out;
}
@keyframes link-icon {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 0;
    transform: translate3d(.625rem, 0, 0);
  }
  50.00001% {
    opacity: 0;
    transform: translate3d(-.625rem, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


/* 社員から見たパネル（新設＋上書き） */

.mod .panel-view .img {
  padding: 2.5rem min(2.5rem, 2.7777svw) 0;
}

.mod .panel-view .img img {
  width: 5.625rem;
  height: 5.625rem;
  margin: 0 0 0 auto;
  border-radius: 100%;
}

.mod .panel-view {
  background-color: rgba(255, 255, 255, .7);
}

.mod .panel-view .txt {
  margin: 0;
}
.mod .panel-view .txt:before {
  background-color: transparent;
}


/* コンテンツパネル（新設） */

.content-set {
  position: relative;
  padding: 11.25rem 0 0;
  background-image: url(../images/bg_dot_01.webp);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: auto 11.25rem;
}
.content-set:before,
.content-set:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 11.25rem;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: auto 11.25rem;
}
.content-set:before {
  background-image: url(../images/bg_dot_02.webp);
  opacity: .3;
}
.content-set:after  {
  background-image: url(../images/bg_dot_03.webp);
  opacity: .6;
}
.content-set.show:before {animation: bg-dot1 5s linear;}
@keyframes bg-dot1 {
  0%   {opacity: .3;}
  10%  {opacity: 0;}
  20%  {opacity: 1;}
  30%  {opacity: 1;}
  40%  {opacity: 0;}
  50%  {opacity: 0;}
  60%  {opacity: 1;}
  70%  {opacity: 1;}
  80%  {opacity: 0;}
  90%  {opacity: 0;}
  100% {opacity: .3;}
}

.content-set.show:after  {animation: bg-dot2 5s linear;}
@keyframes bg-dot2 {
  0%   {opacity: .6;}
  10%  {opacity: 1;}
  20%  {opacity: 1;}
  30%  {opacity: 0;}
  40%  {opacity: 0;}
  50%  {opacity: 1;}
  60%  {opacity: 1;}
  70%  {opacity: 0;}
  80%  {opacity: 0;}
  90%  {opacity: 1;}
  100% {opacity: .6;}
}

.txt-set {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  align-content: space-between;
}

.txt-set .txt {
  width: 100%;
}

.mod .h3-sub {
  margin: 0 0 .625rem;
  color: var(--color-main);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
}

.mod .h1-en,
.mod .h2-en,
.mod .h3-en,
.mod .h4-en {
  margin: 0 0 .5rem;
  line-height: .9 !important;
  color: var(--color-black);
}
.mod .h1-en {
  font-size: 7.5rem;
}
.mod .h2-en {
  font-size: 6.5rem;
}
.mod .h3-en {
  font-size: 5rem;
}
.mod .h4-en {
  font-size: 3.75rem;
}

.h1-en ~ .heading,
.h2-en ~ .heading,
.h3-en ~ .heading,
.h4-en ~ .heading {
  margin: 0 0 1.25rem;
  color: var(--color-main);
  font-size: var(--f28px);
  font-weight: 500;
  line-height: 1.6;
}
.h3-en ~ .heading,
.h4-en ~ .heading  {
  font-size: var(--f24px);
}

.mod .txt-set .btn a {
  margin: 0;
}


/* リンクパネル（新設） */

.panel-link {
  display: flex;
  height: 100%;
  align-items: center;
  flex-wrap: wrap;
}
#jobs .panel-link {
  display: block;
}

.panel-link a {
  position: relative;
  display: block;
  width: 100%;
  padding: 2.5rem calc(2.75rem + 3svw) 2.5rem min(3.125rem, 3.472222svw);
  color: var(--color-txt);
  text-decoration: none;
  background-color: rgba(255, 255, 255, .7);
  border-radius: var(--radius-box-pc);
  transition: background-color .3s linear;
}
#jobs .panel-link a {
  min-height: 13.4375rem;
}
html:not(.sp) .panel-link a:hover,
html:not(.sp) .panel-link a:focus {
  background-color: rgba(255, 255, 255, 1);
}
.panel-link a + a {
  margin: var(--col-space-wide-gutter1) 0 0;
}

.panel-link a:has(i):after {
  content: none;
}
.panel-link a[target="_blank"] i {
  right: calc(1.5svw + .625rem);
}
.panel-link a[target="_blank"] i:after {
  background-color: var(--color-main);
}

.panel-link hgroup {
  margin: 0 0 .625rem;
  display: flex;
  justify-content: space-between;
}

.panel-link .heading {
  margin: 0;
  color: var(--color-txt);
  font-size: var(--f20px);
  font-weight: 500;
  line-height: 1.6;
}
#job .panel-link .heading {
  font-size: var(--f24px);
}

.mod .panel-link .label {
  margin: 0;
}

.mod .panel-link .label span {
  margin: 0;
}

.mod .panel-link p {
  margin: 0;
  color: var(--color-txt);
  line-height: 1.8;
}


/* 数字で見るパネル（新設） */

.mod .panel-data {
  position: relative;
  height: 100%;
  padding: 3.125rem min(3.125rem, 3.472222svw);
  border-radius: var(--radius-box-pc);
}
#top .mod .panel-data {
  min-height: 31.25rem;
}

.panel-data .icon {
  width: 5.625rem;
  margin: 0 0 1rem auto;
  background-color: rgba(255, 255, 255, .7);
  border-radius: 100%;
}

.panel-data .icon img {
  width: 100%;
}

.panel-data .heading {
  display: flex;
  min-height: 3.2em;
  font-size: var(--f24px);
  font-weight: 500;
  color: var(--color-main);
  line-height: 1.6;
  align-items: center;
}
.panel-data:has(.chart) .heading {
  position: absolute;
  min-height: 0;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  text-align: center;
}

.panel-data p {
  margin: 0;
  line-height: 1.8;
}

.panel-data .data {
  display: flex;
  margin: .75rem 0;
  font-size: var(--f28px);
  font-weight: 500;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .625rem;
}

.panel-data .inline-block {
  display: inline-flex;
  gap: .625rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.panel-data .data .txt-en {
  font-size: 6.25rem;
  font-weight: 400;
  text-transform: none;
}

.panel-data .chart {
  position: relative;
  display: flex;
  width: min(100%, 24rem);
  height: calc(100% - 6.25rem);
  margin-inline: auto;
  align-items: center;
}

.panel-data .chart-inner {
  position: absolute;
  width: 80%;
  padding: 0 0 2%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.panel-data .chart .img {
  margin: 0;
}

.panel-data .chart .img img {
  width: 100%;
  max-width: none;
}

.panel-data .chart canvas {
  width: 100%;
}


/* 横並びリンク（上書き） */

.mod .link-horizontal-set {
  position: relative;
  z-index: 1;
  padding-top: 2rem;
  padding-bottom: 1.5rem;
}
.mod .link-horizontal-set.bg-img {
  padding-top: 2rem;
  padding-bottom: 1.5rem;
  background-position: top;
  background-size: 100% 500%;
}

.mod .link-horizontal {
  margin: 0;
}

.mod .link-horizontal a {
  min-height: 24px;
  margin: 0 1.5rem .5rem 0;
}
.mod .link-horizontal a:last-child {
  margin-right: 0;
}
html:not(.sp) .mod .link-horizontal a:hover {
  text-decoration: none;
}

.mod .link-horizontal a:not(:last-child):before {
  content: none;
}


/* 選考フロー・FAQ（新設） */

.mod .list-process {
  position: relative;
  margin: 0 0 2.5rem;
  overflow: visible;
}
.mod .list-process:last-of-type {
  margin: 0;
}
.mod .list-process:not(:last-of-type):after {
  content: "";
  position: absolute;
  display: block;
  width: 3.75rem;
  height: 2.5rem;
  bottom: -2.5rem;
  left: 50%;
  translate: -50% 0;
  background-color: var(--color-light-gray);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.mod .list-process dl,
.mod .list-faq dl {
  line-height: 1.8;
}
.mod .list-process dl {
  margin: 0 0 .5rem;
}

.mod .list-process dt,
.mod .list-faq dt {
  width: 5rem;
  padding: 0 0 .625rem;
  font-size: var(--f20px);
  color: var(--color-main);
}
.mod .list-faq dt {
  width: 2.5rem;
}

.mod .list-process dd {
  width: calc(100% - 5rem);
  padding: 0 0 .625rem;
}
.mod .list-faq dd {
  width: calc(100% - 2.5rem);
  padding: 0 0 .625rem;
}
.mod .list-process dl:not(.border-set) dt:last-of-type,
.mod .list-process dl:not(.border-set) dd:last-of-type,
.mod .list-faq dl:not(.border-set) dt:last-of-type,
.mod .list-faq dl:not(.border-set) dd:last-of-type {
    padding-bottom: 0;
}

.mod .list-process dd,
.mod .list-faq dd:first-of-type {
  font-size: var(--f20px);
  font-weight: 600;
}

.mod .list-process p {
  line-height: 1.8;
}


/* コンバージョンボタン（新設） */

.btn-cta {
  background-color: var(--color-light-gray);
  border-radius: var(--radius-box-pc);
}

.btn-cta a {
  position: relative;
  display: flex;
  min-height: 15rem;
  padding: 1.5rem calc(2.75rem + 3svw) 1rem 3.125rem !important;
  color: var(--color-txt);
  text-decoration: none;
  border-radius: var(--radius-box-pc);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  transition: background-color .3s linear;
}
html:not(.sp) .mod .btn-cta a:hover,
html:not(.sp) .mod .btn-cta a:focus {
  color: var(--color-txt);
  background-color: rgba(0, 0, 0, .05);
}
.btn-cta.bg-main a {
  color: var(--color-white);
}
html:not(.sp) .mod .btn-cta.bg-main a:hover,
html:not(.sp) .mod .btn-cta.bg-main a:focus {
  color: var(--color-white);
  background-color: rgba(0, 0, 0, .2);
}
.btn-cta.bg-main a:before {
  border: solid 1px rgba(255, 255, 255, .5);
}
.btn-cta.bg-main a:after {
  background-color: var(--color-white);
}

.btn-cta a:has(i):after {
  content: none;
}
.btn-cta a[target="_blank"] i {
  right: calc(1.5svw + .625rem);
}
.btn-cta a[target="_blank"] i:after {
  background-color: var(--color-main);
}
.btn-cta.bg-main a[target="_blank"] i:after {
  background-color: var(--color-white);
}

.mod .btn-cta p {
  margin: 0 0 .5rem;
  text-align: center;
  line-height: 1.6;
}
.btn-cta.bg-main p {
  color: var(--color-white) !important;
}

.mod .btn-cta .heading {
  font-size: var(--f24px);
}


/* スライダー（上書き） */

.mod #view,
.mod #people .content,
.mod #people-detail .content {
  padding-bottom: 5rem;
}

.mod .slider {
  margin: 0;
}

.mod #view .slider,
.mod #people .slider {
  width: 133.3333%;
}

.mod #people-detail .slider {
  width: 110%;
}

.slick-arrow {
  width: 2.75rem;
  height: 2.75rem;
  top: auto;
  bottom: -3.875rem;
  left: 75%;
  background-color: transparent;
  border-radius: 0;
}
.slick-arrow::before {
  content: none;
}
.slick-arrow:after {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -.75rem;
  background-color: var(--color-main);
}
.slick-prev {
  margin: 0 0 0 -7.75rem;
}
.slick-next {
  margin: 0 0 0 -4.6875rem;
}
@media screen and (min-width: 768px), print {
  #people-detail .slick-prev {
    left: auto;
    right: 5.0625rem;
    margin: 0;
  }
  #people-detail .slick-next {
    left: auto;
    right: 2rem;
    margin: 0;
  }
}
.slick-prev:after {
  transform: none;
  rotate: 180deg;
}
.slick-next:after {
  right: .4375rem;
}
html:not(.sp) .slick-prev:hover:after,
html:not(.sp) .slick-next:hover:after,
html:not(.sp) .slick-prev:focus:after,
html:not(.sp) .slick-next:focus:after {
  transform: none;
  animation: link-icon .4s ease-out;
}

.mod .img-slider {
  display: block;
  width: 100% !important;
  padding: 0; 
}

.img-slider .slick-list {
  border-radius: var(--radius-panel-pc);
}

.mod .img-slider .img,
.mod .img-slider .img img {
  border-radius: 0;
}

.img-slider .slick-dots {
  position: relative;
  display: flex;
  margin: var(--col-space-wide-gutter1) 0 0;
  padding: 0;
  bottom: 0;
  text-align: left;
  flex-wrap: wrap;
  gap: var(--col-space-wide-gutter1);
}

.img-slider .slick-dots li {
  width: calc(20% - var(--col-space-wide-gutter1) * (4 / 5));
  height: 0;
  margin: 0 !important;
  padding: calc(20% * (2 / 3)) 0 0 !important;
  background-color: #000 !important;
  border-radius: var(--radius-panel-pc);
}
@-moz-document url-prefix() {
  .img-slider .slick-dots li {
    width: calc(20% - var(--col-space-wide-gutter1) * (4 / 4.9));
  }
}

.img-slider .slick-dots li button {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--radius-panel-pc);
  opacity: .5;
  transition: opacity .3s linear;
}
html:not(.sp) .img-slider .slick-dots li button:hover,
html:not(.sp) .img-slider .slick-dots li button:focus,
.img-slider .slick-dots .slick-active button {
  opacity: 1;
}


/* 停止ボタン（新設） */

.btn-pause {
  position: absolute;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  top: 0;
  right: 0;
  padding: 0;
  border: 0 none;
  background-color: var(--color-white);
  cursor: pointer;
  appearance: none;
  border-radius: 0 0 0 .625rem;
}
.btn-pause:before,
.btn-pause:after {
  content: "";
  position: absolute;
  display: block;
  width: .625rem;
  height: .625rem;
  background-image: url(../images/bg_round.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}
.btn-pause:before {
  top: 0;
  left: -.625rem;
}
.btn-pause:after {
  bottom: -.625rem;
  right: 0;
}

.btn-pause img {
  width: 100%;
}


/* ティッカー（新設） */

.ticker {
  display: flex;
  height: 100%;
  overflow: hidden;
  align-items: center;
  white-space: nowrap;
}

.ticker .ticker-inner {
  display: inline-flex;
  will-change: transform;
}

@media screen and (min-width: 768px), print {
  .sp-ticker .ticker-inner {
    transform: translate3d(0, 0, 0) !important;
  }

  .sp-ticker .ticker-inner > * + * {
    display: none;
  }
}


@media screen and (max-width: 767px) {

  /* レイアウト（上書き） */

  main {
    padding: 0 2.6666svw;
  }

  .mod .row {
    padding: 0 4svw;
  }


  /* ページタイトル（新設） */

  .page-title {
    padding: 4.375rem 0 0;
  }

  .page-title .content {
    padding-bottom: .75rem !important;
  }

  .page-title hgroup {
    min-height: 8rem;
  }
  .page-title hgroup + .breadcrumb {
    padding: 1rem 0 0;
  }
  .page-title:has(.lead) hgroup,
  .page-title:has(.img) hgroup {
    min-height: auto;
  }

  .mod .page-title .lead {
    margin: 0 0 .5rem;
    font-size: var(--f16px);
  }

  .mod .page-title [class*="col"] > p:last-of-type {
    margin: 0 0 2rem;
  }

  .mod .page-title .heading {
    margin: 0 0 1rem;
  }

  .page-title h1 {
    margin: 0 0 .5rem;
    font-size: 1.25rem;
  }
  
  .page-title .img {
    min-height: 72svw;
  }

 
  /* パンくずリスト（上書き） */

  .mod .breadcrumb ol {
    font-size: var(--f10px);
  }

  .mod .breadcrumb ol li {
    min-height: 24px;
  }

  .breadcrumb li:not(:last-child):after {
    vertical-align: baseline;
  }


  /* テキスト（上書き） */

  .mod .copy {
    font-size: var(--f28px);
  }


  /* 見出し（新設） */

  .mod h2:not([class*=heading]),
  .mod .heading1 {
    margin: 0 0 1rem;
  }

  .mod h3:not([class*=heading]),
  .mod .heading2 {
    margin: 4rem 0 1rem;
  }

  .mod h4:not([class*=heading]),
  .mod .heading3 {
    margin: 2rem 0 1rem;
  }

  .mod h5:not([class*=heading]),
  .mod .heading4 {
    margin: 1.5rem 0 1rem;
  }

  .mod h6:not([class*=heading]),
  .mod .heading5 {
    margin: 1.5rem 0 .875rem;
  }


  /* 画像（上書き） */

  .img {
    border-radius: var(--radius-panel-sp);
  }
  .img img {
    border-radius: var(--radius-panel-sp);
  }

  .mod .content.img.cover {
    min-height: 20rem;
  }

  .mod .content.img + .content {
    padding-top: var(--content-padding-top) !important;
  }


  /* コンテンツエリア（上書き） */

  .mod .content.bg-img {
    padding-top: var(--content-padding-top);
    padding-bottom: var(--content-padding-bottom);
  }


  /* ボタン（上書き） */

  .mod .btn > * {
    width: 100%;
    min-width: auto;
    min-height: 3.75rem;
    font-size: var(--f15px);
  }


  /* ラベル（上書き） */

  .mod .label span {
    padding: .375rem 0;
    font-size: var(--f12px) !important;
  }


  /* 画像上＋テキスト下パネル（上書き） */

  .mod .panel-vertical > a {
    border-radius: var(--radius-panel-sp);
  }

  .mod .panel-vertical .img {
    border-radius: var(--radius-panel-sp) var(--radius-panel-sp) 0 0;
  }

  .mod .panel-vertical .txt {
    padding: 1.25rem 4svw .3125rem;
  }
  .mod .panel-vertical > a .txt {
    padding-bottom: 3.125rem;
  }

  .mod .panel-vertical > .label,
  .mod .panel-vertical > a > .label {
    bottom: 1.5625rem;
    left: 4svw;
  }


  /* 画像左＋テキスト右パネル（上書き） */

  .mod .panel-horizontal {
    min-height: 0;
  }

  .mod .panel-horizontal .img {
    border-radius: var(--radius-panel-sp) var(--radius-panel-sp) 0 0;
  }

  .mod .panel-horizontal .txt {
    padding: var(--content-padding-top) 4svw 4.375rem;
    border-radius: 0 0 var(--radius-panel-sp) var(--radius-panel-sp);
  }

  .mod .panel-horizontal .txt .heading {
    font-size: var(--f18px);
  }

  .mod .panel-horizontal a[target="_blank"] i {
    right: calc(4svw + .625rem);
    top: auto;
    bottom: 1.5625rem;
  }


  /* 画像パネル（上書き） */

  .mod .panel-covered {
    min-height: 15rem;
  }

  .mod .panel-covered .txt {
      padding: 1.25rem 4svw .3125rem;
  }


  /* ボックス（上書き） */

  .mod .box {
    padding: 1.25rem 4svw 0;
  }


  /* リンクアイコン大（新設＋上書き） */

  .mod .panel-covered > a .txt:before,
  .mod .panel-vertical > a:before,
  .mod .panel-horizontal > a .txt:before,
  .panel-link a:before,
  .btn-cta a:before {
    right: 4svw;
  }
  .mod .panel-covered > a .txt:after,
  .mod .panel-vertical > a:after,
  .mod .panel-horizontal > a .txt:after,
  .panel-link a:after,
  .btn-cta a:after {
    right: calc(4svw + .625rem);
  }
  .mod .panel-covered > a .txt:before,
  .mod .panel-vertical > a:before,
  .mod .panel-horizontal > a .txt:before {
    top: auto;
    bottom: .9375rem;
  }
  .mod .panel-covered > a .txt:after,
  .mod .panel-vertical > a:after,
  .mod .panel-horizontal > a .txt:after {
    top: auto;
    bottom: 1.5625rem;
  }
  #jobs .panel-link a:before {
    top: auto;
    bottom: .9375rem;
  }
  #jobs .panel-link a:after {
    top: auto;
    bottom: 1.5625rem;
  }
  .panel-link a[target="_blank"] i {
    right: calc(4svw + .625rem);
  }
  #jobs .panel-link a[target="_blank"] i {
    top: auto;
    bottom: 1.5625rem;
  }


  /* 社員から見たパネル（新設＋上書き） */

  .mod .panel-view .img {
    padding: 1.25rem 4svw 0;
  }


  /* コンテンツパネル（新設） */

  .content-set {
    padding: 6.25rem 0 0;
    background-size: auto 6.25rem;
  }
  .content-set:before,
  .content-set:after {
    height: 6.25rem;
    background-size: auto 6.25rem;
  }

  .mod .content {
    border-radius: var(--radius-box-sp);
  }
  .mod .content:has(.txt-set .btn) {
    padding-bottom: 6.25rem;
  }

  .mod .h3-sub {
    margin: 0 0 .625rem;
  }

  .mod .h1-en {
    margin: 0 0 .625rem;
    font-size: 4rem !important;
  }
  .mod .h2-en {
    margin: 0 0 .625rem;
    font-size: 3.5rem !important;
  }
  .mod .h3-en {
    margin: 0 0 .625rem;
    font-size: 2.5rem !important;
  }
  .mod .h4-en {
    margin: 0 0 .625rem;
    font-size: 2.5rem !important;
  }

  .h1-en ~ .heading,
  .h2-en ~ .heading,
  .h3-en ~ .heading,
  .h4-en ~ .heading {
    margin: 0 0 1.25rem;
    font-size: var(--f18px);
  }

  .mod .txt-set .btn,
  .mod .txt-set .btn-set {
    position: absolute;
    bottom: 1.875rem;
    left: 0;
  }

  .mod .btn-set .btn {
    position: static;
  }

  .mod .txt-set .btn {
    padding: 0 4svw;
  }

  .mod .txt-set .btn a {
    margin: 0;
  }


  /* リンクパネル（新設） */

  .panel-link {
    display: block;
  }

  .panel-link a {
    padding: 1.25rem calc(2.75rem + 5svw) 1.25rem 4svw;
    border-radius: var(--radius-box-sp);
  }
  #jobs .panel-link a {
    min-height: auto;
    padding: 1.25rem 4svw 4.375rem;
  }

  .panel-link hgroup {
    margin: 0 0 .625rem;
  }

  .panel-link .heading {
    color: var(--color-txt);
    font-size: var(--f18px);
  }

  .mod .panel-link .label {
    position: absolute;
    bottom: 1.25rem;
    left: 4svw;
  }


  /* 数字で見るパネル（新設） */

  .mod .panel-data {
    padding: 1.25rem 4svw;
    border-radius: var(--radius-box-sp);
  }
  #top .mod .panel-data {
    min-height: auto;
  }

  .panel-data .icon {
    width: 3.375rem;
    margin: 0 0 .5rem auto;
  }

  .panel-data .heading {
    font-size: var(--f16px);
  }

  .panel-data .data {
    margin: .5rem 0;
    font-size: var(--f18px);
    font-weight: 500;
    gap: .25rem;
  }

  .panel-data .inline-block {
    gap: .25rem;
  }

  .panel-data .data .txt-en {
    font-size: 3.25rem;
  }

  .panel-data .chart {
    width: min(80%, 20rem);
    height: auto;
  }
  .sp-col1-2 .panel-data .chart {
    width: min(100%, 12rem);
    height: calc(100% - 2.5rem);
  }

  .panel-data .chart-inner {
    width: 65%;
  }

  .sp-col1-2 .panel-data .chart-inner {
    width: 100%;
  }


  /* 横並びリンク（上書き） */

  .mod .link-horizontal-set,
  .mod .link-horizontal-set.bg-img {
    padding-top: 1.25rem;
    padding-bottom: .75rem;
  }


  /* 選考フロー・FAQ（新設） */

  .mod .list-process {
    margin: 0 0 1.875rem;
  }
  .mod .list-process:last-of-type {
    margin: 0;
  }
  .mod .list-process:not(:last-of-type):after {
    width: 2.8125rem;
    height: 1.875rem;
    bottom: -1.875rem;
  }

  .mod .list-process dl,
  .mod .list-faq dl {
    display: flex;
  }

  .mod .list-process dt,
  .mod .list-faq dt {
    width: 4rem !important;
    padding-bottom: .3125rem !important;
    font-size: var(--f16px);
  }
  .mod .list-faq dt {
    width: 2rem !important;
  }

  .mod .list-process dd {
    width: calc(100% - 4rem) !important;
    padding-bottom: .3125rem !important;
  }
  .mod .list-faq dd {
    width: calc(100% - 2rem) !important;
    padding-bottom: .3125rem !important;
  }
  .mod .list-process:not(.border-set) dt,
  .mod .list-process:not(.border-set) dd,
  .mod .list-faq:not(.border-set) dt:last-of-type,
  .mod .list-faq:not(.border-set) dd:last-of-type {
      padding-bottom: 0 !important;
  }

  .mod .list-process dd,
  .mod .list-faq dd:first-of-type {
    font-size: var(--f16px);
  }

  .mod .list-faq dd:last-of-type {
    font-size: var(--f14px);
  }


  /* コンバージョンボタン（新設） */

  .btn-cta {
    border-radius: var(--radius-box-sp);
  }

  .btn-cta a {
    min-height: 7.5rem;
    padding: 1.5rem 3rem 1.25rem 2rem !important;
    border-radius: var(--radius-box-sp);
  }

  .btn-cta a[target="_blank"] i {
    right: calc(4svw + .625rem);
  }

  .mod .btn-cta p {
    margin: 0 0 .25rem;
    font-size: var(--f12px);
  }

  .mod .btn-cta .heading {
    font-size: var(--f16px);
  }


  /* スライダー（上書き） */

  .mod #view,
  .mod #people .content,
  .mod #people-detail .content {
    padding-bottom: 9.375rem;
  }

  .mod #people-detail .slider {
    width: 110%;
  }
  .mod #view .slider,
  .mod #people .slider {
    width: 100%;
  }
  .slick-arrow {
    bottom: -3.125rem;
    left: 100%;
  }
  .slick-prev {
    margin: 0 0 0 -6.5625rem;
  }
  .slick-next {
    margin: 0 0 0 -3.9375rem;
  }
  
  .img-slider .slick-list {
    border-radius: var(--radius-panel-sp);
  }

  .img-slider .slick-dots li {
    width: calc(25% - var(--col-space-wide-gutter1) * (3 / 4));
    padding: calc(25% * (2 / 3)) 0 0 !important;
    border-radius: var(--radius-panel-sp);
  }
  @-moz-document url-prefix() {
    .img-slider .slick-dots li {
      width: calc(25% - var(--col-space-wide-gutter1) * (3 / 3.9));
    }
  }

  .img-slider .slick-dots li button {
    border-radius: var(--radius-panel-sp);
  }


  /* 停止ボタン（新設） */

  .btn-pause {
    border-radius: 0 0 0 .5rem;
  }
  .btn-pause:before,
  .btn-pause:after {
    width: .5rem;
    height: .5rem;
  }
  .btn-pause:before {
    left: -.5rem;
  }
  .btn-pause:after {
    bottom: -.5rem;
  }


  /* ティッカー（新設） */

  .sp-ticker {
    display: flex;
    height: 100%;
    overflow: hidden;
    align-items: center;
    white-space: nowrap;
  }

  .sp-ticker .ticker-inner {
    display: inline-flex;
  }


  /* 画像拡大 */

  .img-enlarge.enlarge {
    overflow-x: scroll
  }

  .img-enlarge img {
    max-width: none;
    transition: width .5s ease-in-out;
  }
  .img-enlarge.enlarge img {
    width: 200% !important;
  }

  .btn-enlarge {
    margin: -.625rem 0 0;
    text-align: right;
    font-size: var(--f14px);
  }

  .btn-enlarge button {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    min-height: 24px;
    margin: 0;
    padding: 0;
    border: 0 none;
    background-color: transparent;
    cursor: pointer;
    appearance: none;
    color: var(--color-main);
  }
  .btn-enlarge button:after {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    margin: -.125rem 0 0 .125rem;
    mask-image: url(../images/icon_enlarge.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--color-main);
    vertical-align: middle;
  }
  .img-enlarge.enlarge + .btn-enlarge button:after {
    mask-image: url(../images/icon_small.svg);
  }

}



/*---------------------------------------------
  フッター（新設）
  ---------------------------------------------*/

footer {
  position: relative;
  margin: 0 2.083333svw;
  padding: 20.625rem 0 3.125rem;
  font-size: var(--f14px);
  line-height: 1.4;
  background-image: url(../images/footer_dot_01.webp);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: auto 20.625rem;
}
footer:before,
footer:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 20.625rem;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: auto 20.625rem;
}
footer:before {
  background-image: url(../images/footer_dot_02.webp);
  opacity: .3;
}
footer:after  {
  background-image: url(../images/footer_dot_03.webp);
  opacity: .6;
}
footer.show:before {animation: bg-dot1 5s linear;}
footer.show:after  {animation: bg-dot2 5s linear;}

footer .maincopy {
  margin: 0 -2.2%; 
  padding: 0 0 5rem;
  text-align: center;
}

footer .maincopy h1 {
  font-size: var(--f32px);
  line-height: 1;
}

footer .maincopy .txt-en {
  font-size: 12svw;
}

footer a[target="_blank"] i {
  opacity: .6;
}
footer a[target="_blank"] i:after {
  background-color: var(--color-black);
}

.footer-logo a {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  text-decoration: none;
}

.footer-logo .site-title {
  color: var(--color-note);
}

.footer-sns ul {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
}

.footer-sns ul li {
  width: 2rem;
}

.footer-sns img {
  width: 100%;
}

.footer-sitemap {
  padding: 3.125rem 0 4.375rem;
}

.footer-sitemap > ul {
  display: flex;
  gap: 2rem;
}

.footer-sitemap > ul > li {
  width: 100%;
}

.footer-sitemap > ul > li > p > a {
  color: var(--color-black);
  font-weight: 500;
  font-size: 1rem;
}

.footer-sitemap > ul > li > ul {
  padding: .8rem 0 0;
}
@media screen and (min-width: 768px), print {
  .footer-sitemap > ul > li > ul {
    display: block !important;
  }
}

.mod .footer-sitemap > ul > li > ul > li {
  padding: .8rem 0 0;
}

.footer-sitemap > ul > li > ul > li > a {
  color: var(--color-note);
}

.mod .sitemap-heading {
  position: relative;
  margin: 0;
}

.footer-nav ul {
  display: flex;
  width: 100%;
  gap: 1.5svw;
  flex-wrap: wrap;
}

.mod .footer-nav li a {
  min-height: 24px;
  color: var(--color-note);
}

.copyright {
  color: var(--color-note);
  text-align: right;
  letter-spacing: 0;
}


@media screen and (max-width: 767px) {

  footer {
    margin: 0 2.6666svw;
    padding: 11.5rem 0 5rem;
    background-size: auto 11.5rem;
  }
  footer:before,
  footer:after {
    height: 11.5rem;
    background-size: auto 11.5rem;
  }

  footer .maincopy {
    position: relative;
    margin: 0 -2.8%;
    padding: 0 0 2.5rem;
  }

  footer .maincopy .txt-en {
    padding: 0 1rem 0 0;
    font-size: 22svw;
    line-height: .8;
  }

  footer .btn-ticker {
    z-index: 1;
    top: -3.5rem;
    right: 2svw;
  }
  footer .btn-ticker:before,
  footer .btn-ticker:after {
    content: none;
  }

  .footer-logo {
    text-align: center;
    padding: 0 0 2rem;
  }

  .footer-logo a {
    display: inline-block; 
  }

  .footer-logo .logo {
    display: inline-flex;
    justify-content: center;
  }

  .mod .footer-logo .site-title {
    margin: 0 auto;
    padding: 1rem 0 0;
    font-size: var(--f12px);
  }

  .footer-sns ul {
    justify-content: center;
  }

  .footer-sitemap {
    padding: 2rem 0;
  }

  .footer-sitemap > ul {
    display: block;
    border-top: solid 1px rgba(40, 42, 43, .15);
  }

  .footer-sitemap > ul > li {
    border-bottom: solid 1px rgba(40, 42, 43, .15);
  }

  .footer-sitemap a {
    display: block;
  }

  .footer-sitemap > ul > li > p > a {
    width: calc(100% - 2.75rem);
    padding: 1.25rem 4svw;
    font-size: var(--f15px);
  }

  .footer-sitemap > ul > li > ul {
    display: none;
    padding: 0;
  }

  .mod .footer-sitemap > ul > li > ul > li {
    padding: 0;
    border-top: solid 1px rgba(40, 42, 43, .15);
  }

  .mod .footer-sitemap > ul > li > ul > li > a {
    padding: 1rem 2rem 1rem 1.625rem;
  }

  .mod .footer-sitemap a i {
    right: .625rem;
  }

  .btn-sitemap {
    position: absolute;
    display: block;
    width: 2.75rem;
    height: 100%;
    top: 0;
    right: 0;
    padding: 0;
    text-indent: -9999px;
    border: 0 none;
    background-color: transparent;
    cursor: pointer;
    appearance: none;
  }
  .btn-sitemap:before,
  .btn-sitemap:after {
    content: "";
    position: absolute;
    display: block;
    width: .875rem;
    height: .125rem;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background-color: var(--color-main);
    transition: rotate .4s ease-in-out;
  }
  .btn-sitemap:after {
    rotate: 90deg;
  }
  .btn-sitemap.is-open:after {
    rotate: 0deg;
  }

  .footer-nav {
    display: block;
  }

  .footer-nav ul {
    gap: .5rem 1.5rem;
    justify-content: center;
  }

  .footer-nav li a {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
  }

  .copyright {
    width: 100%;
    margin: 1.5625rem 0 0;
    text-align: center;
  }

}



/*---------------------------------------------
  トップページ
  ---------------------------------------------*/

/* メインビジュアル（新設） */

#mainvisual {
  position: relative;
  padding: calc(7.1875rem + var(--f32px) + 11svw) 0 0;
}

#mainvisual .maincopy {
  position: absolute;
  width: 104.4%;
  margin: 0 -2.2%;  
  top: 0;
  text-align: center;
  background-color: var(--color-white);
  overflow: hidden;
}

#mainvisual .maincopy h1 {
  position: absolute;
  width: 100%;
  left: 0;
  font-size: var(--f32px);
  line-height: 1;
}

.mod #mainvisual .maincopy .txt-en {
  position: absolute;
  width: 200%;
  left: -50%;
  top: calc(100% - 9.4svw);
  margin: 0;
  font-size: 11.9svw;
}

.mod #mv01 {
  margin: 0;
  padding: 0 0 10svw;
}

#mainvisual .stage {
  position: relative;
  padding: min(62.5rem, 60.3623%) 0 0;
}

.mod .mainmessage {
  position: relative;
  margin: -3rem 0 -2rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-image: url(../../images/top/bg_mainmessage.webp);
  background-repeat: no-repeat;
  background-size: 100% 200%;
  background-position-y: 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  will-change: background-position;
  transition: background-position .5s ease-out;
}
#top .mod .mainmessage {
  margin: -5rem 0 -2rem;
}

.mod .mainmessage .copy {
  margin: 3.125rem 0;
  line-height: 1.6;
}

.mod .mainmessage p {
  margin-bottom: 2.2em;
  line-height: 2.2;
  font-size: 1.375rem;
}
.mod .mainmessage p:last-child {
  margin-bottom: 0;
}

#mainvisual .txt-set {
  min-height: min(30.9027777svw, 33.375rem);
}


/* 技術スタック（新設） */

.mod .list-techstack {
  margin: 0;
  line-height: 1.4;
  letter-spacing: 0;
}

.mod .list-techstack li {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: var(--f16px);
  font-weight: 400;
  vertical-align: top;
}
.mod .list-techstack li:before {
  content: none;
}

.mod .list-techstack li li {
  width: 7.5rem;
  text-align: center;
}

.mod .list-techstack .heading {
  padding: 0 0 1rem 1.5em;
  font-size: var(--f20px);
  font-weight: 500;
  line-height: 1.6;
}

.mod .list-techstack li img {
  display: block;
  width: 100%;
  margin: 0 0 1.25rem;
}


/*  みなとみらい（新設） */

.mod #city .content {
  padding-bottom: calc(var(--content-padding-bottom) + 9.0625rem);
}

#city .txt-set {
  display: block;
  height: auto;
  padding-bottom: min(54rem, 50svw);
}

#city .txt-set .txt {
  position: relative;
  z-index: 1;
}

#city .btn-set {
  position: absolute;
  bottom: var(--content-padding-bottom);
  z-index: 1;
}


@media screen and (max-width: 767px) {

  /* メインビジュアル（新設） */

  #mainvisual {
    padding: calc(9.5rem + 34svw) 0 0;
  }

  #mainvisual .maincopy {
    width: 105.6%;
    margin: 0 -2.8%;
  }

  #mainvisual .maincopy h1 {
    font-size: var(--f20px);
    line-height: 1.5;
  }

  .mod #mainvisual .maincopy .txt-en {
    width: 105.3333%;
    margin: 0 -2.6666svw -1svw;
    left: 0;
    top: calc(100% - 34svw);
    font-size: 22svw;
    line-height: .8;
  }

  .mod #mainvisual .maincopy .txt-en .txt-fade-in-wrapper:first-of-type {
    margin: 0 -1rem 0 0;
  }

  .mod #mv01 {
    padding: 0 0 1.875rem;
  }

  #mainvisual .stage {
    padding: 30rem 0 0;
  }

  .mod .mainmessage .copy {
    margin: 1.875rem 0;
  }

  .mod .mainmessage p {
    margin-bottom: 2em;
    line-height: 2;
    font-size: 1rem;
  }

  #mainvisual .txt-set {
    min-height: auto;
  }

  #mainvisual .txt-set .txt{
    padding: 0 0 16.25rem;
  }


  /* リンクパネル（新設） */

  #jobs .panel-link {
    padding: 0 4svw 1.25rem;
  }


  /* 技術スタック（新設） */

  .mod .list-techstack li li {
    width: 6.875rem;
  }

  .mod .list-techstack .heading {
    font-size: var(--f18px);
    padding: 0 0 .3125rem 1.5em;
  }

  .mod .list-techstack li img {
    margin: 0 0 .625rem;
  }

  #techstack .ticker {
    padding: 0 0 1.25rem;
  }


  /*  みなとみらい（新設） */

  .mod #city .content {
    padding-bottom: 9.6875rem;
  }

  #city .txt-set {
    padding: 0 0 21.875rem;
  }

}



/*---------------------------------------------
  下層ページ
  ---------------------------------------------*/

/* リード文 */

  #lead {
    min-height: max(32rem, 32svw);
  }

  #lead .txt-num {
  font-size: 9.375rem;
  font-weight: 300;
  line-height: .9;
}


/* ある1日の仕事の流れ */

.panel-workflow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6svw;
  min-height: 7.25rem;
  padding: 1.875rem 2.083333svw;
  line-height: 1.8;
  background-color: rgba(255, 255, 255, .7);
  border-radius: var(--radius-box-pc);
}
.panel-workflow + .panel-workflow {
  margin: .3125rem 0 0;
}
.panel-workflow:before {
  content: "";
  position: absolute;
  display: block;
  width: 1px;
  height: 100%;
  top: 0;
  left: calc(7.25rem + 3svw + 2.083333svw);
  background-color: #c9d5e9;
}
.panel-workflow:after {
  content: "";
  position: absolute;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  top: 50%;
  left: calc(7.25rem + 3svw + 2.083333svw);
  translate: -50% -50%;
  background-color: var(--color-main);
  border: solid .3125rem #c9d5e9;
  border-radius: .625rem;
}
.panel-workflow:first-of-type:before {
  height: 50%;
  top: 50%;
}
.panel-workflow:last-of-type:before {
  height: 50%;
}

.mod .panel-workflow .txt {
  width: calc(100% - 7.25rem - 6vw);
  margin: 0;
}

.mod .panel-workflow .time {
  width: 7.25rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  text-align: right;
  color: var(--color-main);
  letter-spacing: 0;
}


/* 社員から見たボックス */

.mod .box-view {
  display: flex;
  gap: 2.7777svw;
  align-items: center;
  padding: 2.5rem 2.7777svw;
  background-color: rgba(255, 255, 255, .7);
  border-radius: var(--radius-box-pc);
}

.mod .box-view .img {
  width: 5.625rem;
  height: 5.625rem;
  margin: 0;
}
.mod .box-view .img img {
  border-radius: 100%;
}

.box-view .txt {
  width: calc(100% - 2.7777svw - 5.625rem);
  margin: 0;
  line-height: 1.6;
  font-weight: 500;
  font-size: 1.25rem;
}


/* 技術スタック */

.mod .table-techstack {
  border-top: solid 1px rgba(0, 0, 0, .1);
}
.mod hgroup + .table-techstack {
  margin: 2.5rem 0 1.25rem;
}

.mod .table-techstack > li {
  display: flex;
  padding: 1.875rem 0 0;
  border-bottom: solid 1px rgba(0, 0, 0, .1);
}

.mod .table-techstack .heading {
  position: relative;
  padding: 0 0 0 10%;
}
.mod .table-techstack .heading:before {
  counter-increment: number 1;
  content: "0" counter(number);
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
}

.mod .table-techstack > li > ul {
  margin: 0;
}

.mod .table-techstack > li > ul > li {
  margin: 0 0 1.875rem;
}

.mod .table-techstack > li > ul > li > p {
    margin-bottom: 0;
  }

@media screen and (max-width: 767px) {

  /* リード文 */

  #lead {
    min-height: 0;
  }

  #lead .txt-num {
    font-size: 5rem;
  }


  /* 技術スタック */

  .mod .table-techstack > li {
    display: block;
    padding: 1.5rem 0 0;
  }

  .mod .table-techstack .heading {
    padding: 0 0 1.25rem 3rem;
    font-size: var(--f16px);
  }
  .mod .table-techstack .heading:before {
    left: .5rem;
    font-size: var(--f18px);
  }

  .mod .table-techstack > li > ul > li {
    width: 4.875rem;
    margin: 0 0 1.5rem;
    font-size: var(--f14px);
  }


  /* ある1日の仕事の流れ */

  .panel-workflow {
    display: block;
    padding: 1.25rem 4svw 1.25rem calc(8svw + 1.25rem);
    border-radius: var(--radius-box-sp);
  }
  .panel-workflow:before,
  .panel-workflow:after {
    left: calc(4svw + .625rem);
  }
  .panel-workflow:first-of-type:before {
    height: calc(100% - 1.25rem);
    top: 1.25rem;
  }
  .panel-workflow:last-of-type:before {
    height: 1.25rem;
  }
  .panel-workflow:after {
    top: 1.25rem;
    translate: -50% 0;
  }

  .mod .panel-workflow .txt {
    width: auto;
  }

  .mod .panel-workflow .time {
    width: auto;
    margin: 0 0 1rem;
    text-align: left;
  }


  /* 社員から見たボックス */

  .mod .box-view {
    gap: 4svw;
    padding: 1.25rem 4svw;
    border-radius: var(--radius-box-sp);
  }

  .mod .box-view .img {
    width: 4rem;
    height: 4rem;
  }

  .box-view .txt {
    width: calc(100% - 4svw - 4rem);
    font-size: 1rem;
  }

}



/*---------------------------------------------
  ページトップボタン（上書き）
  ---------------------------------------------*/

.mod #btn-pagetop {
  position: absolute;
  z-index: 10000;
  width: 3rem;
  height: 3rem;
  right: 0;
  top: auto;
  bottom: 6rem;
  margin: 0;
  background-color: transparent;
  border-radius: 0;
  overflow: visible;
  transition: none;
}
html:not(.sp) .mod #btn-pagetop:hover {
  background-color: transparent;
}
.mod #btn-pagetop.show {
  transform: none;
}

.mod #btn-pagetop a {
  rotate: -90deg;
  text-indent: 0;
}
.mod #btn-pagetop a:before,
.mod #btn-pagetop a:after {
  content: none;
}
.mod #btn-pagetop a img {
  width: 3rem;
  height: 3rem;
}
html:not(.sp) .mod #btn-pagetop a:hover img,
html:not(.sp) .mod #btn-pagetop a:focus img {
  animation: link-icon .4s ease-out;
}

@media screen and (max-width: 767px) {

  .mod #btn-pagetop {
    bottom: 1.5rem;
  }
  .mod #btn-pagetop.show {
    transform: none;
  }

}


/*---------------------------------------------
  フェードインアニメーション（上書き）
  ---------------------------------------------*/

/* フェードイン（上書き） */

.mod .fadein.done {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 1.2s cubic-bezier(0, .6, .4, 1), transform 1.2s cubic-bezier(0, .6, .4, 1);
}


/* 縮小フェードイン（上書き） */

.mod .scale-fadein {
  display: block;
}

.mod .scale-fadein > a img,
.mod .scale-fadein > a .bg-img,
.mod a .scale-fadein img,
.mod a .scale-fadein .bg-img,
.mod .scale-fadein .bg-img {
  transform: scale(1.3);
  transition: transform 1.2s cubic-bezier(0, .6, .4, 1);
}
.mod .scale-fadein.done > a img,
.mod .scale-fadein.done > a .bg-img,
.mod a .scale-fadein.done img,
.mod a .scale-fadein.done .bg-img,
.mod .scale-fadein.done .bg-img {
  transform: scale(1);
}



/*---------------------------------------------
  テキストフェードインアニメーション
  ---------------------------------------------*/

.txt-fade-in {
  line-height: .9;
  opacity: 0;
}
.txt-fade-in.done {
  opacity: 1;
}

.txt-fade-in-wrapper {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.txt-fade-in-letter {
  display: inline-block;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
  transition: transform .8s cubic-bezier(0,.6,.4,1);
}
.txt-fade-in.done .txt-fade-in-letter {
  transform: translate3d(0, 0, 0);
}



/*---------------------------------------------
  for SP
  ---------------------------------------------*/

.spWebkit {
  overflow-y: hidden;
}

.spWebkit #wrapper {
  position: fixed;
  width: 100%;
  height: 100% !important;
  top: 0;
  left: 0;
  overflow-y: scroll;
}



/*---------------------------------------------
  オープニングアニメーション
  ---------------------------------------------*/

/* トップページ  */

#top #wrapper {
  height: 100svh;
  overflow: hidden;
}
.opening-end:not(.spWebkit) #top #wrapper {
  height: auto;
  overflow: visible;
}
.opening-end.spWebkit #top #wrapper {
  overflow-y: scroll;
}

#top header {
  transform: translate3d(0, -100%, 0);
}
.is-loaded #top header {
  transform: translate3d(0, 0, 0);
  transition: transform .8s cubic-bezier(0, 0.6, 0.4, 1) .4s;
}

#top #mainvisual .maincopy {
  z-index: 1;
  height: 100svh;
  transition: height 1.2s cubic-bezier(.7,0,.3,1), z-index 0s linear 1.2s;
}
.is-loaded #top #mainvisual .maincopy {
  z-index: 0;
  height: calc(7.1875rem + var(--f32px) + 11svw);
}
.opening-end #top #mainvisual .maincopy {
  transition: none;
}

#top #mainvisual .maincopy h1 {
  top: 42svh;
  transition: top 1.2s cubic-bezier(.7,0,.3,1);
}
.is-loaded #top #mainvisual .maincopy h1 {
  top: 7.5rem;
}
.opening-end #top #mainvisual .maincopy h1 {
  transition: none;
}

@media screen and (max-width: 767px) {

  .is-loaded #top #mainvisual .maincopy {
    height: calc(9.5rem + 34svw);
  }

  .is-loaded #top #mainvisual .maincopy h1 {
    top: 5rem;
  }

}


/* 全体  */

body:after {
  content:"";
  position: fixed;
  z-index: 10001;
  display: block;
  background-color: var(--color-white);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: opacity .7s linear;
}
body.loading:after {
  opacity: 0;
}
body.loaded:after {
  display: none !important;
}



/*---------------------------------------------
  背景画像
  ---------------------------------------------*/

.mod .img-fill {
  background-size: 100% 100%;
}

.bg-full-01 {background-image: url(../images/bg/bg_full_01.jpg);}
.bg-full-02 {background-image: url(../images/bg/bg_full_02.jpg);}
.bg-full-03 {background-image: url(../images/bg/bg_full_03.jpg);}
.bg-full-04 {background-image: url(../images/bg/bg_full_04.jpg);}
.bg-full-05 {background-image: url(../images/bg/bg_full_05.jpg);}
.bg-full-06 {background-image: url(../images/bg/bg_full_06.jpg);}

.bg-full-01x2 {background-image: url(../images/bg/bg_full_01x2.jpg);}
.bg-full-02x2 {background-image: url(../images/bg/bg_full_02x2.jpg);}
.bg-full-03x2 {background-image: url(../images/bg/bg_full_03x2.jpg);}

.bg-full-01x3 {background-image: url(../images/bg/bg_full_01x3.jpg);}

.bg-half-left-01 {background-image: url(../images/bg/bg_half_left_01.jpg);}
.bg-half-left-02 {background-image: url(../images/bg/bg_half_left_02.jpg);}
.bg-half-left-03 {background-image: url(../images/bg/bg_half_left_03.jpg);}
.bg-half-left-04 {background-image: url(../images/bg/bg_half_left_04.jpg);}
.bg-half-left-05 {background-image: url(../images/bg/bg_half_left_05.jpg);}
.bg-half-left-06 {background-image: url(../images/bg/bg_half_left_06.jpg);}

.bg-half-right-01 {background-image: url(../images/bg/bg_half_right_01.jpg);}
.bg-half-right-02 {background-image: url(../images/bg/bg_half_right_02.jpg);}
.bg-half-right-03 {background-image: url(../images/bg/bg_half_right_03.jpg);}
.bg-half-right-04 {background-image: url(../images/bg/bg_half_right_04.jpg);}
.bg-half-right-05 {background-image: url(../images/bg/bg_half_right_05.jpg);}
.bg-half-right-06 {background-image: url(../images/bg/bg_half_right_06.jpg);}

.bg-one-third-left-01 {background-image: url(../images/bg/bg_one-third_left_01.jpg);}
.bg-one-third-left-02 {background-image: url(../images/bg/bg_one-third_left_02.jpg);}
.bg-one-third-left-03 {background-image: url(../images/bg/bg_one-third_left_03.jpg);}
.bg-one-third-left-04 {background-image: url(../images/bg/bg_one-third_left_04.jpg);}

.bg-one-third-center-01 {background-image: url(../images/bg/bg_one-third_center_01.jpg);}
.bg-one-third-center-02 {background-image: url(../images/bg/bg_one-third_center_02.jpg);}
.bg-one-third-center-03 {background-image: url(../images/bg/bg_one-third_center_03.jpg);}
.bg-one-third-center-04 {background-image: url(../images/bg/bg_one-third_center_04.jpg);}

.bg-one-third-right-01 {background-image: url(../images/bg/bg_one-third_right_01.jpg);}
.bg-one-third-right-02 {background-image: url(../images/bg/bg_one-third_right_02.jpg);}
.bg-one-third-right-03 {background-image: url(../images/bg/bg_one-third_right_03.jpg);}
.bg-one-third-right-04 {background-image: url(../images/bg/bg_one-third_right_04.jpg);}

.bg-two-thirds-left-01 {background-image: url(../images/bg/bg_two-thirds_left_01.jpg);}

@media screen and (max-width: 767px) {

  .mod .img-fill {
    background-size: 200% 100%;
    background-position: center;
  }
  .mod .img-fill[class*="bg-half-left-"] {background-position: right;}
  .mod .img-fill[class*="bg-half-right-"] {background-position: left;}

  .sp-bg-full-01 {background-image: url(../images/bg/bg_full_01.jpg);}
  .sp-bg-full-02 {background-image: url(../images/bg/bg_full_02.jpg);}
  .sp-bg-full-03 {background-image: url(../images/bg/bg_full_03.jpg);}
  .sp-bg-full-04 {background-image: url(../images/bg/bg_full_04.jpg);}
  .sp-bg-full-05 {background-image: url(../images/bg/bg_full_05.jpg);}
  .sp-bg-full-06 {background-image: url(../images/bg/bg_full_06.jpg);}

  .sp-bg-full-01x2 {background-image: url(../images/bg/bg_full_01x2.jpg);}
  .sp-bg-full-02x2 {background-image: url(../images/bg/bg_full_02x2.jpg);}
  .sp-bg-full-03x2 {background-image: url(../images/bg/bg_full_03x2.jpg);}

  .sp-bg-full-01x3 {background-image: url(../images/bg/bg_full_01x3.jpg);}

  .sp-bg-half-left-01 {background-image: url(../images/bg/bg_half_left_01.jpg);}
  .sp-bg-half-left-02 {background-image: url(../images/bg/bg_half_left_02.jpg);}
  .sp-bg-half-left-03 {background-image: url(../images/bg/bg_half_left_03.jpg);}
  .sp-bg-half-left-04 {background-image: url(../images/bg/bg_half_left_04.jpg);}
  .sp-bg-half-left-05 {background-image: url(../images/bg/bg_half_left_05.jpg);}
  .sp-bg-half-left-06 {background-image: url(../images/bg/bg_half_left_06.jpg);}

  .sp-bg-half-right-01 {background-image: url(../images/bg/bg_half_right_01.jpg);}
  .sp-bg-half-right-02 {background-image: url(../images/bg/bg_half_right_02.jpg);}
  .sp-bg-half-right-03 {background-image: url(../images/bg/bg_half_right_03.jpg);}
  .sp-bg-half-right-04 {background-image: url(../images/bg/bg_half_right_04.jpg);}
  .sp-bg-half-right-05 {background-image: url(../images/bg/bg_half_right_05.jpg);}
  .sp-bg-half-right-06 {background-image: url(../images/bg/bg_half_right_06.jpg);}

}



/*---------------------------------------------
  Lenis 1.3.3
  ---------------------------------------------*/

html.lenis,html.lenis body{height:auto}.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-smooth iframe{pointer-events:none}.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}


/* テーブル */
.mod table .th-width {
  width: 200px;
}
@media screen and (max-width: 767px) {
  .mod table .th-width {
    width: 140px;
  }
}

/* リスト（上書き） */
.mod ul li:before {
  top: 1em;
}

/* 括弧数字付きリスト */
.mod ol.brackets-list {
  list-style: none;
  counter-reset: listCounter;
}
.mod ol.brackets-list li {
  position: relative;
  counter-increment: listCounter;
}
.mod ol.brackets-list li:before {
  content: "(" counter(listCounter) ")";
  position: absolute;
  left: -1.8em;
  top: 0;
  font: inherit;
}

/* 通常テキスト内のリンク */
.mod .txt > a {
  font-weight: 600;
}

/* 活躍する社員一覧 */
.mod .panel-txt-vertical {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.mod .panel-txt-vertical.txt .heading-wrapper .heading {
  font-weight: 600;
  font-size: var(--f32px);
  color: var(--color-black);
}
@media screen and (max-width: 767px) {
  .mod .panel-txt-vertical.txt .heading-wrapper .heading {
    font-size: var(--f20px);
  }
}
.mod .panel-txt-vertical.txt .heading-wrapper p:last-child {
  margin-bottom: 0;
}
.mod .panel-txt-vertical.txt .label {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .mod .panel-txt-vertical.txt .label {
    position: absolute;
    top: auto;
    bottom: 0.9375rem;
    left: 4svw;
  }
}

/* 活躍する社員詳細（更新） */
.mod .page-title .img-overlap {
  position: relative;
}
@media screen and (min-width: 768px) {
  .mod .page-title .img-overlap > .col-set {
    position: absolute;
    height: 100%;
    z-index: 2;
  }
  .mod .page-title .img-overlap > .col-set .col2-5 {
    -ms-flex-preferred-size: calc((100% - var(--col-space-wide) * 4) / 5 * 2 + var(--col-space-wide) * 2);
        flex-basis: calc((100% - var(--col-space-wide) * 4) / 5 * 2 + var(--col-space-wide) * 2);
    padding-block: 1.875rem;
    padding-left: 1.875em;
    min-width: 32rem;
    max-width: 37rem;
  }
  .mod .page-title .img-overlap > .col-set .col1-2 {
    -ms-flex-preferred-size: calc((100% - var(--col-space-wide) * 4) / 2 * 1 + var(--col-space-wide) * 2);
        flex-basis: calc((100% - var(--col-space-wide) * 4) / 2 * 1 + var(--col-space-wide) * 2);
    padding-block: 1.875rem;
    padding-left: 1.875em;
    min-width: 0;
    max-width: 45rem;
  }
  .mod .page-title .img-overlap > .col-set .col1-2 hgroup .h2-en {
    font-size: min(7svw, 6.5rem);
  }
  .mod .page-title .img-overlap > .col-set + .img.cover {
    min-height: 37.5rem;
  }
  .mod .page-title .img-overlap > .col-set + .img.cover > img {
    -o-object-position: center;
       object-position: center;
  }
  .mod .page-title .img-overlap hgroup {
    min-height: 25rem;
  }
  .mod .page-title .img-overlap hgroup h1.heading {
    font-size: var(--f32px);
  }
  .mod .page-title .img-overlap .bg-half-left-01 {
    position: relative;
    background-image: none;
    background-color: transparent;
  }
  .mod .page-title .img-overlap .bg-half-left-01:after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    backdrop-filter: blur(min(1.875rem, 2.083333svw));
    background-color: var(--color-white);
    background-image: url(../images/bg/bg-people-pagetitle-pc.png);
    opacity: 0.9;
  }
  .mod .page-title .img-overlap .bg-half-left-01 > .row {
    position: relative;
    z-index: 2;
  }
}
.mod .page-title .img-overlap hgroup .h2-en {
  -webkit-margin-after: 0.5rem;
          margin-block-end: 0.5rem;
}
.mod .page-title .img-overlap hgroup .txt {
  line-height: 1.8;
  font-size: 1.5rem;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  .mod .page-title .img-overlap hgroup .txt {
    font-size: 1rem;
  }
}

/* 想定するチーム構成 */
.mod .box-list .box-view {
  gap: 2.5rem;
}
@media screen and (max-width: 767px) {
  .mod .box-list .box-view {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
  }
}
.mod .box-list .box-view + .box-view {
  margin-top: 0.3125rem;
}
.mod .box-list .box-view .role {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  width: 10rem;
}
@media screen and (max-width: 767px) {
  .mod .box-list .box-view .role {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 4svw;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .mod .box-list .box-view .role .img {
    width: 5.625rem;
    height: 5.625rem;
  }
}
.mod .box-list .box-view .role .heading {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0;
}
@media screen and (max-width: 767px) {
  .mod .box-list .box-view .role .heading {
    width: calc(100% - 4svw - 5.625rem);
  }
}
.mod .box-list .box-view .txt {
  width: calc(100% - 12.5rem);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .mod .box-list .box-view .txt {
    width: 100%;
  }
}

/* 私たちの価値 */
.mod .panel-data.panel-data-sm {
  padding: 1.875rem 1.875rem 2.5rem 2.5rem;
  height: auto;
  margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
  .mod .panel-data.panel-data-sm {
    padding: 0.9375rem 0.9375rem 1.25rem;
    margin-block: 0 1.25rem;
  }
}
.mod .panel-data .head-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
}
.mod .panel-data .head-area .heading {
  width: calc(100% - 0.625rem - 5.625rem);
}
@media screen and (max-width: 767px) {
  .mod .panel-data .head-area .heading {
    width: calc(100% - 0.625rem - 3.375rem);
  }
}
.mod .panel-data .head-area .icon {
  margin: 0;
}
@media screen and (max-width: 767px) {
  .mod .panel-data .head-area .icon {
    width: 3.375rem;
    height: 3.375rem;
  }
}

/* 募集職種 */
.mod .no-gutter.list-job {
  row-gap: 0.3125rem;
  margin-bottom: 0;
}
.mod .no-gutter.list-job .box {
  margin-bottom: 0;
}
.mod .no-gutter.list-job .box .job-detail {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 0.625rem;
}
@media screen and (max-width: 767px) {
  .mod .no-gutter.list-job .box .job-detail {
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
  }
}
.mod .no-gutter.list-job .box .job-detail .heading {
  margin: 0 !important;
  padding: 0;
  background: none;
  font-size: var(--f24px);
}
@media screen and (max-width: 767px) {
  .mod .no-gutter.list-job .box .job-detail .heading {
    font-size: var(--f18px);
  }
}
.mod .no-gutter.list-job .box .job-detail .label {
  margin: 0;
}
@media screen and (max-width: 767px) {
  .mod .no-gutter.list-job .box .job-detail .label {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
.mod .no-gutter.list-job .box .job-detail .label span {
  margin: 0;
}
.mod .no-gutter.list-job .box .job-detail .txt {
  -ms-grid-column-span: 2;
  grid-column: span 2;
  margin-bottom: 0;
}
.mod .no-gutter.list-job .box .btn {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 2.125rem;
  margin-bottom: var(--elm-space-wide);
}
@media screen and (max-width: 767px) {
  .mod .no-gutter.list-job .box .btn {
    margin-top: 1rem;
    margin-bottom: 1.25rem;
  }
}
.mod .no-gutter.list-job .box .btn > * {
  margin: 0;
}
.mod .no-gutter.list-job .box .job-stop {
  margin-top: 0.625rem;
  color: #C7003A;
}

/* 社長メッセージ */
.mod .signature {
  display: -ms-grid;
  display: grid;
  row-gap: 1rem;
  padding: 2rem 0 0;
}
.mod .signature > p {
  margin-bottom: 0;
  text-align: right;
}
@media screen and (max-width: 767px) {
  .mod .signature .img img {
    width: 7.5rem;
  }
}

/* アジャイル開発 */
@media screen and (max-width: 767px) {
  .mod hgroup + p {
    margin-bottom: var(--elm-space-wide);
  }
}
.mod .person-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 0.3125rem minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 0.3125rem;
}
@media screen and (max-width: 767px) {
  .mod .person-list {
    row-gap: 1.5rem;
  }
}
.mod .person-list .person-item {
  margin: 0;
  padding: 0;
}
.mod .person-list .person-item:before {
  content: none;
}
.mod .person-list .person-item .img {
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .mod .person-list .person-item .img {
    margin-bottom: 0.625rem;
  }
}
.mod .person-list .person-item .heading {
  margin-bottom: 0.625rem;
  font-weight: 500;
  line-height: var(--lineheight-box-heading);
}
.mod .person-list .person-item .person-desc {
  margin-bottom: 0;
  line-height: var(--lineheight-subtext);
  color: var(--color-note);
}

/* 角丸なしの画像 */
.mod .img.img-table {
  border-radius: 0;
}
.mod .img.img-table img {
  border-radius: 0;
}

/* リンクパネル（募集職種） */
#jobs .panel-link:has(p:only-child) {
  display: grid;
  align-items: center;
}

.chart-box-list {
  margin-top: 0.3125rem;
  .chart-box-list-heading {
    margin-bottom: 2.4rem;
    font-weight: 600;
    font-size: var(--f24px);
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: var(--color-main);
    @media screen and (max-width: 767px) {
      font-size: var(--f15px);
      margin-bottom: 0.75rem;
    }
  }
  .chart-box-view {
    gap: 2.7777svw;
    padding: 2.5rem 2.7777svw;
    background-color: rgba(255, 255, 255, .7);
    border-radius: var(--radius-box-pc);
    @media screen and (max-width: 767px) {
      padding: 5.3svw 5.3svw;
    }
    .img {
      margin-bottom: 0;
    }
    + .chart-box-view {
      margin-top: 0.3125rem;
    }
    .chart {
      position: relative;
      display: flex;
      /* max-height: 300px; */
      margin-inline: auto;
      align-items: center;
      @media screen and (max-width: 767px) {
        max-height: none;
        height: 100%;
      }
    }
    .chart-js {
      width: 100%;
      height: 100%;
    }
    .chart.single {
      max-width: 30svw;
      @media screen and (max-width: 767px) {
        max-width: 22rem;
      }

      .chart-inner {
        width: 60%;
      }
    }
    .heading {
      position: absolute;
      min-height: 0;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      text-align: center;
      font-size: 8.4cqw;
      font-weight: 600;
      color: var(--color-main);
      line-height: 1.6;
      align-items: center;
      @media screen and (max-width: 767px) {
        top: 53%;
        font-size: 8.8cqw;
      }
      .large {
        font-size: 10cqw;
        @media screen and (max-width: 767px) {
            font-size: 10.4cqw;
        }
      }
    }
    .chart-inner {
      position: absolute;
      width: 100%;
      padding: 0 0 2%;
      top: 100%;
      left: 50%;
      translate: -50% -100%;
      container-type: inline-size;
      @media screen and (max-width: 767px) {
        top: 100%;
        translate: -50% -100%;
      }
      &.center {
        top: 54%;
        translate: -50% -50%;
      }
      &.pc80 {
        width: 80%;
        @media screen and (max-width: 767px) {
          width: 100%;
        }
      }
    }
  }
  .chart-box-col {
    display: flex;
    justify-content: center;
    gap: 13.7%;
    max-width: 42svw;
    margin-inline: auto;
    @media screen and (max-width: 767px) {
      gap: 12%;
      max-width: 22rem;
    }
    .chart-box {
      position: relative;
    }
    .chart-box:not(:first-child)::before {
      content: "";
      position: absolute;
      width: 2rem;
      height: 1.0625rem;
      top: 57%;
      left: -22%;
      transform: translateY(-50%);
      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAzMiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA5LjVMMCA3LjVMMjggNy41TDIyIDEuNUwyMy41IDBMMzIgOC41TDIzLjM4NjYgMTdMMjIgMTUuNUwyOCA5LjVMMCA5LjVaIiBmaWxsPSIjMDA0NzhGIi8+PC9zdmc+");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 1;
      @media screen and (max-width: 767px) {
          top: 72%;
          left: -20%;
          width: 1.0625rem;
          height: 0.6875rem;
        }
    }
  }
}
.acd {
  display: flex;
  flex-direction: column;
  gap: 5px;
  interpolate-size: allow-keywords;
  .acd-item {
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-box-pc);
    .acd-summary {
      position: relative;
      padding: 2.5rem 4svw 2.5rem 2.7svw;
      font-weight: 600;
      font-size: var(--f20px);
      line-height: 1.6;
      letter-spacing: 0.05em;
      color: var(--color-black);
      cursor: pointer;
      transition: all 0.3s;
      list-style: none;
      @media screen and (max-width: 767px) {
        padding: 5.33svw 12svw 5.33svw 5.33svw;
        font-size: var(--f16px);
      }
      &::-webkit-details-marker {
        display: none;
      }
      &::marker {
        content: none;
      }
      &:hover {
        color: var(--color-link-hover);
      }
      &::before,&::after {
        content: "";
        position: absolute;
        width: 14px;
        height: 2px;
        background: var(--color-main);
        top: 50%;
        right: 29px;
        transform: translateY(-50%)perspective(0);
        transition: all 0.3s;
        transform-origin: center;
        @media screen and (max-width: 767px) {
          right: 21px;
        }
      }
      &::after {
        transform: translateY(-50%)rotate(90deg)perspective(0);
      }
    }
    .acd-content {
      font-size: var(--f16px);
      padding: 0 2.7777svw 0;
      line-height: 1.6;
      overflow: clip;
      height: 0px;
      letter-spacing: 0.05em;
      transition:
        height 400ms ease,
        all 400ms ease,
        content-visibility 400ms ease allow-discrete;
        transition-behavior: allow-discrete;
        @media screen and (max-width: 767px) {
          padding: 0 12svw 0 5.33svw;
          font-size: var(--f14px);
        }
    }
    &::details-content {
      content-visibility: auto;
    }
  }
  .acd-item[open] {
    .acd-summary {
      &::after {
        transform: translateY(-50%)perspective(0);
      }
    }
    .acd-content {
      padding: 0 2.7777svw 2.5rem;
      height: auto;
      @media screen and (max-width: 767px) {
        padding: 0 12svw 1.5rem 5.33svw;
      }
    }
  }
  .acd-content-list {
    margin-bottom: 0;
    li {
      background: #fff;
      padding: 16px 24px;
      border-radius: 8px;
      margin-bottom: 5px;
      @media screen and (max-width: 767px) {
        padding: 1.866svw 3.73svw;
      }
      &::before {
        content: none;
      }
    }
  }
}