@charset "utf-8";

/* CSS Document */
/* ==========================================================================
   Foundation
   ========================================================================== */
:root {
   --color-body: #333;
   --color-accent: #E98A15;
   --color-blue: #3172BE;
   --color-lightblue:#E3F2FD;
   --color-paleblue:#F7FBFF;
   --color-grey:#F5F5F5;
   --font-zen-light: 300;
   --font-zen-regular: 400;
   --font-zen-medium: 500;
   --font-zen-bold: 700;
   --font-zen-black: 900;
   --font-just-light: 300;
   --font-just-regular: 400;
   --font-just-medium: 500;
   --font-just-semimebold: 600;
   --font-just-bold: 700;
   --font-just-extrabold: 800;
   --font-just-black: 900;
   --font-just-family: "Jost", serif;
   --animation-opacity: .6;
   --animation-duration: .3s;
   --animation-timing: ease-out;
}

html {
  font-size: 62.5%;
}
body>main {
   overflow: hidden;
   padding-top: 130px; 
   background-color: var(--color-paleblue);
   color: var(--color-body);
   font-weight: var(--font-zen-medium);
   font-size: 1.6rem;
   font-family: "Zen Kaku Gothic Antique", sans-serif;
   font-style: normal;
   line-height: 2;
   font-feature-settings: "palt";
   overflow-wrap: anywhere;
   word-break: normal;
   line-break: strict;
}

body>main {
   position: relative;
}
body>main::after {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 928px;
   background: linear-gradient(#c1e1ff 0%, #eff7ff 27.09%, #f7fbff 46.8%, #f7fbff 100%);
   content: "";
}

@media (max-width: 1077.98px) {
   body>main {
      padding-top: 95px;
   }
}

html,
body,
h1,
h2,
h3,
h4,
ul,
ol,
dl,
dt,
dd,
p,
button {
  margin: 0;
  padding: 0;
  letter-spacing: .0125em;
}

h1,
h2,
h3,
h4 {
  text-wrap: wrap;
}

p+p {
   margin-top: .8em;
}

img {
  height: auto;
}

button {
   color: inherit;
   border: 0;
   background-color: transparent;
   cursor: pointer;
}

/* ——————————————————————————————————————————
   footer css adjust start
—————————————————————————————————————————— */
#footer2 {
   margin-top: 96px;
   letter-spacing: normal;
   font-feature-settings: normal;
}
#footer2 li a {
   position: relative;
}
#footer2 li a::before {
   position: absolute;
   bottom: 0;
   left: 0;
   clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
   width: 100%;
   height: 1px;
   background-color: currentColor;
   transition: clip-path var(--animation-duration) var(--animation-timing);
   content: "";
}
@media (max-width: 767.98px) {
   #footer2 {
      margin-top: 64px;
   }
}
@media (hover: hover) {
   a:hover {
      opacity: 1;
   }
   #footer2 li a:hover::before {
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);    
   }
}
/* ——————————————————————————————————————————
   // footer css adjust end
—————————————————————————————————————————— */

/* ==========================================================================
   Layout
   ========================================================================== */
.l-osHeader {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1020;
   width: 100%;
   padding-top: 24px;
   padding-right: 16px;
   padding-left: 16px;
}
@media (max-width: 1077.98px) {
   .l-osHeader {
      padding: 0;
   }
}
.l-osContainer {
   position: relative;
   z-index: 1000;
}
.l-osBreadcrumb {
   padding-right: 60px;
   padding-left: 60px;
}
.l-osMainvisual {
   max-width: 1920px;
   margin-right: auto;
   margin-left: auto;
   padding-right: 144px;
   padding-left: 144px;
}
@media (max-width: 1919.98px) {
   .l-osMainvisual {
      max-width: 1280px;
      padding-right: 64px;
      padding-left: 64px;
   }
}
@media (max-width: 1279.98px) {
   .l-osMainvisual {
      max-width: 1078px;
   }
}
@media (max-width: 1077.98px) {
   .l-osMainvisual {
      max-width: 768px;
      padding-right: 32px;
      padding-left: 32px;
   }
}
@media (max-width: 767.98px) {
   .l-osMainvisual {
      max-width: 375px;
      padding-right: 16px;
      padding-left: 16px;
   }
}
.l-osSection {
   max-width: 960px;
   padding-top: 192px;
   margin-top: -96px;
   margin-right: auto;
   margin-left: auto;
   padding-right: 20px;
   padding-bottom: 8px;
   padding-left: 20px;
   box-sizing: content-box;
}
.l-osSection.-first {
   margin-top: 0;
   padding-top: 0;
}
@media (max-width: 767.98px) {
   .l-osSection {
      margin-top: -56px;
      padding-top: 104px;
      padding-right: 40px;
      padding-left: 40px;
   }
}
/* ==========================================================================
   Component
   ========================================================================== */
.c-osBtn {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   border-radius: 9999px;
   padding-right: 1.25em;
   padding-left: 1.25em;
   font-weight: var(--font-zen-bold);
   line-height: 1.25;
   text-align: center;
   transition: opacity var(--animation-duration) var(--animation-timing);
}
.c-osBtn.-orange {
   background-color: var(--color-accent);
   color: #FFF;
}
.c-osBtn.-white {
   background-color: #FFF;
   color: var(--color-blue);
}
.c-osBtn.-ico::before {
   position: absolute;
   top: 50%;
   translate: 0 -50%;   
   content: "";
}
.c-osBtn.-ico.-newspaper::before {
   background: url("/hrm/service/dir/outsourcing/src/images/ico-newspaper.svg") no-repeat center / contain;
}
.c-osBtn.-ico.-woman::before {
   background: url("/hrm/service/dir/outsourcing/src/images/ico-woman.svg") no-repeat left center / contain;
}
.c-osBtn.-ico::after {
   position: absolute;
   top: 50%;
   right: 32px;
   translate: 0 -50%;
   width: 8px;
   height: 10px;
   -webkit-mask: url("/hrm/service/dir/outsourcing/src/images/ico-arrow.svg") no-repeat center / contain;
   mask-image: url("/hrm/service/dir/outsourcing/src/images/ico-arrow.svg");
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: contain;
   content: "";
}
.c-osBtn.-orange.-ico::after {
   background-color:#FFF;
}
.c-osBtn.-white.-ico::after {
   background-color: var(--color-blue);
}
.c-osBtn.-large {
   max-width: 472px;
   min-height: 80px;
   margin-right: auto;
   margin-left: auto;
   box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
   font-size: 2.4rem;
}
.c-osBtn.-large.-ico::before {
   left: 40px;
   width: 46px;
   height: 42px;
}
@media (hover: hover) {
   .c-osBtn:hover {
      opacity: var(--animation-opacity);
   }
}
.c-osBalloon {
   position: relative;
   width: fit-content;
   margin-top: 96px;
   margin-right: auto;
   margin-bottom: 1em;
   margin-left: auto;
   color: var(--color-accent);
   font-weight: var(--font-zen-bold);
   font-size: 2.4rem;
   text-align: center;
}
.c-osBalloon::before,
.c-osBalloon::after {
   position: absolute;
   bottom: .5em;
   width: 3px;
   height: 36px;
   border-radius: 9999px;
   background-color: var(--color-accent);
   content: "";
   transform-origin: bottom center;
}
.c-osBalloon::before {
   left: -10px;
   rotate: -45deg;
}
.c-osBalloon::after {
   right: -10px;
   rotate: 45deg;
}
@media (max-width: 767.98px) {
   .c-osBalloon {
      margin-top: 64px;
      font-size: 1.6rem;
   }
   .c-osBtn.-large {
      min-height: 60px;
      font-size: 1.8rem;
   }
   .c-osBtn.-large.-ico::before {
      left: 24px;
      width: 30px;
      height: 26px;
   }
}
.c-osSpacer {
   position: relative;
   height: 96px;
   border-bottom-right-radius: 9999px;
   border-bottom-left-radius: 9999px;
   background-color: var(--color-paleblue);
}
.c-osSpacer.-white {
   background-color: #FFF;
}
.c-osSpacer.-blue {
   background-color: var(--color-lightblue);
}
.c-osSpacer.-blue {
   background-color: var(--color-lightblue);
}
.c-osSpacer.-grey {
   background-color: var(--color-grey);
}
.c-osSpacer.-arrow::after {
   position: absolute;
   right: 50%;
   bottom: 20px;
   z-index: 1020;
   translate: 50% 100%;
   width: 200px;
   height: 72px;
   background-color: var(--color-paleblue);
   -webkit-mask: url("/hrm/service/dir/outsourcing/src/images/ico-spacer-arrow.svg") no-repeat center / contain;
   mask-image: url("/hrm/service/dir/outsourcing/src/images/ico-spacer-arrow.svg");
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: contain;
   content: "";
}
@media (max-width: 767.98px) {
   .c-osSpacer {
      height: 64px;
   } 
   .c-osSpacer.-arrow::after {
      width: 126px;
      height: 45px;  
   }
}
.c-osMarker {
   display: inline;
   padding: 0 1px 0px;
   background: linear-gradient(transparent 72%, #EFD701 0%);
}
.c-osTtl {
   color: var(--color-blue);
   font-weight: var(--font-zen-bold);
   font-size: 4.8rem;
   line-height: 1.25;
   text-align: center;
}
.c-osTtl>span {
   display: block;
   margin-top: 8px;
   margin-bottom: 64px;
   color: #51595F;
   font-weight: var(--font-just-bold);
   font-size: 2.4rem;
   font-family: var(--font-just-family);
}
@media (max-width: 767.98px) {
   .c-osTtl {
      margin-bottom: 32px;
      font-size: 3.2rem;
   }
   .c-osTtl>span {
      margin-bottom: 32px;
      font-size: 1.4rem;
   }
}
.c-osList {
   word-break: keep-all;
}
.c-osList>li {
   position: relative;
   padding-left: 1em;
   line-height: 1.5;
}
.c-osList>li::before {
   position: absolute;
   left: 0;
   content: "・";
}
.c-osList>li+li {
   margin-top: .8em;
}
/* ==========================================================================
   Project
   ========================================================================== */
/* ——————————————————————————————————————————
   header　start
—————————————————————————————————————————— */
.p-osHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 16px;
   padding-right: 24px;
   padding-bottom: 16px;
   padding-left: 44px;
   border-radius: 9999px;
   box-shadow: 0px 6px 6px rgba(0,0,0,0.16);
   background-color: var(--color-blue);
}
.p-osHeader__logo {
   position: relative;
   top: 4px;
}
.p-osHeader__nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0 40px;
}
.p-osHeader__list,
.p-osHeader__btn {
   display: flex;
   align-items: center;
}
.p-osHeader__list {
   gap: 0 40px;  
}
.p-osHeader__txt {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   min-height: 48px;
   font-weight: var(--font-zen-bold);
   font-size: 1.8rem;
   color: #FFF;
}
.p-osHeader__txt::before {
   position: absolute;
   bottom: 0;
   left: 0;
   clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
   width: 100%;
   height: 2px;
   background-color: currentColor;
   transition: clip-path var(--animation-duration) var(--animation-timing);
   content: "";
}
.p-osHeader__btn {
   gap: 0 12px;
   font-size: 1.8rem;
}
.p-osHeader__btn .c-osBtn.-ico::before {
   display: none;
   left: 22px;
   width: 22px;
   height: 20px;
}
.p-osHeader__btn .c-osBtn.-ico::after {
   display: none;
   right: 32px;
   width: 8px;
   height: 10px;
}
.p-osHeader__label {
   display: none;
   margin-bottom: 8px;
   text-align: center;
   font-weight: var(--font-zen-medium);
   font-size: 1.4rem;
   color: #FFF;
   line-height: 1.5;
}
.p-osHeader__btn .c-osBtn {
   min-height: 48px;
}
.p-osHeader__hamburger {
   display: none;
   position: relative;
   width: 20px;
   height: 18px;
   font-size: 0;
}
.p-osHeader__hamburger > span,
.p-osHeader__hamburger::before,
.p-osHeader__hamburger::after {
   display: block;
   opacity: 1;
   width: 100%;
   height: 3px;
   border-radius: 9999px;
   background-color: #FFF;
   transition: opacity var(--animation-duration) var(--animation-timing), translate var(--animation-duration) var(--animation-timing), rotate var(--animation-duration) var(--animation-timing);
}
.p-osHeader__hamburger::before,
.p-osHeader__hamburger::after {
   transform-origin: center;
   position: absolute;
   content: "";
}
.p-osHeader__hamburger::before {
   top: 0;
}
.p-osHeader__hamburger::after {
   bottom: 0;
}
.p-osHeader__hamburger.is-active > span {
   opacity: 0;
}
.p-osHeader__hamburger.is-active::before {
   translate: 0 7.5px;
   rotate: 45deg;
}
.p-osHeader__hamburger.is-active::after {
   translate: 0 -7.5px;
   rotate: -45deg;
}
@media (max-width: 1077.98px) {
   .p-osHeader {
      height: 60px;
      padding-left: 16px;
      border-radius: 0px;
      box-shadow: none;
   }
   .p-osHeader__logo img {
      width: 104px;
   }
   .p-osHeader__nav {
      overflow-y: scroll;
      display: none;
      position: fixed;
      top: 60px;
      left: 0;
      width: 100%;
      height: calc(100vh - 60px);
      height: calc(100dvh - 60px);
      padding-top: 40px;
      padding-bottom: 40px;
      background-color: var(--color-blue);
   }
   .p-osHeader__list,
   .p-osHeader__btn {
      flex-direction: column;
      justify-content: center;
      text-align: center;
   }
   .p-osHeader__list >li {
      width: 100%;
   }
   .p-osHeader__list >li+li {
      margin-top: 40px;
   }
   .p-osHeader__label {
      display: block;
   }
   .p-osHeader__btn {
      gap: 40px 0;
      width: 280px;
      margin-top: 40px;
      margin-right: auto;
      margin-left: auto;
   }
   .p-osHeader__btn .c-osBtn {
      box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
   }
   .p-osHeader__btn .c-osBtn.-ico::before,
   .p-osHeader__btn .c-osBtn.-ico::after {
      display: block;
   }
   .p-osHeader__btn >li {
      width: 100%;
   }
   .p-osHeader__hamburger {
      display: block;
   }
}
.p-osBreadcrumb {
   display: flex;
   align-items: center;
   gap : 0 28px;
   color: #51595F;
}
.p-osBreadcrumb__item {
   position: relative;
}
.p-osBreadcrumb li+li>.p-osBreadcrumb__item::before{
   position: absolute;
   top: 50%;
   left: -6px;
   translate: -100% -50%;
   content: "＞";
}
a.p-osBreadcrumb__item::after {
   position: absolute;
   left: 0;
   bottom: 0;
   clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
   width: 100%;
   height: 2px;
   background-color: currentColor;
   transition: clip-path var(--animation-duration) var(--animation-timing);
   content: "";
}
@media (max-width: 1077.98px) {
   .p-osBreadcrumb {
      display: none;
   }
}
@media (min-width: 1078px) and (hover: hover) {
   .p-osHeader__txt:hover::before,
   a.p-osBreadcrumb__item:hover::after {
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
   }
}
/* ——————————————————————————————————————————
   //header　end
—————————————————————————————————————————— */
/* ——————————————————————————————————————————
   mv　start
—————————————————————————————————————————— */
.p-osMainvisual {
   display: flex;
   flex-direction: row-reverse;
}
.p-osMainvisual__ttl {
   padding-top: 170px;
   font-size: 8rem;
   color: var(--color-blue);
   line-height: 1.25;
}
.p-osMainvisual__btn {
   width: 696px;
   margin-top: 88px;
   padding-bottom: 230px;
}
.p-osMainvisual__btn .c-osBtn {
   min-height: 80px;
   padding-right: 2.25em;
   padding-left: 2.25em;
   box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
   font-size: 2.4rem;
}
.p-osMainvisual__btn .c-osBtn.-white {
   border: 2px solid var(--color-blue);
}
.p-osMainvisual__btn .c-osBtn.-ico::before {
   left: 36px;
   width: 36px;
   height: 32px;
}
.p-osMainvisual__btn .c-osBtn.-ico::after {
   right: 40px;
   width: 12px;
   height: 14px;
}
.p-osMainvisual__inner {
   display: flex;
   align-items: center;
   gap: 0 40px;
}
.p-osMainvisual__inner>* {
   flex: 1;
}
.p-osMainvisual__label {
   display: block;
   margin-bottom: 6px;
   font-size: 1.8rem;
   line-height: 1.5;
   text-align: center;
}
.p-osMainvisual__txt {
   margin-top: 16px;
   font-size: 2.4rem;
}
.p-osMainvisual__img {
   flex: 1;
   margin-right: -500px;
   background: url("/hrm/service/dir/outsourcing/src/images/img-mainvisual.svg") no-repeat left bottom / 1248px auto;
}
@media (max-width: 1919.98px) {
   .p-osMainvisual__ttl {
      padding-top: 304px;
      font-size: 7.2rem;
   }
   .p-osMainvisual__btn {
      margin-top: 58px;
      padding-bottom: 120px;
   }
   .p-osMainvisual__btn .c-osBtn.-ico::after {
      width: 8px;
      height: 10px;
   }
   .p-osMainvisual__img {
      margin-top: -100px;
      margin-left: -260px;
      background-position: left top;
      background-size: 1016px auto;
   }
}
@media (max-width: 1279.98px) {
   .p-osMainvisual__img {
      margin-left: -432px;
      background-size: 848px auto;      
   }
}
@media (max-width: 1077.98px) {
   .p-osMainvisual {
      display: block;
   }
   .p-osMainvisual__ttl {
      margin-top: -160px;
      padding-top: 0px;
      font-size: 4.8rem;
   }
   .p-osMainvisual__txt {
      font-size: 1.6rem;
   }
   .p-osMainvisual__btn {
      width: auto;
      max-width: 572px;
      margin-top: 48px;
      margin-right: auto;
      margin-left: auto;
   }
   .p-osMainvisual__inner {
      gap: 0 32px;
   }
   .p-osMainvisual__btn .c-osBtn {
      min-height: 66px;
      font-size: 1.8rem;
   }
   .p-osMainvisual__btn .c-osBtn.-ico::before {
      left: 30px;
      width: 30px;
      height: 26px;
   }
   .p-osMainvisual__btn .c-osBtn.-ico::after {
      right: 32px;
   }
   .p-osMainvisual__label {
      font-size: 1.6rem;
   }
   .p-osMainvisual__img {  
      height: 444px;
      margin-top: 0;
      margin-left: 178px;
      background-size: 638px auto;
   }
}
@media (max-width: 767.98px) {
   .p-osMainvisual__ttl {
      margin-top: 0;
      padding-top: 280x;
      font-size: 4rem;
   }
   .p-osMainvisual__txt {
      font-size: 1.4rem;
   }
   .p-osMainvisual__btn {
      margin-top: 40px;
      padding-bottom: 64px;
   }
   .p-osMainvisual__inner {
      gap: 0 16px;
   }
   .p-osMainvisual__btn .c-osBtn {
      min-height: 48px;
      font-size: 1.4rem;
   }
   .p-osMainvisual__btn .c-osBtn.-ico::before {
      left: 14px;
      width: 22px;
      height: 20px;
   }
   .p-osMainvisual__btn .c-osBtn.-ico::after {
      right: 22px;
   }
   .p-osMainvisual__label {
      font-size: 1.2rem;
   }
   .p-osMainvisual__img {
      height: 290px;
      margin-left: 0;
      background-size: 416px auto;
   }
}
/* ——————————————————————————————————————————
   //mv　end
—————————————————————————————————————————— */
/* ——————————————————————————————————————————
   theme　start
—————————————————————————————————————————— */
.p-osTheme {
   background-color: #F7FBFF;
}
.p-osTheme__lead {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 64px;
   margin-top: -40px;
   margin-right: auto;
   margin-bottom: 8px;
   margin-left: auto;
   font-size: 2.4rem;
   color: var(--color-blue);
}
.p-osTheme__ttl {
   margin-bottom: 70px;
   font-weight: var(--font-zen-bold);
   font-size: 3.6rem;
   line-height: 1.5;
   text-align: center;
   word-break: keep-all;
}
.p-osTheme__ttl>span {
   display: block;
}
.p-osThemeAbout {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
}
.p-osThemeAbout__ttl {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 30px;
   margin-bottom: 28px;
   font-weight: var(--font-zen-bold);
   font-size: 2.4rem;
   color: var(--color-blue);
   line-height: 1.5;
   text-align: center;
   word-break: keep-all;
}
.p-osThemeAbout__img {
   display: flex;
   justify-content: center;
   align-items: center;
}
.p-osThemeAbout__list {
   display: table;
   margin-right: auto;
   margin-left: auto;
}
@media (max-width: 1919.98px) {
   .p-osTheme__lead {
      margin-top: 0;
   }
}
@media (max-width: 767.98px) {
   .p-osTheme__lead {
      max-width: 268px;
      min-height: 48px;
      font-size: 1.8rem;
   }
   .p-osTheme__ttl {
      margin-bottom: 30px;
      font-size: 2.4rem;
   }
   .p-osTheme__ttl>span+span {
      margin-top: 24px;
   }
   .p-osThemeAbout {
      grid-template-columns: repeat(1, 1fr);
   }
   .p-osThemeAbout__ttl {
      margin-top: 18px;
      margin-bottom: 16px;
   }
}
/* ——————————————————————————————————————————
   //theme　end
—————————————————————————————————————————— */
/* ——————————————————————————————————————————
   solution　start
—————————————————————————————————————————— */
.p-osSolution__ttl {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
   margin-top: 32px;
   font-weight: var(--font-zen-bold);
}
.p-osSolution__ttl>*:first-child {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 455px;
   height: 98px;
   border-radius: 10px;
   background-color: var(--color-accent);
   color: #FFF;
   font-size: 4.8rem;
}
.p-osSolution__ttl>*:last-child {
   color: var(--color-accent);
   font-size: 4rem;
}
.p-osSolution__txt {
   margin-top: 24px;
   font-size: 2.4rem;
   text-align: center;
   word-break: keep-all;
}

.p-osSolutionAbout {
   display: flex;
   align-items: center;
   gap: 0 48px;
   margin-top: 96px;
}
.p-osSolutionAbout__head {
   width: 380px;
}
.p-osSolutionAbout__lead {
   margin-bottom: 16px;
   font-weight: var(--font-zen-bold);
}
.p-osSolutionAbout__ttl {
   font-size: 2.4rem;
}
.p-osSolutionAbout__check {
   display: inline-block;
   position: relative;
   padding-left: 24px;
   font-size: 1.4rem;
   line-height: 1.5;
}
.p-osSolutionAbout__check::before {
   position: absolute;
   top: 0.25em;
   left: 0;
   width: 24px;
   height: 1em;
   background: url("/hrm/service/dir/outsourcing/src/images/ico-check.svg") no-repeat center / 1em auto;
   content: "";
}
.p-osSolutionAbout__num {
   font-weight: var(--font-zen-bold);
   font-size: 2.4rem;
   line-height: 1.5;
   text-align: center;
}
.p-osSolutionAbout__num>span {
   margin-top: 0;
   margin-right: 8px;
   color: var(--color-blue);
   font-weight: var(--font-just-bold);
   font-size: 7.2rem;
   font-family: var(--font-just-family);
   line-height: 1;
   text-shadow: 4px 4px 0px #BDC3C7;
}
.p-osSolutionAbout__body {
   flex: 1;
   font-size: 1.8rem;
}
@media (max-width: 1077.98px) {
   .p-osSolution__ttl {
      flex-direction: column;
   }
   .p-osSolutionAbout {
      flex-direction: column;
      align-items: flex-start;
      gap: 24px 0;
      margin-top: 64px;
   }
   .p-osSolutionAbout__head {
      width: 100%;
      max-width: 472px;
      margin-right: auto;
      margin-left: auto;
   }
   .p-osSolutionAbout__ttl {
      font-size: 1.8rem;
   }
   .p-osSolutionAbout__num>span {
      font-size: 6rem;
   }
   .p-osSolutionAbout__body {
      font-size: 1.6rem;
   }
}
@media (max-width: 767.98px) {
   .p-osSolution__ttl {
      margin-top: 22px;
   }
   .p-osSolution__ttl>*:first-child {
      width: 294px;
      height: 66px;
      font-size: 3rem;
   }
   .p-osSolution__ttl>*:last-child {
      font-size: 2.4rem;
   }
   .p-osSolution__txt {
      font-size: 1.8rem;
   }
}
/* ——————————————————————————————————————————
   //solution　end
—————————————————————————————————————————— */
/* ——————————————————————————————————————————
   service　start
—————————————————————————————————————————— */
.p-osFlow {
   margin-top: 30px;
}
.p-osFeature {
   display: flex;
   align-items: center;
   gap: 0 100px;
   margin-top: 96px;
}
.p-osFeature.-rev {
   flex-direction: row-reverse;
}
.p-osFeature__txtbox {
   width: 52%;
}
.p-osFeature__ttl {
   margin-bottom: 16px;
   color: var(--color-blue);
   font-weight: var(--font-zen-bold);
   font-size: 3.2rem;
   line-height: 1.5;
   word-break: keep-all;
}
.p-osFeature__img {
   flex: 1;
}
@media (max-width: 767.98px) {
   .p-osFlow {
      margin-top: 40px;
   }
   .p-osFeature {
      flex-direction: column-reverse;
      gap: 32px 0;
      margin-top: 64px;
   }
   .p-osFeature.-rev {
      flex-direction: column-reverse;
   }
   .p-osFeature__txtbox {
      width: 100%;
   }
   .p-osFeature__ttl {
      font-size: 2.4rem;
      text-align: center;
   }
}
/* ——————————————————————————————————————————
   //service　end
—————————————————————————————————————————— */
/* ——————————————————————————————————————————
   case　start
—————————————————————————————————————————— */
.p-osCase {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px 26px;
   margin-top: 72px;
   margin-bottom: 24px;
}
.p-osCase__num {
   display: block;
   margin-bottom: 10px;
   color: var(--color-accent);
   font-size: 1.6rem;
   font-weight: var(--font-just-bold);
   font-family: var(--font-just-family);
   line-height: 1;
   text-align: center;
   text-transform: uppercase;
}
.p-osCase__num>span {
   font-size: 3.2rem;
}
.p-osCase__balloon {
   width: 100%;
   margin-bottom: 24px;
}
.p-osCase__balloon>span {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   max-width: 276px;
   min-height: 48px;
   margin-right: auto;
   margin-left: auto;
   padding-right: 1em;
   padding-left: 1em;
   border-radius: 9999px;
   border: 3px solid #BDC3C7;
   font-weight: var(--font-zen-bold);
   font-size: 1.8rem;
   line-height: 1.25;
   text-align: center;
   word-break: keep-all;
}
.p-osCase__balloon>span::before {
   position: absolute;
   right: 50%;
   bottom: .5px;
   translate: 50% 100%;
   width: 16px;
   height: 12px;
   background: url("/hrm/service/dir/outsourcing/src/images/ico-case-arrow.svg") no-repeat center / contain;
   content: "";
}
.p-osCase__img {
   position: relative;
}
.p-osCase__img.-case2 {
   margin-top: -6px;
}
.p-osCase__box {
   margin-top: -20px;
   padding-top: 38px;
   padding-right: 34px;
   padding-bottom: 30px;
   padding-left: 34px;
   border-radius: 30px;
   background-color: #FFF;
}
.p-osCase__ttl {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-right: -26px;
   margin-bottom: 16px;
   margin-left: -26px;
   color: var(--color-blue);
   font-weight: var(--font-zen-bold);
   font-size: 2rem;
   line-height: 1.5;
   text-align: center;
   word-break: keep-all;
}
.p-osCase__list {
   margin-bottom: 18px;
   padding-bottom: 18px;
   border-bottom: 3px solid #BDC3C7;
}
.p-osCase__about {
   table-layout: fixed;
   line-height: 1.25;
   text-align: center;
   word-break: keep-all;
}
.p-osCase__head {
   padding-bottom: 1em;
} 
@media (max-width: 767.98px) {
   .p-osCase {
      grid-template-columns: repeat(1, 1fr);
      max-width: 472px;
      margin-top: 50px;
      margin-right: auto;
      margin-left: auto;
   }
   .p-osCase__box {
      padding-right: 28px;
      padding-left: 28px;
   }
   .p-osCase__ttl {
      margin-right: -20px;
      margin-left: -20px;
   }
}
/* ——————————————————————————————————————————
   //case　end
—————————————————————————————————————————— */
/* ——————————————————————————————————————————
   Flow　start
—————————————————————————————————————————— */
.p-osStep {
   display: table;
   margin-top: 80px;
   margin-right: auto;
   margin-left: auto;
}
.p-osStep_item {
   display: flex;
   align-items: flex-start;
   gap: 0 46px;
   position: relative;
   padding-bottom: 56px;
}
.p-osStep_item:first-child::before {
   position: absolute;
   top: 0;
   left: 0;
   translate: 0 -100%;
   width: 62px;
   color: var(--color-blue);
   font-weight: var(--font-just-extrabold);
   font-size: 1.6rem;
   font-family: var(--font-just-family);
   line-height: 1.5;
   text-align: center;
   content: "STEP";
}
.p-osStep_item::after {
   position: absolute;
   top: 0;
   left: 30px;
   width: 2px;
   height: 100%;
   background-color: var(--color-blue);
   content: "";
}
.p-osStep_item:last-child {
   padding-bottom: 0;
}
.p-osStep_item:last-child:after {
   display: none;
}
.p-osStep_num {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   z-index: 1000;
   width: 62px;
   height: 62px;
   border-radius: 50%;
   border: 2px solid;
   background-color: var(--color-lightblue);
   color: var(--color-blue);
   font-size: 3.2rem;
   font-family: var(--font-just-family);
   line-height: 1;
}
.p-osStep_box {
   flex: 1;
}
.p-osStep_ttl {
   margin-bottom: 16px;
   font-size: 2.4rem;
   line-height: 1.5;
   word-break: keep-all;
}
@media (max-width: 767.98px) {
   .p-osStep {
      margin-top: 68px;
   }
   .p-osStep_item {
      gap: 0 18px;
      padding-bottom: 40px;
   }
   .p-osStep_ttl {
      font-size: 2rem;
   }
}
/* ——————————————————————————————————————————
   //Flow　end
—————————————————————————————————————————— */
/* ——————————————————————————————————————————
   footer　start
—————————————————————————————————————————— */
.p-osPagetop {
   opacity: 0;
   position: fixed;
   right: 16px;
   bottom: 32px;
   z-index: 1010;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: var(--color-blue) url("/hrm/service/dir/outsourcing/src/images/ico-pagetop-arrow.svg") no-repeat center / 10px auto;
   transition: opacity var(--animation-duration) var(--animation-timing);
   pointer-events: none;
}
.p-osPagetop.is-active {
   opacity: 1;
   pointer-events: auto;
}
.p-osPagetop__txt{
   display: none;
}
.p-osBtmCta {
   opacity: 0;
   position: fixed;
   left: 0;
   bottom: 0;
   z-index: 1000;
   width: 100%;
   padding-top: 24px;
   padding-bottom: 28px;
   background-color: #FFF;
   transition: opacity var(--animation-duration) var(--animation-timing);
   pointer-events: none;
}
.p-osBtmCta.is-active {
   opacity: 1;
}
.p-osBtmCta__inner {
   display: flex;
   justify-content: center;
   gap: 0 32px;
   max-width: 572px;
   margin-right: auto;
   margin-left: auto;
   padding-right: 16px;
   padding-left: 16px;
}
.p-osBtmCta__inner >* {
   flex: 1;
}
.p-osBtmCta__label {
   display: block;
   margin-bottom: 6px;
   font-size: 1.6rem;
   line-height: 1.5;
   text-align: center;
}
.p-osBtmCta .c-osBtn {
   min-height: 66px;
   padding-right: 2.25em;
   padding-left: 2.25em;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
   font-size: 1.8rem;
}
.p-osBtmCta.is-active .c-osBtn {
   pointer-events: auto;
}
.p-osBtmCta .c-osBtn.-ico::before {
   left: 30px;
   width: 30px;
   height: 26px;
}
.p-osBtmCta .c-osBtn.-ico::after {
   right: 32px;
}
.p-osBtmCta .c-osBtn.-white {
   border: 2px solid var(--color-blue) 
}
@media (max-width: 767.98px) {
   .p-osPagetop {
      right: 16px;
      bottom: 104px;
      width: 48px;
      height: 48px;
   }
   .p-osBtmCta {
      padding-top: 10px;
      padding-bottom: 14px;
   }
   .p-osBtmCta__inner {
      gap: 0 16px;
   }
   .p-osBtmCta__label {
      font-size: 1.2rem;
   }
   .p-osBtmCta .c-osBtn {
      min-height: 48px;
      font-size: 1.4rem;
   }
   .p-osBtmCta .c-osBtn.-ico::before {
      left: 14px;
      width: 22px;
      height: 20px;
   }
   .p-osBtmCta .c-osBtn.-ico::after {
      right: 22px;
   }
}
@media (hover: hover) {
   .p-osPagetop:hover {
      opacity: var(--animation-opacity);
   }
}
/* ——————————————————————————————————————————
   //footer　end
—————————————————————————————————————————— */
/* ==========================================================================
   Utility
   ========================================================================== */
.u-osDib {
   display: inline-block !important;
}
.u-sp-osDb {
   display: none !important;
}
@media (max-width: 767.98px) {
   .u-sp-osDb {
      display: block !important;
   }
}
.u-osXcenter {
   margin-inline: auto;
}
.u-osBgc-white {
   background-color: #FFF !important;
}
.u-osBgc-grey {
   background-color: var(--color-grey) !important;
}
.u-osBgc-ltblue {
   background-color: var(--color-lightblue) !important;
}
.u-osBgc-pblue {
   background-color: var(--color-paleblue) !important;
}
.u-osTac {
   text-align: center;
}
.u-osWobk {
   word-break: keep-all;
}
.u-osCapitalize {
   text-transform: capitalize !important;
}