@charset "utf-8";

/* --------------------------------------
    採用情報用タイトル
 -------------------------------------- */
.page-ttl-area .band {
    background-color: #bde3dd;
}

/* --------------------------------------
    defult style reset
 -------------------------------------- */
input,
button,
select,
textarea {
    appearance: none;
    resize: vertical;
    outline: none;
}

/* style input */
form input {
    outline: none;
}

/* Chrome, Safari */
input::input-placeholder,
textarea::input-placeholder {
    opacity: 0.3;
    transition: all 0.2s;
}

/* Firefox */
input::placeholder,
textarea::placeholder {
    opacity: 0.3;
    transition: all 0.2s;
}

/* Firefox 18以前 */
input:placeholder,
textarea:placeholder {
    opacity: 0.3;
    transition: all 0.2s;
}

/* --------------------------------------
    contact common
 -------------------------------------- */

/* google reCAPTCHA */
.grecaptcha-badge {
    bottom: 80px !important;
    z-index: 999;
}

/* item-table -------------------- */
.item-table > .box-formitem {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 25px;
    border-bottom: 1px solid rgb(0 0 0 / 15%);
}

.item-table > .box-formitem dt {
    width: 280px;
    font-weight: bold;
    vertical-align: middle;
}

.item-table > .box-formitem dd {
    width: calc(100% - 280px);
    word-break: break-all;
}

/* need -------------------- */
.need {
    position: relative;
    top: -3px;
    display: inline-block;
    margin-left: 5px;
    font-size: 0.9em;
    color: var(--org);
}

/* box-radio -------------------- */
.box-formitem.box-radio .radio-area {
    position: relative;
}

.box-formitem.box-radio .radio-area.l-1 > * {
    width: 100%;
}

.box-formitem.box-radio .radio-area.l-2 > * {
    width: 50%;
}

.box-formitem.box-radio .radio-area.l-3 > * {
    width: 33.3333%;
}

@media (max-width: 991px) {
    .box-formitem.box-radio .radio-area.m-1 > * {
        width: 100%;
    }

    .box-formitem.box-radio .radio-area.m-2 > * {
        width: 50%;
    }

    .box-formitem.box-radio .radio-area.m-3 > * {
        width: 33.3333%;
    }
}

@media (max-width: 480px) {
    .box-formitem.box-radio .radio-area.s-1 > * {
        width: 100%;
    }

    .box-formitem.box-radio .radio-area.s-2 > * {
        width: 50%;
    }

    .box-formitem.box-radio .radio-area.s-3 > * {
        width: 33.3333%;
    }
}

@media (max-width: 767px) {
    .item-table > .box-formitem {
        display: block;
        padding: 20px;
    }

    .item-table > .box-formitem dt,
    .item-table > .box-formitem dd {
        display: block;
        width: 100%;
    }

    .item-table .box-formitem dt {
        margin-bottom: 7px;
    }

    .box-formitem.box-radio {
        padding-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .item-table > .box-formitem {
        padding: 15px 0;
    }

    .item-table > .box-formitem dt {
        position: relative;
        padding-left: 0;
    }

    .item-table > .box-formitem dt::before {
        left: 0;
    }
}

/* --------------------------------------
	contact index
 -------------------------------------- */

/* input -------------------- */
.input {
    position: relative;
    z-index: 1;
    display: block;
}

.input__field {
    position: relative;
    display: block;
    padding: 0.8em;
    color: #aaa;
    appearance: none;
    background: #f0f0f0;
    border: none;
    border-radius: 0;

    /* for box shadows to show on iOS */
}

.input__field:focus {
    outline: none;
}

.input__label {
    float: right;
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    font-size: 75%;
    text-align: left;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none;
}

.input__label-content {
    position: relative;
    display: block;
    width: 100%;
    padding: 1.6em 0;
}

.with-unit {
    gap: 10px;
    align-items: center;
}

/* animation -------------------- */
.input__field--anm {
    display: block;
    width: 100%;
    font-family:
        "ヒラギノ角ゴ Pro W6", "HiraKakuPro-W6", "Hiragino Kaku Gothic Pro",
        "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 15px;
    color: #000;
    background: #f0f0f0 !important;
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow 0.3s;
}

.input__field--anm:focus {
    background: #fff !important;
    box-shadow: 0 0 0 1px #c8c8c8;
    animation: background 0.55s ease-in;
}

.input__field--anm:focus + .input__label--anm {
    pointer-events: none;
}

.input__field--anm:focus + .input__label--anm::after {
    animation: anim-shadow 0.3s forwards;
}

.input__field--anm:focus
    + grammarly-btn
    + .formError
    + .input__label--anm::after,
.input__field--anm:focus + .formError + .input__label--anm::after {
    animation: anim-shadow 0.3s forwards;
}

.input__label--anm::after {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    color: rgb(135 135 135 / 80%);
    content: "";
    box-shadow: 0 0 0 0;
}

.input__label-content--anm {
    padding: 0.75em 0.15em;
}

@keyframes anim-shadow {
    to {
        box-shadow: 0 0 100px 50px;
        opacity: 0;
    }
}

@keyframes background {
    0% {
        background: transparent;
    }

    66% {
        background: #fff;
    }

    100% {
        background: #fff;
    }
}

/* radio checkbox style -------------------- */
input[type="radio"] {
    position: absolute;
    visibility: hidden;
}

.radio {
    position: relative;
    box-sizing: border-box;
    display: block;
    padding: 12px 12px 12px 42px;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.2s linear;
}

.radio::after {
    position: absolute;
    top: calc(50% - 11px);
    left: 11px;
    display: block;
    width: 22px;
    height: 22px;
    content: "";
    border: 2px solid #bbb;
    border-radius: 50%;
}

.radio::before {
    position: absolute;
    top: calc(50% - 7px);
    left: 15px;
    display: block;
    width: 14px;
    height: 14px;
    content: "";
    background-color: var(--grn);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.radio:hover {
    background-color: #f7f7f7;
}

input[type="radio"]:checked + .radio::before {
    opacity: 1;
    transform: scale(1);
}

/* checkbox -------------------- */
.box-chk {
    position: relative;
}

input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.checkbox {
    position: relative;
    box-sizing: border-box;
    display: block;
    padding: 12px 12px 12px 45px;
    word-break: break-all;
    transition: background-color 0.2s linear;
}

.checkbox::before {
    position: absolute;
    top: calc(50% - 11px);
    left: 11px;
    z-index: 0;
    box-sizing: border-box;
    display: inline-block;
    width: 22px;
    height: 22px;
    content: "";
    background-color: transparent;
    border: 2px solid #bbb;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.checkbox::after {
    position: absolute;
    top: 50%;
    left: 18px;
    z-index: 1;
    box-sizing: border-box;
    display: inline-block;
    width: 6px;
    height: 9px;
    content: "";
    border: 2px solid #fff;
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: rotate(45deg) translate(-50%, -50%);
    transition: all 0.3s ease;
}

.checkbox:hover {
    cursor: pointer;
    background-color: #f7f7f7;
}

input[type="checkbox"]:checked + .checkbox::before {
    background-color: #333;
    border-color: #333;
}

input[type="checkbox"]:checked + .checkbox::after {
    opacity: 1;
}

/* .agearea --------------------  */
.item-table > .box-formitem dd .agearea {
    display: flex;
    column-gap: 10px;
    align-items: center;
}

/* .ziparea --------------------  */
.ziparea {
    align-items: center;
}

.ziparea .postmark {
    padding-right: 10px;
}

.ziparea .input {
    width: 240px;
}

.ziparea .t-link {
    width: auto;
    padding-left: 15px;
}

.t-link a {
    position: relative;
    display: inline-block;
    padding: 5px 5px 5px 25px;
}

.t-link a::before {
    position: absolute;
    top: 50%;
    left: 7px;
    width: 8px;
    height: 8px;
    content: "";
    border-right: 1px solid var(--org);
    border-bottom: 1px solid var(--org);
    transform: translateY(-55%) rotate(-45deg);
}

/* #teltime --------------------  */
#teltime {
    padding: 20px 10px;
}

.box-select {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    margin: 5px 0;
}

.box-select .selectlabel {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
}

.box-select .selectlabel select {
    box-sizing: border-box;
    display: block;
    min-width: 220px;
    padding: 10px;
    border: 1px solid #bbb;
}

.box-select .selectlabel::after {
    position: absolute;
    top: 20px;
    right: 8px;
    box-sizing: border-box;
    display: block;
    width: 8px;
    height: 10px;
    pointer-events: none;
    content: "";
    background-size: 20px;
    border: 4px solid transparent;
    border-top: 5px solid #000;
}

@media screen and (max-width: 480px) {
    .box-select {
        display: block;
        width: 100%;
    }

    .box-select .selectlabel {
        display: block;
        width: 100%;
    }

    .box-select .selectlabel select {
        display: block;
        width: 100%;
    }
}

/* item-privacy -------------------- */
.item-privacy {
    border-bottom: 1px solid rgb(0 0 0 / 10%);
}

.item-privacy .txt-privacy {
    height: 180px;
    padding: 20px;
    margin-bottom: 15px;
    overflow-y: scroll;
    font-size: 1.45rem;
    text-align: left;
    border: 1px solid #ededed;
}

.item-privacy .txt-privacy em {
    font-style: normal;
}

@media (max-width: 480px) {
    .radio {
        padding: 8px 10px 8px 42px;
    }

    .formError {
        width: 100%;
    }

    .formError .formErrorContent {
        font-size: 1.4rem;
    }
}

/* button --------------------  */
.btn-area {
    gap: 10px;
    justify-content: center;
}

.btn-area button[type="submit"] {
    color: var(--wht);
    background-color: var(--org);
}

.arrow02 {
    background-image: url("../img/common/arrow-wht.svg");
}

button {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    overflow: visible;
    text-align: center;
    cursor: pointer;
    resize: none;
    border-radius: 10px;
}

button.btn-reset,
button.btn-back {
    width: 150px;
    color: #222;
    background-color: #bbb;
}

button.btn-confirm {
    flex: 1;
    max-width: 250px;
    color: #fff;
    background-color: #333;
}

@media screen and (min-width: 768px) {
    button {
        transition: all 0.3s ease;
    }

    button:hover {
        opacity: 0.7;
    }
}

@media screen and (max-width: 767px) {
    button.btn-reset,
    button.btn-back {
        width: 130px;
    }

    .btn-area button[type="submit"] {
        width: min(calc(100% - 10px - 130px), 300px);
    }
}

@media screen and (max-width: 480px) {
    button.btn-reset,
    button.btn-back {
        width: 115px;
    }

    .btn-area button[type="submit"] {
        width: calc(100% - 10px - 115px);
    }
}

@media screen and (max-width: 400px) {
    button.btn-reset,
    button.btn-back {
        width: 95px;
    }

    .btn-area button[type="submit"] {
        width: calc(100% - 10px - 95px);
    }
}

/* --------------------------------------
	contact confirm
 -------------------------------------- */
.box-table.box-form > dl.formitemconf > dd {
    padding-left: 17px;
}

@media screen and (max-width: 480px) {
    .box-table.box-form > dl.formitemconf > dd,
    .box-table.box-form > dl.box-radio > dd {
        padding-top: 0.5em;
        padding-bottom: 1.2em;
    }
}

/* box-birth */
.box-birth {
    display: flex;
}

.box-birth .input {
    flex: auto;
    margin-right: 2em;
}

.box-birth .input::after {
    position: absolute;
    bottom: 0;
    left: 101%;
    z-index: 1;
    display: block;
    vertical-align: baseline;
}

.box-birth .input.year::after {
    content: "年";
}

.box-birth .input.month::after {
    content: "月";
}

.box-birth .input.day::after {
    content: "日";
}

@media (max-width: 480px) {
    .box-birth .input.year {
        flex: 2;
    }

    .box-birth .input.month {
        flex: 1;
    }

    .box-birth .input.day {
        flex: 1;
    }
}

.btn-area.back .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wht);
    background-color: var(--org);
    border-radius: 10px;
}

@media screen and (min-width: 768px) {
    .btn-area.back .btn {
        transition: opacity ease 0.28s;
    }

    .btn-area.back .btn:hover {
        opacity: 0.7;
    }
}