@charset "utf-8";

/* SBペイメントへHTTPでポストするフォーム用 */
.for-edit {
    height: 0;
    display: none;
    visibility: hidden;
    opacity: 0;
    position: relative;
    z-index: -999;
}

.sb-payment-form {
    height: 0;
    display: none;
    visibility: hidden;
    opacity: 0;
    z-index: -999;
}

/* 商品カスコンを吐き出す用のリスト */
.list-time {
    display: none;
}

/* 吐き出されたoptionへのcss */
.consultantlist dl.select-date dd select {
    border: unset;
}

/* modaalのcss上書き */
.modaal-close:before,
.modaal-close:after {
    background: var(--back-color-06);
}

.modaal-container {
    height: 90vh;
    background: transparent;
}

.modaal-content {
    height: 100%;
}

.modaal-content-container {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0;
}

.modal-box {
    height: 85vh;
    max-height: 85vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 3em 2em;
    border-radius: 1em;
    background-color: white;
}

.modal-box.-back-btn-notice-wrap {
    display: block;
}

.modal-box.precautions-box {
    display: block;
}

#termsContent .modal-box.precautions-box .read-more {
    height: auto;
}

#termsContent .modal-box.precautions-box .read-more .terms-text {
    height: auto;
}

#termsContent .modal-box.precautions-box .read-more .terms-text::after {
    display: none;
}

@media (max-width: 599px) {
    .modaal-inner-wrapper {
        padding-top: 5%;
        padding-bottom: 5%;
    }

    .modaal-container {
        height: 100%;
    }

    .modal-box {
        margin: 0;
        padding: 1em;
    }
}

/* 利用規約の前のモーダル */
#beforeButton {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: block;
    margin: 3em auto 0;
    padding: 1em 3em;
    color: white;
    border-radius: 3em;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(10%, #ea7015), color-stop(60%, #ef8f0c), color-stop(90%, #f3aa03));
    background-image: linear-gradient(90deg, #ea7015 10%, #ef8f0c 60%, #f3aa03 90%);
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
}

#beforeButton:hover {
    cursor: pointer;
}

/* 利用規約と名前・アドレス入力のモーダル */
.pre-placeholder {
    width: 100%;
    padding: 1em;
    color: #808080;
    text-align: center;
    background-color: #faf3e9;
}

.pre-placeholder:hover {
    cursor: pointer;
}

#termsContent {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-transition: 0.3s linear;
    -webkit-transition: height 0.3s linear;
    transition: height 0.3s linear;
}

#infoContent {
    height: 25%;
    -webkit-transition: 0.3s linear;
    -webkit-transition: height 0.3s linear;
    transition: height 0.3s linear;
}

#termsContent .read-more {
    height: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    position: relative;
}

#termsContent .read-more .terms-text {
    height: 100%;
    overflow: hidden;
    margin-bottom: 10px;
    -webkit-transition: max-height 1s;
    transition: max-height 1s;
    position: relative;
}

#termsContent .read-more:has(:checked) .terms-text {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

#termsContent .read-more .terms-text::after {
    content: "";
    width: 100%;
    height: 80px;
    display: block;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, hsla(0, 0%, 100%, 0)), color-stop(50%, hsla(0, 0%, 100%, 0.9)), color-stop(0, hsla(0, 0%, 100%, 0.9)), to(#fff));
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0.9) 50%, hsla(0, 0%, 100%, 0.9) 0, #fff);
    position: absolute;
    bottom: 0;
    left: 0;
}

#termsContent .read-more:has(:checked) .terms-text::after {
    content: none;
}

#termsContent .read-more .agree-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1em 3em;
    font-size: 14px;
    color: #fff;
    border-radius: 0.25em;
    border-radius: 1px;
    background: -webkit-gradient(linear, left top, right top, color-stop(10%, #ea7015), color-stop(60%, #ef8f0c), color-stop(90%, #f3aa03));
    background: linear-gradient(90deg, #ea7015 10%, #ef8f0c 60%, #f3aa03 90%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    position: absolute;
    bottom: 0px;
    left: 50%;

    gap: 0 4px;
}

#termsContent .read-more .agree-btn:hover {
    color: #fff;
    border: 1px solid #fff;
    background-color: #fff;
    opacity: 0.8;
    cursor: pointer;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

#termsContent .read-more:has(:checked) .agree-btn {
    display: none;
}

#termsContent .read-more .agree-btn::after {
    content: "";
    width: 10px;
    height: 5px;
    display: inline-block;
    background-color: #fff;

    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

#termsContent .read-more input {
    display: none;
}

#termsContent .agree-box {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 1em;
    margin: 0 auto 10px;
    padding: 1em;
}

#termsContent .agree-box.negative {
    opacity: 0.2;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
    pointer-events: none;
}

#termsContent .agree-box {
    padding: 0.5em;
}

#termsContent .agree-box label {
    display: inline-block;
    margin: 0.5em 0;
    padding: 0 0 0 2.5em;
    position: relative;
}

#termsContent .agree-box label::before {
    content: "";
    width: 1.75em;
    height: 1.75em;
    display: block;
    border: 2px solid #dcdcdc;
    border-radius: 3px;
    background-color: white;
    position: absolute;
    top: -0.15em;
    left: 0;
}

#termsContent .agree-box label:hover {
    text-decoration: underline;
    cursor: pointer;
}

#termsContent .agree-box input {
    display: none;
}

#termsContent .agree-box input:checked+label {
    text-decoration: underline;
}

#termsContent .agree-box input:checked+label::after {
    content: "\f00c";
    width: 0;
    height: 0;
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 2em;
    color: #ea7015;
    line-height: 1;
    background-color: transparent;
    position: absolute;
    top: -0.15em;
    left: 0;
}

#termsContent.read .agree-box.active {
    opacity: 1;
    pointer-events: inherit;
}

@media (max-width: 1024px) {
    #termsContent {
        height: 70%;
    }

    #infoContent {
        height: 30%;
    }
}

@media (max-width: 599px) {
    #termsContent .read-more .agree-btn {
        width: 80%;
    }

    #termsContent {
        height: 60%;
    }

    #infoContent {
        height: 40%;
    }
}

/* 名前とメールアドレス入力欄 */
.list-infoContent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.list-infoContent+.list-infoContent {
    margin-top: 10px;
}

.list-infoContent dt {
    width: 25%;
    padding: 0.75em;
}

.list-infoContent dd {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.list-infoContent dd input {
    width: 100%;
    padding: 0.75em;
    border: 1px solid #dcdcdc;
    border-radius: 0.5em;
}

.list-infoContent-wrap #submitInfo {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: block;
    margin: 1em auto 0;
    padding: 1em 3em;
    color: white;
    border-radius: 3em;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(10%, #ea7015), color-stop(60%, #ef8f0c), color-stop(90%, #f3aa03));
    background-image: linear-gradient(90deg, #ea7015 10%, #ef8f0c 60%, #f3aa03 90%);
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
}

.list-infoContent-wrap #submitInfo:hover {
    cursor: pointer;
}

.list-infoContent-wrap #submitInfo.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 599px) {
    .list-infoContent {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .list-infoContent dt {
        width: 100%;
        padding: 0.75em 0.25em;
    }
}

/* 購入直前のモーダル */
#buyContent {
    width: 100%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.include-title-text {
    margin: 20px 0;
    text-align: center;
}

.list-flowContent {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.list-flowContent li {
    width: calc((100% / 3) - 1em);
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-top: 1em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    padding: 1em;
    border: 3px solid transparent;
    border-radius: 1em;
    background-color: #f5e7c5;
    position: relative;
}

.list-flowContent.-back-btn-notice-wrap li {
    margin-top: 0;
}

.list-flowContent li.-wide {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-left: 0;
}

.list-flowContent li.-middle {
    width: 45%;
}

.list-flowContent.-four-version li {
    width: 48%;
    margin: 1%;
}

.list-flowContent.-four-version.-side-by-side li {
    width: calc(92% / 4);
    margin: 1%;
}

.list-flowContent li .num {
    width: clamp(3.75rem, 3.182rem + 2.42vw, 5rem);
    height: clamp(3.75rem, 3.182rem + 2.42vw, 5rem);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
    color: white;
    line-height: 1;
    border-radius: 100%;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(10%, #ea7015), color-stop(60%, #ef8f0c), color-stop(90%, #f3aa03));
    background-image: linear-gradient(90deg, #ea7015 10%, #ef8f0c 60%, #f3aa03 90%);
    -webkit-transform: translate(-15%, -15%);
    transform: translate(-0.25em, -0.25em);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.list-flowContent li .title {
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    align-items: flex-start;
    -ms-flex-align: start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 1em;
    padding-left: clamp(1rem, 0.77rem + 1.27vw, 1.5rem);
    font-weight: bold;
    font-size: 18px;
    background: -webkit-gradient(linear, left top, right top, color-stop(10%, #ea7015), color-stop(60%, #ef8f0c), color-stop(90%, #f3aa03));
    background: linear-gradient(90deg, #ea7015 10%, #ef8f0c 60%, #f3aa03 90%);
    -webkit-background-clip: text;
    background-clip: text;
    position: relative;
    z-index: 1;

    -webkit-text-fill-color: transparent;
}

.list-flowContent.-back-btn-notice li .title {
    display: block;
    margin-bottom: 0;
    padding-left: 0;
    /* 20px 24px 375px 900px */
    font-size: clamp(1.25rem, 1.071rem + 0.76vw, 1.5rem);
    color: red;
    text-align: center;
    background: transparent;
    background-clip: unset;

    -webkit-text-fill-color: initial;
}

.list-flowContent li .title .block-text {
    display: inline-block;
    margin: 0 0.25em;
    padding: 0.25em 0.5em;
    font-size: 125%;
    color: white;
    line-height: 1;
    background-color: red;
}

.list-flowContent li .text {
    font-size: 12px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

.list-flowContent.-back-btn-notice li .text.normal-font-size {
    font-size: initial;
}

.list-flowContent.-back-btn-notice li .text.big-text {
    font-size: 22px;
}

.list-flowContent.-back-btn-notice li .text.big-text .star-text {
    margin: 0 1em;
}

.list-flowContent li .text.-more-large {
    font-size: 14px;
}

.list-flowContent li .text.-more-small {
    font-size: 10px;
}

.list-flowContent li .notice-element {
    margin-top: 1em;
    font-weight: bold;
    font-size: 12px;
    color: var(--txt-color-06);
}

.list-flowContent li .img img {
    width: 100%;
}

.list-flowContent li.passed {
    background-color: #ddd;
}

.list-flowContent li.passed::after {
    content: "\f00c";
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: auto;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: clamp(5rem, 4.432rem + 2.42vw, 6.25rem);
    color: #efd392;
    line-height: 1;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
}

.list-flowContent li.current {
    border: 3px solid #ec7b12;
    background-color: white;
}

.list-flowContent li.passed .num {
    background-image: unset;
    background-color: #d3d2d2;
}

.list-flowContent li.passed .title {
    color: #acacac;
    background: unset;

    -webkit-text-fill-color: initial;
}

.list-flowContent li.passed .text {
    color: #acacac;
}

.marchantTitle,
.consultant-name,
.consultant-regno {
    font-weight: bold;
    font-size: 110%;
    color: #ee860e;
}

.list-buyContent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 1em 0;
}

.list-buyContent li {
    width: 25%;
    margin: 1%;
}

.list-buyContent li .button {
    width: 100%;
    padding: 0.75em 2em;
    color: white;
    line-height: 1;
    text-align: center;
    border: 1px solid #a9a9a9;
    border-radius: 2.5em;
    background-color: #a9a9a9;
}

.list-buyContent li .button.-pay {
    font-weight: bold;
    color: white;
    border: 1px solid transparent;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(10%, #ea7015), color-stop(60%, #ef8f0c), color-stop(90%, #f3aa03));
    background-image: linear-gradient(90deg, #ea7015 10%, #ef8f0c 60%, #f3aa03 90%);
}

#FlowModal .text.-notice {
    margin-top: 1em;
    font-size: 0.8em;
}

.list-buyContent li .button {
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
}

.list-buyContent li .button:hover {
    opacity: 0.5;
    cursor: pointer;
}

.trigger {
    width: 0;
    height: 0;
    display: none;
    visibility: hidden;
    opacity: 0;
}

@media (max-width: 1024px) {
    .modaal-content-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #flowContent {
        height: 10%;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .modal-box.-back-btn-notice-wrap #flowContent {
        height: auto;
    }

    .list-flowContent {
        width: 70%;
        max-width: 100%;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-left: auto;
        margin-right: auto;
    }

    .modal-box.-back-btn-notice-wrap .list-flowContent {
        width: 100%;
        margin-top: 0;
        padding-left: 0;
    }

    .list-flowContent li {
        width: 100%;
        padding-top: 1.5em;
        padding-bottom: 1.5em;
    }

    .list-flowContent.-four-version.-side-by-side li {
        width: calc(96% / 2);
    }

    .list-flowContent.-four-version li,
    .list-flowContent.-four-version.-side-by-side li.-wide {
        width: 100%;
    }

    .list-flowContent li+li {
        margin-left: 0;
    }

    .list-flowContent li.-middle {
        width: 100%;
    }

    .list-flowContent li .title {
        margin-bottom: 1em;
        margin-left: 2.75em;
        padding-left: 0;
    }

    .list-flowContent.-back-btn-notice li .title {
        margin-left: 0;
    }

    .list-flowContent.-back-btn-notice li .text.big-text {
        font-size: 20px;
    }

    .list-flowContent.-back-btn-notice li .text.big-text .star-text {
        margin: 0;
    }

    .list-buyContent li {
        width: 30%;
    }
}

@media (max-width: 599px) {
    .modaal-close {
        top: 0px;
        right: 40px;
    }

    .list-flowContent {
        width: 100%;
        padding-left: 0.5em;
    }

    .list-buyContent li {
        width: 48%;
    }

    .list-flowContent.-four-version.-side-by-side li,
    .list-flowContent.-four-version.-side-by-side li.-wide {
        width: 100%;
    }

    .list-flowContent.-back-btn-notice li {
        margin: 0;
        padding-top: 1em;
        padding-bottom: 1em;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    .list-flowContent.-back-btn-notice li .text.big-text {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        font-size: 16px;
    }

    .list-flowContent.-back-btn-notice li .title {
        font-size: 16px;
    }

    .list-flowContent.-back-btn-notice li .title .hissu {
        font-size: 20px;
    }

    .list-buyContent li .button {
        padding: 0.75em 1em;
        font-size: 12px;
    }

    .text.-notice {
        font-size: 14px;
    }

    .list-flowContent.-back-btn-notice li .img.sp01 {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .list-flowContent.-back-btn-notice li .text.normal-font-size {
        font-size: 14px;
    }
}

/* 選択肢生成後 */
.consultantlist dl.select-date dd .blink {
    border: #ee860e solid 7px;
    -webkit-animation: blink 0.5s ease-in-out infinite alternate;
    animation: blink 0.5s ease-in-out infinite alternate;
    position: relative;
    z-index: 1;
}

@-webkit-keyframes blink {
    0% {
        border-color: #ee860e;
    }

    100% {
        border-color: rgba(255, 0, 0, 0);
    }
}

@keyframes blink {
    0% {
        border-color: #ee860e;
    }

    100% {
        border-color: rgba(255, 0, 0, 0);
    }
}

/* ##### 汎用 ##### */
/* ボタン */
.sb-payment-btn {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    margin-top: 0;
}

.sb-payment-btn.plus-margin-top {
    margin-top: 100px;
}

.sb-payment-btn-box {
    width: 100%;
    display: none;
}

.anchor-substitution {
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
}

.anchor-substitution:hover {
    cursor: pointer;
}

.sb-payment-btn-box .element::before {
    display: inline-block;
}

.sb-payment-btn-box .element.element-title::before {
    content: "商品名：";
}

.sb-payment-btn-box .element.element-item-id::before {
    content: "商品ID：";
}

.sb-payment-btn-box .element.element-amount::before {
    content: "金額：";
}

.sb-payment-btn-box .element.element-amount::after {
    content: "半角数字のみ。３桁ごとのカンマは不可。税込金額のみ。";
    display: inline-block;
    margin-left: 2em;
    padding: 0.25em 1em;
    font-size: 12px;
    color: white;
    line-height: 1;
    background-color: royalblue;
}

/* ##### キャリア相談の指名無し ##### */
#unspecified_list {
    width: 700px;
    max-width: 100%;
    margin: 100px auto;
    padding: 1em;
    border-radius: 2em;
    background-color: white;
}

#unspecified_list .list-inner-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#unspecified_list .list-inner-box .pic {
    width: 30%;
}

#unspecified_list .list-inner-box .list-inner-element {
    width: 10%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-left: 2.5%;
}

/* ##### 送信完了ページ（サービス別） ##### */
.list-for-optgroup {
    height: 0;
    visibility: hidden;
    opacity: 0;
}

.purchased-form select {
    min-width: 50%;
    max-width: 100%;
}

@media (max-width: 1024px) {
    .purchased-form select {
        width: 100%;
        min-width: 100%;
    }
}

/* キャリア相談シート */
.consultation-time select {
    width: 100%;
}

/* ##### 検索フォームの結果に表示されるパーソナライズレコメンド ##### */
.search-recommend {
    height: 0;
    visibility: hidden;
    margin-top: 5em;
    opacity: 0;
}

.search-recommend.indicated {
    height: auto;
    visibility: visible;
    opacity: 1;
}

.list-search-recommend li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 1em;
    border-radius: 1em;
    background-color: white;
}

.list-search-recommend li+li {
    margin-top: 1.5em;
}

.list-search-recommend li .list-search-recommend-img {
    width: 25%;
}

.list-search-recommend li .list-search-recommend-info {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-left: 1em;
    padding: 0.5em 0.5em calc(40px + 0.5em);
    position: relative;
}

.list-search-recommend li .list-search-recommend-info .list-search-recommend-title {
    font-weight: bold;
    /* 20px 24px 375px 1000px */
    font-size: clamp(1.25rem, 1.1rem + 0.64vw, 1.5rem);
    color: var(--txt-color-06);
}

.list-search-recommend li .list-search-recommend-info .list-search-recommend-text {
    font-size: 13px;
    color: gray;
    line-height: 1.3;
}

.list-search-recommend li .list-search-recommend-info .list-search-recommend-about {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0.5em 0;
}

.list-search-recommend li .list-search-recommend-info .list-search-recommend-about [class*="list-search-recommend"] {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.list-search-recommend li .list-search-recommend-info .list-search-recommend-about [class*="list-search-recommend"]+[class*="list-search-recommend"] {
    margin-left: 1em;
}

.list-search-recommend li .list-search-recommend-info .sb-payment-btn {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    position: absolute;
    bottom: 0;
    right: 0;
}

.list-search-recommend li .list-search-recommend-info .sb-payment-btn .anchor-substitution {
    width: 200px;
    max-width: 100%;
    height: 40px;
    padding: 10px 20px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    border-radius: 30px;
    background: #ea7015;
}

.list-search-recommend li .list-search-recommend-info .sb-payment-btn .anchor-substitution:hover {
    opacity: 0.5;
}

@media (max-width: 599px) {
    .list-search-recommend li .img,
    .list-search-recommend li .list-search-recommend-info {
        width: 100%;
    }

    .list-search-recommend li .list-search-recommend-info {
        margin-top: 0.5em;
        margin-left: 0;
    }

    .list-search-recommend li .list-search-recommend-info .sb-payment-btn {
        margin: auto;
        left: 0;
    }
}

/* ##### 検索結果から指定した要素を消す ##### */
.search-hide-subject.hide {
    height: 0;
    visibility: hidden;
    margin: 0;
    padding: 0;
    opacity: 0;
}

.search-result-title {
    display: none;
}

.search-hide-subject.hide+.search-result-title {
    display: block;
}

/* ##### 検索結果0件のとき ##### */
.search-result-word {
    height: 0;
    visibility: hidden;
    padding: 0;
    border-radius: 1.5em;
    background-color: white;
    opacity: 0;
}

.search-result-word.result-active {
    height: auto;
    visibility: visible;
    padding: 2em;
    opacity: 1;
}

.search-result-item.result-hide {
    display: none;
}

/* ##### 表示しないキャリアコンサルタント ##### */
.dont-display {
    height: 0;
    display: none;
    visibility: hidden;
    opacity: 0;
    z-index: -9999;
}

/* ##### キャリア相談の決済ボタン用 ##### */
.sb-payment-btn.double-btn .btn-inner>* {
    width: 300px;
}

/* ##### お仕事案内人、ワンコインなどの注意事項 ##### */
.precautions-box-inner {
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.notice-box .notice-box-item {
    padding: 1em;
    border: 2px solid var(--txt-color-06);
    border-radius: 0.5em;
}

.notice-box .notice-box-item.-colored {
    color: white;
    background-color: var(--back-color-06);
}

.notice-box .notice-box-item+.notice-box-item {
    margin-top: 1em;
}

.notice-box-item-title {
    margin-bottom: 0.5em;
    font-weight: bold;
    font-size: 18px;
    color: var(--txt-color-06);
}

.notice-box-item-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.notice-box-item-list+.notice-box-item-list {
    margin-top: 0.5em;
}

.notice-box-item-list dt {
    width: 6em;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.notice-box-item-list.-wide dt {
    width: 12em;
}

.notice-box-item-list dd {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.sb-payment-btn.double-btn.negative .btn-inner .readTermsInfoModal {
    display: block;
}

.sb-payment-btn.double-btn.negative .btn-inner .anchor-substitution {
    display: none;
}

.sb-payment-btn.double-btn.active .btn-inner .readTermsInfoModal {
    display: none;
}

.sb-payment-btn.double-btn.active .btn-inner .anchor-substitution {
    display: block;
}

@media (max-width: 599px) {
    .precautions-box-inner .read-more {
        font-size: 13px;
    }

    .notice-box-item-title {
        font-size: 16px;
    }

    .notice-box-item-list {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .notice-box-item-list dd {
        width: 100%;
    }
}

/* ##### 見たまま編集 ##### */
/* 隠してるSBペイメント用フォームを表示 */
[data-element-id] .for-edit {
    height: auto;
    display: block;
    visibility: visible;
    opacity: 1;
    position: relative;
    z-index: 1;
}

[data-element-id] .sb-payment-form {
    width: 100%;
    max-width: 1000px;
    height: 100px;
    display: block;
    visibility: visible;
    margin: 50px auto;
    padding: 3ch 1em 1em;
    border: 2px solid royalblue;
    opacity: 1;
    position: relative;
    z-index: 1;
}

[data-element-id] .sb-payment-form::before {
    content: "【変更禁止】見えないですがSBペイメント用formを設置しています。公開ページには表示されません。";
    width: 100%;
    display: block;
    padding: 0.5em;
    font-size: 14px;
    color: white;
    line-height: 1.2;
    text-align: center;
    background-color: royalblue;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

[data-element-id] .sb-payment-form input[type="submit"] {
    pointer-events: none;
}

/* 利用規約 */
[data-element-id] #termsContent .read-more .terms-text::after {
    display: none;
}

/* 商品カスコンを吐き出す用のリスト */
[data-element-id] .list-time li:nth-of-type(n+2) {
    display: none;
}

[data-element-id] .list-time li {
    font-size: 10px;
    line-height: 1.2;
}

[data-element-id] .list-time [data-collection-list-filtering] {
    padding-top: 2em;
    position: relative;
}

[data-element-id] .list-time [data-collection-list-filtering]:hover::before {
    content: "商品一覧カスタムコンテンツ";
    width: 100%;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    top: 0;
    left: 0;
}

[data-element-id] .list-time {
    display: block;
}

/* モーダル */
[data-element-id] .modal-section {
    margin: 80px 10px;
    padding: 2em 1em 1em;
    border-bottom: 10px solid royalblue;
    border-left: 10px solid royalblue;
    border-right: 10px solid royalblue;
    position: relative;
}

[data-element-id] .modal-section::before {
    content: "SBペイメント支払いフローで表示するポップアップウィンドウです。";
    width: 100%;
    display: block;
    padding: 0.5em;
    font-size: 20px;
    color: white;
    line-height: 1.2;
    text-align: center;
    background-color: royalblue;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

[data-element-id] .modal-window {
    overflow: hidden;
    padding: 1.5em;
    border-radius: 1.5em;
    background-color: white;
}


[data-element-id] #beforeModal,
[data-element-id] #TermsInfoModal,
[data-element-id] #FlowModal {
    display: block !important;
    margin: 80px 0;
    padding: 4em 1em 1em;
    border: 2px solid royalblue;
    position: relative;
}

[data-element-id] #beforeModal::before,
[data-element-id] #TermsInfoModal::before,
[data-element-id] #FlowModal::before {
    width: 100%;
    display: block;
    padding: 0.5em;
    font-size: 16px;
    color: white;
    line-height: 1.2;
    text-align: center;
    background-color: royalblue;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

[data-element-id] #TermsInfoModal::before {
    content: "利用規約・注意事項のポップアップ";
}

[data-element-id] #FlowModal::before {
    content: "購入前のポップアップ";
}

[data-element-id] #beforeModal::before {
    content: "利用規約の前に表示するモーダル";
}

[data-element-id] #termsContent .read-more .agree-btn {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
    -webkit-transform: unset;
    transform: unset;
    position: static;
}

[data-element-id] #termsContent .read-more .terms-text {
    max-height: none;
}

[data-element-id] #termsContent .agree-box.negative {
    opacity: 1;
    pointer-events: inherit;
}

[data-element-id] #FlowModal {
    width: 1000px;
    max-width: 100%;
    margin: 80px auto;
}

[data-element-id] .trigger {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: auto;
    display: block;
    visibility: visible;
    margin: 80px auto;
    padding: 3em 1em 1em;
    text-align: center;
    border: 2px solid royalblue;
    opacity: 1;
    position: relative;
}

[data-element-id] .trigger::before {
    content: "購入フローのモーダル用のトリガーです。変更・削除せずにこのまま置いておいてください。";
    width: 100%;
    display: block;
    padding: 0.5em;
    font-size: 10px;
    color: white;
    line-height: 1.2;
    text-align: center;
    background-color: royalblue;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

[data-element-id] .before-trigger::before {
    content: "利用規約前のモーダル用のトリガーです。変更・削除せずにこのまま置いておいてください。";
}

[data-element-id] .modal-section .up-d-none {
    display: inline-block;
    margin: 0 0.5em;
    border: unset;
}

[data-element-id] .modal-section .up-d-none:after {
    content: "スマホ改行";
    display: inline;
    font-size: 10px;
    line-height: 1;
}

/* ##### 汎用 ##### */
/* ボタン */
[data-element-id] .sb-payment-btn-box {
    display: block;
    padding: 2em 1em 1em;
    border: 2px solid royalblue;
    position: relative;
}

[data-element-id] .sb-payment-btn-box::before {
    width: 100%;
    display: block;
    padding: 0.5em;
    font-size: 10px;
    color: white;
    line-height: 1.2;
    text-align: center;
    background-color: royalblue;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

[data-element-id] .use-custom-contents01 .sb-payment-btn-box::before {
    content: "カスタムコンテンツで投稿";
}

[data-element-id] .use-custom-contents01 .sb-payment-btn-box::before {
    content: "カスタムコンテンツで投稿";
}

[data-element-id] .hybrid .sb-payment-btn-box::before {
    content: "カスタムコンテンツで投稿";
}

[data-element-id] .hybrid .sb-payment-btn-box.edit::before {
    content: "見たまま編集で変更してください";
}

[data-element-id] .no-custom-contents .sb-payment-btn-box::before {
    content: "見たまま編集で変更してください";
}

/* ##### 送信完了ページ（サービス別） ##### */
[data-element-id] .list-for-optgroup {
    height: auto;
    display: block;
    visibility: visible;
    margin: 1em 0;
    padding: 2em 1em 1em;
    font-size: 10px;
    border: 2px solid royalblue;
    opacity: 1;
    position: relative;
}

[data-element-id] .list-for-optgroup::before {
    content: "対象のカスタムコンテンツを吐き出しjsでselectとoptionに変換しています";
    width: 100%;
    display: block;
    padding: 0.5em;
    font-size: 10px;
    color: white;
    line-height: 1.2;
    text-align: center;
    background-color: royalblue;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

[data-element-id] .list-for-optgroup li:nth-child(n+2) {
    display: none;
}

[data-element-id] .list-for-optgroup [data-collection-list-filtering] {
    padding: 2em;
}

[data-element-id] .list-for-optgroup [data-collection-list-filtering]::after {
    display: none;
}

/* ##### キャリア相談の決済ボタン用 ##### */
[data-element-id] .sb-payment-btn.double-btn.active .btn-inner .readTermsInfoModal {
    display: block;
}

[data-element-id] .sb-payment-btn.double-btn.active .btn-inner .anchor-substitution {
    display: block;
}

/* ##### 検索フォームの結果に表示されるパーソナライズレコメンド ##### */
[data-element-id] .search-recommend {
    height: auto;
    visibility: visible;
    opacity: 1;
}

/* ##### 検索結果から指定した要素を消す ##### */
[data-element-id] .search-result-title {
    display: block;
    padding: 2em 1em 1em;
    border: 2px solid royalblue;
    position: relative;
}

[data-element-id] .search-result-title::before {
    content: "検索結果用の見出し";
    width: 100%;
    display: block;
    padding: 0.5em;
    font-size: 10px;
    color: white;
    line-height: 1.2;
    text-align: center;
    background-color: royalblue;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* ##### 検索結果0件のとき ##### */
[data-element-id] .search-result-word {
    height: auto;
    visibility: visible;
    margin: 1em 0;
    padding: 2em 1em 1em;
    border: 2px solid green;
    opacity: 1;
    position: relative;
}

[data-element-id] .search-result-word::before {
    content: "検索結果が0件の時に表示するテキストです。通常は表示されません。";
    width: 100%;
    display: block;
    padding: 0.5em;
    font-size: 10px;
    color: white;
    line-height: 1.2;
    text-align: center;
    background-color: green;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* ##### 表示しないキャリアコンサルタント ##### */
[data-element-id] .dont-display {
    height: auto;
    display: block;
    visibility: visible;
    padding: 2em 1em 1em;
    border: 2px solid green;
    opacity: 1;
    position: relative;
    z-index: 1;
}

.dont-display::before {
    content: "その他のカテゴリーです";
    width: 100%;
    display: block;
    padding: 0.5em;
    font-size: 10px;
    color: white;
    line-height: 1.2;
    text-align: center;
    background-color: green;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* 2023/09/29矢田 */
.pc01 {
    position: relative;
}

.sp01 {
    display: none;
    position: relative;
}

@media (max-width:599px) {
    .pc01 {
        display: none;
    }

    .sp01 {
        display: block;
    }
}

[data-element-id].sp01 {
    width: 30%;
    display: block;
    margin: auto;
    border: 1px solid green;
}

[data-element-id].sp01:before {
    content: "モバイル用です";
    display: block;
    color: #fff;
    background: green;
}

@media (max-width:599px) {
.career-box1{
  margin-top:  0!important;
}
}