/*
Theme Name: Riarepo2025
Version: 1.0
*/

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", "Meiryo", sans-serif;
    background-color: #fff;
}

a {
    text-decoration: none !important;
    color: inherit;
}

/**************************************************
header
**************************************************/


/**************************************************
headr-sub
**************************************************/
.header-sub_logo {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 50px 20px 0;
}

.header-sub_title {
    font-weight: bold;
    text-align: center;
    padding-top: 20px;
}

.green-line {
    width: calc(100% - 40px);
    max-width: 1080px;
    margin: 30px auto;
    height: 2px;
    border-radius: 10px;
    background-color: #1B4D3E;
}

/**************************************************
footer
**************************************************/
.footer {
    width: 100%;
    background-color: #1B4D3E;
    color: #fff;
    text-align: center;
    justify-content: center;
}

.footer p {
    display: block;
    font-size: 9px;
    padding: 12px;
}

/**************************************************
 ドキュメントページ共通
**************************************************/
.document-page {
    width: 100%;
    max-width: 860px;
    margin: 0 auto 100px;
    padding: 0 20px;
}

.document_top_text {
    margin-bottom: 15px;
}

.document_block {
    padding: 30px 0;
    border-bottom: 1px solid #ccc;
}

.document_block_last {
    padding: 30px 0;
}

.document_block_title {
    font-weight: bold;
    color: #88B04B;
    margin-bottom: 15px;
}

.document_contact {
    margin-bottom: 10px;
}

.document_block ol {
    padding: 15px 0 0 30px;
}

.document_ol_below {
    padding-top: 15px;
}

.document_block ol li {
    padding-bottom: 8px;
}

.document_link {
    padding-top: 30px;
}

.document_plan_title {
    font-weight: bold;
}

.document_plan_main-title {
    margin-top: 15px;
    font-weight: bold;
}

/**************************************************
 apply
**************************************************/
.apply_top-text {
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.8rem;
    padding: 0 20px;
}

input::placeholder,
textarea::placeholder {
    color: #bebebe !important;
}

.contact-form_wrapper {
    padding: 0 20px;
}

.contact-form {
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5rem 2.5rem;
    background-color: rgba(136, 176, 75, 0.15);
    border-radius: 12px;
}

@media screen and (max-width: 680px) {
    .contact-form {
        padding: 1.5rem 1.2rem;
    }
}

.contact-form_wrapper .contact-form.last {
    margin: 30px auto 50px;
}

.required {
    color: red;
    font-size: 1rem;
    font-weight: bold;
    margin-left: 0.25em;
}

.form-label {
    display: block;
    color: #333;
    vertical-align: top;
}

.wpcf7-form-control-wrap {
    display: block;
}

.form-input::placeholder {
    color: #d8d8d8;
    opacity: 1;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 1rem;
    margin-top: 0.5rem;
    box-sizing: border-box;
    background-color: #fff;
}

.form-textarea {
    max-height: 120px;
    resize: vertical;
}

.part_title {
    font-size: 18px;
    font-weight: bold;
    color: #1B4D3E;
    margin-bottom: 30px;
}

.part_title_agreement,
.part_title_plan {
    font-size: 18px;
    font-weight: bold;
    color: #1B4D3E;
    margin-bottom: 15px;
}

.apply_text {
    margin-bottom: 20px;
    font-size: 0.8rem;
}

.form_text {
    text-align: center;
    padding-top: 30px;
}

.label_bold {
    font-weight: bold;
}

.label_bold.margin-adjust {
    display: inline-block;
    margin-bottom: 7px;
}

.green-arrow {
    display: block;
    margin: 30px auto;
    max-width: 50px;
}

.wpcf7-form-control.wpcf7-radio label {
    display: block !important;
    margin-bottom: 0.3em;
    padding-top: 7px;
}

.apply_second-part_wrapper {
    padding-top: 30px;
}

.apply_plan_title {
    display: block;
    margin-bottom: 8px;
}

.form-label_plan {
    display: block;
    color: #333;
}

.question_part {
    margin-bottom: 40px;
}

.radio-pair {
    margin-bottom: 25px;
}

select.with-arrow {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'%3E%3Cpath d='M6 8L0.8 0.5h10.4L6 8z' fill='%23333'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 8px;
    padding-right: 2rem;
}

#other-plan {
    width: calc(100% - 30px);
    margin: 0 0 0 30px;
}


/* 規約・ポリシー */
.policy-wrapper {
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
    font-family: sans-serif;
}

.policy-row {
    border-top: 1px solid #ccc;
    background: #fff;
}

.policy-row:first-child {
    border-top: none;
}

.policy-row a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    text-decoration: none;
    color: #333;
    transition: background 0.2s;
}

.policy-row a::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url('/wp-content/themes/riarepo2025/images/icon-link.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 8px;
    flex-shrink: 0;
}

.policy-row a:hover {
    background: #f5f5f5;
}

.apply_agreement {
    text-align: center;
    padding-top: 30px;
}

.form-submit {
    text-align: center;
    margin-bottom: 70px;
    font-weight: bold;
}

.form-submit-button {
    display: inline-block;
    width: 50%;
    max-width: 300px;
    background: linear-gradient(90deg, rgba(27, 77, 62, 1) 0%, rgba(136, 176, 75, 1) 100%);
    color: white;
    padding: 0.8rem 2rem;
    font-size: 1rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-submit-button:hover {
    background: linear-gradient(90deg, rgba(136, 176, 75, 1) 0%, rgba(27, 77, 62, 1) 100%);
    transform: scale(1.03);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}


.wpcf7-spinner {
    display: none !important;
}


/* アコーディオン */
.accordion-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.accordion-header>* {
    display: contents !important;
}

.accordion-title {
    font-size: 18px;
    font-weight: bold;
    color: #1B4D3E;
}

.accordion-toggle {
    display: inline-block;
    width: 2em;
    height: 1.5em;
    font-size: 30px;
    text-align: center;
    line-height: 1.5em;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    color: #1B4D3E;
}

.accordion-toggle::before {
    content: "＋";
    display: block;
    width: 100%;
    height: 100%;
}

.accordion-toggle.open::before {
    content: "−";
}

.small {
    color: #333;
    font-weight: 400;
    font-size: 0.8rem;
    padding-left: 5px;
}

.radio-check {
    margin-bottom: 15px;
}

/* ラジオボタンを縦に並べる */
.wpcf7-radio .wpcf7-list-item {
    display: block;
}

/* ラジオボタンを横に並べる */
.wpcf7-radio.radio-inline .wpcf7-list-item {
    display: inline-block;
}

/* チェックボックスを縦に並べる */
.wpcf7-checkbox.checkbox .wpcf7-list-item {
    display: block;
    margin-top: 5px;
}

/* カスタムプラン */
.custom-plan-form {
    padding: 10px 0 0 20px;
    margin-bottom: 30px;
}

.wpcf7-form .custom-plan-form .form-row {
    display: flex !important;
    margin-bottom: 10px;
    gap: 15px;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.custom-plan-input {
    width: 200px;
}

.cus-apply_ul {
    padding-left: 20px;
    font-size: 0.8rem;
}

.cus-apply_ul li {
    padding-bottom: 3px;
}

.form-label.checkbox-margin {
    margin-bottom: 20px;
}

.form-input.additional-others {
    width: calc(100% - 30px);
    margin: 5px 0 0 30px;
}

/* customer */
.cus-apply_flow {
    text-align: center;
    margin-top: 20px;
}

.cus-apply_flow_btn {
    display: block;
    margin: 10px auto 30px;
    width: fit-content;
    padding: 6px 25px;
    border: 3px solid #88B04B;
    color: #88B04B;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.cus-apply_flow_btn:hover {
    background-color: #88B04B;
    color: #fff;
    transform: scale(1.03);
}

/**************************************************
 entry
**************************************************/
.entry-agreement-section .wpcf7-list-item-label:after {
    content: "*";
    color: red;
    margin-left: 2px;
}

.entry-form-group br {
    display: none;
}

.customer-entry-form {
    max-width: 750px;
    margin: 0 auto 50px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
}

.entry-form-header {
    background: #1B4D3E;
    color: white;
    padding: 40px 30px;
    text-align: center;
}

.entry-form-header h2 {
    font-size: clamp(14px, 5vw, 28px);
    margin-bottom: 10px;
    font-weight: 600;
}

.entry-form-id {
    background: #ffffff33;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.9em;
    display: inline-block;
    margin-bottom: 15px;
    font-weight: 500;
}

.entry-form-text {
    margin: 30px 40px 0;
    text-align: center;
    line-height: 1.8rem;
}

.entry-form-header p {
    font-size: 1.1em;
    opacity: 0.9;
}

.program-info-box {
    background: rgba(136, 176, 75, 0.15);
    padding: 30px;
    margin: 40px 40px;
    border-radius: 8px;
    border-left: 4px solid #88B04B;
}

.program-info-box h3 {
    color: #1B4D3E;
    font-size: 1.3em;
    margin-bottom: 20px;
    font-weight: 600;
}

.info-item {
    background: white;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.info-item+.info-item {
    margin-top: 15px;
}

.info-item strong {
    margin-bottom: 8px;
    color: #1B4D3E;
    font-weight: 600;
}

.customer-entry-form .entry-form-section {
    margin: 40px;
}

.customer-entry-form .entry-form-section h3 {
    color: #1B4D3E;
    font-size: 1.2em;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid #88B04B;
    font-weight: 600;
}

.customer-entry-form .entry-form-group {
    margin-bottom: 25px;
}

.customer-entry-form .entry-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.customer-entry-form input[type="text"],
.customer-entry-form input[type="email"],
.customer-entry-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 16px;
    transition: all 0.3s ease;
    font-family: inherit;
    background: #fff;
}

.customer-entry-form input[type="text"]:focus,
.customer-entry-form input[type="email"]:focus,
.customer-entry-form textarea:focus {
    outline: none;
    border-color: #88B04B;
    box-shadow: 0 0 0 3px rgba(136, 176, 75, 0.15);
}

.customer-entry-form textarea {
    resize: vertical;
    min-height: 120px;
}

.customer-entry-form .wpcf7-checkbox {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.customer-entry-form .wpcf7-list-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    margin: 0;
    transition: all 0.3s ease;
}

.customer-entry-form .wpcf7-list-item:hover {
    background: rgba(136, 176, 75, 0.08);
    border-color: #88B04B;
}

.customer-entry-form .wpcf7-list-item input[type="checkbox"] {
    margin-right: 12px;
    transform: scale(1.1);
    accent-color: #88B04B;
}

.customer-entry-form .wpcf7-list-item label {
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

.entry-agreement-section {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    margin: 40px 40px;
    border: 1px solid #e0e0e0;
}

.entry-agreement-section h3 {
    color: #1B4D3E;
    margin-bottom: 20px;
    border-bottom: 2px solid #88B04B;
    padding-bottom: 8px;
    font-weight: 600;
}

.entry-agreement-list {
    margin-bottom: 25px;
}

.entry-agreement-list p {
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
    margin: 0;
    position: relative;
    padding-left: 20px;
}

.entry-agreement-list p:last-child {
    border-bottom: none;
}

.entry-agreement-list p::before {
    content: '・';
    position: absolute;
    left: 0;
    color: #88B04B;
    font-weight: bold;
}

.entry-final-agreement {
    background: white;
    padding: 20px;
    border-radius: 6px;
    border: 2px solid #88B04B;
}

.entry-final-agreement .wpcf7-list-item {
    background: transparent;
    border: none;
    padding: 0;
}

.entry-final-agreement .wpcf7-list-item label {
    font-weight: 600;
    color: #1B4D3E;
}

.entry-form-note {
    background: rgba(136, 176, 75, 0.15);
    padding: 20px;
    border-radius: 6px;
    margin: 30px 40px;
    font-size: 0.95em;
    color: #1B4D3E;
    border-left: 4px solid #88B04B;
}

.entry-form-note strong {
    color: #1B4D3E;
}

/* レスポンシブ対応 */

@media (max-width: 768px) {
    .customer-entry-form {
        margin: 10px 10px 50px;
        border-radius: 8px;
    }

    /* エラーメッセージのスタイル */
    .customer-entry-form .wpcf7-not-valid-tip {
        color: #d32f2f;
        font-size: 0.9em;
        margin-top: 5px;
    }

    .customer-entry-form .wpcf7-validation-errors {
        background: #ffebee;
        color: #c62828;
        padding: 15px;
        border-radius: 6px;
        margin: 20px 40px;
        border: 1px solid #ffcdd2;
    }

    .customer-entry-form .wpcf7-mail-sent-ok {
        background: #e8f5e8;
        color: #2e7d32;
        padding: 15px;
        border-radius: 6px;
        margin: 20px 40px;
        border: 1px solid #c8e6c9;
    }
}

@media screen and (max-width: 680px) {
    .customer-entry-form .entry-form-section {
        margin: 20px;
    }

    .entry-agreement-section {
        margin: 20px;
    }

    .entry-form-note {
        margin: 20px;
    }

    .program-info-box {
        margin: 20px;
    }

    .entry-form-text {
        margin: 30px 20px 0;
    }
}

@media screen and (max-width: 480px) {
    .program-info-box {
        padding: 30px 20px;
    }

    .entry-agreement-section {
        padding: 20px;
    }
}


/**************************************************
 flow
**************************************************/
.flow_wrapper {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 20px;
}

.flow_wrapper+.flow_wrapper {
    margin-top: 50px;
}

.flow_title {
    display: flex;
    gap: 10px;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

.flow_title img {
    width: 30px;
}

.flow_step {
    list-style: none;
    padding: 0;
    margin: 0;
}

.flow_step li {
    display: flex;
    align-items: flex-start;
    background-color: rgba(136, 176, 75, 0.15);
    border-radius: 20px;
    padding: 24px 30px;
    margin-bottom: 30px;
    gap: 20px;
    position: relative;
    flex-wrap: wrap;
}

.flow_step_img-area {
    width: 150px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.flow_step_img-area img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.flow_text-area {
    flex: 1;
}

.flow_text-area>div:first-child {
    font-size: 12px;
    font-weight: bold;
    color: #3b6023;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: #3b6023 2px solid;
}

.flow_text-area>div:first-child span {
    font-size: 16px;
    font-weight: bold;
    margin-left: 4px;
}

.flow_text-area>div:last-child {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.6;
    color: #000;
}

.flow_text-area div a .flow_review-btn {
    display: block;
    width: 160px;
    background-color: #3b6023;
    border-radius: 50px;
    color: #fff;
    text-align: center;
    padding: 5px;
    margin-top: 7px;
    font-size: 12px;
    text-decoration: none;
}

/* 下矢印用（li間） */
.flow_step li::after {
    content: "▼";
    display: block;
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    color: #88b04b;
    font-size: 14px;
}

.flow_step li:last-child::after {
    content: none;
}

@media screen and (max-width: 600px) {
    .flow_step li {
        display: block;
    }

    .flow_step_img-area {
        margin: 0 auto 15px;
    }

    .flow_text-area div {
        margin: 0 auto;
        text-align: center;
    }

}

/**************************************************
 review
**************************************************/
.review-form-group br {
    display: none;
}

.customer-review-form {
    max-width: 750px;
    margin: 0 auto 50px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
}

.review-form-header {
    background: #1B4D3E;
    color: white;
    padding: 40px 30px;
    text-align: center;
}

.review-form-header h2 {
    font-size: clamp(14px, 5vw, 28px);
    margin-bottom: 10px;
    font-weight: 600;
}

.review-form-id {
    background: #ffffff33;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.9em;
    display: inline-block;
    margin-bottom: 15px;
    font-weight: 500;
}

.review-form-text {
    margin: 30px 40px 0;
    text-align: center;
    line-height: 1.8rem;
}

.review-form-text h3 {
    font-weight: bold;
}

.review-form-text ol {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 15px 0 15px 20px;
    text-align: left;
}

.review-form-header p {
    font-size: 1.1em;
    opacity: 0.9;
}

.program-info-box {
    background: rgba(136, 176, 75, 0.15);
    padding: 30px;
    margin: 40px 40px;
    border-radius: 8px;
    border-left: 4px solid #88B04B;
}

.program-info-box h3 {
    color: #1B4D3E;
    font-size: 1.3em;
    margin-bottom: 20px;
    font-weight: 600;
}

.info-item {
    background: white;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.info-item+.info-item {
    margin-top: 15px;
}

.info-item strong {
    margin-bottom: 8px;
    color: #1B4D3E;
    font-weight: 600;
}

.customer-review-form .review-form-section {
    margin: 40px;
}

.customer-review-form .review-form-section h3 {
    color: #1B4D3E;
    font-size: 1.2em;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid #88B04B;
    font-weight: 600;
}

.review-form-section_text {
    margin-bottom: 15px;
}

.customer-review-form .review-form-group {
    margin-bottom: 25px;
}

.customer-review-form .review-form-group label {
    display: block;
    font-weight: 500;
    color: #333;
}

.customer-review-form input[type="text"],
.customer-review-form input[type="email"],
.customer-review-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 16px;
    transition: all 0.3s ease;
    font-family: inherit;
    background: #fff;
}

.customer-review-form input[type="text"]:focus,
.customer-review-form input[type="email"]:focus,
.customer-review-form textarea:focus {
    outline: none;
    border-color: #88B04B;
    box-shadow: 0 0 0 3px rgba(136, 176, 75, 0.15);
}

.customer-review-form textarea {
    resize: vertical;
    min-height: 120px;
}

.customer-review-form .wpcf7-checkbox {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.customer-review-form .wpcf7-list-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    margin: 0;
    transition: all 0.3s ease;
}

.customer-review-form .wpcf7-list-item:hover {
    background: rgba(136, 176, 75, 0.08);
    border-color: #88B04B;
}

.customer-review-form .wpcf7-list-item input[type="checkbox"] {
    margin-right: 12px;
    transform: scale(1.1);
    accent-color: #88B04B;
}

.customer-review-form .wpcf7-list-item label {
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

.review-agreement-section {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    margin: 40px 40px;
    border: 1px solid #e0e0e0;
}

.review-agreement-section h3 {
    color: #1B4D3E;
    margin-bottom: 20px;
    border-bottom: 2px solid #88B04B;
    padding-bottom: 8px;
    font-weight: 600;
}

.review-agreement-list {
    margin-bottom: 25px;
}

.review-agreement-list p {
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
    margin: 0;
    position: relative;
    padding-left: 20px;
}

.review-agreement-list p:last-child {
    border-bottom: none;
}

.review-agreement-list p::before {
    content: '・';
    position: absolute;
    left: 0;
    color: #88B04B;
    font-weight: bold;
}

.review-final-agreement {
    background: white;
    padding: 20px;
    border-radius: 6px;
    border: 2px solid #88B04B;
}

.review-final-agreement .wpcf7-list-item {
    background: transparent;
    border: none;
    padding: 0;
}

.review-final-agreement .wpcf7-list-item label {
    font-weight: 600;
    color: #1B4D3E;
}

.review-form-note {
    background: rgba(136, 176, 75, 0.15);
    padding: 20px;
    border-radius: 6px;
    margin: 30px 40px;
    font-size: 0.95em;
    color: #1B4D3E;
    border-left: 4px solid #88B04B;
}

.review-form-note strong {
    color: #1B4D3E;
}

/* レスポンシブ対応 */

@media (max-width: 768px) {
    .customer-review-form {
        margin: 10px 10px 50px;
        border-radius: 8px;
    }

    /* エラーメッセージのスタイル */
    .customer-review-form .wpcf7-not-valid-tip {
        color: #d32f2f;
        font-size: 0.9em;
        margin-top: 5px;
    }

    .customer-review-form .wpcf7-validation-errors {
        background: #ffebee;
        color: #c62828;
        padding: 15px;
        border-radius: 6px;
        margin: 20px 40px;
        border: 1px solid #ffcdd2;
    }

    .customer-review-form .wpcf7-mail-sent-ok {
        background: #e8f5e8;
        color: #2e7d32;
        padding: 15px;
        border-radius: 6px;
        margin: 20px 40px;
        border: 1px solid #c8e6c9;
    }
}

@media screen and (max-width: 680px) {
    .customer-review-form .review-form-section {
        margin: 20px;
    }

    .review-agreement-section {
        margin: 20px;
    }

    .review-form-note {
        margin: 20px;
    }

    .program-info-box {
        margin: 20px;
    }

    .review-form-text {
        margin: 30px 20px 0;
    }
}

@media screen and (max-width: 480px) {
    .program-info-box {
        padding: 30px 20px;
    }

    .review-agreement-section {
        padding: 20px;
    }
}

/**************************************************
contact
**************************************************/
.contact-wrapper {
    max-width: 768px;
    margin: 0 auto;
    padding: 3rem 5rem;
    background-color: rgba(136, 176, 75, 0.15);
    border-radius: 12px;
}

@media screen and (max-width:768px) {
    .contact-wrapper {
        padding: 2rem 2.7rem;
    }
}

@media screen and (max-width:480px) {
    .contact-wrapper {
        padding: 2rem 1.5rem;
    }
}

/**************************************************
 thanks
**************************************************/
.thanks-page {
    padding: 0 20px
}

.thanks_top-area {
    max-width: 500px;
    margin: 40px auto 30px;
}

.thanks_title {
    text-align: center;
    font-size: clamp(48px, 5vw, 64px);
    font-weight: 900;
    background: linear-gradient(90deg, rgba(27, 77, 62, 1) 0%, rgba(136, 176, 75, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    background-clip: text;
    color: transparent;
    font-family: system-ui, sans-serif !important;
}

.thanks_top-area p {
    text-align: center;
    padding: 10px 20px;
}

/* cta */
.thanks_cta_wrapper {
    width: 100%;
    max-width: 680px;
    background-color: rgba(136, 176, 75, 0.15);
    margin: 0 auto 100px;
    padding: 30px;
}

.thanks_cta_title {
    font-weight: bold;
    font-size: clamp(18px, 3vw, 24px);
    color: #1B4D3E;
    text-align: center;
    padding-bottom: 15px;
}

.thanks_cta {
    display: flex;
    gap: 30px;
    align-items: center;
}

.thanks_cta_qr {
    width: 40%;
}

.thanks_cta_qr img {
    width: 100%;
    height: auto;
    display: block;
}

.thanks_cta p {
    margin-bottom: 8px;
}

.thanks_cta p:nth-child(2) {
    margin-bottom: 0;
}

@media screen and (max-width: 660px) {

    .thanks_cta {
        display: block;
    }

    .thanks_cta_qr img {
        width: 100%;
        max-width: 200px;
        margin: 0 auto 20px;
    }

}

/* button3 */
.btn3-wrap {
    text-align: center;
    margin-bottom: 50px;
}

.btn3 {
    margin: 30px auto 0;
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(90deg, #11998E 0%, #38EF7D 100%);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 999px;
    font-size: 14px;
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn3:hover {
    transform: scale(1.05);
    /* ふわっと大きく */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    /* 少し深い影 */
    filter: brightness(0.8);
    /* グラデーションを活かしたまま少し暗く */
}

/**************************************************
lp
**************************************************/

/*********************
共通
*********************/
.lp {
    text-align: center;
    color: #323232;
    background-color: #fdfffd;
    line-height: 1.8;
    font-size: 17px;
}

.lp__text_big {
    font-size: clamp(28px, 5vw, 33px);
    font-weight: bold;
    line-height: 1.5;
}

.lp__red {
    color: #FF6264;
}

.lp__detail {
    text-align: left;
    font-size: 0.8rem;
    margin: 0 auto;
    width: fit-content;
    padding: 30px 0;
}

.lp__title {
    margin-bottom: 50px;
}

.lp__title h3 {
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.lp__title p {
    color: #FF6264;
    font-weight: bold;
}

.lp__under {
    background: linear-gradient(transparent 60%, #FFDD17 40%);
}

.br-768,
.br-860,
.br-480 {
    display: none;
}

@media screen and (max-width: 860px) {
    .br-860 {
        display: block;
    }
}

@media screen and (max-width: 768px) {

    .br-768 {
        display: block;
    }
}

@media screen and (max-width: 480px) {

    .br-860,
    .br-768 {
        display: none;
    }

    .br-480 {
        display: block;
    }
}

/*********************
ヘッダー
*********************/
.lp__header-layout {
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    background: linear-gradient(90deg, #11998E 0%, #38EF7D 100%);
    z-index: 10000;
    top: 0;
    left: 0;
    position: fixed;
}

.lp__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lp__header_logo img {
    width: 140px;
    margin-left: 2.5vw;
}

.lp__header__list {
    color: #fff;
    font-weight: bold;
    display: flex;
    gap: 20px;
    list-style: none;
}

.lp__header_wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.lp__header_btn {
    width: 170px;
    margin: 15px 2.5vw;
    background-color: #fff;
    color: #11998E;
    border-radius: 100px;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}

#lp__features,
#lp__system,
#lp__faq,
#lp__plan {
    scroll-margin-top: 50px;
}

/*********************
ハンバーガーメニュー
*********************/
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    padding-top: 3px;
}

.hamburger span {
    height: 3px;
    width: 28px;
    background-color: #fdfffd;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7.8px);
}


/*********************
FV
*********************/
.lp__fv {
    overflow-x: hidden;
}

.lp__fv_wrapper {
    width: 100%;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(90deg, #11998E 0%, #38EF7D 100%);
    position: relative;
    padding-top: 74px;
}

.lp__fv_left {
    margin-left: 5vw;
    padding-top: 2%;
    text-align: left;
}

.lp__fv_sub {
    display: inline;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: bold;
    line-height: 1.4em;
    padding: 5px;
    background: #fff;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: #11998E;
}

.lp__fv_main {
    margin-top: 20px;
    font-size: clamp(32px, 4vw, 60px);
    line-height: 1.5;
    font-weight: bold;
    color: #fff;
}

.lp__fv_right {
    width: 40%;
    padding-top: 5%;
}

.lp__fv_img1 {
    width: 100%;
    object-fit: cover;
}

.lp__fv_img2,
.lp__fv_scroll {
    display: none;
}

.lp__fv_scroll {
    padding-bottom: 30px;
}

.lp__fv_wave {
    display: block;
    width: 100%;
    height: auto;
    line-height: 0;
}

/*** sp版写真スクロール ***/
@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
}

.scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0
}

.scroll-infinity__list--left {
    animation: infinity-scroll-left 20s infinite linear 0.5s both;
}

.scroll-infinity__item {
    width: calc(100vw / 2.5);
    margin-right: 1.5%;
}

.scroll-infinity__item>img {
    width: 100%;
}



/*** ボタン ***/
.lp__fv_btn {
    display: flex;
    gap: 20px;
    margin-top: 36px;
}

.lp__fv_btn1,
.lp__fv_btn2 {
    width: 100%;
    min-width: 180px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 58px;
    position: relative;
    text-align: center;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: 4px 5px 0px rgba(0, 0, 0, 0.25);
}

.lp__fv_btn1 {
    background: #FFD60A;
}

.lp__fv_btn2 {
    background: #38EF7D;
}

.lp__fv_btn1::before {
    width: 1.25em;
    height: 1.25em;
    margin-right: 8px;
    content: '';
    background: center / contain no-repeat url("images/lp/icon-documents.png");
    vertical-align: middle;
    line-height: 1;
}

.lp__fv_btn2::before {
    width: 1.25em;
    height: 1.25em;
    margin-right: 8px;
    content: '';
    background: center / contain no-repeat url("images/lp/icon-mail.png");
    vertical-align: middle;
    line-height: 1;
}

.triangle {
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    bottom: 8px;
    right: 8px;
    border-left: 15px solid transparent;
    border-bottom: 15px solid #fff;
}

.lp__fv_btn1:hover,
.lp__fv_btn2:hover {
    transform: scale(1.02);
    transition: all 0.3s ease;
    cursor: pointer;
}

/*********************
導入企業ロゴ
*********************/
.lp__logo_grid {
    width: 100%;
    max-width: 1350px;
    text-align: center;
    padding: 0 2.5vw;
    margin: 20px auto 100px;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 30px;
    align-items: center;
    justify-items: center;
}

.lp__logo_grid img {
    max-width: 100%;
    height: auto;
    max-height: 70px;
    object-fit: contain;
    transition: filter 0.3s;
}

.lp__logo_grid img:hover {
    filter: grayscale(0%);
}


/*********************
メッセージ
*********************/
.lp__message {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.lp__message::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 340px;
    background: #F3FBF8;
    z-index: 0;
}

.lp__message_wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2.5vw;
}

.lp__message_img {
    width: 40%;
    min-width: 390px;
    position: relative;
}

.lp__message_img img {
    display: block;
    width: 100%;
}

.lp__message_text {
    flex: 1;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 15px 0;
    text-align: left;
}

.lp__message_text h3 {
    font-size: clamp(30px, 3vw, 40px);
    background: linear-gradient(to right, #11998e, #38ef7d);
    background: -webkit-linear-gradient(to right, #11998e, #38ef7d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom: 3px dotted #38ef7d;
    width: fit-content;
    line-height: 1.4;
    margin: 0 0 15px;
}

.lp__message_text p {
    font-size: clamp(18px, 1.5vw, 20px);
    font-weight: bold;
}

.lp__message_text p+p {
    margin-top: 10px;
}

.lp__message_name-pc {
    font-size: 0.8rem;
    color: #fff;
    position: absolute;
    right: 10%;
    bottom: 3%;
}

.lp__message_name-sp {
    display: none;
}

.lp__ashirai1 {
    width: 25%;
    position: absolute;
    right: -50px;
}

/*********************
CTAボタン
*********************/
.lp__cta_red {
    display: block;
    width: 100%;
    max-width: 700px;
    margin: 80px auto 30px;
    padding: 0 2.5vw;
}

.lp__cta_red img {
    width: 100%;
}

.lp__cta_red-sp {
    display: none;
}

.lp__cta_red-pc:hover,
.lp__cta_red-sp:hover {
    transform: scale(1.02);
    transition: all 0.3s ease;
    cursor: pointer;
}

/*********************
悩み
*********************/
.lp__pain_wrapper {
    background-color: #F7f7f7;
}

.lp__pain_text {
    text-align: center;
    font-size: clamp(22px, 2vw, 36px);
    font-weight: bold;
    padding: 0 2.5vw 30px;
}

.lp__pain_img_pc {
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2.5vw;
}

.lp__pain_img_sp {
    display: none;
}

.lp__wave {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.lp__pain_below {
    position: relative;
}

.small-arrow {
    display: block;
    margin: 0 auto;
    width: clamp(20px, 2.5vw, 80px);
    height: auto;
}

/*********************
ジャンル
*********************/
.lp__genre {
    padding: 0 2.5vw;
}

.lp__genre_text {
    font-weight: bold;
    font-size: clamp(24px, 2.0vw, 50px);
    margin: 30px 0;
    padding: 0 2.5vw;
}

.lp__genre-pc {
    width: 100%;
    max-width: 800px;
}

.lp__genre-sp {
    display: none;
}

/*********************
3つの理由
*********************/
.lp__features {
    padding: 30px 0 80px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}

.lp__features_title_wrapper {
    display: flex;
    width: fit-content;
    margin: 60px auto;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lp__features_title {
    width: 100%;
    max-width: 400px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.lp__features_title_img {
    max-height: 170px;
    position: absolute;
    left: calc(50% + 60%);
    top: 50%;
    transform: translateY(-50%);
}

.lp__features_zigzag {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    list-style: none;
}

.lp__features_zigzag_item {
    display: flex;
    align-items: center;
    margin: 20px 0;
    padding: 0 2.5vw;
}

.lp__features_zigzag_item:nth-child(even) {
    flex-direction: row-reverse;
}

.lp__features_zigzag_img {
    width: 45%;
    max-width: 400px;
}

.lp__features_zigzag_img img {
    width: 100%;
}

.lp__features_zigzag_text {
    width: 50%;
    padding: 0 0 20px 80px;
    text-align: left;
}

.lp__features_zigzag_text.even {
    padding-left: 0;
    padding-right: 80px;
}

.lp__features_zigzag_text img {
    width: 50px;
    margin-bottom: 5px;
}

.lp__features_text_big {
    font-size: clamp(22px, 3.5vw, 35px);
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.5;
}

.lp__features_text_small {
    font-size: clamp(18px, 2vw, 22px);
}

.lp__ashirai2 {
    width: 30%;
    position: absolute;
    left: -50px;
    min-width: 150px;
    top: 0;
}

.lp__ashirai3 {
    width: 30%;
    position: absolute;
    right: -50px;
    bottom: 0;
    min-width: 180px;
}

/*********************
CTA
*********************/
.lp__cta {
    background-image: url(images/lp/cta_background.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    height: 300px;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.lp__cta_wrapper {
    padding: 35px;
}

.lp__cta_text {
    font-weight: bold;
    font-size: clamp(20px, 2vw, 28px);
    padding-bottom: 10px;
}

.lp__cta a {
    display: block;
    max-width: 500px;
    margin: 0 auto;
}

.lp__cta a:hover {
    transform: scale(1.02);
    transition: all 0.3s ease;
    cursor: pointer;
}

.lp__cta_btn-pc {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.lp__cta_btn-sp {
    display: none;
}


/*********************
データ
*********************/
.lp__data {
    margin: 30px 0;
}

.lp__data_title,
.lp__data_wrapper {
    padding: 0 2.5vw;
}

.lp__data_wrapper p {
    margin-bottom: 30px;
}

.lp__data_title {
    width: 100%;
    max-width: 700px;
    padding: 50px 0;
}

.lp__data1_img {
    display: block;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}

.lp__data1_text {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 60px 0 80px;
}

.lp__data_arrow {
    width: 100%;
    position: relative;
}

.lp__data_arrow-pc {
    width: 100%;
}

.lp__data_arrow-sp {
    display: none;
}

.lp__data_arrow p {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: bold;
    font-size: clamp(20px, 4vw, 40px);
    padding: 0 2.5vw;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

.lp__data2-pc {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 20px;
    padding: 30px 0;
}

.lp__data2-sp {
    display: none;
}


/*********************
仕組み
*********************/
.lp__system {
    background: #fff;
    border-radius: 84px;
    width: 100%;
    max-width: 1020px;
    padding: 0 2.5vw;
    margin: 0 auto 80px;
}

.lp__system_title {
    position: relative;
    display: inline-block;
    padding: .4em .8em;
    font-weight: bold;
    font-size: 1.8rem;
}

.lp__system_wrapper ol {
    padding: 20px 0 40px;
}

.lp__system_wrapper p+p {
    margin-top: 10px;
}

.lp__system_item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    width: 100%;
    max-width: 670px;
    margin: 0 auto;
}

.lp__system_step {
    width: 60px;
    flex-shrink: 0;
}

.lp__system_img {
    width: 220px;
    flex-shrink: 0;
    padding: 0 20px;
}

.lp__system_item div {
    flex: 1;
}

.lp__system_text {
    text-align: left;
}

.lp__system_line {
    width: 100%;
    max-width: calc(100% - 2.5vw);
    height: 1px;
    background-color: #dfdfdf;
    margin: 0 auto;
}

.lp__system_end-text {
    width: 100%;
    max-width: 650px;
    padding: 20px;
    margin-top: 20px;
}

/*********************
FAQ
*********************/
.lp__faq {
    background: linear-gradient(90deg, #11998E 0%, #38EF7D 100%);
    border-radius: 84px;
    width: calc(100% - 2.5vw);
    max-width: 1020px;
    padding: 100px 0;
    margin: 0 auto 80px;
}

.lp__faq_title {
    color: #fff;
}

.lp__faq_item {
    width: calc(100% - 4vw);
    max-width: 800px;
    margin: 30px auto;
    background-color: #fff;
    border-radius: 30px;
    list-style: none;
    padding: 30px 70px;
}

.lp__faq_part {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 10px 0;
}

.lp__faq_img {
    width: 50px;
}

.lp__faq_text {
    text-align: left;
}

.text_q {
    font-weight: bold;
    font-size: 1.2rem;
}


/*********************
プラン
*********************/
.lp__plan {
    margin: 80px 0;
}

.lp__plan_wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 30px;
    padding: 0 20px;
    list-style: none;
}

.lp__plan_item img {
    width: 100%;
}



/*********************
導入店舗の声
*********************/
.lp__case {
    background-color: #f7f7f7;
    padding: 80px 2.5vw 30px;
}

.lp__case_item {
    background-color: #fff;
    border-radius: 30px;
    list-style: none;
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 50px;
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.15);
}

.lp__case_item+.lp__case_item {
    margin-top: 20px;
}

.lp__case_item_left {
    width: 30%;
    font-weight: bold;
    font-size: 0.8rem;
}

.lp__case_item_left img {
    width: 50%;
    padding-bottom: 10px;
}

.lp__case_item_right {
    text-align: left;
    font-size: 0.9rem;
    width: 85%;
}

.lp__case_item_right p+p {
    margin-top: 5px;
}


/*********************
流れ
*********************/
.lp__flow {
    margin: 0 0 80px;
}

.lp__flow-pc {
    width: 100%;
    max-width: 800px;
    padding: 0 20px;
}

.lp__flow-sp {
    display: none;
}

/*********************
さいごに
*********************/
.lp__closing_wrapper {
    background-color: #f7f7f7;
}

.lp__closing_title {
    font-size: clamp(24px, 2vw, 36px);
    background: linear-gradient(to right, #11998e, #38ef7d);
    background: -webkit-linear-gradient(to right, #11998e, #38ef7d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom: 3px dotted #38ef7d;
    width: fit-content;
    line-height: 1.4;
    margin: 0 auto 15px;
    font-weight: bold;
}

.lp__closing_img {
    display: block;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

.lp__closing_text {
    text-align: left;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 30px 20px 80px;
}

.lp__closing_text p {
    padding: 10px 0;
}

/*********************
footer
*********************/
.footer_lp {
    width: 100%;
    background: linear-gradient(90deg, #11998E 0%, #38EF7D 100%);
    color: #fff;
    text-align: center;
    justify-content: center;
}

.footer_lp p {
    display: block;
    font-size: 9px;
    padding: 12px;
}

/*********************
LPレスポンシブ
*********************/
@media screen and (max-width: 1200px) {

    /*** 導入企業ロゴ ***/
    .lp__logo_grid img {
        max-width: 80px;
    }

    .lp__logo_grid {
        gap: 15px;
    }
}

@media screen and (max-width: 860px) {
    .lp__message {
        background: #F3FBF8;
        border-radius: 100px;
    }

    .lp__message_wrapper {
        display: block;
    }

    .lp__message_text {
        min-height: 0;
        display: block;
        text-align: center;
        padding: 50px 0 20px;
    }

    .lp__message_text h3 {
        margin: 0 auto 15px;
    }

    .lp__message_img {
        margin: 0 auto;
        width: 100%;
        min-width: 0;
        max-width: 300px;
    }

    .lp__message_name-pc {
        display: none;
    }

    .lp__message_name-sp {
        display: block;
        font-size: 0.9rem;
        font-weight: bold;
        padding-top: 30px;
    }

    .lp__ashirai1 {
        display: none;
    }
}

@media screen and (max-width: 768px) {

    /*** ヘッダー・ハンバーガーメニュー ***/
    .hamburger {
        display: flex;
    }

    .lp__header__list {
        color: #11998E;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease, opacity 0.3s ease;
        flex-direction: column;
        background-color: #FFF;
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        text-align: center;
        padding: 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .lp__header__list.active {
        max-height: 180px;
        height: fit-content;
        opacity: 1;
    }

    .lp__header__item:first-child {
        padding-top: 20px;
    }

    .lp__header__item:last-child {
        padding-bottom: 20px;
    }

    /*** fv ***/
    .lp__fv_wrapper {
        gap: 0;
    }

    .lp__fv_left {
        padding-top: 5%;
    }

    .lp__fv_right {
        width: 35%
    }

    .lp__fv_img1 {
        display: none;
    }

    .lp__fv_img2 {
        display: block;
        width: 100%;
        object-fit: cover;
    }

    .lp__fv_btn {
        display: block;
        width: 100%;
        max-width: 300px;
        padding-bottom: 40px;
    }

    .lp__fv_btn1,
    .lp__fv_btn2 {
        height: 50px;
    }

    .lp__fv_btn2 {
        margin: 15px 0 0;
    }

    /*** 導入企業ロゴ ***/
    .lp__logo_grid {
        margin: 20px auto 60px;
    }

    /*** CTAボタン ***/


    /*** 悩み ***/
    .lp__pain_img_pc {
        display: none;
    }

    .lp__pain_img_sp {
        display: block;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding: 0 2.5vw;
    }

    /*** ジャンル ***/
    .lp__genre-pc {
        display: none;
    }

    .lp__genre-sp {
        display: block;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding: 0 2.5vw;
    }

    /*** 3つの理由 ***/
    .lp__features {
        position: relative;
    }

    .lp__features_zigzag,
    .lp__features_zigzag_text.even {
        padding: 0 2.5vw;
    }

    .lp__features_zigzag_item {
        display: block;
        margin: 0 auto;
    }

    .lp__features_zigzag_item+.lp__features_zigzag_item {
        margin-top: 70px;
    }

    .lp__features_zigzag_text {
        padding: 0;
        text-align: center;
    }

    .lp__features_zigzag_img {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .lp__features_zigzag_text {
        width: 100%;
    }

    .lp__features_title {
        padding: 0 2.5vw;
    }

    .lp__features_title_img {
        display: none;
    }

    /*** データ ***/
    .lp__data2-pc {
        display: none;
    }

    .lp__data2-sp {
        display: block;
        width: 100%;
        max-width: 400px;
        margin: 0 auto 20px;
        padding: 30px 0;
    }

    .lp__data_arrow-pc {
        display: none;
    }

    .lp__data_arrow-sp {
        display: block;
        width: 100%;
    }

    .lp__data_arrow p {
        width: 100%;
        font-size: clamp(20px, 7vw, 34px);
        line-height: 1.3;
        top: 40%;
    }


    /*** 仕組み ***/
    .lp__system {
        border-radius: 50px;
    }

    .lp__system_item,
    .lp__system_step,
    .lp__system_img {
        display: block;
        margin: 0 auto;
    }

    .lp__system_item {
        padding: 35px 0;
    }

    .lp__system_text {
        text-align: center;
        margin-top: 20px;
    }

    .lp__system_wrapper p {
        padding: 0 2.5vw;
    }

    .lp__system_title::before,
    .lp__system_title::after {
        display: none;
    }

    /*** FAQ ***/
    .lp__faq {
        width: 100%;
        border-radius: 50px;
        padding: 50px 0;
    }

    .lp__faq_item {
        padding: 30px 40px;
    }


    /*** プラン ***/
    .lp__plan_wrapper {
        display: block;
        width: 100%;
        max-width: 450px;
    }

    .lp__plan_item+.lp__plan_item {
        margin-top: 20px;
    }


    /*** 導入店舗の声 ***/
    .lp__case_item {
        display: block;
        padding: 30px;
    }

    .lp__case_item_left {
        width: 100%;
        margin: 0 auto 20px;
    }

    .lp__case_item_left img {
        width: 100%;
        max-width: 100px;
    }

    .lp__case_item_right {
        width: 100%;
    }

    /*** 流れ ***/
    .lp__flow-pc {
        display: none;
    }

    .lp__flow-sp {
        display: block;
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 600px) {
    .lp__fv_wrapper {
        display: block;
    }

    .lp__fv_right {
        display: none;
    }

    .lp__fv_left {
        text-align: center;
        margin-left: 0;
        padding: 10% 0 0;
    }

    .lp__fv_main {
        font-size: 1.9rem;
    }

    .lp__fv_sub {
        font-size: 1.3rem;
    }

    .lp__fv_btn {
        margin: 0 auto;
        padding-top: 30px;
    }

    .lp__fv_scroll {
        display: block;
    }

    .lp__sp_padding {
        padding-top: 30px;
    }

    .lp__cta_btn-pc {
        display: none;
    }

    .lp__cta_btn-sp {
        display: block;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 480px) {

    /*** 導入企業ロゴ ***/
    .lp__logo_grid {
        margin: 20px auto 70px;
    }

    .lp__logo_grid img {
        max-width: 70px;
        max-height: 60px;
    }

    .lp__logo_grid {
        gap: 10px;
    }

    /*** メッセージ ***/


    /*** CTAボタン ***/
    .lp__cta_red-pc {
        display: none;
    }

    .lp__cta_red-sp {
        display: block;
        width: 100%;
    }

    /*** FAQ ***/
    .lp__faq_item {
        padding: 20px 30px;
    }

    .lp__faq_part {
        gap: 15px;
    }

    .lp__faq_img {
        width: 40px;
    }
}