@charset "utf-8";

#next-prev-button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    z-index: 1;
}

#next-prev-button button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ccc;
    font-weight: bold;
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
}

#next-prev-button button img {
    vertical-align: middle;
}

#next-prev-button button:hover {
    background-color: #000;
}

.calendar-head {
    background: #111;
    font-weight: bold;
    color: #fff;
    padding: 3px 20px;
}

.new-calendar {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 20px;
    position: relative;
}


.new-calendar table {
    width: calc(50% - 20px);
    color: #222;
}

.btn_circle {
    cursor: pointer;
}

.new-calendar thead:after {
    content: "";
    height: 6px;
    width: 100%;
    display: block;
}


.new-calendar table caption {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
}

.new-calendar table td {
    text-align: center;
    padding-bottom: 10px;
    font-size: 16px;
    border: 1px solid #CCCCCC;
}

.new-calendar table td.is_available[data-is-selected='true'],
.new-time-base .time-base-row dd.is_available_time[data-is-selected='true'] {
    background-color: #FFD2D3;
}

.new-calendar table td span {
    font-size: 14px;
    margin-bottom: 5px;
    display: inline-block;
}

.new-calendar table td img {
    display: block;
    margin: auto;
}

.new-time-base {}

.time-base-row {
    display: flex;
    gap: 60px;
    margin-top: 30px;
}

.time-base-row dt {
    font-size: 16px;
    font-weight: 700 !important;
    flex-shrink: 0;
}

.time-wrapper {
    display: flex;
    width: 100%;
}

.time-wrapper dd {
    width: 70px;
    text-align: center;
    border: 1px solid #CCCCCC !important;
}

.new-calendar table td:hover,
.time-wrapper dd:hover {
    background-color: #ffd4d4;
}

.new-calendar table td:hover .btn_x,
.time-wrapper dd:hover .btn_x {
    opacity: 0.2;
    transform: scale(0.6, 0.6);
}

.new-calendar table td:hover .btn_circle,
.time-wrapper dd:hover .btn_circle {
    transform: scale(1.4, 1.4);
}

.time-wrapper dd img {
    display: block;
    margin: auto;
}

.time-wrapper dd span {
    display: inline-block;
    font-size: 16px;
    margin-bottom: 3px;
}

dd.bb0 {
    border-bottom: none !important;
}

.applicable p {
    font-size: 14px;
    color: #111111;
    text-align: center;
}

.applicable p span {
    color: #FF0000;
    font-weight: 700;
    font-size: 18px;
    margin-left: 10px;
}

.applicable.ap-text {
    margin-bottom: 20px;
}

.applicable.ap-bnr {
    background: #fff;
    box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.16);
    padding: 14px 10px 20px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

dd.bar.bb0 {
    padding-bottom: 0;
    margin-bottom: 10px;
}

dd.bar[data-is-open="true"]+dd.detail {
    display: block;
}

@media screen and (max-width: 767px) {
    .new-calendar .calendar02 {
        display: none;
    }

    .time-wrapper {}

    .new-calendar table {
        width: 100%;
    }

    .time-base-row {
        gap: 0px;
        flex-wrap: wrap;
    }

    .time-wrapper dd {
        width: 20%;
    }
}

/* スタートページ */
.inner.wrap-start {
    padding-top: 60px;
}

/* faq */
.faq .accordion-item .accordion-content .mt20,
.top-faq .bl .mt20 {
    margin-top: 20px;
    display: block;
}

.faq .accordion-item .accordion-content .mt30 {
    margin-top: 30px;
    display: block;
}

.faq .accordion-item .accordion-content .mt30 img {
    display: block;
}

.faq .accordion-item .accordion-content .offer img {
    max-width: 500px;
    width: 100%;
}

.faq .accordion-item .accordion-content .mt10 .attention {
    margin-top: 10px;
    display: block;
}

.faq .accordion-item .accordion-content span img {
    margin-top: 20px;
}

.faq .accordion-item .accordion-content .cred {
    color: #FF0000;
}

.faq .accordion-item .accordion-content .link,
.top-faq .bl .link {
    text-decoration: underline;
    font-weight: 700;
}

.mb30 {
    margin-bottom: 30px;
}



/* header ロゴ調整 */
header.h-small p {
    text-align: center;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7px 0;
}

header.normal .logo {
    width: 150px;
}

header.normal .logo a {
    display: block;
}

header.h-small p a img {
    display: block;
}

/* header スクロールで背景白 */
header.normal.fixed {
    background: #fff !important;
    border-bottom: #CCC 1px solid;
}

header.normal {
    background: #FFF;
    border-bottom: #CCC 1px solid;
}


@media screen and (min-width: 768px) {
    header.normal.fixed .nav-menu {
        margin-top: -20px;
    }
}

.star-field {
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #CCCCCC;
    /* グレーカラー 自由に設定化 */
    font-size: 30px;
    /* フォントサイズ 自由に設定化  */
}

.star-field::before,
.star-field::after {
    content: '★★★★★';
}

.star-field:after {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffcf32;
    /* イエローカラー 自由に設定化 */
}

.offer-detail .employee-list .star dd .star-field {
    font-size: 22px;
    /* フォントサイズ 自由に設定化  */
}

.star-field[data-rate="5"]:after {
    width: 100%;
}

.star-field[data-rate="4.9"]:after {
    width: 98%;
}

.star-field[data-rate="4.8"]:after {
    width: 96%;
}

.star-field[data-rate="4.7"]:after {
    width: 94%;
}

.star-field[data-rate="4.6"]:after {
    width: 92%;
}

.star-field[data-rate="4.5"]:after {
    width: 90%;
}

.star-field[data-rate="4.4"]:after {
    width: 88%;
}

.star-field[data-rate="4.3"]:after {
    width: 86%;
}

.star-field[data-rate="4.2"]:after {
    width: 84%;
}

.star-field[data-rate="4.1"]:after {
    width: 82%;
}

.star-field[data-rate="4"]:after {
    width: 80%;
}

.star-field[data-rate="3.9"]:after {
    width: 78%;
}

.star-field[data-rate="3.8"]:after {
    width: 76%;
}

.star-field[data-rate="3.7"]:after {
    width: 74%;
}

.star-field[data-rate="3.6"]:after {
    width: 72%;
}

.star-field[data-rate="3.5"]:after {
    width: 70%;
}

.star-field[data-rate="3.4"]:after {
    width: 68%;
}

.star-field[data-rate="3.3"]:after {
    width: 66%;
}

.star-field[data-rate="3.2"]:after {
    width: 64%;
}

.star-field[data-rate="3.1"]:after {
    width: 62%;
}

.star-field[data-rate="3"]:after {
    width: 60%;
}

.star-field[data-rate="2.9"]:after {
    width: 58%;
}

.star-field[data-rate="2.8"]:after {
    width: 56%;
}

.star-field[data-rate="2.7"]:after {
    width: 54%;
}

.star-field[data-rate="2.6"]:after {
    width: 52%;
}

.star-field[data-rate="2.5"]:after {
    width: 50%;
}

.star-field[data-rate="2.4"]:after {
    width: 48%;
}

.star-field[data-rate="2.3"]:after {
    width: 46%;
}

.star-field[data-rate="2.2"]:after {
    width: 44%;
}

.star-field[data-rate="2.1"]:after {
    width: 42%;
}

.star-field[data-rate="2"]:after {
    width: 40%;
}

.star-field[data-rate="1.9"]:after {
    width: 38%;
}

.star-field[data-rate="1.8"]:after {
    width: 36%;
}

.star-field[data-rate="1.7"]:after {
    width: 34%;
}

.star-field[data-rate="1.6"]:after {
    width: 32%;
}

.star-field[data-rate="1.5"]:after {
    width: 30%;
}

.star-field[data-rate="1.4"]:after {
    width: 28%;
}

.star-field[data-rate="1.3"]:after {
    width: 26%;
}

.star-field[data-rate="1.2"]:after {
    width: 24%;
}

.star-field[data-rate="1.1"]:after {
    width: 22%;
}

.star-field[data-rate="1"]:after {
    width: 20%;
}

.star-field[data-rate="0.9"]:after {
    width: 18%;
}

.star-field[data-rate="0.8"]:after {
    width: 16%;
}

.star-field[data-rate="0.7"]:after {
    width: 14%;
}

.star-field[data-rate="0.6"]:after {
    width: 12%;
}

.star-field[data-rate="0.5"]:after {
    width: 10%;
}

.star-field[data-rate="0.4"]:after {
    width: 8%;
}

.star-field[data-rate="0.3"]:after {
    width: 6%;
}

.star-field[data-rate="0.2"]:after {
    width: 4%;
}

.star-field[data-rate="0.1"]:after {
    width: 2%;
}

.star-field[data-rate="0"]:after {
    width: 0%;
}

header {
    z-index: 99 !important;
}



/* 知恵袋 */
.com-link-back {
    margin-bottom: 100px;
}

/* 知恵袋 アイコン */
.chiebukuro .box-answer .content ul li:first-child {
    width: 44px;
    height: 44px
}

.chiebukuro .box-answer .content ul li:first-child a {
    display: block;
    height: 100%;
}

.chiebukuro .box-answer .content ul li:first-child a img {
    object-fit: cover;
    border-radius: 50%;
    height: 100%;
}

/* 学生用トップ　知恵袋 */
.top-wisdom .list li {
    padding: 0;
}

.top-wisdom .list li a {
    display: block;
    padding: 20px 20px 20px 50px;
    position: relative;
    height: 130px;
}

.top-wisdom .list li a::before {
    content: "Q";
    font-family: "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
    text-align: center;
    font-size: 18px;
    color: #FFF;
    font-weight: 600;
    display: block;
    width: 30px;
    line-height: 30px;
    border-radius: 50%;
    background: #EB6700;
    position: absolute;
    top: 20px;
    left: 10px;
}

.top-wisdom .list li::before {
    display: none;
}


@media screen and (min-width: 768px) {
    header.normal .logo {
        width: auto;
    }

    .top-wisdom .list li a {
        height: 150px;
    }
}

/* プロフィール画像調整 */
.form .prof-upload .img img,
.form-confirm .prof-upload .img img {
    height: 100%;
}

.my-favore-profile .prof-img .img img {
    border-radius: 50%;
    height: 100%;
}

/* 新規登録エラー */
.parsley-remote,
.parsley-type,
.error-txt,
.login__message p,
.parsley-check,
.parsley-required,
.parsley-equalto,
.parsley-minlength,
.parsley-pattern,
.parsley-maxlength {
    color: #ff0000;
}

#zip_error {
    margin-left: 5px;
}

/* 企業オファー作成 追尾 */
.applicable.ap-bnr {
    z-index: 10;
}

/* zoomで話す モーダル */
.my-dialog {
    position: fixed;
    background: inherit;
}

.my-dialog::after {
    content: "";
    background: rgba(34, 34, 34, 0.75);
    width: 100vw;
    min-height: 100vh;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    box-sizing: border-box;
    padding: 30px 0;
}

.my-dialog .box {
    z-index: 1000;
    max-height: calc(100vh - 40px);
    overflow-y: scroll;
}
.my-dialog .box::-webkit-scrollbar {
    width: 5px;
}
.my-dialog .box::-webkit-scrollbar-track {
    background-color: #eee;
}
.my-dialog .box::-webkit-scrollbar-thumb {
    background-color: #222;
}

@media screen and (min-width: 768px) {
    .com-box-white.mt130 {
        margin-top: 130px;
    }
}

/* input */
input[type=text],
input[type=email],
input[type=password],
select,
textarea {
    font-size: 16px !important;
}

.form dd.zip input, .form-confirm dd.zip input {
    width: 85px;
}

@media screen and (min-width: 768px) {
    .topics .com-btn-border-radius {
        margin-bottom: 100px;
    }

    .matching-offer-list {
        margin-bottom: 100px;
    }

}

@media screen and (max-width: 767px) {
    .top-use .inner .box+.box {
        margin-top: 50px;
    }
    
    .matching-offer-list .box .left ul li:last-child{
        margin-top: 10px;
    }
}

.bg-white + .inner div:first-of-type:not([class]) {
    padding-top: 18.5px;
    padding-bottom: 30px;
}

.mypage-main .bg-pc-white .myoffer-nav + p:not([class]) {
    padding: 20px;
}


/* 社員マイページ 終了したオファー詳細 */
.offer-detail + .detail {
    padding: 20px;
    background: #fff;
    margin-top: -50px;
    margin-bottom: 50px;
    border-top: #CCC 1px solid;
}

.offer-detail + .detail h3 {
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 14px;
}

.offer-detail + .detail dl dt {
    font-weight: 700;
    padding-bottom: 10px;
}

.offer-detail + .detail dl dd {
    line-height: 1.42em;
    padding-bottom: 14px;
    border-bottom: #CCC 1px solid;
    margin-bottom: 14.5px;
}

.offer-detail + .detail dl dd:last-of-type {
    border-bottom: 0;
}

.inner.no-frame.pcmt + .other-offer.bl {
    padding: 0 20px;
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    .offer-detail + .detail {
        padding: 20px 60px;
    }

    .offer-detail + .detail dl dd {
        line-height: 1.7em;
        padding-bottom: 21px;
    }

    .inner.no-frame.pcmt + .other-offer.bl {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 20px;
    }

}

/* 0823追加  for-corporates Zoomアカウントのご案内 */
.for-points .flex {
    display: flex;
    gap: 40px;
    align-items: center;
}

.for-points .zoom-flow .flow dt::after,
.for-points .zoom-flow .flow dd::after {
    display: none;
}

.for-points .zoom-read p {
    text-align: left;
}

.for-points .zoom-read div {
    width: 140px;
}

.for-points .zoom-read p span {
    font-weight: bold;
}

.for-points .zoom-flow {
    margin-top: 0;
}
.for-points .zoom-flow .flow {
    padding-bottom: 0;
}

.for-points .zoom-flow h3 {
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 6px;
    border-bottom: #111 2px solid;
    text-align: left;
}

.for-points .zoom-flow .flow-row {
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
}

.for-points .zoom-flow .flow-row .red {
    color: #FF0000;
}

.for-points .zoom-flow .flow-row a {
    font-weight: bold;
    text-decoration: underline;
}


.for-points .zoom-flow .flow-row .flow-img {
    width: 300px;
}

.for-points .zoom-flow .flow-row .flow-row-text {
    flex: 1;
}

@media screen and (max-width: 767px) {
    .for-points .flex {
        flex-direction: column-reverse;
        gap: 20px;
    }

    .for-points .zoom-flow .flow-row.flex {
        flex-direction: column;
    }
}


.my-dialog .box .close-btn.close-x {
    display: none;
}

@media screen and (max-width: 767px) {
    .my-dialog .box {
    overflow: inherit;
    overflow-y: scroll;
    max-height: calc(100vh - 40px);
    padding-bottom: 0;
    }

    .my-dialog .box .close-btn {
        border-radius: 0 0 5px 5px;
    }

    .my-dialog .box .close-btn.close-x {
        position: absolute;
        top: -30px;
        right: -10px;
        left: unset;
        width: 50px;
        height: 50px;
        font-weight: bold;
        font-size: 30px;
        z-index: 1001;
        display: block;
        border-radius: 50%;
    } 
}


@media screen and (max-width: 390px) {
    .my-dialog .box .box-inner {
        height: 470px;
        overflow-y: scroll;
    }

    .my-dialog .box {
        padding-bottom: 60px;
    }

    .my-dialog .box .box-inner form {
        margin-bottom: 20px;
    }

    
}

/* パンくず　スクロールバー見えなくする */
.bread {
    height: 38px;
    overflow: hidden;
}

/* zoom終了後 評価 */
.zoom-en form input.btn-round-black.sm-size[disabled] {
    background-color: #aaa;
    cursor: not-allowed;
    border: 2px solid transparent;
}

.zoom-en form input.btn-round-black.sm-size[disabled]:hover {
    color: #fff;
}

/* 知恵袋投稿フォーム ラジオボタン */
.form .radiobtn, .form-confirm .radiobtn {
    flex-wrap: wrap;
    gap: 10px 0;
}

.select select {
    width: 100px;
}

@media screen and (max-width: 767px) {
.select select {
    width: calc(21vw);
}
}

.mypage-prof-box .prof-img .img {
    overflow: hidden;
}

.btn-round-black.mt20 {
    margin: 20px auto 0;
}

/* 0112追加 */
.inner.thin.bg-white.login-box {
    position: relative;
}

.cross-link {
    box-sizing: border-box;
    text-align: center;
    margin-top: 40px;
    position: absolute;
    width: calc(100% - 40px);
}
.cross-link a {
    text-decoration: underline;
}
.cross-link a:hover {
    text-decoration: none;
}

.my-dialog .box .close-btn {
    bottom: inherit;
    margin-top: 30px;
}

.signup-form .form dd.zip {
    flex-wrap: wrap;
}
.signup-form .form dd.zip::after {
    content: "※郵便番号にハイフン「-」は不要です";
    display: block;
    width: 100%;
}