@charset "UTF-8";

/* Vendors - include bootrap
========================================================================== */
/* Helpers - helpers Variable file along with starting point Mixins and Placeholders.
========================================================================== */
/*
 * Variables
 */
/*
 * Function
 */
/*
* mixins
*/
/*
 * Placeholders
 */
/* Base - reset and typography.
========================================================================== */
/*
 * reset
 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

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

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

/*
 * Typography
 */
@font-face {}

a {
    color: #FFFFFF;
}

a:focus {
    outline: none;
}

a:link {
    color: #fff;
    text-decoration: none;
}

a:link:visited {
    color: #fff;
}

a:link:hover,
a:link:visited:hover {
    color: #233D4C/*#00ADB5*/;
}

.italic {
    font-style: italic;
}

.bold {
    font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
    font-weight: 700;
}

h1,
h2 {
    line-height: 48px;
    color: #233D4C;
}

h3,
h4 {
    line-height: 42px;
    color: #233D4C;
}

h1,
h2 {
    font-size: 40px;
}

h3 {
    font-size: 32px;
}

.block-margins {
    margin: 1em 0;
}

.unordered-list {
    list-style-type: disc;
}

.ordered-list {
    list-style: decimal;
}

/* Components - Re-usable site elements.
========================================================================== */
.btn-submit {
    display: block;
    position: relative;
    font-size: 3.2rem;
    line-height: 11.9rem;
    width: 100%;
    padding: 0 1.5rem;
    background: #D85041;
    border-radius: 7px;
    transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    border-width: 1px;
    color: #fff;
    font-weight: 700;
}

.btn-more {
    position: relative;
}

.btn-more::after {
/*
    content: "\f054";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
*/
	    content: "\f054";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 2rem;
    top: 50%;
    color: #fff;
    font-size: 2.8rem;
    z-index: 99;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

.btn-submit:hover {
    background: #D85041;
    color: #fff;
}

/* Layout - Structure and layout files.
========================================================================== */
/* -------------------->>> COMMON <<<-------------------- */
html {
    font-size: 10px;
}

body {
    background: #fff;
    font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
    color: #444344;
    font-size: 15px;
    line-height: 30px;
    overflow-x: hidden;
    font-weight: 300;
}

hr {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #f0402b -moz-use-text-color -moz-use-text-color;
    -o-border-image: none;
    border-image: none;
    border-style: solid none none;
    border-width: 2px 0 0 0;
    margin: 0;
}

p {
    margin-bottom: 15px;
}

input:focus {
    outline: none;
}
input::placeholder{
	color: #CCCCCC;
}
a img {
    transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
}

a img:hover {
    opacity: 0.7;
}

img {
    vertical-align: top;
}

/* layout - sampel .
========================================================================== */
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.container {
    margin: 0 auto;
    width: 100%;
    max-width: 750px;
    padding: 0 15px;
}

.container:after {
    clear: both;
}

.container:before,
.container:after {
    content: " ";
    display: table;
}

img {
    width: auto;
    max-width: 100%;
}

/* layout .
========================================================================== */
.header {
    text-align: center;
    padding: 3.4rem 0;
}

.logo img {
    width: 34rem;
}

.banner img {
    width: 100%;
}

.banner .container {
    padding: 0;
}

.desired-jobs .container {
/*    background: #393E46;*/
    background: #233D4C;
}

.desired-jobs h3 {
    text-align: center;
    font-size: 2.8rem;
    line-height: 7.3rem;
    color: #fff;
}

.form-box {
    margin-bottom: 9.5rem;
    padding-top: 8rem;
}

.form-box__step {
    padding: 7rem 0 6rem;
    text-align: center;
}

.form-box__step img {
    width: 40rem;
}

.form-box__main .form-group {
    margin-bottom: 5.5rem;
}

.form-group .label h3 {
    font-size: 3.2rem;
    line-height: 5.6rem;
    margin-bottom: 1rem;
}

.form-group .label .required {
    font-size: 2.2rem;
    line-height: 3.2rem;
    color: #fff;
    display: inline-block;
    background: #D85041;
    text-align: center;
    padding: 0 2rem;
    font-weight: 400;
    vertical-align: text-bottom;
}

.form-group .label .any {
    font-size: 2.2rem;
    line-height: 3.2rem;
    color: #fff;
    display: inline-block;
    background: #B3B3B3;
    text-align: center;
    padding: 0 2rem;
    font-weight: 400;
    vertical-align: text-bottom;
}

.form-group .label>span {
    font-size: 2.2rem;
    line-height: 3.2rem;
    color: #233D4C;
    display: block;
    margin-bottom: .5rem;
}

.form-group .input {
    position: relative;
}

.form-group .input img {
    height: 8.8rem;
    width: auto;
    max-width: none;
    position: absolute;
    top: 0;
    right: 0;
}

.form-group-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -.8rem;
}

.form-group-row .input {
    width: 100%;
    padding: 0 .8rem;
}

.form-group .input.active:after {
    position: absolute;
    z-index: 999;
    top: 5rem;
    right: 6rem;
    width: 6.63rem;
    height: 7.274rem;
    display: block;
    content: '';
    background: url('../images/hand.png');
    background-size: contain;
    animation-name: translate;
    -webkit-animation-name: translate;
    -moz-animation-name: translate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
}

.form-group .form-group-row .input img {
    right: .8rem;
}

.form-group-row-column {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.form-group-row-column .input {
    margin-bottom: 1.5rem;
    width: 50%;
}

.form-control {
    width: 100%;
    height: 8.8rem;
    border: 2px solid #E0DDDD;
    border-radius: 7px;
    padding-left: 2rem;
    font-size: 2.8rem;
}

.form-control::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #ccc;
}

.form-control::-moz-placeholder {
    /* Firefox 19+ */
    color: #ccc;
}

.form-control:-ms-input-placeholder {
    /* IE 10+ */
    color: #ccc;
}

.form-control:-moz-placeholder {
    /* Firefox 18- */
    color: #ccc;
}

.form-group select {
    height: 8.8rem;
    width: 100%;
    background: #fff;
    border: 2px solid #E0DDDD;
    font-size: 2.8rem;
    line-height: 3.8rem;
    color: #233D4C;
}

.inputGroup {
    width: 100%;
    display: block;
    position: relative;
    border: 2px solid #E0DDDD;
/*    border-radius: .7rem;*/
    border-radius: 3px;
    overflow: hidden;
}

.inputGroup label {
    padding: 2.5rem 1.8rem;
    width: 100%;
    display: block;
    color: #233D4C;
    cursor: pointer;
    position: relative;
    z-index: 2;
    -webkit-transition: color 200ms ease-in;
    transition: color 200ms ease-in;
    overflow: hidden;
    font-size: 2.5rem;
    line-height: 3.8rem;
    padding-left: 7.7rem;
}
/*
.inputGroup label:before {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    content: '';
    background-color: #D85041;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale3d(1, 1, 1);
            transform: translate(-50%, -50%) scale3d(1, 1, 1);
    -webkit-transition: all 50ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: all 50ms cubic-bezier(0.4, 0.0, 0.2, 1);
    opacity: 0;
    z-index: -1;
}*/

.inputGroup label:after {
    width: 4rem;
    height: 4rem;
    content: '';
    border: 2px solid #E0DDDD;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
       background-position: center;
    border-radius: 50%;
    z-index: 2;
    position: absolute;
    left: 1.8rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    cursor: pointer;
    -webkit-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}

/*
.inputGroup input:checked~label {
    color: #fff;
}
*/

.inputGroup input:checked~label:before {
    -webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
            transform: translate(-50%, -50%) scale3d(56, 56, 1);
    opacity: 1;
}

body.pc .inputGroup input~label:before {
width: 16px;
    height: 16px;
}
body.sp .inputGroup input~label:before {
width: 4rem;
    height: 4rem;
}
.inputGroup input~label:before {
    content: '';
    border: 1px solid #E0DDDD;
    border-radius: 2rem;
    z-index: 2;
    position: absolute;
    left: 1.8rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
    display: inline-block;
    transform: none!important;
}
.inputGroup input:checked~label:after {
    background-color: #fff;
    border-color: #fff;
    background-image: url("../images/check.png");
	background-size: contain;
	z-index: -1;
}
.many_select input~label:before,
.many_select input~label:after{
	border-radius: 4px!important;
}
.inputGroup input {
    width: 4rem;
    height: 4rem;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    z-index: 2;
    position: absolute;
    left: 1.8rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
}

.btn-more {
    margin-top: 7.5rem;
}

.btn-more-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.btn-more-group .btn-back {
    display: inline-block;
    margin-right: 1.5rem;
    width: 32%;
/*    background: #989898;*/
	background: #B3B3B3;
    line-height: 11.9rem;
    font-size: 3.2rem;
    color: #fff;
    border-radius: 7px;
    transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
}

.btn-more-group .btn-back:hover {
    background: #233D4C/*#00ADB5*/;
    color: #fff;
}

.btn-more-group .btn-submit {
    font-size: 2.6rem;
    line-height: 3.2rem;
    display: inline-block;
    width: 68%;
    padding: 2.9rem 1.5rem;
    vertical-align: middle;
}

.person-box .container {
    padding: 5rem 15px;
background: #F5F5F5;
    text-align: center;
}

.person-box .container a {
    display: inline-block;
}

.person-box h3 {
    margin-bottom: 5.5rem;
    text-align: center;
}

.person-box h3 img {
    width: 46.574rem;
}

.person-box--text {
    max-width: 39rem;
    margin: 0 auto;
    background: #fff;
    border: 2px solid #233D4C/*#00ADB5*/;
    border-radius: 7px;
    position: relative;
    overflow: hidden;
    height: 7.2rem;
}
.permission{
    color: #233D4C/*#00ADB5*/;
    margin-bottom: 0;
}
.person-box--text::before {
    content: '';
    display: inline-block;
    height: 7.2rem;
    width: 7.852rem;
    background-image: url('../images/person.png');
    background-size: contain;
    vertical-align: middle;
}

.person-box--text span {
    font-size: 2.5rem;
    line-height: 7.2rem;
    color: #233D4C/*#00ADB5*/;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
    margin-left: 1.5rem;
}

.recruitment-box .container {
    background: #233D4C/*#00ADB5*/;
    text-align: center;
}

.recruitment-box h1 {
    margin-bottom: 0;
    font-size: 2.2rem;
    line-height: 7.2rem;
    color: #fff;
}
.work__link {
    display: flex;
	height: 100%;
    margin: 0;
    align-items: center;
    justify-content: center;
	font-size: 2.5rem;
}
.work__link a{
	    color: #233d4c;
}
.work__link a::after {
    font-family: 'icon';
    content: '\e901';
    margin-left: 4px;
    color: #D85041;
}
.is-loading{
	opacity: 0.5!important;
	pointer-events: none!important;
	cursor: not-allowed!important;
}
.is-loading::before{
	content: '';
	display: flex;
	width: 24px;
	height: 24px;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-image: url('../images/loading.png');
	background-size: contain;
	justify-content: center;
	z-index: 99;
	transform: rotate(359deg);
	animation: rotation 0.8s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(359deg);
  }
}
.thank-box .container {
    border-top: 2px solid #E6E6E6;
    padding-top: 9rem;
    padding-bottom: 9rem;
    text-align: center;
}

/*
.thank-box .des {
    margin-bottom: 7rem;
}

.thank-box .des p {
    margin-bottom: 0;
    font-size: 3.2rem;
    line-height: 5.6rem;
    color: #333333;
}
*/

/**Entry_thank**/
.thank__wrap {
	width: 100%;
	margin: 56px auto 40px;
	padding: 40px 0;
	text-align: center;
	border: 2px solid #EDEDED;
	border-radius: 8px;
}
.thank__text {
	margin-bottom: 32px;
	font-size: 16px;
	line-height: 2;
}
.button__line {
	display: flex;
	width: 344px;
	margin: 0 auto 16px;
	background: #03BE00;
	color: #ffffff;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	line-height: 64px;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
}
.button__line::before {
	content: '';
	display: inline-block;
	width: 31px;
	height: 29px;
	margin-right: 16px;
	background-image: url('../images/icon-line.png');
	background-size: contain;
	background-repeat: no-repeat;
}
.thank__text-min {
	font-size: 12px;
	color: #888888;
}
.link__text-top {
	margin-bottom: 64px;
	text-align: center;
}
.link__text-top a {
	font-size: 16px;
	color: #888888;
	text-decoration: underline;
}

/****/
.err {
    color: #E16262;
    font-size: 16px;
    line-height: 32px;
    display: inline-block;
    vertical-align: text-top;
    padding-left: 20px;
}

.step2-box ,
.step3-box {
    display: none;
}

#result input.error{
    border-color: #e41919;
}
#result div.error{
    margin-top: 20px;
    padding: 13px 20px;
    text-align: center;
    background: rgba(228,25,25, .75);
    color: #fff;
}
#result div.success{
    margin-top: 20px;
    padding: 13px 20px;
    text-align: center;
    background: rgba(50,178,95, .75);
    color: #fff;
}

.footer .container {
    background: #393E46;
    padding-top: 8.5rem;
    text-align: center;
}

.footer__nav {
    margin-bottom: 4.2rem;
}

.footer__nav ul li {
    display: inline-block;
}

.footer__nav ul li a {
    display: block;
    font-size: 2.8rem;
    line-height: 2.5rem;
    padding: 0 1.5rem;
    border-right: 2px solid #fff;
}

.footer__nav ul li:last-child a {
    border: none;
}

.footer__info {
    margin-bottom: 5rem;
}

.footer__info p {
    margin-bottom: 0;
    font-size: 2.2rem;
    line-height: 3.8rem;
    color: #fff;
}

.copyright {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    background: #191B1E;
    text-align: center;
}

.copyright p {
    margin-bottom: 0;
    line-height: 8rem;
    font-size: 2.2rem;
    color: #fff;
}



@media screen and (max-width:768px) {
	/**Entry_thank**/
	
	section:not(.ver-pc) .thank__wrap {
		width: 100%;
		min-width: unset;
		margin: 6.4vw auto 12.8vw;
		border-radius: 1.066667vw;
	}
	section:not(.ver-pc) .thank__text {
		margin-bottom: 2em;
		font-size: 3.2vw;
	}
	section:not(.ver-pc) .button__line {
		width: 74.666667vw;
		margin: 0 auto 6.4vw;
		font-size: 4.266667vw;
		line-height: 13.333333vw;
		border-radius: 1.066667vw;
	}
	section:not(.ver-pc) .button__line::before {
		width: 5.333333vw;
		height: 5.066667vw;
		margin-right: 16px;
	}
	section:not(.ver-pc) .thank__text-min {
		font-size: 2.933333vw;
	}
	section:not(.ver-pc) .link__text-top {
		margin: 12.8vw 0;
	}
	section:not(.ver-pc) .link__text-top a {
		font-size: 3.2vw;
	}

}
@media (max-width: 750px) {
    .container {
        display: inline-block;
        padding: 0 35px;
    }
    .footer__nav ul li a {
        font-size: 25px;
    }
}

/* layout - Responsive .
========================================================================== */
@keyframes translate {
    0% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0)
    }

    50% {
        -webkit-transform: translate(0, -10px);
                transform: translate(0, -10px)
    }

    100% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0)
    }
}

@-webkit-keyframes translate {
    0% {
        -webkit-transform: translate(0, 0)
    }

    50% {
        -webkit-transform: translate(0, -10px)
    }

    100% {
        -webkit-transform: translate(0, 0)
    }
}


/************************************************/
.step2-box, .step3-box{
    display: block;
}

.button__wrap{
    margin: 0 auto;
    width: 100%;
    max-width: 750px;
    padding: 0 15px;
}
.btn-back{
    cursor: pointer;
}
.btn_step{
    display: none;
    justify-content: space-between;
}
.active-step1 .btn__step-step1{
    display: block;
}
.active-step2 .btn__step-step2{
    display: flex;
}
.active-step3 .btn__step-step3{
    display: flex;
}

.btn-submit{
    opacity: .5;
    pointer-events: none;
    transition: .2s;
}
.btn-submit.is-active {
    opacity: 1;
    pointer-events: initial;
}

.hidden-submit{
    display: none;
}


/*@media(max-width: 750px){*/
    .form__contents{
        height: 1087px;
        display: flex;
        flex-direction: column;
        position: relative;
        padding: 0;
        margin:  0 0 9.5rem;
        overflow:  hidden;
        background-image: url(../images/step1.png);
        background-repeat:  no-repeat;
        background-position: center bottom 6rem;
        background-size: 40rem;
    }
    .active-step2{
        height: 1220px;
        background-image: url(../images/step2.png);
    }
    .active-step3{
        height: 1053px;
        background-image: url(../images/step3.png);
    }
    .form__contents__wrap{
        position: absolute;
        display: flex;
        width: 300%;
        /*height: 410px;*/
        top: 0;
        left: 0;
        /*transition: .2s;*/

    }
    .form-box{
        width: 100%;
        height: 860px;
        margin: 0 35px;
    }
    .container{
        padding: 0;
    }
    .active-step2 .form__contents__wrap {
        left: -100%;
    }
    .active-step3 .form__contents__wrap {
        left: -200%;
    }


    .button__wrap{
        position: absolute;
        bottom: 200px;
        left: 50%;
        width: 100%;
        max-width: 820px;
        padding: 0 35px;
        text-align:center;
        transform: translateX(-50%);
    }
    .btn_step{
        margin: auto;
    }
/*}*/