@charset "UTF-8";
@font-face {
  font-family: "notosansjp";
  font-weight: 400;
  src: url(../../../products/_assets/font/notosansjp/NotoSansJP-Regular.ttf)
    format("truetype");
}
@font-face {
  font-family: "notosansjp";
  font-weight: 500;
  src: url(../../../products/_assets/font/notosansjp/NotoSansJP-Medium.ttf)
    format("truetype");
}
@font-face {
  font-family: "notosansjp";
  font-weight: 700;
  src: url(../../../products/_assets/font/notosansjp/NotoSansJP-Bold.ttf)
    format("truetype");
}
@font-face {
  font-family: "notosansjp";
  font-weight: 900;
  src: url(../../../products/_assets/font/notosansjp/NotoSansJP-Black.ttf)
    format("truetype");
}
@font-face {
  font-family: "worksans";
  font-weight: 400;
  src: url(../../../products/_assets/font/worksans/WorkSans-Regular.ttf)
    format("truetype");
}
@font-face {
  font-family: "worksans";
  font-weight: 500;
  src: url(../../../products/_assets/font/worksans/WorkSans-Medium.ttf)
    format("truetype");
}
@font-face {
  font-family: "worksans";
  font-weight: 700;
  src: url(../../../products/_assets/font/worksans/WorkSans-Bold.ttf) format("truetype");
}
@font-face {
  font-family: "worksans";
  font-weight: 900;
  src: url(../../../products/_assets/font/worksans/WorkSans-Black.ttf)
    format("truetype");
}
/*
 * サイト内パラメータ設定ファイル
 */
/*
 * 関数定義用ファイル
 */
/*
 * メディアクエリ用mixin
 */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root {
  --color-orange: #f49123;
}

html {
  scroll-padding-top: 18.75vw !important;
}
@media screen and (min-width: 48.0625em) {
  html {
    scroll-padding-top: min(8.7032201915vw, 100px) !important;
  }
}

ol {
  padding: 0;
}

.featureRemoteWork {
  margin-top: -9.375vw;
  background-color: #f3f8f9;
  line-height: 1.7;
  overflow: hidden;
}
@media screen and (min-width: 48.0625em) {
  .featureRemoteWork {
    margin-top: max(-4.3516100957vw, -50px);
  }
}

.l-container {
  padding-inline: 7.5vw;
  margin-inline: auto;
  width: min(100%, 992px);
}
@media screen and (min-width: 48.0625em) {
  .l-container {
    padding-inline: min(1.3925152306vw, 16px);
  }
}

.c-inner {
  width: min(100%, 1110px) !important;
}

.c-secTtl {
  text-align: center;
  font-size: 7.5vw;
  font-weight: 700;
  letter-spacing: 0.09em;
}
@media screen and (min-width: 48.0625em) {
  .c-secTtl {
    font-size: min(3.046127067vw, 35px);
  }
}
.c-secTtl span {
  color: var(--color-orange);
}

.mv {
  display: grid;
  place-items: center;
  background-color: #fff;
}
@media screen and (min-width: 48.0625em) {
  .mv {
    padding: min(6.6144473455vw, 76px) min(0.8703220191vw, 10px);
  }
}
.mv .mv_inr {
  position: relative;
  padding: 20.625vw 0 0 13.4375vw;
  position: relative;
  height: 192.5vw;
  width: min(100%, 1114px);
  background: url("../../../feature/_assets/images/remote-work/mv-bg-sp.png")
    center/contain no-repeat;
}
@media screen and (min-width: 48.0625em) {
  .mv .mv_inr {
    padding: min(6.7014795474vw, 77px) min(9.9216710183vw, 114px);
    height: auto;
    aspect-ratio: 1114/522;
    background-image: url("../../../feature/_assets/images/remote-work/mv-bg.png");
  }
}
.mv .mv_inr::after {
  position: absolute;
  right: -60.9375vw;
  bottom: -1.875vw;
  content: "";
  display: block;
  height: 12.5vw;
  width: 116.25vw;
  background: url("../../../feature/_assets/images/remote-work/mv-train.svg")
    center/contain no-repeat;
}
@media screen and (min-width: 48.0625em) {
  .mv .mv_inr::after {
    right: max(-23.8468233246vw, -274px);
    bottom: max(-1.9147084421vw, -22px);
    height: min(6.7014795474vw, 77px);
    width: min(63.0983463882vw, 725px);
  }
}
.mv .mv-hero {
  display: grid;
  row-gap: 5vw;
}
@media screen and (min-width: 48.0625em) {
  .mv .mv-hero {
    row-gap: min(1.7406440383vw, 20px);
  }
}
.mv .mv_ttl {
  display: grid;
}
@media screen and (min-width: 48.0625em) {
  .mv .mv_ttl {
    row-gap: min(0.4351610096vw, 5px);
  }
}
.mv .mv_ttl h1 {
  font-size: 6.25vw;
  font-weight: 700;
}
@media screen and (min-width: 48.0625em) {
  .mv .mv_ttl h1 {
    font-size: min(2.3498694517vw, 27px);
  }
}
.mv .mv_ttlSub {
  font-size: 3.75vw;
  font-weight: 700;
}
@media screen and (min-width: 48.0625em) {
  .mv .mv_ttlSub {
    font-size: min(1.3925152306vw, 16px);
  }
}
.mv .mv_ttlSub span {
  position: relative;
  z-index: 0;
}
.mv .mv_ttlSub span::after {
  position: absolute;
  inset: auto 0 0;
  content: "";
  display: block;
  width: 100%;
  height: 0.5em;
  background-color: var(--color-orange);
  z-index: -1;
}
.mv .mv_lead {
  display: grid;
  row-gap: 1.875vw;
}
@media screen and (min-width: 48.0625em) {
  .mv .mv_lead {
    row-gap: min(1.2184508268vw, 14px);
  }
}
.mv .mv_lead > span {
  display: block;
  padding: 1.5625vw 4.6875vw;
  width: fit-content;
  background-color: #fff;
  font-size: 7.5vw;
  font-weight: 700;
  line-height: 1.52;
}
@media screen and (min-width: 48.0625em) {
  .mv .mv_lead > span {
    padding: min(0.2610966057vw, 3px) min(1.5665796345vw, 18px);
    font-size: min(3.046127067vw, 35px);
  }
}
.mv .mv_lead > span .orange {
  color: var(--color-orange);
}
.mv .mv_lead > span .blue {
  color: #1d3975;
}
.mv .mv_badge {
  position: absolute;
  display: grid;
  place-items: center;
  height: auto;
  width: 30vw;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff;
  background-color: var(--color-orange);
  font-size: 2.8125vw;
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 48.0625em) {
  .mv .mv_badge {
    width: min(13.315926893vw, 153px);
    font-size: min(1.3054830287vw, 15px);
    box-shadow: min(0.3481288077vw, 4px) min(0.3481288077vw, 4px)
      min(0.8703220191vw, 10px) rgba(0, 0, 0, 0.25);
  }
}
.mv .mv_badge:nth-child(1) {
  top: 94.6875vw;
  left: 39.375vw;
}
@media screen and (min-width: 48.0625em) {
  .mv .mv_badge:nth-child(1) {
    top: min(5.6570931245vw, 65px);
    left: min(44.3864229765vw, 510px);
  }
}
.mv .mv_badge:nth-child(2) {
  top: 105.625vw;
  left: 8.75vw;
}
@media screen and (min-width: 48.0625em) {
  .mv .mv_badge:nth-child(2) {
    top: min(22.454308094vw, 258px);
    left: min(39.0774586597vw, 449px);
  }
}
.mv .mv_badge:nth-child(3) {
  top: 109.375vw;
  left: 66.875vw;
}
@media screen and (min-width: 48.0625em) {
  .mv .mv_badge:nth-child(3) {
    top: min(14.3603133159vw, 165px);
    left: min(84.5953002611vw, 972px);
  }
}

.about {
  padding-block: 12.5vw;
}
@media screen and (min-width: 48.0625em) {
  .about {
    padding-block: min(2.6109660574vw, 30px) min(5.134899913vw, 59px);
  }
}
.about .about_inr {
  position: relative;
  display: grid;
  justify-items: center;
  row-gap: 7.5vw;
  padding-block: 12.5vw 101.875vw;
  border-radius: 5vw;
  background-color: #fff;
}
@media screen and (min-width: 48.0625em) {
  .about .about_inr {
    row-gap: min(2.088772846vw, 24px);
    padding-block: min(5.5700609225vw, 64px) min(21.409921671vw, 246px);
    border-radius: min(2.088772846vw, 24px);
  }
}
.about .about_inr::after {
  position: absolute;
  right: 0;
  bottom: calc(-12.5vw - 1px); /* .about の padding-bottom と同じ値 + 微調整 */
  left: -4.6875vw;
  margin-inline: auto;
  content: "";
  display: block;
  height: auto;
  width: 94.6875vw;
  aspect-ratio: 303/342;
  background: url("../../../feature/_assets/images/remote-work/about-img-sp.svg")
    center/contain no-repeat;
}
@media screen and (min-width: 48.0625em) {
  .about .about_inr::after {
    left: 0;
    width: min(72.1496953873vw, 829px);
    aspect-ratio: 829/345;
    bottom: calc(
      max(-5.134899913vw, -59px) - 1px
    ); /* .about の padding-bottom と同じ値 + 微調整 */
    background-image: url("../../../feature/_assets/images/remote-work/about-img.svg");
  }
}
.about .about_inr p {
  font-size: 3.75vw;
  text-align: center;
  line-height: 1.8;
}
@media screen and (min-width: 48.0625em) {
  .about .about_inr p {
    font-size: min(1.3925152306vw, 16px);
  }
}

.solution {
  padding-block: 12.5vw;
  border-radius: 6.25vw 6.25vw 0 0;
  background-color: #fff;
}
@media screen and (min-width: 48.0625em) {
  .solution {
    padding-block: min(6.9625761532vw, 80px);
    border-radius: min(3.4812880766vw, 40px) min(3.4812880766vw, 40px) 0 0;
  }
}
.solution ul.solution_anchors {
  margin-top: 5.3125vw;
  display: grid;
  row-gap: 5vw;
  align-items: stretch;
}
@media screen and (min-width: 48.0625em) {
  .solution ul.solution_anchors {
    margin-top: min(5.3089643168vw, 61px);
    display: flex;
    column-gap: min(1.044386423vw, 12px);
  }
}
.solution ul.solution_anchors li {
  width: 100%;
}
@media screen and (min-width: 48.0625em) {
  .solution ul.solution_anchors li {
    width: auto;
    flex: 1;
  }
}
.solution ul.solution_anchors li a {
  position: relative;
  padding: 4.6875vw 3.125vw;
  display: grid;
  justify-items: start;
  align-content: start;
  row-gap: 0.9375vw;
  height: 100%;
  border-radius: 3.125vw;
  border: 0.625vw solid #80c4cd;
  background: #fff;
}
@media screen and (min-width: 48.0625em) {
  .solution ul.solution_anchors li a {
    padding: min(1.8276762402vw, 21px);
    row-gap: min(1.3925152306vw, 16px);
    border-radius: min(1.3925152306vw, 16px);
    border: min(0.1740644038vw, 2px) solid #80c4cd;
  }
}
.solution ul.solution_anchors li a::after {
  position: absolute;
  inset: 0 5vw 0 auto;
  margin-inline: auto;
  content: "";
  width: 8.125vw;
  height: auto;
  aspect-ratio: 1;
  background: url("../../../feature/_assets/images/remote-work/icon-arrow_bottom.svg")
    center/contain no-repeat;
}
@media screen and (min-width: 48.0625em) {
  .solution ul.solution_anchors li a::after {
    inset: auto 0 calc(max(-2.2628372498vw, -26px) / 2);
    width: min(2.2628372498vw, 26px);
  }
}
.solution ul.solution_anchors figure {
  display: none;
}
@media screen and (min-width: 48.0625em) {
  .solution ul.solution_anchors figure {
    display: block;
  }
}
.solution ul.solution_anchors .solution_anchorLabel {
  pointer-events: none;
  text-align: center;
  color: #00838b;
  font: 700 3.75vw "Work Sans";
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media screen and (min-width: 48.0625em) {
  .solution ul.solution_anchors .solution_anchorLabel {
    position: absolute;
    inset: auto 0 100%;
    font-size: min(1.3925152306vw, 16px);
    line-height: 2;
  }
}
.solution ul.solution_anchors .solution_anchorDesc {
  font-size: 3.125vw;
  font-weight: 500;
  line-height: 1.5;
}
@media screen and (min-width: 48.0625em) {
  .solution ul.solution_anchors .solution_anchorDesc {
    font-size: min(0.8703220191vw, 10px);
  }
}
.solution ol.solution_list {
  margin-top: 12.5vw;
  display: grid;
  row-gap: 7.5vw;
}
@media screen and (min-width: 48.0625em) {
  .solution ol.solution_list {
    margin-top: min(4.6127067015vw, 53px);
    row-gap: min(3.4812880766vw, 40px);
  }
}
.solution ol.solution_list li {
  display: grid;
  row-gap: 5vw;
  padding: 7.5vw;
  border-radius: 7.5vw;
  background-color: #f3f8f9;
}
@media screen and (min-width: 48.0625em) {
  .solution ol.solution_list li {
    row-gap: min(3.1331592689vw, 36px);
    padding: min(3.8294168842vw, 44px) min(4.1775456919vw, 48px);
    border-radius: min(2.088772846vw, 24px);
  }
}
.solution ol.solution_list h3 {
  font-size: 4.375vw;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (min-width: 48.0625em) {
  .solution ol.solution_list h3 {
    display: flex;
    align-items: center;
    column-gap: 5.9375vw;
    font-size: min(1.7406440383vw, 20px);
  }
}
.solution ol.solution_list h3 span {
  display: block;
  color: #00838b;
  font-family: "Work Sans";
  font-size: 4.375vw;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media screen and (min-width: 48.0625em) {
  .solution ol.solution_list h3 span {
    display: inline-block;
    font-size: min(2.088772846vw, 24px);
  }
}
.solution ol.solution_list figure {
  margin-inline: auto;
  width: min(100%, 864px);
}
.solution ol.solution_list .solution_btn {
  padding: 4.0625vw 7.5vw;
  justify-self: center;
}
@media screen and (min-width: 48.0625em) {
  .solution ol.solution_list .solution_btn {
    padding: min(1.5665796345vw, 18px) min(0.6962576153vw, 8px);
  }
}
.solution ol.solution_list .solution_btn::after {
  height: auto;
  width: 7.5vw;
  aspect-ratio: 1;
}
@media screen and (min-width: 48.0625em) {
  .solution ol.solution_list .solution_btn::after {
    width: min(2.7850304613vw, 32px);
  }
}
.solution ol.solution_list .solution_btn span {
  font-size: 3.75vw;
}
@media screen and (min-width: 48.0625em) {
  .solution ol.solution_list .solution_btn span {
    font-size: min(1.3925152306vw, 16px);
  }
}
.solution .solution_trial {
  margin-top: 12.5vw;
  display: grid;
  row-gap: 9.375vw;
}
@media screen and (min-width: 48.0625em) {
  .solution .solution_trial {
    margin-top: min(6.9625761532vw, 80px);
    row-gap: min(3.4812880766vw, 40px);
  }
}
.solution .solution_trial .solution_trialTtl {
  text-align: center;
  font-size: 5vw;
  font-weight: 700;
  line-height: 152%;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 48.0625em) {
  .solution .solution_trial .solution_trialTtl {
    font-size: min(2.088772846vw, 24px);
  }
}
.solution .solution_trial figure {
  position: relative;
  margin-inline: auto;
  width: 85vw;
}
@media screen and (min-width: 48.0625em) {
  .solution .solution_trial figure {
    width: min(83.5509138381vw, 960px);
  }
}

.otherSolution {
  padding-block: 12.5vw;
  text-align: center;
}
@media screen and (min-width: 48.0625em) {
  .otherSolution {
    padding-block: min(6.9625761532vw, 80px);
  }
}
.otherSolution .otherSolution_inr {
  display: grid;
  justify-items: center;
}
.otherSolution .otherSolution_ttl {
  font-size: 5vw;
  font-weight: 700;
  line-height: 152%;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 48.0625em) {
  .otherSolution .otherSolution_ttl {
    font-size: min(2.088772846vw, 24px);
  }
}
.otherSolution .otherSolution_desc {
  margin-top: 4.375vw;
  font-size: 3.75vw;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 48.0625em) {
  .otherSolution .otherSolution_desc {
    margin-top: min(0.6962576153vw, 8px);
    font-size: min(1.7406440383vw, 20px);
  }
}
.otherSolution .otherSolution_link {
  display: block;
  margin-top: 5vw;
}
@media screen and (min-width: 48.0625em) {
  .otherSolution .otherSolution_link {
    margin-top: min(2.088772846vw, 24px);
  }
}
.otherSolution .otherSolution_link p {
  width: fit-content;
  color: #00838b;
  font-size: 6.25vw;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 48.0625em) {
  .otherSolution .otherSolution_link p {
    font-size: min(1.7406440383vw, 20px);
  }
}
.otherSolution .otherSolution_link p::after {
  content: "";
  display: block;
  height: 0.3125vw;
  width: 100%;
  background-color: currentColor;
}
@media screen and (min-width: 48.0625em) {
  .otherSolution .otherSolution_link p::after {
    height: min(0.0870322019vw, 1px);
  }
}