@charset "utf-8";
/*
 * Copyright 2026 マサクリエイツ
 * https://www.masa-cr.com/
 *
 * Breakpoint
 * 576px(sm) 768px(md) 992px(lg) 1200px(xl) 1400px(xxl)
 */
/* ------------------------------
	初期設定
------------------------------ */
html {
	line-height: 1.75;
	font-size:15px;
	font-family: "Montserrat", "Noto Sans JP", 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
	color:#303030;
	background-color:transparent;
}
@media screen and (min-width: 576px), print {
    html {font-size:16px;}
}
blockquote {border:dotted 1px #999}
dl {border:solid 1px #ccc}
table {border-top:solid 1px #ddd}
caption {background: #999;color: #fff}
th {background: #fff;border-bottom:solid 1px #ddd;padding:1em 1.2em;font-weight:bold;}
td {background:#fff;border-bottom:solid 1px #ddd;padding:1em 1.2em}
hr {color:#ccc;background-color:#ccc}
fieldset {border:1px solid #ccc}
a {text-decoration:underline;text-underline-offset:.3em;color:#001972}
a:visited {text-decoration:underline;color:#001972}
a:hover {text-decoration:none;color:#0030dc;}
a:active {text-decoration:underline;color:#1368f3}
@media screen and (min-width: 576px), print {
    th, td {padding-top:2em;padding-bottom:2em;}
}


/* ------------------------------
	class
------------------------------ */

/***** 文字色 *****/
.txc_01,a.txc_01 {color:#001972;}
.txc_02,a.txc_02 {color:#1368f3}

/***** 背景 *****/
.bgc_01 {background-color:#e8effd;}

/***** 見出し *****/
.h_01 {
    display:flex;
    align-items:center;
    padding:1.5em 5%;
    background:#f6f6fc;
    color:#001972;
    border-radius:1rem;
}
.h_01::before {
    content:"";
    width:4px;
    height:1.2em;
    margin-right:.5em;
    background:#1368f3;
    border-radius:2px;
}

/***** ボタン *****/
.btn_01,
a.btn_01,
.btn_02,
a.btn_02,
.btn_03,
a.btn_03 {
    display:inline-block;
    text-decoration:none;
    line-height:1.4;
    position:relative;
    text-align:center;
}
.btn_01.d_block,
.btn_02.d_block,
.btn_03.d_block {
    display:block;
}
.btn_01, a.btn_01 {
    padding:1em;
    background:#1368f3;
    color:#fff;
    border-radius:6px;
    min-width:10em;
    font-weight:bold;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  overflow:hidden;
}
.btn_01::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:#001972;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.btn_01:hover, .btn_01:focus, .btn_01:active,
a.btn_01:hover, a.btn_01:focus, a.btn_01:active {
    color:#fff;
}
.btn_01:hover::before, .btn_01:focus::before, .btn_01:active::before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.btn_01.skyblue, a.btn_01.skyblue {
    background:#3fa9f5;
    color:#001972;
}
.btn_01.skyblue::before {
    background:#1368f3;
}
.btn_01.skyblue:hover, .btn_01.skyblue:focus, .btn_01.skyblue:active,
a.btn_01.skyblue:hover, a.btn_01.skyblue:focus, a.btn_01.skyblue:active {
    color:#fff;
}

/***** その他 *****/
@media screen and (max-width: 575px), print {
    .rpsTable th,
    .rpsTable td {
        display:block;
    }
    .rpsTable th {
        border-bottom:none;
        padding-bottom:0;
    }
}

/* ------------------------------
	loading
------------------------------ */
#loading {
    width:100vw;
    height:100vh;
    transition:all 1s;
    background-color:#fff;
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
}
.spinner {
    width:100px;
    height:100px;
    margin:auto;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#ddd;
    border-radius:100%;
    animation:sk-scaleout 1.0s infinite ease-in-out;
}
/* animation:sk-scaleout */
@keyframes sk-scaleout {
    0% {
        transform:scale(0);
    } 100% {
        transform:scale(1.0);
        opacity:0;
    }
}
.loaded {
    opacity:0;
    visibility:hidden;
}


/* ------------------------------
	レイアウト
------------------------------ */
#container {overflow:hidden}
.mxW {
    max-width:1230px;
    margin-left:auto;
    margin-right:auto;
}
.pdLR {
    padding-left:5%;
    padding-right:5%;
}
.pdLRw {
    padding-left:8%;
    padding-right:8%;
}
.mgT {margin-top:4em}
.mgB {margin-bottom:4em}
.pdT {padding-top:4em}
.pdB {padding-bottom:4em}
@media screen and (min-width: 992px), print {
    .mgT {margin-top:5em}
    .mgB {margin-bottom:5em}
    .pdT {padding-top:5em}
    .pdB {padding-bottom:5em}
}
@media screen and (min-width: 1200px), print {
    .mgT {margin-top:6em}
    .mgB {margin-bottom:6em}
    .pdT {padding-top:6em}
    .pdB {padding-bottom:6em}
}
@media print {
    #container {width:1000px}
}


/* ------------------------------
	header
------------------------------ */
#header {
    display:flex;
    height:54px;
    align-items:center;
    padding:0 54px 0 1em;
    background:#fff;
}
.headerLogo {
    margin:0;
    line-height:1;
}
.headerLogo img {
    width:180px;
    margin-bottom:4px;
}
/* グローバールメニュー切り替え */
.nav-wrap {
    display:none;
    width:100%;
    height:calc(100vh - 54px);
    position:fixed;
    z-index:100;
    left:0;
    top:54px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:none;
    background:#fff;
}
.nav-wrap.open {
    display:block;
    opacity:0;
    animation-name:fadein;
    animation-duration:.3s;
    animation-timing-function:ease-out;
    animation-fill-mode:forwards;
}
@keyframes fadein {
    0% {
       opacity: 0;
    }
    100% {
       opacity: 1;
    }
}
.nav-wrap.close {display:none}
.nav-button {
    display:block;
    width:54px;
    height:54px;
    position:absolute;
    z-index:101;
    top:0;
    right:0;
    cursor:pointer;
}
.nav-button.active {position:fixed}
.nav-button span {
    transition:all 0.2s;
    display:inline-block;
    width:22px;
    height:2px;
    box-sizing:border-box;
    position:absolute;
    left:16px;
    background:#001972;
}
.nav-button span:nth-of-type(1) {top:20px}
.nav-button span:nth-of-type(2) {top:26px}
.nav-button span:nth-of-type(3) {bottom:20px}
.nav-button.active span:nth-of-type(1) {
    -webkit-transform: translateY(6px) rotate(-45deg);
    transform: translateY(6px) rotate(-45deg);
}
.nav-button.active span:nth-of-type(2) {
    opacity:0;
}
.nav-button.active span:nth-of-type(3) {
    -webkit-transform: translateY(-6px) rotate(45deg);
    transform: translateY(-6px) rotate(45deg);
}
.nav-wrap ul.nav,
.nav-wrap .btn_01 {
    margin:3em 5%;
}
.nav-wrap ul.nav {
    list-style:none;
    padding:0;
}
.nav-wrap ul.nav li {
    margin:.5em 0;
    padding:0;
}
.nav-wrap ul.nav li a {
    display:flex;
    align-items:center;
    padding:.5em .8em;
    text-decoration:none;
    border-radius:6px;
}
.nav-wrap ul.nav li a::before {
    content:"\f0da";
    font-family:"Font Awesome 5 Free";
    font-weight:900;
    color:#3fa9f5;
    margin-right:.5em;
}
.nav-wrap ul.nav li a:hover {
    background:#e8effd;
}
@media screen and (min-width: 992px), print {
    #header {
        height:74px;
        padding:0 2em;
    }
    .headerLogo,
    .headerLogo img {
        width:220px;
    }
    .nav-button {
        display:none;
        width:0;
    }
    .nav-wrap {
        flex:1;
        display:flex !important;
        justify-content:flex-start;
        flex-direction:row-reverse;
        align-items:center;
        position:relative;
        left:auto;
        top:auto;
        width:auto;
        height:auto;
    }
    .nav-wrap ul.nav {
        display:flex;
        align-items:center;
        margin:0 1.5em;
    }
    .nav-wrap ul.nav li {
        margin:0;
    }
    .nav-wrap ul.nav li a::before {
        content:none;
    }
    .nav-wrap .btn_01 {
        display:inline-block;
        margin:0;
        padding-top:.7em;
        padding-bottom:.7em;
    }
}
@media screen and (min-width: 1200px), print {
    .headerLogo,
    .headerLogo img {
        width:265px;
    }
    .nav-wrap ul.nav li {
        margin:0 .5em;
    }
}



/* ------------------------------
	footer
------------------------------ */
#footer {
    background:#e8effd;
}
ul.footerNav {
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding:0;
}
ul.footerNav li {
    margin:.6em 1em;
}
ul.footerNav li a {
    color:#303030;
    text-decoration:none;
}
ul.footerNav li a:hover {
    color:#666;
    text-decoration:underline;
}
.footerLogo img {
    width:220px;
}
@media screen and (min-width: 576px), print {
    .footerLogo img {
        width:265px;
    }
}


/* ------------------------------
	pageTitle
------------------------------ */
.pageTitle {
    padding:8em 5% 4em;
    background:url('../images/back_pagetitle.png') no-repeat center center #e8effd;
    background-size:cover;
}
.pageTitle.employer {
    background-image:url('../images/back_pagetitle_employer.jpg');
    background-position:right center;
}
@media screen and (min-width: 768px), print {
    .pageTitle.employer {
        padding:16em 5% 8em;
        background-position:center center;
    }
}


/* ------------------------------
	main
------------------------------ */
.ctaWrap.main .mxW {
    padding:5em 5%;
    box-sizing:border-box;
    background:#001972;
    color:#fff;
    border-radius:1em;
}
.ctaWrap.middle {
    padding-top:3em;
    padding-bottom:3em;
    background:#e8effd;
}
.ctaWrap .btn_01 {
    padding-top:1.2em;
    padding-bottom:1.2em;
}
.ctaWrap .mxW > div:last-child {
    margin-top:1.5em;
}
.ctaWrap.main.employer .mxW {
    background:#1368f3;
    color:#fff;
}
.ctaWrap.main.employer .mxW .btn_01 {
    background:#001972;
}
.ctaWrap.main.employer .mxW .btn_01:hover {
    color:#001972;
}
.ctaWrap.main.employer .mxW .btn_01::before {
    background:#e8effd;
}
@media screen and (min-width: 992px), print {
    .ctaWrap.middle {
        padding-top:4em;
        padding-bottom:4em;
    }
    .ctaWrap .mxW {
        display:flex;
        align-items:center;
        gap:5%;
    }
    .ctaWrap .mxW > div:first-child {
        flex:1;
    }
    .ctaWrap .mxW > div:last-child {
        width:22em;
        margin-top:0;
    }
}

.enTitle {
    color:#1368f3;
    font-weight:bold;
}
.enTitle::before {
    content:"●";
    color:#001972;
    margin-right:.25em;
}

/* formArea */
::-webkit-input-placeholder {color:#999}
:-moz-placeholder {color:#999}
.formArea table {
    border-collapse:collapse;
    width:100%;
    border:none;
}
.formArea table th,
.formArea table td {
    border:none;
}
.formArea input[type="text"],
.formArea input[type="password"],
.formArea input[type="email"],
.formArea input[type="tel"],
.formArea input[type="date"],
.formArea select,
.formArea textarea {
    border:none;
    background:#f6f6fc;
    color:#222;
    padding:.8em .6em;
    border:solid 1px #ddd;
    box-shadow:none;
    border-radius:4px;
}
.formArea input[type="text"],
.formArea input[type="password"],
.formArea input[type="email"],
.formArea input[type="tel"],
.formArea select,
.formArea textarea {
    box-sizing:border-box;
    width:100%;
    max-width:100%;
}
.formArea select option {
    background:#fff;
}
.formArea button,
.formArea input[type="submit"],
.formArea input[type="reset"],
.formArea input[type="button"] {
	-webkit-appearance:none;
    padding:1.5em;
    border:none;
    border-radius:6px;
    background:#ddd;
    color:#222;
    transition:all .2s;
}
.formArea button:hover,
.formArea input[type="reset"]:hover,
.formArea input[type="button"]:hover {
    background:#ccc;
    color:#000;
}
.formArea input[type="submit"] {
    display:block;
    width:100%;
    margin:auto;
    background:#1368f3;
    color:#fff;
}
.formArea input[type="submit"]:hover {
    background:#0030dc;
}
.formArea textarea {
    width:100%!important;
    height:12em!important;
}
.hissu {
    display:inline-block;
    margin:.5em;
    padding:2px .5em;
    border-radius:3px;
    background:#d33;
    color:#fff;
    line-height:1.2;
    font-size:.666em;
    font-weight:700;
}
.mfp_element_submit, .mfp_element_reset, .mfp_element_button, button.mfp_next, button.mfp_prev {
    text-shadow:none;
    font-size:inherit;
}
form#mailformpro label.mfp_not_checked {
    border: none;
}
form#mailformpro label.mfp_checked {
    border: none;
    background-color: transparent;
    box-shadow: none;
}
@media screen and (min-width: 768px), print {
    .formArea .rpsTable th {
        width:13em;
    }
}
@media screen and (max-width: 767px) {
    .formArea .rpsTable th,
    .formArea .rpsTable td {
        padding-left:0;
        padding-right:0;
    }
}

.indexEyecatch {
    background-image:url('../images/index_eyecatch_sp.jpg');
    background-repeat:no-repeat;
    background-position:center top;
    background-size:contain;
    padding-top:60vw;
    padding-bottom:3em;
}
.indexEyecatch h2 {
    font-size:1.6em;
}
.indexEyecatch h2 span {
	display:block;
}
.indexEyecatch .btn_01 {
    display:block;
    padding-top:1.2em;
    padding-bottom:1.2em;
}
@media screen and (min-width: 400px), print {
    .indexEyecatch h2 {
        font-size:2em;
    }
}
@media screen and (min-width: 576px), print {
    .indexEyecatch h2 {
        font-size:2.25em;
    }
}
@media screen and (min-width: 768px), print {
    .indexEyecatch {
        background-image:url('../images/index_eyecatch_pc.jpg');
        background-position:right -170px center;
        background-size:cover;
        padding-top:5em;
        padding-bottom:10em;
    }
    .indexEyecatch h2 + p {
        max-width:21.5em;
    }
    .indexEyecatch .btn_01 {
        display:inline-block;
    }
}
@media screen and (min-width: 992px), print {
    .indexEyecatch {
        background-position:center center;
        padding-top:9em;
        padding-bottom:9em;
    }
    .indexEyecatch h2 {
        font-size:3em;
    }
    .indexEyecatch h2 + p {
        max-width:29em;
    }
}

.nayamiWrap {
    background:#eee;
}
ul.nayamiList {
    list-style:none;
    padding:0;
}
ul.nayamiList li {
    margin:0 0 2em;
    padding:1.5em 5%;
    background:#fff;
    border-radius:1em;
    position:relative;
    text-align:center;
}
ul.nayamiList li::after {
    content:"";
    width:0;
    height:0;
    border:solid 15px #fff;
    border-top-width:10px;
    border-bottom-width:10px;
    border-right-color:transparent;
    border-bottom-color:transparent;
    position:absolute;
    bottom:-20px;
    left:calc(5% + 30px);
}
ul.nayamiList li:nth-child(even)::after {
    border-right-color:#fff;
    border-left-color:transparent;
    left:auto;
    right:calc(5% + 30px);
}
ul.nayamiList li img {
    margin-bottom:1em;
}
ul.nayamiList li > div {
    text-align:left;
}
@media screen and (min-width: 576px), print {
    ul.nayamiList li {
        display:flex;
        align-items:center;
        padding:2em 3%;
    }
    ul.nayamiList li img {
        margin-right:3%;
        margin-bottom:0;
    }
}
@media screen and (min-width: 992px), print {
    ul.nayamiList {
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
    }
    ul.nayamiList li {
        width:43%;
    }
    ul.nayamiList li img {
        margin-left:-3%;
    }
}

.pointWrap {
    background:url('../images/point_back.jpg') no-repeat center center;
    background-size:cover;
}
.pointHeading {
    background:#001972;
    color:#fff;
    padding:3em 1em;
    text-align:center;
}
ul.pointList {
    list-style:none;
    padding:0;
}
ul.pointList li {
    max-width:600px;
    margin:0 auto 1em;
    padding:0 0 1.5em;
    background:#fff;
    border-radius:1em;
    overflow:hidden;
    box-shadow:0 .5em 1em rgba(0,0,0,.3);
}
.pointListHeading {
    padding:2em 1em 0;
    background-image:linear-gradient(to bottom,#e8effd 65%,transparent 65%);
    color:#001972;
    font-weight:bold;
    letter-spacing:.05em;
}
ul.pointList h3,
ul.pointList p {
    padding-left:5%;
    padding-right:5%;
}
@media screen and (min-width: 992px), print {
    .pointHeading {
        width:fit-content;
        margin-left:auto;
        margin-right:auto;
        padding:3em;
        border-radius:0 0 1em 1em;
    }
    ul.pointList {
        display:flex;
        justify-content:space-between;
    }
    ul.pointList li {
        width:32%;
        margin:0;
    }
}

ul.serviceList {
    list-style:none;
    padding:0;
}
ul.serviceList li {
    background:#e8effd;
    text-align:center;
    margin:0 0 4%;
    padding:2em 0 .8em;
    border-radius:1em;
}
ul.serviceList li img {
    width:80px;
    margin-bottom:1em;
}
ul.serviceList li h3,
ul.serviceList li p {
    margin-left:5%;
    margin-right:5%;
}
ul.serviceList li p {
    text-align:left;
}
@media screen and (min-width: 576px), print {
    ul.serviceList {
        display:flex;
        flex-wrap:wrap;
        gap:4%;
    }
    ul.serviceList li {
        width:48%;
    }
}
@media screen and (min-width: 992px), print {
    ul.serviceList {
        gap:2%;
    }
    ul.serviceList li {
        width:32%;
        margin-bottom:2%;
    }
    ul.serviceList li img {
        width:101px;
    }
}

ol.flowList {
    list-style:none;
    padding:0;
}
ol.flowList li {
    margin:1em 0;
    padding:0;
}
ol.flowList li .flowListHeading {
    display:flex;
    align-items:center;
    flex-shrink:0;
    padding:.3em;
    border-radius:100vmax;
    background:#e8effd;
    color: #fff;
}
ol.flowList li .flowListHeading .number {
    display:flex;
    flex-direction:column;
    flex-shrink:0;
    align-items:center;
    font-weight:bold;
    background:#001972;
    width:3.5em;
    height:2.6em;
    padding-top:.9em;
    line-height:1;
    border-radius:100vmax;
}
ol.flowList li .flowListHeading h3 {
    flex:1;
    margin:0 .5em;
    text-align:center;
}
ol.flowList li p {
    margin:.8em 5% 1.6em;
}
@media screen and (min-width: 768px), print {
    ol.flowList li {
        display:flex;
        align-items:center;
    }
    ol.flowList li .flowListHeading {
        width:48%;
        margin-right:2%;
    }
    ol.flowList li .flowListHeading {
        padding:.4em .5em;
    }
    ol.flowList li .flowListHeading .number {
        width:4em;
        height:3em;
        padding-top:1em;
    }
    ol.flowList li p {
        margin:.8em 0;
    }
}

dl.faqList {
    border:none;
    margin:0;
    padding:0;
    border-bottom:solid 1px #001972;
    cursor:default;
}
dl.faqList dt,
dl.faqList dd {
    margin:0;
    padding:0;
}
dl.faqList dt {
    display:flex;
    align-items:baseline;
    padding:1.4em 2em 1.4em .5em;
    border-top:solid 1px #001972;
    font-weight:bold;
    position:relative;
}
dl.faqList dt:first-child {
    border-top:none;
}
dl.faqList dt::before {
    flex-shrink:0;
    margin-right:.5em;
    content:"Q.";
    color:#001972;
    font-size:1.5em;
}
dl.faqList dt::after {
    content:"＋";
    position:absolute;
    top:1.9em;
    right:.7em;
}
dl.faqList dt.open::after {
    content:"－";
}
dl.faqList dd {
    display:none;
    padding:1.4em;
    background:#f6f6fc;
}