@charset "utf-8";
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* * Basic information:
* * - CSS guideline : FLOCSS
* *
* * Order of discription:
* * - Foundation [ reset / base ]
* * - Layout [ header / main / side / footer ]
* * - Object [ component / project / utility ]
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /

/****************************
  base
*****************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

:root {
  --paddingSection: 80px;
  --paddingLR: 90px;
  --paddingTB: 60px;
  --color_blue: #003894;
  --color_red: #DE1708;
  --color_lblue_bg: #F5F7FA;
  --color_gray_bg: #F6F6F6;
  --color_white: #ffffff;
  --color_white_bg: #ffffff;
  --color_border: #D8D8D8;
  --border_radius: 100px;
}
@media screen and (max-width: 959px) {
  :root {
    --paddingSection: 40px;
    --border_radius: 10px;
  }
}

body {
  background-color: #F6F6F6;
  font-size: 16px;
  font-family: "Noto Sans JP","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.6;
  color: #222222;
  min-width: 1200px;
  padding-top: 100px;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

select {
  font-size: 14px;
  background-color: #fff;
  height: 26px;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a img:hover {
  opacity: .75;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

a:hover, a:active, a:focus {
  text-decoration: inherit;
}

a:hover {
  opacity: 1.0;
}

a[href]:hover {
  opacity: .8;
}

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

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* skip */
.skip {
  width: 1px;
  color: #000000;
  font-size: 0.1%;
  line-height: 0.1;
  background-color: #FFFFFF;
  position: absolute;
  left: -3000px;
  z-index: 30000;
}
a.skip {
  background-color: #FFFFFF;
  /* 変更しない */
  text-align: center;
  /* 変更しない */
  padding: 2px 0;
  /* 変更しない */
  top: auto;
  /* 変更しない */
}
a.skip:active {
  display: block;
  width: 99.99%;
  /* 変更しない */
  font-size: 100%;
  /* 変更しない */
  line-height: 1.6;
  /* 変更しない */
  top: 0;
  /* 変更しない */
  left: 0;
  /* 変更しない */
}
a.skip:focus {
  display: block;
  width: 99.99%;
  /* 変更しない */
  font-size: 100%;
  /* 変更しない */
  line-height: 1.6;
  /* 変更しない */
  top: 0;
  /* 変更しない */
  left: 0;
  /* 変更しない */
}

.din-bo {
  font-family: "din-2014", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.din-de {
  font-family: "din-2014", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.zen-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-medium {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-bold {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.zen-black {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-style: normal;
}

/* ==========================================================================
Layout [ header / main / side / footer... ]
========================================================================== */
#loading{
  position:fixed;
  inset:0;
  background:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
}

.logo{
  position:relative;
  width: 182px;
  height: 67px;
  display: block;
}

/* 画像共通 */
.logo img{
  width:100%;
  display:block;
}

/* 青 */
.blue{
  position:absolute;
  left:0;
  top:0;
  width: 42px;
  height: 67px;
  animation:blueMove 1.6s cubic-bezier(.4,0,.2,1) forwards;
}

/* 赤上 */
.red1{
  position:absolute;
  left: 60px;
  top: 15px;
  width: 122px;
  height: 26px;;
  animation:red1Move 1.6s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:0.1s;
}

/* 赤下 */
.red2{
  position:absolute;
  left: 60px;
  top: 49px;
  width: 122px;
  height: 18px;
  animation:red2Move 1.6s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:0.1s;
}

@keyframes blueMove{
  0%{
    transform:translate(0,0);
    opacity:1;
  }
  100%{
    transform:translateY(-160px);
    opacity:0;
  }
}

@keyframes red1Move{
  0%{
    transform:translate(0,0);
    opacity:1;
  }
  100%{
    transform:translate(160px,-100px);
    opacity:0;
  }
}

@keyframes red2Move{
  0%{
    transform:translate(0,0);
    opacity:1;
  }
  100%{
    transform:translate(160px,100px);
    opacity:0;
  }
}
/* Header
---------------------------------------------------------------*/
#header {
  width: 100%;
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  height: 100px;
  padding-top: 16px;
  padding-left: 110px;
  padding-right: 80px;
  box-sizing: border-box;
}

.l-header-btn {
  position: absolute;
  right: 152px;
  top: 28px;
  display: flex;
  gap: 20px;
}

.l-header-btn a {
  display: inline-block;
  width: 180px;
  height: 44px;
  line-height: 44px;
  border-radius: 200px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
}

.l-header-btn a.l-header-btn__entry {
  color: var(--color_red);
  border: 1px solid var(--color_red);
}

.l-header-btn a.l-header-btn__punf {
  color: var(--color_white);
  background: var(--color_blue);
  border: 1px solid var(--color_blue);
}

/*hamburger menu*/
.menu {
  display: block;
  position: absolute;
  width: 60px;
  z-index: 30;
  height: 60px;
  top: 10px;
  right: 40px;
  background: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

.menu span {
  position: absolute;
  left: 15px;
  width: 27px;
  height: 2px;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  background-color: #222222;
}
.menu span:nth-of-type(1) {
  top: 22px;
}
.menu span:nth-of-type(2) {
  top: 30px;
}
.menu span:nth-of-type(3) {
  bottom: 19px;
}
.menu.active span:nth-of-type(1) {
  -webkit-transform: translateY(13px) rotate(-35deg);
  transform: translateY(3px) rotate(-35deg);
  top: 27px;
}
.menu.active span:nth-of-type(2) {
  opacity: 0;
}
.menu.active span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(35deg);
  transform: translateY(-10px) rotate(35deg);
  bottom: 18px;
}
.menu.is-show span {
  background-color: var(--color_blue);
}
.menu p {
  position: absolute;
  bottom: 0;
  font-size: 0.750rem;
  left: 0;
  right: 0;
}

/*nav*/
.l-header-nav {
  position: fixed;
  top: 120px;
  right: 0px;
  width: 375px; /* メニュー幅 */
  height: calc(100% - 60px);
  background-color: var(--color_blue);
  z-index: 1000;
  height: auto;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  z-index: 2;
  overflow-y: auto;
  padding: 28px 20px 30px;
  box-sizing: border-box;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);

  /* 初期状態：右に隠す */
  transform: translateX(100%);
  transition: transform 0.3s ease;

  /* 表示制御用 */
  pointer-events: none;
  box-sizing: border-box;
}

/* 開いた状態 */
.l-header-nav.active {
  transform: translateX(0);
  pointer-events: auto;
  right: 0px;
}

.l-header-nav li.l-header-nav__items a {
  padding-bottom: 14px;
  padding-top: 14px;
  border-bottom: 1px dashed #fff;
  font-size: 0.750rem;
  font-weight: 700;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  color: #fff;
}

.sp-navi {
  display: flex;
  gap: 18px;
  margin-top: 20px;
}

.sp-navi a {
  display: inline-block;
  width: 159px;
  font-weight: 700;
  text-align: center;
  border-radius: 200px;
  padding: 9px 10px;
  font-size: 0.875rem;
  box-sizing: border-box;
}

.sp-navi a.sp-entry-btn {
  color: var(--color_white);
  background-color: var(--color_red);
}

.sp-navi a.sp-punf-btn {
  color: var(--color_blue);
  background-color: var(--color_white);
}

/* Main
---------------------------------------------------------------*/
.l-wrapper {
  overflow: hidden;
  width: 100%;
}


/* Footer
---------------------------------------------------------------*/
.l-footer {
  background-color: var(--color_blue);
  padding: 38px 0;
  margin-top: 242px;
  position: relative;
}

.l-footer:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1024px;
  height: 177px;
  top: -177px;
  background: url(../images/l-footer-bg.png);
  background-repeat: no-repeat;
}

.l-footer-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
}

.l-footer-info {
  margin-left: auto;
}

.l-footer-info__items {
  display: flex;
  gap: 38px;
}

.l-footer-info__items .inf p {
  font-size: 0.875rem;
  color: var(--color_white);
}

.l-footer-info__items .tell a {
  font-size: 0.875rem;
  color: var(--color_white);
  padding-left: 31px;
  background: url(../images/ico-tell-white.svg) no-repeat left center;
  background-size: 16px auto;
}

.l-footer-info__items .tell p {
  display: block;
  color: #fff;
  font-size: 0.750rem;
  margin-left: 30px;
}

.l-footer-info__items .mail a {
  font-size: 0.875rem;
  color: var(--color_white);
  padding-left: 31px;
  background: url(../images/ico-mail-white.svg) no-repeat left center;
  background-size: 16px auto;
}

.l-footer-info__items .link a {
  color: #fff;
  font-size: 0.875rem;
}

.l-footer-info__items a:hover {
  text-decoration: underline;
}

.copyright {
  text-align: center;
  color: var(--color_white);
  font-size: 0.750rem;
  margin-top: 45px;
}

.l-footer-logo p {
  color: #fff;
  margin-top: 12px;
  font-size: 0.875rem;
}

/*pagetop*/

.pagetop{
  position:fixed;
  right:20px;
  bottom:40px;
  z-index:100;
  opacity:0;
  visibility:hidden;
  transition:.3s;
}

.pagetop.show{
  opacity:1;
  visibility:visible;
}

.pagetop img{
  width: 155px;
  height:auto;
  display:block;
}
/* ==========================================================================
Project [ articles / ranking / promo... ]
========================================================================== */

/* メインビジュアル */
.mv {
  height: 625px;
  position: relative;
  padding-top: 50px;
  box-sizing: border-box;
}

.mv-catch {
  text-align: center;
}

.mv-catch .txt01 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--color_red);
}

.mv-catch .txt02 {
  font-size: 4.125rem;
  font-weight: 700;
  color: var(--color_blue);
  line-height: 1;
}


.mv__bg {
  position: absolute;
  top: 0%;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}

.mv__bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14596px; /* 6400 × 2 */
  height: 100%;
  background: url(../images/bg_mv.png) repeat-x left bottom;
  background-size: 6400px 625px;
  animation: homeMvBgAnimPc 60s linear infinite;
}

@keyframes homeMvBgAnimPc {
  from {
    transform: translateX(-6400px);
  }
  to {
    transform: translateX(0);
  }
}

.mv-bus {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 78px;
  width: 684px;
  height: 245px;
  z-index: 1;
  background: url(../images/mv-bus.png) no-repeat center bottom / 100% auto;
}

.mv-hito {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: -46px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  height: 177px;
}

.mv-hito::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 4096px; /* ★4枚にする */
  height: 100%;

  background: url(../images/mv-hito.png) repeat-x left bottom;
  background-size: 1024px 177px;

  /* ★ここが重要 */
  transform: translateX(0);

  animation: mvHitoLoop 9.6s linear infinite;
}

@keyframes mvHitoLoop {
  from {
    transform: translateX(-1024px);
  }
  to {
    transform: translateX(0);
  }
}

.point {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 77px;
  // background: url(../images/west-license.svg) no-repeat 95% 10px;
  // background-size: 141px auto;
  padding: 30px 0 0;
}

.point-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
}

.point-list li {
  width: 23%;
  border-radius: 20px;
  text-align: center;
  position: relative;
  min-height: 110px;
  border: 3px solid var(--color_blue);
  background-color: var(--color_white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-bottom: 10px;
  padding-top: 10px;
}

.point-list li span.din-bo {
  position: absolute;
  top: -14px;
  left: -21px;
  width: 50px;
  height: 50px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color_white);
  font-size: 1.875rem;
  background-color: var(--color_blue);
  font-style: italic;
}

.point-list li p.txt01 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.point-list li p.txt01 > span {
  // font-size: 1.625rem;
  font-size: 1.5rem;
  font-weight: 700;
  display: block;
  line-height: 1.3;
  color: var(--color_blue);
}

.point-list li p.txt01 sup {
  font-size: 0.875rem;
  font-weight: 700;
  display: block;
}

.lead {
  padding-top: 62px;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.lead:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 48px;
  background: var(--color_blue);
}

.lead h2 {
  font-size: 1.875rem;
  font-weight: 700;
}

.lead h2 span {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color_blue);
}

.lead.type02 ,
.lead.type02 h2 span {
  color: var(--color_white);
}

.lead.type02:before {
  background: var(--color_white);
}

/* CTA */

.cta {
  display: flex;
  justify-content: center;
  gap: 33px;
  margin: 80px 0;
}

.cta-item{
  position:relative;
}

.cta-item::before{
  content:"";
  position:absolute;
  top:10px;
  left:10px;
  width:100%;
  height:100%;
  background:url(../images/dot-gray.gif) repeat;
  border-radius:10px;
}

.cta a{
  display:block;
  border-radius:10px;
  position:relative;
  width:546px;
  padding:23px 40px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-sizing:border-box;
}

.cta a:hover{
  transform: translateY(-5px);
  opacity: 1;
}

.cta a span {
  font-size: 0.750rem;
  font-weight: 500;
  color: var(--color_white);
  display: block;
}

.cta a p {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color_white);
  display: block;
}

.cta a span,
.cta a p {
  position: relative;
  z-index: 1;
}

.cta a.c-btn-entry {
  background: url(../images/ico-arw-white.svg) no-repeat 95% 50%;
  background-size: 34px auto;
  background-color: var(--color_red);
}

.cta a.c-btn-com {
  background: url(../images/ico-arw-blue.svg) no-repeat 95% 50%;
  background-size: 34px auto;
  background-color: var(--color_blue);
}

.cta a.c-btn-entry:before {
  content: '';
  position: absolute;
  right: 69px;
  bottom: 0;
  width: 168px;
  height: 150px;
  background: url(../images/cta-l.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.cta a.c-btn-com:before {
  content: '';
  position: absolute;
  right: 69px;
  bottom: 0;
  width: 168px;
  height: 150px;
  background: url(../images/cta-r.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

/*理由*/
.reason-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 20px;
}

.reason-list li {
  background-color: var(--color_lblue_bg);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  position: relative;
  width: 32.142%;
  box-sizing: border-box;
  min-height: 150px;
}

.reason-list li.reason-list-items01 {
  background: url(../images/reason-img01.png) no-repeat 95% 50%;
  background-size: 130px auto;
  background-color: var(--color_lblue_bg);
}

.reason-list li.reason-list-items02 {
  background: url(../images/reason-img02.png) no-repeat 95% 50%;
  background-size: 130px auto;
  background-color: var(--color_lblue_bg);
}

.reason-list li.reason-list-items03 {
  background: url(../images/reason-img03.png) no-repeat 95% 50%;
  background-size: 130px auto;
  background-color: var(--color_lblue_bg);
}

.reason-list li.reason-list-items04 {
  background: url(../images/reason-img04.png) no-repeat 95% 50%;
  background-size: 130px auto;
  background-color: var(--color_lblue_bg);
}

.reason-list li.reason-list-items05 {
  background: url(../images/reason-img05.png) no-repeat 95% 50%;
  background-size: 130px auto;
  background-color: var(--color_lblue_bg);
}

.reason-list li.reason-list-items06 {
  background: url(../images/reason-img06.png) no-repeat 95% 50%;
  background-size: 130px auto;
  background-color: var(--color_lblue_bg);
}

.reason-list li .din-bo {
  position: absolute;
  top: -20px;
  left: -15px;
  width: 55px;
  height: 55px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 44, 131, 0.5);
  background-color: var(--color_lblue_bg);
  border: 4px solid #fff;
  font-size: 1.875rem;
}

.reason-list li p {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}

.reason-list li p > span {
  position: relative;
  left: -10px;
}

.reason-list li p sup {
  font-size: 0.875rem;
}

section {
  margin-bottom: 80px;
}

/*会社概要*/
.company .c-center {
  padding-bottom: 202px;
  background: url(../images/bg-company.png) no-repeat bottom center #fff;
  background-size: 100%;
}

.table-list {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 25px;
}

.table-list th {
  border-top: 1px solid #374149;
  padding: 20px 0px 30px 20px;
  font-weight: 700;
  text-align: left;
  width: 254px;
}

.table-list td {
  border-top: 1px solid #D8D8D8;
  padding: 20px 0px 30px 20px;
}

.table-list tr:last-child th {
  border-bottom: 1px solid #374149;
}

.table-list tr:last-child td {
  border-bottom: 1px solid #D8D8D8;
}


/*仕事の魅力*/
.job {
  position: relative;
  background-color: #2E4A73;
  margin-bottom: 0;
}

.job:after {
  content: '';
  position: absolute;
  right: 20px;
  bottom: 0px;
  width: 400px;
  height: 143px;
  background: url(../images/bg-job.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #2E4A73;
  z-index: 2;
}

.job .c-center {
  background-color: inherit;
  border: none;
}

.job-list {
  display: flex;
  flex-wrap: wrap;
  gap: 60px 20px;
  margin-top: 50px;
}

.job-list-items {
  width: 32.142%;
  background-color: var(--color_white);
  border-radius: 10px;
  position: relative;
}

.job-list-items .catch {
  position: absolute;
  left: 27px;
  top: -19px;
  display: inline-block;
  width: 190px;
  margin-bottom: 12px;
  padding: 4px 0;
  border: 2px solid #ffffff;
  border-radius: 80px;
  background-color: #de1708;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
}

.job-list-items .catch::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  border-style: solid;
  border-width: 17px 0 0 18px;
  border-color: #fff transparent transparent;
  translate: -50% 100%;
}

.job-list-items .catch::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 20%;
  border-style: solid;
  border-width: 12.4px 0 0 13.1px;
  border-color: #de1708 transparent transparent;
  translate: calc(-50% + 0.5px) 100%;
}

.job-list-items .job-info {
  padding: 22px 20px 24px;
  display: flex;
  gap: 15px;
}

.job-list-items:nth-child(4) .job-info ,
.job-list-items:nth-child(5) .job-info {
  min-height: 118px;
  padding-right: 15px;
}

.job-list-items .job-info .din-bo {
  font-size: 3.125rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(46, 74, 115, 0.3);
}

.job-list-items .job-info h3 {
  line-height: 1.5; 
  font-size: 1rem;
  color: #2E4A73;
  font-weight: 700;
}

.job-list-items .job-thum {
  text-align: center;
  background-color: var(--color_lblue_bg);
  padding: 11px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.job-list-items .job-thum img {
  height: 130px;
}

/*会社の魅力*/
.strengths {
  padding-bottom: var(--paddingSection);
  background-color: #fff;
  margin-bottom: 0;
}

.strengths .c-center {
  border-radius: 0;
  border: none;
  padding-bottom: 0;
}

.strengths .cta {
  margin-bottom: 0;
}

.strengths-list {
  margin-top: 61px;
  position: relative;
  border: 3px solid var(--color_blue);
  border-radius: 10px;
  background-color: var(--color_lblue_bg);
}

.strengths-list-inner {
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 40px;
}

.strengths-list.last .strengths-list-inner {
  align-items: flex-start;
  padding-top: 50px;
}

.strengths-list-inner .thum {
  width: 230px;
  border: 1px solid var(--color_blue);
  text-align: center;
  min-height: 161px;
  display: flex;
  background-color: #fff;
  align-items: center;
  justify-content: center;
  height: 195px;
}

.strengths-list-inner .thum img {
  width: auto;
  height: 195px;
}

.strengths-list-inner.first .thum img {
  height: 161px;
}

.strengths-list-inner .info {
  margin-left: auto;
  width: calc(100% - 264px);
}

.strengths-list h3 {
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  padding: 10px;
  color: #fff;
  margin: 0 auto;
  font-size: 1.625rem;
  border-radius: 10px;
  text-align: center;
  width: 475px;
  background-color: var(--color_blue);
}

.strengths-list-inner .info ul {
  margin-top: 12px;
}

.strengths-list-inner .info ul li {
  background: url(../images/ico-check.svg) no-repeat 3px 3px;
  background-size: 26px auto;
  margin-bottom: 14px;
  font-size: .875rem;
  padding-left: 38px;
}

/*業務内容*/

.description .c-center {
  background-color: inherit;
  border-radius: 0;
  border: none;
}

.description-box {
  margin-bottom: 60px;
}

.description-box-inner {
  background-color: var(--color_lblue_bg);
  border: 8px solid var(--color_white);
  border-radius: 10px;
  padding: 20px 50px;
}

.h3-ttl {
  margin-bottom: 20px;
  padding-left: 21px;
  position: relative;
  font-size: 1.375rem;
  font-weight: 700;
}

.h3-ttl:before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 6px;
  height: calc(90% - 4px);
  background-color: var(--color_red);
}

.description-box.bus-driver .description-box-inner {
  position: relative;
  margin-top: 60px;
  padding-right: 10px;
}

.description-box.bus-driver .thum {
  position: absolute;
  left: 50px;
  bottom: -10px;
  width: 447px;
  height: 216px;
}

.description-box.bus-driver .thum img {
  width: 100%;
}

.description-box.bus-driver .info {
  margin-left: 447px;
}

.description-about {
  display: flex;
  gap: 20px;
}

.description-about li {
  width: 235px;
  background-color: var(--color_white);
  border: 1px solid #D3D6D8;
  border-radius: 20px;
  height: 90px;
  position: relative;
}

.description-about li span {
  position: absolute;
  left: 0;
  right: 0;
  background-color: var(--color_blue);
  text-align: center;
  color: #fff;
  width: 180px;
  line-height: 1.3;
  padding: 2px 0;
  margin: 0 auto;
  font-size: 0.750rem;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.description-about li p {
  padding-top: 42px;
  color: var(--color_blue);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}

.description-box.bus-driver {
  margin-bottom: 30px;
}

.description-box.bus-table {
  background-color: var(--color_lblue_bg);
  border: 8px solid var(--color_white);
  border-radius: 10px;
  padding: 20px 50px 50px;
}

.bus-table table {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}

.bus-table table th {
  background-color: var(--color_blue);
  text-align: center;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 10px 5px;
  border: 1px solid #D3D6D8;
}

.bus-table table td {
  background-color: var(--color_white);
  padding: 10px 9px;
  border: 1px solid #D3D6D8;
  letter-spacing: -0.01em;
  font-size: 0.875rem;
  font-weight: 500;
}

.bus-table table th:nth-child(1) {
  width: 8.66%;
}

.bus-table table th:nth-child(2) {
  width: 11.61%;
}

.bus-table table th:nth-child(3) {
  width: 18.766%;
}

.bus-table table th:nth-child(4) {
  width: 29.4906%;
}

.bus-table table th:nth-child(5) {
  width: 22.8%;
}

.bus-table table td:nth-child(1),
.bus-table table td:nth-child(2),
.bus-table table td:nth-child(3) {
  text-align: center;
}

.bus-table table td:nth-child(1) {
  background-color: #F6F6F6;
}

.oneday-flow-list {
  display: block;
}

.description-box.oneday-flow {
  background-color: inherit;
}

.oneday-flow-list__items {
  background-color: var(--color_white);
  padding: 13px 10px;
  position: relative;
  width: 44.4%;
  margin-bottom: 40px;
  display: flex;
  gap: 15px;
}

.oneday-flow-list__items:nth-child(odd) {
  margin-left: auto;
}

.oneday-flow-list__items:nth-child(even):after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  border-style: solid;
  border-width: 17.5px 0 17.5px 29px;
  border-color: transparent transparent transparent #fff;
  translate: 100% -50%;
}

.oneday-flow-list__items:nth-child(odd):after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  border-style: solid;
  border-width: 17.5px 29px 17.5px 0;
  border-color: transparent #fff transparent transparent;
  translate: -100% -50%;
}

.oneday-flow-list__items:nth-child(even):before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -8px;
  right: -72px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: #374149;
}

.oneday-flow-list__items:nth-child(odd):before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -8px;
  left: -72px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: #374149;
}

.oneday-flow-list__items .thum {
  width: 147px;
}

.oneday-flow-list__items .thum img {
  width: 100%;
}

.oneday-flow-list__items .info {
  width: calc(100% - 162px);
  margin-left: auto;
}

h4 {
  background: url(../images/h4-bg.svg) no-repeat left top;
  background-size: 21px auto;
  font-weight: 700;
  color: var(--color_red);
  padding-left: 30px;
  margin-bottom: 15px;
}

.txt14 {
  font-size: 0.875rem;
}

.oneday-flow-list__items .info .txt14 {
  font-weight: 500;
}

.oneday-flow-list {
  padding: 50px 0 20px;
}

.oneday-flow-time {
  font-size: 0.875rem;
  font-weight: 500;
}

.oneday-flow-list__items:nth-child(even) .oneday-flow-time {
  position: absolute;
  right: -140px;
  top: 50%;
  margin-top: -11px;
}

.oneday-flow-list__items:nth-child(odd) .oneday-flow-time {
  position: absolute;
  left: -140px;
  top: 50%;
  margin-top: -11px;
}

.description-box.bus-managment {
  position: relative;
}

.description-box.bus-managment .description-box-inner {
  min-height: 350px;
}

.description-box.bus-managment .thum {
  position: absolute;
  left: 50px;
  bottom: 20px;
  width: 402px;
  height: 319px;
}

.description-box.bus-managment .thum img {
  width: 100%;
}

.description-box.bus-managment .info {
  width: calc(100% - 439px);
  margin-left: auto;
}

.description-box.bus-managment .description-about li {
  width: 321px;
}

.description-box.bus-managment .description-about {
  margin-bottom: 10px;
}

.description-box.bus-staff .description-box-inner {
  background-color: inherit;
  border: none;
  border-radius: 0;
  padding: 0;
}

.description-box.bus-staff {
  margin-bottom: 0;
}

.description-box.bus-staff .info {
  background-color: var(--color_white);
  padding: 2px 2px 30px;
  border-radius: 10px;
}

.staff-office {
  display: flex;
  flex-wrap: wrap;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  background-color: var(--color_lblue_bg);
}

.staff-office li {
  width: 33.333%;
  text-align: center;
}

.staff-office li .thum {
  text-align: center;
  margin-bottom: 17px;
}

.staff-office li .thum img {
  height: auto;
  width: 152px;
}

.staff-office li p {
  text-align: center;
  font-weight: 700;
}

.not-entry {
  width: 267px;
  margin: 20px auto 0;
  background-color: var(--color_blue);
  color: var(--color_white);
  text-align: center;
  padding: 10px 0;
  box-sizing: border-box;
  display: block;
  border-radius: 200px;
  font-size: 0.875rem;
  font-weight: 700;
}

.description {
  margin-bottom: 0;
  background: url(../images/bg-description.png) no-repeat bottom center;
}

.table-list .box {
  border-bottom: 1px dashed #D8D8D8;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.table-list .box:last-child {
  border-bottom: none;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.table-list td .sub-title {
  font-weight: 700;
  color: var(--color_blue);
  margin-bottom: 7px;
}

strong {
  font-weight: 700;
}

.benefits {
  position: relative;
  z-index: 2;
}

.benefits .c-center {
  padding-bottom: 182px;
  background: url(../images/bg-benefits.png) no-repeat bottom center #fff;
  background-size: 100%;
}

.benefits .c-center:after {
  content: '';
  position: absolute;
  right: -92px;
  bottom: -200px;
  width: 381px;
  height: 248px;
  background: url(../images/bg-bus-naname.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

/*営業所案内*/

.location .c-center {
  padding-bottom: 182px;
  background: url(../images/bg-location.png) no-repeat bottom center #fff;
  background-size: 100%;
}

.map {
  width: 860px;
  height: 1004px;
  background-image: url(../images/map.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
  margin-bottom: 50px;
}

.map:after {
  content: '';
  position: absolute;
  left: 90%;
  top: 60%;
  width: 237px;
  height: 237px;
  background: url(../images/map-info.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.map a {
  position: absolute;
  width: 113px;
  height: 27px;
  background-color: var(--color_white);
  border: 1px solid #222;
  border-radius: 100px;
  text-align: center;
  font-size: .875rem;
  animation: mapFloat 2.2s ease-in-out infinite;
}

@keyframes mapFloat {
  0%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-8px);
  }
  100%{
    transform: translateY(0);
  }
}

.map a.map_child01 {
  bottom: 0;
  left: 304px;
}

.map a.map_child02 {
  bottom: 0;
  left: 426px;
}

.map a.map_child03 {
  bottom: 150px;
  left: 526px;
}

.map a.map_child04 {
  bottom: 317px;
  left: 438px;
}

.map a.map_child05 {
  bottom: 423px;
  left: 444px;
}

.map a.map_child06 {
  bottom: 390px;
  left: 527px;
}

.map a.map_child07 {
  bottom: 320px;
  left: 655px;
}

/*インタビュー*/
.interview {
  background-color: var(--color_white);
  padding-bottom: 80px;
}

.interview .c-center {
  padding: 0;
  max-width: inherit;
  border-radius: 0;
  overflow: hidden;
  border: none;
  background-color: inherit;
}

.interview-slider-list {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height: 100%;

  background:url(../images/ico-arw-gray.svg) no-repeat 5% 95%,
  url(../images/interview-bg.svg) no-repeat 100% 5%;
  background-size: 36px auto,44%;
  background-color:var(--color_white);
  border:1px solid #707070;
  border-radius:16px;

  padding:30px 10px 50px 30px;
  margin:0 10px;
  cursor:pointer;
  transition:all .25s ease;
}

.interview-slider .slick-slide{
  height:auto;
  display:flex;
  overflow:visible;
}

.interview-slider .slick-track {
  display: flex;
}

/* hover */
.interview-slider-list:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 20px rgba(0,0,0,0.08);
}

.interview-slider-list .info{
  flex:1;
}

.interview-slider-list .thum{
  width: 37%;
  flex-shrink:0;
}

.interview-slider-list .thum img{
  width:100%;
  height:auto;
  border-radius:10px;
  display:block;
}

.interview-slider .slick-list{
  overflow:visible;
}

.interview-slider-list p {
  margin-bottom: 15px;
}

.interview-slider-list p span {
  display: inline-block;
  padding: 5px 21px;
  border-radius: 200px;
  line-height: 1.3;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color_blue);
  border: 1px solid var(--color_blue);
}

.interview-slider-list h3 {
  font-size: 1.125rem;
  font-weight: 700;
}

.interview-prev,
.interview-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:96px;
  height:96px;
  background:#DE1708;
  border-radius:50%;
  border:none;
  opacity:.8;
  cursor:pointer;
  z-index:20;
  background-repeat:no-repeat;
  background-position:center;
  transition:.25s;
}
.interview-prev{
  left:calc(50% - 20%);
}

.interview-next{
  right:calc(50% - 20%);
}

.interview-prev:hover,
.interview-next:hover{
  opacity:1;
}

.interview-prev{
  background-image:url(../images/interview-prev.svg);
}

.interview-next{
  background-image:url(../images/interview-next.svg);
}

.slick-prev:before,
.slick-next:before{
  display:none;
}

/*benefits*/

.benefits-list li {
  border-bottom: 1px dashed #D3D6D8;
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.benefits-list li:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.benefits-list .inner {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
}

.benefits-list .inner .thum {
  width: 320px;
  border-radius: 5px;
  overflow: hidden;
}

.benefits-list .inner .thum {
  width: 320px;
}

.benefits-list .inner .info {
  margin-left: auto;
  width: calc(100% - 356px);
}

/*選考フロー*/
.process .c-center {
  padding-bottom: 192px;
  background: url(../images/bg-process.png) no-repeat bottom center #fff;
  background-size: 100%;
}

.process-inner {
  display: flex;
  gap: 40px;
}

.process-inner .box {
  width: 48.21%;
  border-radius: 10px;
  padding: 36px 30px;
}

.process-inner .box.left {
  background-color: var(--color_lblue_bg);
}

.process-inner .box.right {
  background-color: #F6F6F6;
}

.process-inner .box ul li {
  margin-bottom: 33px;
  position: relative;
  padding-left: 65px;
  padding-top: 10px;
}

.process-inner .box ul li:before {
  content: '';
  position: absolute;
  left: 22px;
  top: 49px;
  width: 1px;
  height: calc(100% - 20px);
  background-color: #D3D6D8;
}

.process-inner .box ul li:last-child:before {
  display: none;
}

.process-inner .box ul li span {
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50%;
  background-color: var(--color_red);
  color: var(--color_white);
  font-size: 1.375rem;
  font-weight: 700;
  text-align: center;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.process-inner .box ul li .title {
  font-weight: 700;
  font-size: 1.125rem;
}

.process-inner .box ul li .txt14 {
  margin-top: 6px;
}

.process-inner .box.right .h3-ttl:before {
  background-color: var(--color_blue);
}

.process-inner .box.right ul li span {
  background-color: var(--color_blue);
}

/*recruitment*/
.recruitment-list {
  margin-bottom: 20px;
  background-color: var(--color_lblue_bg);
  position: relative;
  border-radius: 20px;
}

.recruitment-list-inner {
  padding: 41px 50px;
  display: flex;
  align-items: flex-start;
  position: relative;
}

.recruitment-list-inner:after {
  content: '';
  position: absolute;
  right: 20px;
  top: 41px;
  width: 38px;
  height: 38px;
  background: url(../images/ico-arw-btm-blue.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  transition: .3s;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.recruitment-list-inner.active:after {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.recruitment-list-inner h3 {
  margin-bottom: 0;
}

.recruitment .open {
  display: none;
  margin-top: 0px;
  padding: 0px 40px 25px;
}

.recruitment .open table {
  background-color: var(--color_white);
}

.recruitment .open th {
  width: 214px;
}


/*FAQ*/

.faq-list {
  margin-bottom: 20px;
}

.faq-list dt {
  background-color: var(--color_white);
  position: relative;
  border-radius: 20px;
  padding: 28px 30px;
  padding-right: 58px;
  display: flex;
  align-items: flex-start;
  border: 1px solid #D3D6D8;
}

.faq-list dt p {
  position: absolute;
  right: 20px;
  top: 26px;
  width: 38px;
  height: 38px;
  transition: .3s;
  border-radius: 100px;
  background-color: var(--color_blue);
}

.faq-list dt p:after {
  content: '';
  position: absolute;
  width: 15px;
  height: 3px;
  left: 12px;
  top: 17px;
  background: var(--color_white);
  transition: .3s;
}

.faq-list dt p:before {
  content: '';
  position: absolute;
  width: 3px;
  height: 14px;
  left: 18px;
  top: 11px;
  background: var(--color_white);
  transition: .3s;
}

.faq-list dt.active p:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);

}

.faq-list dt span {
  display: inline-block;
  position: relative;
  padding-right: 30px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color_red);
}

.faq-list dt:hover {
  cursor: pointer;
}

.faq-list dt h3 {
  font-weight: 700;
  font-size: 1.125rem;
  width: 93%;
  box-sizing: border-box;
}

.faq-list dd  {
  display: none;
}

.faq-list dd .grid {
  display: flex;
  padding-left: 70px;
  margin-top: 20px;
}

.faq-list dd span {
  margin-right: 20px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color_blue);
}

.faq-list dd .grid p {
  width: 90%;
}

.oneday-flow-list{
  position:relative;
}

.oneday-bg-line{
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:100%;
  background:#333;

  transform:translateX(-50%) scaleY(0);
  transform-origin:top;
  transition:transform 4.2s ease;
}

.oneday-bg-line.active{
  transform:translateX(-50%) scaleY(1);
}

/*ポップアップ*/
.close_area { position: absolute; width: 100%; height: 100%; background-color: rgba(230, 234, 234, .9); }

body.popup-open{
  overflow: hidden;
}

.pop-up{
  position:fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100vh;
  z-index: 1000;
}

.pop-up-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.pop-up .window{
  position: relative;
  max-width: 1120px;
  height: 560px;
  border-radius: 16px;
  border: 10px solid #F3F3F3;
  background-color: #fff;
  overflow: hidden;
}

.pop-up .window .inner{
  height: 100%;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-area {
  padding: 39px;
}

.category {
  margin-bottom: 10px;
  display: inline-block;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.5;
  border-radius: 50px;
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
}

.pop-up .window .inner .title {
  font-size: 1.625rem;
  font-weight: 700;
  display: block;
  margin-bottom: 27px;
  color: #222;
  background: inherit;
  padding: 0;
}

.pop-up .window .inner .name {
  font-size: 1.125rem;
  color: var(--color_blue);
  font-weight: 700;
  display: block;
  margin-bottom: 39px;
}

.grid-area + .grid-area {
  margin-top: 40px;
}

.grid-area .title-q {
  color: var(--color_blue);
  font-weight: 700;
  margin-bottom: 12px;
}

.grid-area.right ,
.grid-area.left {
  display: flex;
  flex-wrap: wrap;
}

.grid-area.right .thum {
  width: 322px;
}

.grid-area.right .info {
  margin-right: auto;
  width: calc(100% - 356px);
}

.grid-area.left .thum {
  width: 322px;
}

.grid-area.left .info {
  margin-left: auto;
  order: 2;
  width: calc(100% - 356px);
}

.close-btn {
  right: calc(50% - 520px);
}

.close-btn {
  position: absolute;
  top: calc(50% - 318px);
  right: calc(50% - 600px);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-image: url(../images/icon-close.svg);
  background-size: 100%;
  background-position: center;
  filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.04));
  transition: transform .64s cubic-bezier(0, 0.55, 0.45, 1);
}

.close-btn:hover {
  cursor:pointer;
  transform: scale(1.1);
  transition: transform .1s cubic-bezier(0.33, 1, 0.68, 1)
}

.text-red {
  color: #e31b13;
}

.in-txt05 {
  text-indent: -5em;
  margin-left: 5em;
  display: inline-block;
}

/* ==========================================================================
Component [ button / form / grid... ]
========================================================================== */
/*
filter: drop-shadow(0 3px 6px rgba(0, 55, 51, 0.1));
font-size: clamp(0.75rem, 1.25vw, 1rem);
aspect-ratio: 1 / 2;
background: center/contain url("../images/aaa.svg") no-repeat;
*/

.c-center {
  width: 100%;
  max-width: 1302px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background-color: var(--color_white);
  border-radius: 40px;
  border: 1px solid #D3D6D8;
  padding: 0 var(--paddingLR) var(--paddingSection);
  box-sizing: border-box;
}

/* grid */
.grid {
  clear: both;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.flex-top {
  align-items: flex-start;
}

.flex-middle {
  align-items: center;
}

.flex-bottom {
  align-items: flex-end;
}

.flex-between {
  justify-content: space-between;
}

.flex-around {
  justify-content:space-around;
}

.flex-left {
  justify-content:flex-start;
}

.flex-center {
  justify-content:center;
}

.flex-right {
  justify-content:flex-end;
}


/* column */
.col-1 { width: 8.33333333%; }
.col-2 { width: 16.66666667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333333%; }
.col-5 { width: 41.66666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33333333%; }
.col-8 { width: 66.66666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333333%; }
.col-11 { width: 91.66666667%; }
.col-12 { width: 100%; }


/*==========
Effect
==========*/

.rotate {
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
  opacity: 0;
  will-change: transform, opacity;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
.rotate.trigger {
  -webkit-animation-name: rotate;
          animation-name: rotate;
}

@-webkit-keyframes rotate {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}

@keyframes rotate {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
.fadeIn {
  opacity: 0;
  will-change: opacity;
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
.fadeIn.trigger {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeUp {
  opacity: 0;
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
  will-change: transform, opacity;
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
.fadeUp.trigger {
  -webkit-animation-name: fadeUp;
          animation-name: fadeUp;
}

.fadeUpList > * {
  opacity: 0;
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
  will-change: transform, opacity;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
.fadeUpList.trigger > * {
  -webkit-animation-name: fadeUp;
          animation-name: fadeUp;
}

@-webkit-keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
.popUp {
  opacity: 0;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  will-change: transform, opacity;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
.popUp.trigger {
  -webkit-animation-name: popUp;
          animation-name: popUp;
}

.popUpList > * {
  opacity: 0;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  will-change: transform, opacity;
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
.popUpList.trigger > * {
  -webkit-animation-name: popUp;
          animation-name: popUp;
}

@-webkit-keyframes popUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.125);
            transform: scale(1.125);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes popUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.125);
            transform: scale(1.125);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.slideLeft {
  will-change: transform, opacity;
  -webkit-transform: translateX(-40px);
          transform: translateX(-40px);
  opacity: 0;
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
.slideLeft.trigger {
  -webkit-animation-name: slideLeft;
          animation-name: slideLeft;
}

@-webkit-keyframes slideLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.slideRight {
  will-change: transform, opacity;
  -webkit-transform: translateX(40px);
          transform: translateX(40px);
  opacity: 0;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
.slideRight.trigger {
  -webkit-animation-name: slideRight;
          animation-name: slideRight;
}

@-webkit-keyframes slideRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

/* ==========================================================================
Utility [ display / margin / padding / device... ]
========================================================================== */

/* device - utility
--------------------------------------------------------- */
.u-pc {
  display: block !important;
}
.u-sp {
  display: none !important;
}

/* vertical-align - utility
--------------------------------------------------------- */
.u-va-t{
  vertical-align: top !important;
}
.u-va-m{
  vertical-align: middle !important;
}
.u-va-b{
  vertical-align: bottom !important;
}

/* border - utility
--------------------------------------------------------- */
/* border-radius */
.u-br-4{
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -ms-border-radius: 4px;
}
.u-br-8{
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -ms-border-radius: 8px;
}
.u-br-12{
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -ms-border-radius: 12px;
}
.u-br-16{
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  -ms-border-radius: 16px;
}

/* border-none */
.u-br-0{
  border: none;
}
.u-br-t-0{
  border-top: none;
}
.u-br-r-0{
  border-right: none;
}
.u-br-b-0{
  border-bottom: none;
}
.u-br-l-0{
  border-left: none;
}

/* clearfix - utility
--------------------------------------------------------- */
.u-cf{
  *zoom: 1;
}
.u-cf:after{
  display: table;
  clear: both;
  content: '';
}

/* display - utility
--------------------------------------------------------- */
.u-d-tb{
  display: table !important;
}
.u-d-tbc{
  display: table-cell !important;
}
.u-d-b{
  display: block !important;
}
.u-d-ib{
  display: inline-block !important;
}
.u-d-n{
  display: none !important;
}

/* float - utility
--------------------------------------------------------- */
.u-fl-l{
  float: left !important;
}
.u-fl-r{
  float: right !important;
}

/* font-size - utility
--------------------------------------------------------- */
.u-fz-10{
  font-size: 10px !important;
}
.u-fz-12{
  font-size: 12px !important;
}
.u-fz-14{
  font-size: 14px !important;
}
.u-fz-16{
  font-size: 16px !important;
}
.u-fz-18{
  font-size: 18px !important;
}
.u-fz-20{
  font-size: 20px !important;
}
.u-fz-22{
  font-size: 22px !important;
}
.u-fz-24{
  font-size: 24px !important;
}
.u-fz-26{
  font-size: 26px !important;
}
.u-mini {
  font-size: 80%;
}

/* line-clamp - utility
--------------------------------------------------------- */
.u-lc{
  display:         box;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* margin - utility
--------------------------------------------------------- */
/* auto margin */
.u-m-c{
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Top margin */
.u-mt-0{
  margin-top: 0 !important;
}
.u-mt-8{
  margin-top: 8px !important;
}
.u-mt-16{
  margin-top: 16px !important;
}
.u-mt-24{
  margin-top: 24px !important;
}
.u-mt-32{
  margin-top: 32px !important;
}
.u-mt-40{
  margin-top: 40px !important;
}
.u-mt-48{
  margin-top: 48px !important;
}
.u-mt-56{
  margin-top: 56px !important;
}
.u-mt-64{
  margin-top: 64px !important;
}

/* Right margin */
.u-mr-0{
  margin-right: 0 !important;
}
.u-mr-8{
  margin-right: 8px !important;
}
.u-mr-16{
  margin-right: 16px !important;
}
.u-mr-24{
  margin-right: 24px !important;
}
.u-mr-32{
  margin-right: 32px !important;
}
.u-mr-40{
  margin-right: 40px !important;
}
.u-mr-48{
  margin-right: 48px !important;
}
.u-mr-56{
  margin-right: 56px !important;
}
.u-mr-64{
  margin-right: 64px !important;
}

/* Bottom margin */
.u-mb-0{
  margin-bottom: 0 !important;
}
.u-mb-8{
  margin-bottom: 8px !important;
}
.u-mb-16{
  margin-bottom: 16px !important;
}
.u-mb-24{
  margin-bottom: 24px !important;
}
.u-mb-32{
  margin-bottom: 32px !important;
}
.u-mb-40{
  margin-bottom: 40px !important;
}
.u-mb-48{
  margin-bottom: 48px !important;
}
.u-mb-56{
  margin-bottom: 56px !important;
}
.u-mb-64{
  margin-bottom: 64px !important;
}

/* Left margin */
.u-ml-0{
  margin-left: 0 !important;
}
.u-ml-8{
  margin-left: 8px !important;
}
.u-ml-16{
  margin-left: 16px !important;
}
.u-ml-24{
  margin-left: 24px !important;
}
.u-ml-32{
  margin-left: 32px !important;
}
.u-ml-40{
  margin-left: 40px !important;
}
.u-ml-48{
  margin-left: 48px !important;
}
.u-ml-56{
  margin-left: 56px !important;
}
.u-ml-64{
  margin-left: 64px !important;
}

/* misc - utility
--------------------------------------------------------- */
.u-ws-nowrap{
  white-space: nowrap;
}
.u-mx-img{
  max-width: 100%;
}
.u-tx-inside{
  margin-left: 1em;
  text-indent: -1em;
}

/* padding - utility
--------------------------------------------------------- */
/* Top padding */
.u-pt-0{
  margin-top: 0 !important;
}
.u-pt-8{
  margin-top: 8px !important;
}
.u-pt-16{
  margin-top: 16px !important;
}
.u-pt-24{
  margin-top: 24px !important;
}
.u-pt-32{
  margin-top: 32px !important;
}
.u-pt-40{
  margin-top: 40px !important;
}
.u-pt-48{
  margin-top: 48px !important;
}
.u-pt-56{
  margin-top: 56px !important;
}
.u-pt-64{
  margin-top: 64px !important;
}

/* Right padding */
.u-pr-0{
  padding-right: 0 !important;
}
.u-pr-8{
  padding-right: 8px !important;
}
.u-pr-16{
  padding-right: 16px !important;
}
.u-pr-24{
  padding-right: 24px !important;
}
.u-pr-32{
  padding-right: 32px !important;
}
.u-pr-40{
  padding-right: 40px !important;
}
.u-pr-48{
  padding-right: 48px !important;
}
.u-pr-56{
  padding-right: 56px !important;
}
.u-pr-64{
  padding-right: 64px !important;
}

/* Bottom padding */
.u-pb-0{
  padding-bottom: 0 !important;
}
.u-pb-8{
  padding-bottom: 8px !important;
}
.u-pb-16{
  padding-bottom: 16px !important;
}
.u-pb-24{
  padding-bottom: 24px !important;
}
.u-pb-32{
  padding-bottom: 32px !important;
}
.u-pb-40{
  padding-bottom: 40px !important;
}
.u-pb-48{
  padding-bottom: 48px !important;
}
.u-pb-56{
  padding-bottom: 56px !important;
}
.u-pb-64{
  padding-bottom: 64px !important;
}

/* Left padding */
.u-pl-0{
  padding-left: 0 !important;
}
.u-pl-8{
  padding-left: 8px !important;
}
.u-pl-16{
  padding-left: 16px !important;
}
.u-pl-24{
  padding-left: 24px !important;
}
.u-pl-32{
  padding-left: 32px !important;
}
.u-pl-40{
  padding-left: 40px !important;
}
.u-pl-48{
  padding-left: 48px !important;
}
.u-pl-56{
  padding-left: 56px !important;
}
.u-pl-64{
  padding-left: 64px !important;
}

/* position - utility
--------------------------------------------------------- */
.u-pos-a{
  position: absolute !important;
}
.u-pos-r{
  position: relative !important;
}

/* text-align - utility
--------------------------------------------------------- */
.u-ta-l{
  text-align: left !important;
}
.u-ta-c{
  text-align: center !important;
}
.u-ta-r{
  text-align: right !important;
}

/* text-decoration - utility
--------------------------------------------------------- */
.u-fw-r{
  font-weight: 400 !important;
}
.u-fw-n{
  font-weight: 500 !important;
}
.u-fw-b{
  font-weight: 700 !important;
}
.u-td-u{
  text-decoration: underline !important;
}

/* text-truncate - utility
--------------------------------------------------------- */
.u-tt{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  /* for IE 8/9 */
}

/* width - utility
--------------------------------------------------------- */
.u-w-auto{
  width: auto !important;
}
.u-maw-full{
  max-width: 100% !important;
}
.u-maw-half{
  max-width: 50% !important;
}

/*可変幅*/
@media screen and (max-width: 1600px){
  .interview-slider{
    position:relative;
  }

  .interview-prev{
    width: 76px;
    height: 76px;
    left:calc(50% - 320px);
    margin-top: -20px;
  }

  .interview-next{
    width: 76px;
    height: 76px;
    right:calc(50% - 320px);
    margin-top: -20px;
  }
}
@media screen and (max-width: 1500px){
  .interview-slider-list h3 {
    font-size: 1rem;
  }
}
@media screen and (max-width: 1380px){
  .c-center {
    width: 92.5%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
  }
  .reason-list {
    gap: 30px 2%;
  }
  .reason-list li {
    width: 32%;
  }
  .reason-list li.reason-list-items01 ,
  .reason-list li.reason-list-items02 ,
  .reason-list li.reason-list-items03 ,
  .reason-list li.reason-list-items04 ,
  .reason-list li.reason-list-items05 ,
  .reason-list li.reason-list-items06 {
    background-size: 110px auto;
  }
  .reason-list li p {
    font-size: 1.125rem;
  }
  .job-list {
    gap: 60px 2%;
  }
  .job-list-items {
    width: 32%;
  }
  .job .c-center,
  .strengths .c-center,
  .description .c-center {
    padding-left: 0;
    padding-right: 0;
  }
  .job:after {
    width: 300px;
    height: 101px;
  }








}