/*!
 * ress.css • v2.0.4
 * MIT License
 * github.com/filipelinhares/ress
 */

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  word-break: normal;
  tab-size: 4
}

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

::before, ::after {
  text-decoration: inherit;
  vertical-align: inherit
}

* {
  padding: 0;
  margin: 0
}

hr {
  overflow: visible;
  height: 0
}

details, main {
  display: block
}

summary {
  display: list-item
}

small {
  font-size: 80%
}

[hidden] {
  display: none
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

a {
  background-color: rgba(0, 0, 0, 0)
}

a:active, a:hover {
  outline-width: 0
}

code, kbd, pre, samp {
  font-family: monospace, monospace
}

pre {
  font-size: 1em
}

b, strong {
  font-weight: bolder
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -0.25em
}

sup {
  top: -0.5em
}

input {
  border-radius: 0
}

[disabled] {
  cursor: default
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

textarea {
  overflow: auto;
  resize: vertical
}

button, input, optgroup, select, textarea {
  font: inherit
}

optgroup {
  font-weight: bold
}

button {
  overflow: visible
}

button, select {
  text-transform: none
}

button, [type=button], [type=reset], [type=submit], [role=button] {
  cursor: pointer;
  color: inherit
}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
  outline: 1px dotted ButtonText
}

button, html [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button
}

button, input, select, textarea {
  background-color: rgba(0, 0, 0, 0)
}

select {
  -moz-appearance: none;
  -webkit-appearance: none
}

select::-ms-expand {
  display: none
}

select::-ms-value {
  color: currentColor
}

legend {
  border: 0;
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal;
  max-width: 100%
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  color: inherit;
  font: inherit
}

img {
  border-style: none
}

progress {
  vertical-align: baseline
}

svg:not([fill]) {
  fill: currentColor
}

@media screen {
  [hidden~=screen] {
    display: inherit
  }
  [hidden~=screen]:not(:active):not(:focus):not(:target) {
    position: absolute !important;
    clip: rect(0 0 0 0) !important
  }
}

[aria-busy=true] {
  cursor: progress
}

[aria-controls] {
  cursor: pointer
}

[aria-disabled] {
  cursor: default
}

li {
  list-style: none
}

* {
  box-sizing: border-box
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth
}

body {
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  overflow-x: hidden;
  position: relative
}

main {
  margin-block-start: 0
}

p {
  text-align: justify
}

a {
  color: #333;
  text-decoration: none;
  transition: filter .2s ease-in-out
}

a:hover {
  filter: opacity(70%)
}

img {
  max-width: 100%;
  vertical-align: bottom
}

.content {
  margin-inline: auto;
  max-width: 1000px;
  width: 90%
}

@media screen and (max-width: 767px) {
  .content {
    width: 86.4%;
    position: relative;
  }
}

.contentL {
  margin-inline: auto;
  width: 100%
}

.text {
  font-size: 1.6rem;
  line-height: 2;
  color: #333
}

@media screen and (min-width: 768px) {
  .text span {
    display: block
  }
}

@media screen and (min-width: 768px) {
  .pc-none {
    display: none
  }
}

@media screen and (max-width: 767px) {
  .pc-none {
    display: block
  }
}

@media screen and (min-width: 768px) {
  .sp-none {
    display: block
  }
}

@media screen and (max-width: 767px) {
  .sp-none {
    display: none
  }
}

.m-titleArea {
  position: relative
}

@media screen and (min-width: 768px) {
  .m-titleArea {
    margin-block-end: 15rem
  }
}

@media screen and (max-width: 767px) {
  .m-titleArea {
    margin-block-end: 7.1rem
  }
}

.m-titleArea::before {
  position: absolute;
  content: ""
}

@media screen and (min-width: 768px) {
  .m-titleArea::before {
    width: 50%;
    height: 530px;
    background-size: cover !important
  }
}

@media screen and (min-width: 1440px) {
  .m-titleArea::before {
    background-size: contain !important
  }
}

@media screen and (max-width: 767px) {
  .m-titleArea::before {
    padding-block-start: 72%;
    width: 100%;
    background-size: contain !important
  }
}

.m-titleArea-inner {
  margin-inline: auto;
  max-width: 1000px;
  width: 100%
}

@media screen and (min-width: 768px) {
  .m-titleArea-text {
    padding-block-end: 12rem;
    width: 50%
  }
}

@media screen and (max-width: 767px) {
  .m-titleArea-text {
    padding-block-start: 72%;
    width: 100%
  }
}

@media screen and (max-width: 767px) {
  .m-titleArea-text .title-wrap {
    position: relative;
    top: -4rem;
    padding-inline-start: 4.1rem;
    width: 89.3%;
    background: #fff
  }
}

.m-titleArea-text .title {
  border-bottom: 1px solid #0079c0;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 200;
  color: #0079c0
}

@media screen and (min-width: 768px) {
  .m-titleArea-text .title {
    margin-block-end: 1.5rem;
    padding-block: 5.5rem .5rem;
    font-size: 2.8rem
  }
}

@media screen and (max-width: 767px) {
  .m-titleArea-text .title {
    margin-block-end: 1.2rem;
    padding-block: 2rem 1rem;
    font-size: 2.6rem
  }
}

.m-titleArea-text .sub {
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  color: #333
}

@media screen and (min-width: 768px) {
  .m-titleArea-text .sub {
    font-size: 1.6rem
  }
}

@media screen and (max-width: 767px) {
  .m-titleArea-text .sub {
    padding-block-end: 2.3rem;
    width: 89.3%;
    background: #fff;
    font-size: 1.4rem
  }
}

.m-titleArea-text .catch {
  line-height: 1.7;
  color: #0079c0
}

@media screen and (min-width: 768px) {
  .m-titleArea-text .catch {
    margin-block: 9rem 4rem;
    font-size: 2.6rem
  }
}

@media screen and (max-width: 767px) {
  .m-titleArea-text .catch {
    margin-block: 0 3rem;
    font-size: 2rem
  }
}

@media screen and (min-width: 768px) {
  .m-titleArea-text .catch span {
    display: block
  }
}

@media screen and (min-width: 768px) {
  .m-titleArea.strengths::before {
    background: url("../img/strengths_bk_pc.jpg") no-repeat center right
  }
}

@media screen and (max-width: 767px) {
  .m-titleArea.strengths::before {
    background: url("../img/strengths_bk_sp.jpg") no-repeat center center
  }
}

@media screen and (max-width: 767px) {
  .m-titleArea.backup {
    margin-block-end: 5rem
  }
}

@media screen and (min-width: 768px) {
  .m-titleArea.backup::before {
    background: url("../img/backup_bk_pc.jpg") no-repeat center center
  }
}

@media screen and (max-width: 767px) {
  .m-titleArea.backup::before {
    background: url("../img/backup_bk_sp.jpg") no-repeat center center
  }
}

@media screen and (max-width: 767px) {
  .m-titleArea.jobs {
    margin-block-end: 5rem
  }
}

@media screen and (min-width: 768px) {
  .m-titleArea.jobs::before {
    background: url("../img/jobs_bk_pc.jpg") no-repeat center center
  }
}

@media screen and (max-width: 767px) {
  .m-titleArea.jobs::before {
    background: url("../img/jobs_bk_sp.jpg") no-repeat center center
  }
}

.m-titleArea.voice::before {
  background: url("../img/voice_bk.jpg") no-repeat center left
}

.m-titleArea.right .m-titleArea-text {
  margin-left: auto
}

@media screen and (max-width: 767px) {
  .m-titleArea.right .m-titleArea-text .title-wrap {
    margin-left: auto
  }
}

.m-titleArea.right .m-titleArea-text .title {
  padding-inline-end: 2rem;
  text-align: right
}

@media screen and (max-width: 767px) {
  .m-titleArea.right .m-titleArea-text .title {
    text-align: left
  }
}

.m-titleArea.right .m-titleArea-text .sub {
  padding-inline-end: 2rem;
  text-align: right
}

@media screen and (max-width: 767px) {
  .m-titleArea.right .m-titleArea-text .sub {
    text-align: left
  }
}

@media screen and (min-width: 768px) {
  .m-titleArea.right .m-titleArea-text .catch {
    margin-inline: 8% 3%
  }
}

@media screen and (max-width: 767px) {
  .m-titleArea.right .m-titleArea-text .catch {
    margin-inline: auto;
    width: 86.4%
  }
}

@media screen and (min-width: 768px) {
  .m-titleArea.right .m-titleArea-text .text {
    margin-inline: 8% 3%
  }
}

@media screen and (max-width: 767px) {
  .m-titleArea.right .m-titleArea-text .text {
    margin-inline: auto;
    width: 86.4%
  }
}

.m-titleArea.left::before {
  right: 0
}

@media screen and (max-width: 767px) {
  .m-titleArea.left .m-titleArea-text .title-wrap {
    margin-left: auto
  }
}

.m-titleArea.left .m-titleArea-text .title {
  padding-inline-start: 2rem
}

.m-titleArea.left .m-titleArea-text .sub {
  padding-inline-start: 2rem
}

.m-titleArea.left .m-titleArea-text .catch {
  padding-inline-start: 2rem
}

@media screen and (max-width: 767px) {
  .m-titleArea.left .m-titleArea-text .catch {
    margin-inline: auto;
    width: 86.4%
  }
}

.m-titleArea.left .m-titleArea-text .text {
  margin-inline-end: 20%;
  padding-inline-start: 2rem
}

@media screen and (max-width: 767px) {
  .m-titleArea.left .m-titleArea-text .text {
    margin-inline: auto;
    width: 86.4%
  }
}

.c-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 0
}

@media screen and (min-width: 768px) {
  .c-header-inner {
    height: 100px
  }
}

@media screen and (max-width: 767px) {
  .c-header-inner {
    height: 40px;
    line-height: 1
  }
}

.c-header-inner a {
  display: inline-block
}

@media screen and (max-width: 767px) {
  .c-header .content {
    width: 90%
  }
}

@media screen and (min-width: 768px) {
  .c-header-text {
    font-size: 2rem
  }
}

@media screen and (max-width: 767px) {
  .c-header-text {
    font-size: 1rem
  }
}

@media screen and (min-width: 768px) {
  .c-header-img {
    width: 18.4%
  }
}

@media screen and (max-width: 767px) {
  .c-header-img {
    width: 26%
  }
}

.m-pagetop {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  bottom: 10rem;
  background: #fff;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, .1019607843);
  font-weight: bold;
  transition: all .3s ease-out;
  opacity: 0
}

@media screen and (min-width: 768px) {
  .m-pagetop {
    width: 110px;
    height: 110px;
    font-size: 1.4rem
  }
}

@media screen and (max-width: 767px) {
  .m-pagetop {
    padding-block-start: 1rem;
    width: 45px;
    height: 45px;
    font-size: 1rem
  }
}

.m-pagetop:hover {
  filter: opacity(100%)
}

.m-pagetop:hover span {
  filter: opacity(70%)
}

.m-pagetop span {
  position: relative
}

.m-pagetop span::before {
  position: absolute;
  content: "";
  background: url("../img/common/arrow_nav.svg") no-repeat center center/contain;
  transform: rotate(180deg)
}

@media screen and (min-width: 768px) {
  .m-pagetop span::before {
    top: -1.5rem;
    right: 30%;
    width: 15.19px;
    height: 7.82px
  }
}

@media screen and (max-width: 767px) {
  .m-pagetop span::before {
    top: -1rem;
    right: 20%;
    width: 11.43px;
    height: 5.88px
  }
}

.c-footer-inner {
  background: #3e3c3c;
  padding: 2.2rem 0 1rem;
  color: #fff
}

.c-footer-nav {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding-bottom: 2rem;
  text-align: center;
  width: 90%
}

@media screen and (max-width: 767px) {
  .c-footer-nav {
    flex-direction: column-reverse;
    text-align: left;
    width: 90%
  }
}

.c-footer-nav .nav-right {
  display: flex;
  padding-bottom: 2rem
}

@media screen and (max-width: 767px) {
  .c-footer-nav .nav-right {
    flex-direction: column
  }
}

.c-footer-nav .nav-right ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-right: 5rem;
  max-width: 450px
}

@media screen and (max-width: 767px) {
  .c-footer-nav .nav-right ul {
    display: block;
    margin-right: 3rem
  }
}

.c-footer-nav .nav-right ul li {
  font-size: 1.4rem;
  margin-bottom: .7rem;
  text-align: left;
  width: 200px
}

@media screen and (max-width: 767px) {
  .c-footer-nav .nav-right ul li {
    font-size: 1.3rem
  }
}

.c-footer-nav .nav-right ul li a {
  color: #fff;
  text-decoration: none;
  transition: all .3s ease
}

.c-footer-nav .nav-right ul li a:hover {
  text-decoration: underline
}

.c-footer-nav .nav-right ul li a:link {
  color: #fff
}

.c-footer-nav .nav-right ul li a:visited {
  color: #fff
}

.c-footer-nav .nav-right ul li a:active {
  color: #fff
}

.c-footer-nav .nav-right ul li a:before {
  content: "-";
  padding-right: .5rem
}

.c-footer-nav .nav-left {
  text-align: center
}

.c-footer-bottom {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 650px
}

.c-footer-bottom p {
  font-size: 1.4rem;
  margin-left: 14rem;
  text-align: center
}

@media screen and (max-width: 767px) {
  .c-footer-bottom p {
    margin: 0 auto
  }
}

.l-mv {
  overflow: hidden
}

.l-mv-inner {
  position: relative
}

.l-mv-video-wrap {
  padding-top: 43%;
  position: relative;
  overflow: hidden
}

@media screen and (min-width: 768px) {
  .l-mv-video-wrap {
    width: 62.5%;
    height: 62.5%
  }
}

@media screen and (max-width: 767px) {
  .l-mv-video-wrap {
    padding-top: 56.25%
  }
}

.l-mv-video-wrap video {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1
}

@media screen and (min-width: 768px) {
  .l-mv-video-wrap video {
    top: -15%
  }
}

@media screen and (max-width: 767px) {
  .l-mv-video-wrap video {
    top: 0
  }
}

@media screen and (max-width: 767px) {
  .l-mv-video-textArea {
    display: none
  }
}

.l-mv-video-textBg {
  position: absolute;
  top: 10%;
  width: 55%;
  height: 100vh;
  background-color: #0093e9;
  background-color: #80aee3;
  filter: opacity(70%);
  z-index: -1
}

@media screen and (min-width: 768px) {
  .l-mv-video-textBg {
    right: 5%;
    background-image: linear-gradient(135deg, #80aee3 0%, #7faeef 16%, #77c8e1 39%, #6ceace 100%)
  }
}

@media screen and (min-width: 768px) {
  .l-mv-video-text {
    position: absolute;
    top: 22%;
    right: 12%;
    width: 35%;
    opacity: 0;
    z-index: 10
  }
}

.l-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 10
}

.l-cta-btnArea {
  position: relative;
  display: block;
  margin-left: auto;
  outline: none;
  background: linear-gradient(270deg, #21B5F7 0%, #8A46F8 25%, #6666F8 51%, #ED3B7C 75%, #F836A6 100%);
  background-position: 1% 50%;
  background-size: 200% auto;
  transition: background-position .3s ease-out
}

@media screen and (min-width: 768px) {
  .l-cta-btnArea {
    padding: 1rem 21rem 1rem 1rem;
    width: 700px
  }
}

@media screen and (max-width: 767px) {
  .l-cta-btnArea {
    padding: .6rem 3.6rem .7rem .67rem;
    width: 100%
  }
}

.l-cta-btnArea:hover {
  outline-width: 0;
  background-position: 99% 50%;
  color: #fff;
  filter: opacity(100%)
}

.l-cta-btnArea .btn-text {
  position: relative;
  border: 1px solid #fff;
  font-weight: bold;
  color: #fff
}

@media screen and (min-width: 768px) {
  .l-cta-btnArea .btn-text {
    padding: 2.1rem 5.4rem 2.1rem 3rem;
    font-size: 1.8rem
  }
}

@media screen and (max-width: 767px) {
  .l-cta-btnArea .btn-text {
    padding: 1.5rem 3.27rem 1.5rem .8rem;
    font-size: 1.2rem;
    white-space: nowrap
  }
}

.l-cta-btnArea .btn-text::after {
  position: absolute;
  content: "";
  background: url("../img/common/arrow.svg") no-repeat center center/contain
}

@media screen and (min-width: 768px) {
  .l-cta-btnArea .btn-text::after {
    top: 43%;
    right: -15%;
    width: 22%;
    height: 10%
  }
}

@media screen and (max-width: 767px) {
  .l-cta-btnArea .btn-text::after {
    top: 40%;
    right: -9%;
    width: 17%;
    height: 17%
  }
}

@media screen and (min-width: 768px) {
  .l-intro {

  }
}

@media screen and (max-width: 767px) {
  .l-intro {
    margin-top: -17rem;
  }
}

@media screen and (max-width: 767px) {
  .l-intro .l-mv-video-text {
    position: absolute;
    top: .5%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%
  }
}

@media screen and (max-width: 767px) {
  .l-intro .content {
    width: 100%
  }
}

.l-intro-leadArea {
  position: relative;
  margin-inline: auto;
  max-width: 1100px;
  width: 100%;
  text-align: center
}

.l-intro-leadArea::before {
  position: absolute;
  content: ""
}

@media screen and (min-width: 768px) {
  .l-intro-leadArea::before {
    top: -5%;
    left: 0;
    width: 15.72%;
    height: 32.03%;
  }
}

@media screen and (max-width: 767px) {
  .l-intro-leadArea::before {
    top: -22%;
    left: 0;
    width: 14.66%;
    height: 14.66%;

  }
}

.l-intro-leadArea::after {
  position: absolute;
  content: ""
}

@media screen and (min-width: 768px) {
  .l-intro-leadArea::after {
    top: 50%;
    right: 0;
    width: 8.45%;
    height: 18.51%;
  }
}

@media screen and (max-width: 767px) {
  .l-intro-leadArea::after {
    bottom: 25%;
    right: 5%;
    width: 14.66%;
    height: 14.66%;
  }
}

.l-intro-leadArea .text {
  margin-block-end: 6.45rem;
  text-align: center;
  line-height: 2.375
}

@media screen and (min-width: 768px) {
  .l-intro-leadArea .text {
    font-size: 2rem
  }
}

@media screen and (max-width: 767px) {
  .l-intro-leadArea .text {
    margin-inline: auto;
    margin-block-end: 1.22rem;
    width: 86.4%;
    font-size: 1.4rem;
    text-align: left;
    line-height: 2;
    font-size: 1.6rem;
  }
}

.l-intro-leadArea .catch {
  position: relative;
  margin-block-end: 4.5rem;
  margin-inline: auto
}

@media screen and (min-width: 768px) {
  .l-intro-leadArea .catch {
    width: 400px
  }
}

@media screen and (max-width: 767px) {
  .l-intro-leadArea .catch {
    width: 70.66%
  }
}

.l-intro-leadArea .catch::before, .l-intro-leadArea .catch::after {

}

@media screen and (min-width: 768px) {
  .l-intro-leadArea .catch::before, .l-intro-leadArea .catch::after {
    height: 87px
  }
}

@media screen and (max-width: 767px) {
  .l-intro-leadArea .catch::before, .l-intro-leadArea .catch::after {
    height: 53px
  }
}

.l-intro-leadArea .catch::before {
  transform: rotate(-15deg)
}

@media screen and (min-width: 768px) {
  .l-intro-leadArea .catch::before {
    left: -30px
  }
}

@media screen and (max-width: 767px) {
  .l-intro-leadArea .catch::before {
    left: -15px
  }
}

.l-intro-leadArea .catch::after {
  transform: rotate(15deg)
}

@media screen and (min-width: 768px) {
  .l-intro-leadArea .catch::after {
    right: -30px
  }
}

@media screen and (max-width: 767px) {
  .l-intro-leadArea .catch::after {
    right: -15px
  }
}

@media screen and (min-width: 768px) {
  .l-intro-figure {
    margin-block-start: 6.4rem
  }
}

.l-navVoice {
  position: relative
}

@media screen and (min-width: 768px) {
  .l-navVoice {
    margin-block: 10rem 4.4rem;
    font-size: 30px;
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .l-navVoice {
    padding-block: 5rem 7.6rem;
    margin-block-end: 1rem;
    padding: 2.35rem;
    font-size: 2rem;
  }
}

.l-navVoice::after {
  position: absolute;
  content: "";
  background: #e3f1fb;
  z-index: -1
}

@media screen and (min-width: 768px) {
  .l-navVoice::after {
    top: 23%;
    width: 100%;
    height: 45%
  }
}

@media screen and (max-width: 767px) {
  .l-navVoice::after {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 78.66%;
    height: 100%
  }
}

.l-navVoice .content {
  width: 100%;
  font-weight: 600;
}

.l-navVoice-title {
  margin-block-end: 5rem;
  text-align: center
}

@media screen and (max-width: 767px) {
  .l-navVoice-title {
    margin-block-end: 3rem;
    margin-inline: auto;
    width: 68%;
    text-align: left
  }
}

.l-navVoice-list {
  display: flex;
  flex-wrap: wrap
}

@media screen and (min-width: 768px) {
  .l-navVoice-list {
    gap: 2.4rem;
    justify-content: center
  }
}

@media screen and (max-width: 767px) {
  .l-navVoice-list {
    gap: 0 .4rem;
    justify-content: space-between
  }
}

.l-navVoice-list::before {
  content: "";
  display: block;
  width: 230px;
  height: 0;
  order: 1
}

.l-navVoice-list::after {
  content: "";
  display: block;
  width: 230px;
  height: 0
}

@media screen and (min-width: 768px) {
  .l-navVoice-item {
    width: 230px
  }
}

@media screen and (max-width: 767px) {
  .l-navVoice-item {
    width: 48%
  }
}

.l-navVoice-item .item-textArea {
  position: relative;
  left: 50%;
  transform: translatex(-50%);
  width: 86.95%;
  background: #fff;
  box-shadow: 0px 3px 5px rgba(187, 217, 245, .5019607843)
}

@media screen and (min-width: 768px) {
  .l-navVoice-item .item-textArea {
    top: -3.5rem;
    padding-block: 1.6rem;
    font-size: 1.4rem;
    line-height: 2
  }
}

@media screen and (max-width: 767px) {
  .l-navVoice-item .item-textArea {
    top: -3rem;
    padding-block: 1.5rem 2.5rem;
    font-size: 1.3rem;
    line-height: 1.6
  }
}

.l-navVoice-item .item-textArea p {
  text-align: center
}

.l-navVoice-item .item-textArea .date {
  color: #0079c0
}

.l-navVoice-item .item-textArea hr {
  margin-inline: auto;
  color: #0079c0
}

@media screen and (min-width: 768px) {
  .l-navVoice-item .item-textArea hr {
    margin-block: 1.5rem 1.3rem;
    width: 15px;
    size: 1.5px
  }
}

@media screen and (max-width: 767px) {
  .l-navVoice-item .item-textArea hr {
    margin-block: .5rem;
    width: 10px;
    size: 1px
  }
}

.l-navVoice-item .item-textArea .link {
  font-weight: bold;
  color: #0079c0
}

@media screen and (min-width: 768px) {
  .l-navVoice-item .item-textArea .link {
    padding-left: 2.75rem;
    text-align: left
  }
}

@media screen and (max-width: 767px) {
  .l-navVoice-item .item-textArea .link {
    text-align: center
  }
}

.l-navVoice-item .item-textArea .link span {
  position: relative
}

.l-navVoice-item .item-textArea .link span::after {
  position: absolute;
  content: "";
  background: url("../img/common/arrow_nav.svg") no-repeat center center/contain
}

@media screen and (min-width: 768px) {
  .l-navVoice-item .item-textArea .link span::after {
    top: 20%;
    right: -20%;
    width: 21px;
    height: 10px
  }
}

@media screen and (max-width: 767px) {
  .l-navVoice-item .item-textArea .link span::after {
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 7px
  }
}

@media screen and (min-width: 768px) {
  .l-work {
    margin-block-end: 13.8rem
  }
}

@media screen and (max-width: 767px) {
  .l-work {
    margin-block-end: 7rem
  }
}

@media screen and (min-width: 768px) {
  .l-work-title {
    text-align: center;
  }
  .l-work-title_02 {
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .l-work-title {
    position: absolute;
    top: 327px;
    left: 0%;
    width: 100%;
    z-index: 1;
    font-size: 2rem !important;
  }
  .l-work-title_02 {
    position: absolute;
    top: 30px;
    left: 0%;
    width: 100%;
    z-index: 1;
    font-size: 2rem !important;
  }
}

@media screen and (min-width: 768px) {
  .l-work-title figure {
    width: 78%
  }
  .l-work-title_02 figure {
    width: 78%
  }
}

@media screen and (max-width: 767px) {
  .l-work-title figure {
    width: 100%
  }
  .l-work-title_02 figure {
    width: 100%
  }
}

.l-work .l-leadArea {
  position: relative
}

.l-work .l-leadArea_03 {
  position: relative
}

@media screen and (min-width: 768px) {
  .l-work .l-leadArea {
    margin-block-end: 6rem
  }
  .l-work .l-leadArea_03 {
    margin-block-end: 6rem
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-leadArea {
    margin-block-end: 5rem
  }
  .l-work .l-leadArea_03 {
    margin-block-end: 5rem
  }
}

.l-work .l-leadArea::before {
  position: absolute;
  right: 0;
  content: ""
}
.l-work .l-leadArea_03::before {
  position: absolute;
  right: 0;
  content: ""
}
@media screen and (min-width: 768px) {
  .l-work .l-leadArea::before {
    background: url(../../../../uploads/2023/10/beginner_content_02.jpg) no-repeat center center / cover;
    width: 47.91%;
    height: 450px
  }
  .l-work .l-leadArea_03::before {
    background: url(../../../../uploads/2023/10/beginner_content_03.jpg) no-repeat center center / cover;
    width: 47.91%;
    height: 405px
  }

}

@media screen and (max-width: 767px) {
  .l-work .l-leadArea::before {
    background: url(../../../../uploads/2023/10/beginner_content_02.jpg) no-repeat center / contain;
    padding-block-start: 390%;
    width: 100%
  }
  .l-work .l-leadArea_03::before {
    background: url(../../../../uploads/2023/10/beginner_content_03.jpg) no-repeat center / contain;
    padding-block-start: 225%;
    width: 100%
  }
}

.l-work .l-leadArea-inner {
  margin-inline: auto;
  max-width: 1000px;
  width: 100%
}

.l-work .l-leadArea-text {
  margin-right: auto
}

.l-work .l-leadArea-text_02 {
  margin-right: auto
}

@media screen and (min-width: 768px) {
  .l-work .l-leadArea-text {
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-leadArea-text {
    padding-block-start: 66%;
    width: 100%
  }
  .l-work .l-leadArea-text_02 {
    padding-block-start: 26%;
    width: 100%
  }
}

.l-work .l-leadArea-text .catch {
  margin-inline: 8% 10%;
  line-height: 1.7;
  color: #0079c0
}

.l-work .l-leadArea-text_02 .catch {
  margin-inline: 8% 10%;
  line-height: 1.7;
  color: #0079c0
}

.l-work .l-leadArea-text .catch_02 {
  margin-inline: 8% 10%;
  line-height: 1.7;
  color: #0079c0
}

.l-work .l-leadArea-text_02 .catch_02 {
  margin-inline: 8% 10%;
  line-height: 1.7;
  color: #0079c0;
  font-size: 2rem;
}

@media screen and (min-width: 768px) {
  .l-work .l-leadArea-text .catch {
    margin-block-end: 4rem;
    font-size: 2.6rem;
    text-align: center;
  }
  .l-work .l-leadArea-text .catch_02 {
    margin-block-end: 4rem;
    font-size: 2.6rem;
    text-align: left;
  }

  .l-work .l-leadArea-text .catch_02 {
    margin-block-end: 2rem;
    padding-block-start: 6rem;
    font-size: 2.6rem;
}
  .l-work .l-leadArea-text_02 .catch {
    margin-block-end: 4rem;
    font-size: 2.6rem;
    text-align: center;
  }
  .l-work .l-leadArea-text_02 .catch_02 {
    margin-block-end: 4rem;
    font-size: 2.6rem;
    text-align: left;
  }

  .l-work .l-leadArea-text_02 .catch_02 {
    margin-block-end: 2rem;
    padding-block-start: 6rem;
    font-size: 2.6rem;
    text-align: center;
}
}

@media screen and (max-width: 767px) {
  .l-work .l-leadArea-text .catch {
    margin-block-end: 3rem;
    padding-block-start: 13rem;
    font-size: 2rem;
  }
  .l-work .l-leadArea-text_02 .catch {
    margin-block-end: 3rem;
    padding-block-start: 13rem;
    font-size: 2rem;
  }
}

.l-work .l-leadArea-text .catch span {
  display: block
}

.l-work .l-leadArea-text .text {
  margin-inline: 8% 10%;
  text-align: center;
}

.l-work .l-leadArea-text .text span {
  display: block
}

.l-work .l-leadArea-text_02 .catch span {
  display: block
}

.l-work .l-leadArea-text_02 .text {
  margin-inline: 8% 10%;
  text-align: center;
}

.l-work .l-leadArea-text_02 .text span {
  display: block
}


.l-work .l-leadArea.strengths::before {
  background: url("https://topics.shiftinc.jp/recruit-potential/assets/img/strengths_01.jpg") no-repeat center center/cover
}

.l-work .l-data {
  margin-inline: auto
}

.l-work .l-image {
  margin-inline: auto
}

@media screen and (min-width: 768px) {
  .l-work .l-data {
    margin-block-end: 10.8rem;
    max-width: 950px;
    width: 90%
  }
  .l-work .l-image {
    margin-block-end: 10.8rem;
    width: 100%
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-data {
    margin-block-end: 5rem;
    width: 86.4%;
    margin-block-start: 38rem;
  }
  .l-work .l-image {
    margin-block-end: 5rem;
    width: 100%;
    margin-block-start: 9rem;
  }
  .l-work .l-leadArea-text .text {
    margin-inline: 8% 6%;
}
  .l-work .l-leadArea-text_02 .text {
    margin-inline: 8% 6%;
}
}

.l-work .l-data-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

.l-work .l-image-list {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
  .l-work .l-data-list {
    gap: 7rem 5.7rem
  }
  .l-work .l-image-list {
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-data-list {
    gap: 5rem;
    width: 100%
  }
  .l-work .l-image-list {
    width: 100%
  }
}

@media screen and (min-width: 768px) {
  .l-work .l-data-item {
    width: 45%
  }
  .l-work .l-image-item {
    width: 50%
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-data-item {
    width: 100%
  }
  .l-work .l-image-item {
    width: 100%
  }
}

.l-work .l-data-item .title {
  border-top: 1px #0079c0 solid;
  border-bottom: 1px #0079c0 solid;
  text-align: center;
  color: #0079c0
}

@media screen and (min-width: 768px) {
  .l-work .l-data-item .title {
    margin-block-end: 3.7rem;
    padding: 2.4rem;
    font-size: 2.2rem
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-data-item .title {
    margin-block-end: 5rem;
    padding: 1.35rem;
    font-size: 2rem
  }
}

.l-work .l-data-item .text-wrap {
  display: flex;
  gap: 1rem
}

@media screen and (max-width: 767px) {
  .l-work .l-data-item .text-wrap {
    margin-inline: auto;
    width: 86.4%
  }
}

@media screen and (min-width: 768px) {
  .l-work .l-data-item .text-wrap .text {
    width: 75%
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-data-item .text-wrap .text {
    width: 70%
  }
}

@media screen and (min-width: 768px) {
  .l-work .l-data-item .text-wrap .icon {
    width: 19%
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-data-item .text-wrap .icon {
    margin-block-start: 3rem;
    width: 25%
  }
}

.l-work .l-data-item .figure {
  margin-inline: auto
}
.l-work .l-image-item .figure {
  margin-inline: auto
}
@media screen and (min-width: 768px) {
  .l-work .l-data-item .figure {
    margin-block-end: 4.5rem
  }
  .l-work .l-image-item .figure {
    margin-block-end: 4.5rem
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-data-item .figure {
    margin-block-end: 2.7rem
  }
  .l-work .l-image-item .figure {
    margin-block-end: 2.7rem
  }
}

@media screen and (min-width: 768px) {
  .l-work .l-data-item .figure.item01 {
    width: 96.75%
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-data-item .figure.item01 {
    width: 86.4%
  }
}

@media screen and (min-width: 768px) {
  .l-work .l-data-item .figure.item02 {
    width: 69.3%
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-data-item .figure.item02 {
    width: 69.78%
  }
}

@media screen and (min-width: 768px) {
  .l-work .l-data-item .figure.item03 {
    width: 70.1%
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-data-item .figure.item03 {
    width: 70.93%
  }
}

@media screen and (min-width: 768px) {
  .l-work .l-data-item .figure.item04 {
    margin-block-start: 7rem;
    width: 46.5%
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-data-item .figure.item04 {
    width: 44.8%
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-data-item .text {
    margin-inline: auto;
    width: 86.4%
  }
}

@media screen and (max-width: 767px)and (max-width: 767px) {
  .l-work .l-data-item .text span {
    display: block
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-strengths .m-titleArea {
    margin-block-end: 5rem
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-strengths .m-titleArea .catch span {
    display: block
  }
}

@media screen and (min-width: 768px) {
  .l-work .l-strengths-list {
    overflow: inherit
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-strengths-list.content {
    width: 100%
  }
}

.l-work .l-strengths-item {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #0079c0;
  height: auto
}

@media screen and (min-width: 768px) {
  .l-work .l-strengths-item {
    padding: 7.9rem 4.5rem 4.5rem;
    width: 32% !important
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-strengths-item {
    padding: 4.5rem 1.5rem 2.5rem;
    margin-block-start: 2.5rem
  }
}

.l-work .l-strengths-item::before {
  position: absolute;
  content: ""
}

@media screen and (min-width: 768px) {
  .l-work .l-strengths-item::before {
    top: -38.5px;
    width: 150px;
    height: 77px
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-strengths-item::before {
    top: -28px;
    width: 84px;
    height: 51.06px
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-strengths-item .wrap {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    margin-block-end: 2.2rem
  }
}

.l-work .l-strengths-item .figure {
  margin-inline: auto
}

@media screen and (min-width: 768px) {
  .l-work .l-strengths-item .figure {
    margin-block-end: 7rem
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-strengths-item .figure {
    margin-block-end: 0
  }
}

.l-work .l-strengths-item .title {
  color: #0079c0
}

@media screen and (min-width: 768px) {
  .l-work .l-strengths-item .title {
    margin-block-end: 2.5rem;
    font-size: 2.2rem
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-strengths-item .title {
    margin-block-end: 0;
    font-size: 1.6rem
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-strengths-item .text {
    font-size: 1.4rem;
    line-height: 2
  }
}

.l-work .l-strengths-item.item01::before {
  background: #fff url("../img/strengths_no01.png") no-repeat center center/contain
}

@media screen and (min-width: 768px) {
  .l-work .l-strengths-item.item01 figure {
    width: 98px
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-strengths-item.item01 figure {
    width: 63px
  }
}

.l-work .l-strengths-item.item02::before {
  background: #fff url("../img/strengths_no02.png") no-repeat center center/contain
}

@media screen and (min-width: 768px) {
  .l-work .l-strengths-item.item02 figure {
    width: 119px
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-strengths-item.item02 figure {
    width: 72px
  }
}

.l-work .l-strengths-item.item03::before {
  background: #fff url("../img/strengths_no03.png") no-repeat center center/contain
}

@media screen and (min-width: 768px) {
  .l-work .l-strengths-item.item03 figure {
    width: 88px
  }
}

@media screen and (max-width: 767px) {
  .l-work .l-strengths-item.item03 figure {
    width: 56.27px
  }
}

.l-work .l-strengths .swiper-wrapper {
  display: flex;
  justify-content: space-between
}

.l-everyone {
  position: relative;
  background: #f1fbfb
}

@media screen and (min-width: 768px) {
  .l-everyone {
    padding-block: 15.5rem 1rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone {
    padding-block-start: 7.8rem
  }
}

.l-everyone-titleWrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%)
}

@media screen and (min-width: 768px) {
  .l-everyone-titleWrap {
    top: -8rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone-titleWrap {
    top: -3rem
  }
}

@media screen and (min-width: 768px) {
  .l-everyone-title {
    margin-block-end: 2rem;
    width: 78%
  }
}

@media screen and (max-width: 767px) {
  .l-everyone-title {
    width: 100%
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-backup {
    margin-block-end: 20rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-backup {
    margin-block-end: 5rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-backup .m-titleArea .catch span {
    display: block
  }
}

.l-everyone .l-backup-list {
  display: flex;
  justify-content: space-between
}

.l-everyone .l-backup-item {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 7.9rem 4.5rem 4.5rem;
  border: 1px solid #0079c0;
  width: 32%
}

.l-everyone .l-backup-item::before {
  position: absolute;
  top: -38.5px;
  content: "";
  width: 150px;
  height: 77px
}

.l-everyone .l-backup-item .figure {
  margin-block-end: 7rem
}

.l-everyone .l-backup-item .title {
  margin-block-end: 2.5rem;
  font-size: 2.2rem;
  color: #0079c0
}

.l-everyone .l-backup-item.item01::before {
  background: #fff url("../img/strengths_no01.png") no-repeat center center/contain
}

.l-everyone .l-backup-item.item01 figure {
  width: 98px
}

.l-everyone .l-backup-item.item02::before {
  background: #fff url("../img/strengths_no02.png") no-repeat center center/contain
}

.l-everyone .l-backup-item.item02 figure {
  width: 119px
}

.l-everyone .l-backup-item.item03::before {
  background: #fff url("../img/strengths_no03.png") no-repeat center center/contain
}

.l-everyone .l-backup-item.item03 figure {
  width: 88px
}

.l-everyone .l-backup-swiper {
  overflow: hidden
}

@media screen and (min-width: 768px) {
  .l-everyone .l-backup-swiper {
    margin-block-end: 15rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-backup-swiper {
    margin-block-end: 5rem;
    width: 100%
  }
}

.l-everyone .l-backup-swiper .swiper-wrapper {
  margin-block-end: 2rem
}

@media screen and (min-width: 768px) {
  .l-everyone .l-backup-swiper .swiper-wrapper {
    display: flex
  }
}

.l-everyone .l-backup-swiper .swiper-slide-inner .no {
  margin-block-end: 1.7rem;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 6.6rem;
  font-weight: 200;
  color: #0079c0
}

.l-everyone .l-backup-swiper .swiper-slide-inner .title {
  height: 90px;
  font-size: 2.2rem;
  color: #0079c0
}

.l-everyone .l-backup-swiper .swiper-slide-inner .text {
  font-size: 1.5rem
}

.l-everyone .l-backup-swiper .swiper-slide {
  display: flex;
  justify-content: space-between;
  height: auto
}

@media screen and (min-width: 768px) {
  .l-everyone .l-backup-swiper .swiper-slide {
    width: 20%
  }
  .l-everyone .l-backup-swiper .swiper-slide:nth-child(even) {
    background-image: linear-gradient(0deg, rgba(128, 174, 227, 0.3), rgba(127, 174, 239, 0.3) 30%, rgba(108, 234, 206, 0.3))
  }
  .l-everyone .l-backup-swiper .swiper-slide:nth-child(even) .swiper-slide-inner {
    margin-block-start: 58px;
    background-image: none
  }
}

.l-everyone .l-backup-swiper .swiper-slide .swiper-slide-inner {
  margin-block-start: 58px;
  padding: 2.6rem 1.8rem 3.7rem;
  background-image: linear-gradient(0deg, rgba(128, 174, 227, 0.2), rgba(127, 174, 239, 0.2) 60%, rgba(108, 234, 206, 0.2))
}

@media screen and (max-width: 767px) {
  .l-everyone .l-backup-swiper .swiper-slide-active {
    background-image: linear-gradient(0deg, rgba(128, 174, 227, 0.3), rgba(127, 174, 239, 0.3) 30%, rgba(108, 234, 206, 0.3))
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-backup-swiper .swiper-slide-active .swiper-slide-inner {
    margin-block-start: 58px;
    background-image: none
  }
}

.l-everyone .l-backup-swiper .note {
  text-align: right
}

@media screen and (min-width: 768px) {
  .l-everyone .l-backup-swiper .note {
    font-size: 1.6rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-backup-swiper .note {
    font-size: 1.1rem;
    text-align: center
  }
}

.l-everyone .l-backup-education-title {
  color: #0079c0
}

@media screen and (min-width: 768px) {
  .l-everyone .l-backup-education-title {
    margin-block-end: 5rem;
    font-size: 2.4rem;
    text-align: center
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-backup-education-title {
    margin-block-end: 3rem;
    font-size: 2rem
  }
}

.l-everyone .l-backup-education-list {
  display: flex;
  gap: .1
}

@media screen and (max-width: 767px) {
  .l-everyone .l-backup-education-list {
    flex-wrap: wrap
  }
}

.l-everyone .l-backup-education-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #fff;
  box-shadow: 0px 1px 5px rgba(187, 217, 245, .8)
}

@media screen and (min-width: 768px) {
  .l-everyone .l-backup-education-item {
    padding: 3.6rem 2rem 5rem;
    width: 25%
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-backup-education-item {
    padding: 3rem 1.4rem 2.2rem;
    width: 50%
  }
}

.l-everyone .l-backup-education-item .text {
  font-size: 1.4rem
}

@media screen and (min-width: 768px) {
  .l-everyone .l-backup-education-item .text {
    text-align: center
  }
}

.l-everyone .l-backup-education-item .text .note {
  font-size: 1.2rem
}

.l-everyone .l-backup-education-item .logo {
  display: flex;
  align-items: center;
  height: 115px
}

@media screen and (min-width: 768px) {
  .l-everyone .l-backup-education-item .logo {
    margin-block-end: 3.1rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-backup-education-item .logo {
    margin-block-end: 1rem
  }
}

.l-everyone .l-backup-education-item.item01 .logo {
  max-width: 170px
}

.l-everyone .l-backup-education-item.item02 .logo {
  max-width: 127px
}

.l-everyone .l-backup-education-item.item03 .logo {
  max-width: 170px
}

.l-everyone .l-backup-education-item.item04 .logo {
  max-width: 156px
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs {
    margin-block-end: 20rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs {
    margin-block-end: 5rem
  }
}

.l-everyone .l-jobs-title {
  padding-block: 1.3rem;
  width: 334px;
  border-top: 1px solid #0079c0;
  border-bottom: 1px solid #0079c0;
  font-size: 2.2rem;
  font-weight: normal;
  text-align: center;
  color: #0079c0
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-title {
    margin-block-end: 5rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-title {
    width: 100%;
    font-size: 2rem
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-work .jobsWork {
    margin-block-end: 15rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-work .jobsWork {
    margin-block-end: 5rem
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-work .jobsWork::before {
    background: url("../img/jobs_work_bk_pc.jpg") no-repeat center center;
    width: 53%;
    height: 450px
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-work .jobsWork::before {
    left: 50%;
    transform: translateX(-50%);
    background: url("../img/jobs_work_bk_sp.jpg") no-repeat center center;
    width: 78.66%
  }
}

.l-everyone .l-jobs-work .jobsWork .m-titleArea-text {
  padding-block-end: 0
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-work .jobsWork .m-titleArea-text {
    width: 37%
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-work .jobsWork .m-titleArea-text {
    margin-inline: auto;
    width: 86.4%
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-work .jobsWork .list {
    padding-block-start: 4.2rem;
    margin-inline-start: 2rem
  }
}

.l-everyone .l-jobs-work .jobsWork .list .term {
  font-weight: bold
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-work .jobsWork .list .term {
    margin-block-end: 2.3rem;
    font-size: 2rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-work .jobsWork .list .term {
    margin-block-end: 2rem;
    font-size: 1.8rem
  }
}

.l-everyone .l-jobs-work .jobsWork .list .description {
  font-size: 1.6rem;
  line-height: 2
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-work .jobsWork .list .description {
    margin-bottom: 5rem
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-work .jobsWork .list .description.mb {
    margin-block-end: 5rem
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-career {
    margin-block-end: 15.2rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-career {
    width: 100%
  }
}

.l-everyone .l-jobs-career-list {
  display: flex
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-career-list {
    flex-direction: column
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-career-item {
    padding: 6rem 4.2rem 5.6rem;
    width: 33%
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-career-item {
    padding: 5rem 4rem;
    width: 100%
  }
}

.l-everyone .l-jobs-career-item:first-child {
  background: #ffeaea
}

.l-everyone .l-jobs-career-item:nth-child(2) {
  background: #ffffb4
}

.l-everyone .l-jobs-career-item:nth-child(3) {
  background: #dbf6fc
}

.l-everyone .l-jobs-career-item .occupation {
  font-weight: bold;
  text-align: center
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-career-item .occupation {
    margin-block-end: 2.2rem;
    font-size: 2rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-career-item .occupation {
    margin-block-end: 2.4rem;
    font-size: 1.8rem
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-career-item .sub {
    margin-block-end: 2.2rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-career-item .sub {
    margin-block-end: 2rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-salary .l-jobs-title {
    margin-block-end: 5rem
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-salary-inner {
    margin-block-end: 6rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-salary-inner {
    margin-block-end: 5rem;
    width: 100%
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-salary-inner .text {
    text-align: center
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-salary-inner .text {
    margin-block-end: 2rem;
    margin-inline: auto;
    width: 86.4%
  }
}

.l-everyone .l-jobs-salary-inner .note {
  font-size: 1.2rem
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-salary-inner .note {
    text-align: center
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-salary-inner .note {
    margin-inline: auto;
    width: 86.4%
  }
}

.l-everyone .l-jobs-salary-item {
  display: flex;
  flex-direction: column
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-salary-item {
    margin-block-end: 1.5rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-salary-item {
    margin-block-end: 5rem
  }
}

.l-everyone .l-jobs-salary-item .case {
  display: flex;
  align-items: flex-end
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-salary-item .case {
    margin-block-end: 5rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-salary-item .case {
    margin-inline-end: 3.6rem
  }
}

.l-everyone .l-jobs-salary-item .case .text {
  margin-inline-end: 1.4rem;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 200;
  line-height: 1;
  white-space: nowrap;
  color: #0079c0
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-salary-item .case .text {
    font-size: 3rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-salary-item .case .text {
    font-size: 2.2rem
  }
}

.l-everyone .l-jobs-salary-item .case .text .no {
  display: inline
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-salary-item .case .text .no {
    font-size: 4rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-salary-item .case .text .no {
    font-size: 2.9rem
  }
}

.l-everyone .l-jobs-salary-item .case .line {
  width: 80%;
  height: 1px;
  background: #0079c0
}

.l-everyone .l-jobs-salary-item .wrap {
  display: flex;
  flex-wrap: wrap
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-salary-item .wrap {
    flex-direction: column
  }
}

.l-everyone .l-jobs-salary-item .top {
  -ms-grid-row-align: stretch;
  align-self: stretch;
  padding: 2rem 4rem
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-salary-item .top {
    width: 22%;
    border-right: 1px solid #0079c0
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-salary-item .top {
    position: relative;
    display: flex;
    align-items: center;
    margin-block-end: 3.3rem;
    width: 100%
  }
  .l-everyone .l-jobs-salary-item .top::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    width: 150px;
    height: 1px;
    background: #0079c0
  }
}

.l-everyone .l-jobs-salary-item .top .figure {
  margin-block-end: 1.68rem;
  width: 56px
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-salary-item .top .figure {
    margin-inline: auto
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-salary-item .top .figure {
    margin-inline-end: 1.8rem
  }
}

.l-everyone .l-jobs-salary-item .top .text {
  font-weight: bold;
  line-height: 1.3
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-salary-item .top .text {
    text-align: center
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-salary-item .top .text span {
    display: flex;
    font-size: 1.4rem
  }
}

.l-everyone .l-jobs-salary-item .center {
  -ms-grid-row-align: center;
  align-self: center
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-salary-item .center {
    padding-inline: 3.9rem 3.7rem;
    width: 48%
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-salary-item .center {
    margin-block-end: 2rem;
    width: 100%
  }
}

.l-everyone .l-jobs-salary-item .bottom {
  -ms-grid-row-align: stretch;
  align-self: stretch
}

@media screen and (min-width: 768px) {
  .l-everyone .l-jobs-salary-item .bottom {
    padding-inline-start: 3.2rem;
    border-left: 1px solid #0079c0;
    width: 30%
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-jobs-salary-item .bottom {
    width: 100%
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice .m-titleArea.voice {
    margin-block-end: 22rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice .m-titleArea.voice {
    margin-block-end: 5rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice .m-titleArea.voice .m-titleArea-text .text {
    padding-inline-start: 0;
    width: 78.66%
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-box {
    margin-block-end: 17rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-box {
    position: relative;
    top: -7rem
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-box.right .l-voice-box-inner {
    justify-content: flex-start
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-box.right .l-voice-box-inner {
    flex-direction: column
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-box.right .description {
    right: 9%;
    padding: 7rem 5rem 6.3rem 17%
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-box.right .description {
    margin-inline-start: auto;
    padding: 7rem 4rem 3rem 2.1rem
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-box.right .profile {
    margin-inline-start: 25%
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-box.right .profile {
    margin-inline-start: 20%
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-box.right .link {
    right: 6rem
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-box.left .l-voice-box-inner {
    justify-content: flex-end
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-box.left .l-voice-box-inner {
    flex-direction: column-reverse
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-box.left .description {
    right: -4%;
    margin-inline-start: auto;
    padding: 7rem 17% 6.3rem 5.5rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-box.left .description {
    padding: 7rem 2rem 3rem 4rem
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-box.left .profile {
    margin-inline-start: 13%
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-box.left .profile {
    padding-inline-start: 4rem
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-box.left .link {
    right: 13rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-box.bottom {
    margin-block-end: 9rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-box.bottom {
    margin-block-end: 5rem
  }
}

.l-everyone .l-voice-box-inner {
  display: flex;
  margin-inline: auto;
  max-width: 1280px
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-box-inner {
    width: 86.4%
  }
}

.l-everyone .l-voice-figure {
  z-index: 1
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-figure {
    width: 42.18%
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-figure {
    position: relative;
    top: 5rem;
    width: 78.66%
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-figure .figure {
    position: relative;
    top: -7rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-figure .figure {
    margin-block-end: 3rem
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-figure .profile {
    position: relative;
    top: -3.4rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-figure .profile .job {
    font-size: 1.1rem
  }
}

.l-everyone .l-voice-figure .name {
  font-weight: bold
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-figure .name {
    margin-block-end: 1.5rem;
    font-size: 2.2rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-figure .name {
    margin-block-end: 1rem;
    font-size: 1.6rem
  }
}

.l-everyone .l-voice-figure .job {
  font-size: 1.2rem
}

.l-everyone .l-voice-figure .job span {
  display: block
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-text {
    width: 57.82%
  }
}

.l-everyone .l-voice-text .description {
  position: relative;
  background: #fff
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-text .description {
    position: relative;
    width: 89.33%;
    font-size: 1.4rem
  }
  .l-everyone .l-voice-text .description::before {
    position: absolute;
    top: -6rem;
    left: 0;
    content: "";
    background: #fff;
    width: 100%;
    height: 6rem
  }
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-text .description .text {
    margin-block-end: 5rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-text .description .text {
    margin-block-end: 3rem
  }
}

.l-everyone .l-voice-text .description .link {
  padding-inline-end: 1.8rem;
  font-weight: bold;
  text-align: right;
  color: #0079c0
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-text .description .link {
    position: absolute;
    font-size: 1.3rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-text .description .link {
    position: relative;
    font-size: 1.2rem
  }
}

.l-everyone .l-voice-text .description .link::after {
  position: absolute;
  content: "";
  background: url("../img/common/icon_link.svg") no-repeat center center/contain;
  right: 0;
  width: 12.31px;
  height: 12px
}

@media screen and (min-width: 768px) {
  .l-everyone .l-voice-text .description .link::after {
    top: .3rem
  }
}

@media screen and (max-width: 767px) {
  .l-everyone .l-voice-text .description .link::after {
    top: 0
  }
}

@media screen and (min-width: 768px) {
  .l-recruitment {
    margin-block: 10rem
  }
}

@media screen and (max-width: 767px) {
  .l-recruitment {
    margin-block: 5rem
  }
}

.l-recruitment-title {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 200;
  text-align: center;
  color: #0079c0
}

@media screen and (min-width: 768px) {
  .l-recruitment-title {
    margin-block-end: 6rem;
    font-size: 2.8rem
  }
}

@media screen and (max-width: 767px) {
  .l-recruitment-title {
    margin-block-end: 4rem;
    font-size: 2.6rem
  }
}

.l-recruitment-title .sub {
  position: relative;
  display: block;
  margin-block-start: 2rem;
  color: #333
}

@media screen and (min-width: 768px) {
  .l-recruitment-title .sub {
    font-size: 1.6rem
  }
}

@media screen and (max-width: 767px) {
  .l-recruitment-title .sub {
    font-size: 1.4rem
  }
}

.l-recruitment-title .sub::before {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  height: 1px;
  background: #0079c0
}

@media screen and (min-width: 768px) {
  .l-recruitment-title .sub::before {
    width: 257px
  }
}

@media screen and (max-width: 767px) {
  .l-recruitment-title .sub::before {
    width: 180px
  }
}

.l-recruitment-list {
  display: flex;
  flex-wrap: wrap
}

@media screen and (min-width: 768px) {
  .l-recruitment-list {
    font-size: 1.6rem
  }
}

@media screen and (max-width: 767px) {
  .l-recruitment-list {
    font-size: 1.4rem
  }
}

@media screen and (max-width: 767px) {
  .l-recruitment-list {
    flex-direction: column
  }
}

.l-recruitment-term {
  border-top: 1px solid #0079c0;
  font-weight: bold
}

@media screen and (min-width: 768px) {
  .l-recruitment-term {
    padding: 4.5rem 0 4.5rem 4.7rem;
    width: 25.3%;
    background: #e3f1fb
  }
}

@media screen and (max-width: 767px) {
  .l-recruitment-term {
    padding-block: 2rem;
    width: 100%
  }
}

@media screen and (max-width: 767px) {
  .l-recruitment-term.bottomLine {
    border-bottom: none !important
  }
}

@media screen and (min-width: 768px) {
  .l-recruitment-description {
    padding: 4.5rem 0 4.5rem 4.7rem;
    width: 74%;
    border-top: 1px solid #0079c0
  }
}

@media screen and (max-width: 767px) {
  .l-recruitment-description {
    padding-block-end: 2rem;
    width: 100%
  }
}

.l-recruitment-description span {
  display: flex
}

.l-recruitment-description .mt {
  margin-block-start: 3rem
}

.l-recruitment-description.office .line {
  display: flex
}

@media screen and (min-width: 768px) {
  .l-recruitment-description.office .line-address {
    padding-left: 1.8rem
  }
}

@media screen and (max-width: 767px) {
  .l-recruitment-description.office .base {
    margin-block-start: 4rem
  }
}

.l-recruitment-description.indent span {
  padding-left: 1em;
  text-indent: -1em
}

.l-recruitment .bottomLine {
  border-bottom: 1px solid #0079c0
}

.l-qa {
  background: #e3f1fb
}

@media screen and (min-width: 768px) {
  .l-qa {
    padding-block: 9.5rem 10rem
  }
}

@media screen and (max-width: 767px) {
  .l-qa {
    padding-block: 4rem 5rem
  }
}

.l-qa-title {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 200;
  text-align: center;
  color: #0079c0
}

@media screen and (min-width: 768px) {
  .l-qa-title {
    margin-block-end: 6rem;
    font-size: 2.8rem
  }
}

@media screen and (max-width: 767px) {
  .l-qa-title {
    margin-block-end: 5rem;
    font-size: 2.6rem
  }
}

.l-qa-title .sub {
  position: relative;
  display: block;
  margin-block-start: 2rem;
  color: #333
}

@media screen and (min-width: 768px) {
  .l-qa-title .sub {
    font-size: 1.6rem
  }
}

@media screen and (max-width: 767px) {
  .l-qa-title .sub {
    font-size: 1.4rem
  }
}

.l-qa-title .sub::before {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 257px;
  height: 1px;
  background: #0079c0
}

@media screen and (max-width: 767px) {
  .l-qa-toggle {
    margin-bottom: 1rem;
    width: 78.66%
  }
}

.l-qa .toggleButton {
  position: relative;
  background: #fff;
  border-bottom: 1px solid #e3f1fb
}

.l-qa .toggleButton::before, .l-qa .toggleButton::after {
  position: absolute;
  top: 50%;
  display: block;
  content: "";
  background: #f75471
}

@media screen and (min-width: 768px) {
  .l-qa .toggleButton::before, .l-qa .toggleButton::after {
    right: 37px;
    width: 17px;
    height: 2px
  }
}

@media screen and (max-width: 767px) {
  .l-qa .toggleButton::before, .l-qa .toggleButton::after {
    right: 20px;
    width: 10px;
    height: 2px
  }
}

.is-active .l-qa .toggleButton::before {
  opacity: 0
}

.l-qa .toggleButton::after {
  transform: rotate(90deg);
  transition-duration: .3s
}

.l-qa .toggleButton.open {
  border-bottom: none;
  box-shadow: 0px 3px 3px rgba(187, 217, 245, .5);
  z-index: 10
}

.l-qa .toggleButton.open::before {
  opacity: 0
}

.l-qa .toggleButton.open::after {
  transform: rotate(0)
}

.l-qa .toggleButton .last {
  box-shadow: 0px 3px 3px #bbd9f5;
  border-bottom: none
}

.l-qa-q .text {
  position: relative;
  cursor: pointer
}

@media screen and (min-width: 768px) {
  .l-qa-q .text {
    padding: 3.4rem 0 3.4rem 10.6rem
  }
}

@media screen and (max-width: 767px) {
  .l-qa-q .text {
    padding: 1.9rem 6.1rem 1.9rem 5.4rem;
    font-size: 1.2rem
  }
}

.l-qa-q .text::before {
  position: absolute;
  content: "";
  border-radius: 50px;
  border: 1px solid #0079c0
}

@media screen and (min-width: 768px) {
  .l-qa-q .text::before {
    top: 2.5rem;
    left: 2.8rem;
    width: 50px;
    height: 50px
  }
}

@media screen and (max-width: 767px) {
  .l-qa-q .text::before {
    top: 1.6rem;
    left: 1rem;
    width: 30px;
    height: 30px
  }
}

.l-qa-q .text::after {
  position: absolute;
  content: "Q";
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #0079c0
}

@media screen and (min-width: 768px) {
  .l-qa-q .text::after {
    left: 4.8rem;
    font-size: 1.7rem
  }
}

@media screen and (max-width: 767px) {
  .l-qa-q .text::after {
    top: 1.9rem;
    left: 2rem;
    font-size: 1.2rem
  }
}

.l-qa-a {
  height: 0;
  overflow: hidden;
  background: #fff
}

.l-qa-a .text {
  position: relative;
  padding: 3.4rem 0 3.4rem 10.6rem;
  background: #e3f1fb
}

@media screen and (max-width: 767px) {
  .l-qa-a .text {
    padding: 1.9rem 1.9rem 1.9rem 5.4rem;
    font-size: 1.2rem
  }
}

.l-qa-a .text::before {
  position: absolute;
  content: "";
  background: #0079c0;
  border-radius: 50px
}

@media screen and (min-width: 768px) {
  .l-qa-a .text::before {
    top: 2.5rem;
    left: 2.8rem;
    width: 50px;
    height: 50px
  }
}

@media screen and (max-width: 767px) {
  .l-qa-a .text::before {
    top: 1.6rem;
    left: 1rem;
    width: 30px;
    height: 30px
  }
}

.l-qa-a .text::after {
  position: absolute;
  content: "A";
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #fff
}

@media screen and (min-width: 768px) {
  .l-qa-a .text::after {
    top: 3.2rem;
    left: 4.8rem;
    font-size: 1.7rem
  }
}

@media screen and (max-width: 767px) {
  .l-qa-a .text::after {
    top: 1.9rem;
    left: 2rem;
    font-size: 1.2rem
  }
}

.l-readmore {
  padding-block: 10rem 7.8rem
}

@media screen and (max-width: 767px) {
  .l-readmore {
    padding-block: 5rem;
    background: #f2f2f0
  }
}

.l-readmore-title {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 200;
  text-align: center;
  color: #0079c0
}

@media screen and (min-width: 768px) {
  .l-readmore-title {
    margin-block-end: 6rem;
    font-size: 2.8rem
  }
}

@media screen and (max-width: 767px) {
  .l-readmore-title {
    margin-block-end: 3.4rem;
    font-size: 2.6rem
  }
}

.l-readmore-title .sub {
  position: relative;
  display: block;
  margin-block-start: 2rem;
  color: #333
}

@media screen and (min-width: 768px) {
  .l-readmore-title .sub {
    font-size: 1.6rem
  }
}

@media screen and (max-width: 767px) {
  .l-readmore-title .sub {
    font-size: 1.4rem
  }
}

.l-readmore-title .sub::before {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 257px;
  height: 1px;
  background: #0079c0
}

.l-readmore-listWrap {
  background: #f2f2f0
}

@media screen and (min-width: 768px) {
  .l-readmore-listWrap {
    padding: 9rem 6rem 4.5rem
  }
}

.l-readmore-list {
  display: flex;
  justify-content: space-between
}

@media screen and (min-width: 768px) {
  .l-readmore-list {
    gap: 4.2rem;
    margin-block-end: 5.5rem
  }
}

@media screen and (max-width: 767px) {
  .l-readmore-list {
    gap: .5rem;
    margin-block-end: 3.5rem
  }
}

.l-readmore-item {
  width: 50%
}

@media screen and (max-width: 767px) {
  .l-readmore-item {
    background: #fff
  }
}

@media screen and (min-width: 768px) {
  .l-readmore-item .figure {
    margin-block-end: 2.8rem
  }
}

@media screen and (max-width: 767px) {
  .l-readmore-item .figure {
    margin-block-end: 1.9rem
  }
}

.l-readmore-item .title {
  margin-block-end: 1.7rem
}

@media screen and (min-width: 768px) {
  .l-readmore-item .title {
    font-size: 1.8rem
  }
}

@media screen and (max-width: 767px) {
  .l-readmore-item .title {
    padding: 0 1.3rem 1rem 1.4rem;
    font-size: 1.2rem
  }
}

@media screen and (min-width: 768px) {
  .l-readmore-item .tag {
    font-size: 1.2rem
  }
}

@media screen and (max-width: 767px) {
  .l-readmore-item .tag {
    padding: 0 1.3rem 2rem 1.4rem;
    font-size: .8rem
  }
}

.l-readmore .link {
  display: block;
  padding-inline-end: 1.8rem;
  font-weight: bold;
  text-align: center;
  color: #0079c0
}

@media screen and (min-width: 768px) {
  .l-readmore .link {
    font-size: 1.6rem
  }
}

@media screen and (max-width: 767px) {
  .l-readmore .link {
    font-size: 1.2rem
  }
}

.l-readmore .link span {
  position: relative
}

.l-readmore .link span::after {
  position: absolute;
  content: "";
  background: url("../img/common/icon_link.svg") no-repeat center center/contain
}

@media screen and (min-width: 768px) {
  .l-readmore .link span::after {
    top: .1rem;
    right: -2.5rem;
    width: 15.25px;
    height: 14.87px
  }
}

@media screen and (max-width: 767px) {
  .l-readmore .link span::after {
    top: 0rem;
    right: -1.8rem;
    width: 12.31px;
    height: 12px
  }
}