/* =========================================
   PLAN CARDS (プランのご紹介)
   ========================================= */

.plans-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    margin-top: 40px;
}

.plans-intro-text {
    font-size: 0.95rem;
    line-height: 2;
    color: var(--text-color);
}

.btn-primary {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 20px 80px;
    text-align: center;
    border-radius: 16px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #09a09c;
}

.plans-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 80px;
}

.plan-card {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    border: 1px solid #0ABAB5;
    border-radius: 10px;
    background-color: #FFFFFF;
    overflow: hidden;
    box-shadow: 8px 10px 10px 0px #0ABAB51A;
}

.plan-card.recommended {
    border: 2px solid #0ABAB5;
    position: relative;
    background-color: #F2FBFF;
}

.plan-card-badge {
    background-color: #0ABAB5;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 4px;
    display: inline-block;
    margin-left: 15px;
    vertical-align: middle;
}

.plan-card-left {
    padding: 30px 40px;
    flex-grow: 1;
}

.plan-card-title {
    color: #0ABAB5;
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
}

.plan-card.recommended .plan-card-title {
    color: #0ABAB5;
}

.plan-card-subtitle {
    color: #0ABAB5;
    font-size: 0.9rem;
    margin: 0 0 15px 0;
}

.plan-card.recommended .plan-card-subtitle {
    color: #0ABAB5;
}

.plan-card-desc {
    color: var(--text-color);
    font-size: 0.9rem;
    line-height: 1.8;
    margin: 0;
}

.plan-card-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 50px;
    min-width: 200px;
    position: relative;
}

.plan-card-right::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    bottom: 15px;
    width: 1.05px;
    background-color: #0ABAB5;
}

.plan-card-price-label {
    color: #0ABAB5;
    font-size: 0.85rem;
    margin-bottom: 5px;
}

.plan-card.recommended .plan-card-price-label {
    color: #0ABAB5;
}

.plan-card-price {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--text-color);
}

.plan-card-price .currency {
    font-size: 1rem;
    font-weight: normal;
}

@media (max-width: 768px) {
    .btn-primary {
        font-size: 1.2rem;
        padding: 15px 20px;
    }
    .plans-intro {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        text-align: center;
    }
    .plans-intro-text {
        text-align: left;
    }
    .plan-card {
        flex-direction: column;
    }
    .plan-card-right {
        padding: 20px;
    }
    .plan-card-right::before {
        top: 0;
        left: 20px;
        right: 20px;
        bottom: auto;
        width: auto;
        height: 1px;
    }
    .plan-card-left {
        padding: 20px;
    }
    .plan-card-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .plan-card-badge {
        margin-left: 0;
    }
}

/* =========================================
   PRICING TABLE (月額顧問料金)
   ========================================= */

.pricing-table-section {
    margin-top: 100px;
}

.pricing-table-desc {
    font-size: 0.95rem;
    color: var(--text-color);
    margin-bottom: 30px;
}

.pricing-table-wrapper {
    overflow-x: auto;
    margin-bottom: 25px;
}

.plans-pricing-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    min-width: 800px;
}

.plans-pricing-table th,
.plans-pricing-table td {
    border: 1px solid #D9D9D9;
    padding: 15px 10px;
    vertical-align: middle;
}

.plans-pricing-table th.border-none {
    border: none;
    background: transparent;
    padding: 0 0 8px 0;
    box-shadow: none;
}

.recommended-text {
    color: #0ABAB5;
    font-weight: bold;
    font-size: 0.85rem;
}

.plans-pricing-table th {
    background-color: #DDEBEA;
    font-weight: bold;
    color: var(--text-color);
    font-size: 0.95rem;
    width: 20%;
    /* Apply the exact same trick from service.css */
    border-top: 16px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 1px 0 #D9D9D9; /* Simulate the top border on the background */
}

.plans-pricing-table th.col-scale {
    width: 16%;
}

.plans-pricing-table th.recommended {
    background-color: #0ABAB5;
    color: white;
    border-top: none;
    background-clip: border-box;
    box-shadow: none;
    font-size: 18px;
}

.plans-pricing-table td {
    font-size: 0.95rem;
    color: var(--text-color);
    background-color: #FFFFFF;
}

.plans-pricing-table td.col-scale {
    background-color: #E8F7F6;
    font-weight: bold;
}

.plans-pricing-table td.recommended {
    background-color: #E8F7F6;
}

.pricing-notes {
    font-size: 0.9rem;
    color: #555555;
    line-height: 1.8;
}

.pricing-notes p {
    margin: 0 0 5px 0;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

.pricing-notes .note-indent {
    display: block;
    text-indent: 0;
}

/* =========================================
   MOBILE PRICING TABLE (スマホ用料金表)
   ========================================= */

@media (min-width: 769px) {
    .mobile-pricing-container {
        display: none;
    }
}

@media (max-width: 768px) {
    .desktop-pricing-table {
        display: none;
    }
    
    .mobile-pricing-container {
        display: block;
        border: 1px solid #D9D9D9;
        margin-bottom: 25px;
    }

    .mobile-plan-selector-box {
        background-color: #DDEBEA;
        padding: 15px 20px;
        border-bottom: 1px solid #D9D9D9;
    }

    .mobile-plan-label {
        font-size: 0.9rem;
        font-weight: bold;
        color: var(--text-color);
        margin-bottom: 10px;
    }

    .custom-select-wrapper {
        position: relative;
        background-color: #FFFFFF;
        border: 1px solid #333;
        border-radius: 25px;
        padding: 12px 20px;
        cursor: pointer;
        user-select: none;
    }

    .custom-select-trigger {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .custom-select-text {
        font-size: 0.95rem;
        font-weight: bold;
        color: var(--text-color);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .custom-select-badge {
        color: #0ABAB5;
        font-size: 0.85rem;
        font-weight: bold;
    }

    .custom-select-arrow {
        width: 8px;
        height: 8px;
        border-right: 2px solid #666;
        border-bottom: 2px solid #666;
        transform: rotate(45deg);
        margin-bottom: 3px;
        transition: transform 0.3s;
    }

    .custom-select-wrapper.open .custom-select-arrow {
        transform: rotate(225deg);
        margin-top: 5px;
        margin-bottom: 0;
    }

    .custom-select-options {
        position: absolute;
        top: calc(100% + 5px);
        left: 0;
        right: 0;
        background: #FFFFFF;
        border: 1px solid #D9D9D9;
        border-radius: 8px;
        margin: 0;
        list-style: none;
        padding: 0;
        z-index: 10;
        display: none;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .custom-select-wrapper.open .custom-select-options {
        display: block;
    }

    .custom-select-options li {
        padding: 12px 20px;
        border-bottom: 1px solid #EEE;
        font-size: 0.95rem;
        font-weight: bold;
        color: var(--text-color);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .custom-select-options li:last-child {
        border-bottom: none;
    }

    .custom-select-options li.selected {
        background-color: #F7F7F7;
    }

    .mobile-pricing-table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
    }

    .mobile-pricing-table th,
    .mobile-pricing-table td {
        padding: 15px 10px;
        border-bottom: 1px solid #D9D9D9;
        vertical-align: middle;
    }

    .mobile-pricing-table tr:last-child th,
    .mobile-pricing-table tr:last-child td {
        border-bottom: none;
    }

    .mobile-pricing-table th {
        background-color: #DDEBEA;
        color: var(--text-color);
        font-weight: bold;
        font-size: 0.95rem;
        width: 50%;
        border-top: none;
        background-clip: border-box;
        box-shadow: none;
    }

    .mobile-pricing-table td {
        background-color: #FFFFFF;
        font-size: 1rem;
        color: var(--text-color);
    }

    .mobile-pricing-table td.col-scale {
        background-color: #F7F7F7;
        font-weight: bold;
        font-size: 0.9rem;
        border-right: 1px solid #D9D9D9;
    }

    .mobile-pricing-table th.col-scale {
        border-right: 1px solid #D9D9D9;
    }
}

/* =========================================
   STARTUP BANNER (創業3年以内の方へ)
   ========================================= */

.startup-banner-wrapper {
    margin: 80px 0;
}

.startup-banner {
    background-color: #F5FAFA;
    border-radius: 20px;
    padding: 40px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 6px 6px 10px 0px #0ABAB51A;
}

.startup-banner-title {
    color: #0ABAB5;
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0 0 15px 0;
}

.startup-banner-desc {
    font-size: 0.95rem;
    color: var(--text-color);
    line-height: 1.8;
    margin: 0;
}

.startup-banner-btn-wrapper {
    flex-shrink: 0;
    margin-left: 40px;
}

@media (max-width: 768px) {
    .startup-banner {
        flex-direction: column;
        padding: 30px;
        text-align: left;
        align-items: flex-start;
    }
    .startup-banner-title {
        text-align: left;
    }
    .startup-banner-btn-wrapper {
        margin-left: 0;
        margin-top: 25px;
        width: 100%;
    }
    .startup-banner-btn-wrapper .btn-primary {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}

/* =========================================
   SERVICES INCLUDED TABLE (各プランに含まれるサービス)
   ========================================= */

.services-included-section {
    margin-top: 80px;
    margin-bottom: 80px;
}

.services-included-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    min-width: 800px;
}

.services-included-table th,
.services-included-table td {
    border: 1px solid #D9D9D9;
    padding: 15px 10px;
    vertical-align: middle;
}

.services-included-table th {
    background-color: #0ABAB5;
    color: white;
    font-weight: bold;
    font-size: 0.95rem;
    border: 1px solid white;
}

.services-included-table td {
    background-color: #EEF8F8;
}

.services-included-table td:has(.hyphen-mark) {
    background-color: #FFFFFF;
}

.services-included-table td.col-service-name {
    background-color: #F7F7F7;
    text-align: left;
    padding-left: 20px;
    font-weight: normal;
    color: var(--text-color);
    white-space: nowrap;
}

.services-included-table th.col-service-name {
    width: 30%;
}

.circle-mark {
    color: #0ABAB5;
    font-size: 1.2rem;
}

.hyphen-mark {
    color: #0ABAB5;
    font-size: 1.2rem;
    font-weight: bold;
}

.asterisk-mark {
    color: #0ABAB5;
    font-size: 0.8rem;
    margin-left: 5px;
}

/* =========================================
   SIMPLE PRICING TABLES (各種申告料金, オプションなど)
   ========================================= */

@media (max-width: 768px) {
    .services-included-table {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        min-width: 0;
        border-top: 1px solid #D9D9D9;
        border-left: 1px solid #D9D9D9;
    }
    .services-included-table thead,
    .services-included-table tbody,
    .services-included-table tr {
        display: contents;
    }
    .services-included-table th.col-service-name,
    .services-included-table td.col-service-name {
        grid-column: 1 / -1;
        width: 100%;
        text-align: center;
        white-space: normal;
    }
    .services-included-table th, 
    .services-included-table td {
        border: none;
        border-bottom: 1px solid #D9D9D9;
        border-right: 1px solid #D9D9D9;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 5px;
    }
    .services-included-table th {
        border-bottom: 1px solid white;
        border-right: 1px solid white;
    }
    .services-included-table th:not(.col-service-name) {
        font-size: 0.75rem;
    }
}

.simple-pricing-section {
    margin-top: 60px;
    margin-bottom: 60px;
}

.simple-pricing-title {
    color: #0ABAB5;
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.simple-pricing-desc {
    font-size: 0.95rem;
    color: var(--text-color);
    margin-bottom: 20px;
}

.simple-pricing-table-wrapper {
    overflow-x: auto;
    margin-bottom: 15px;
}

.simple-pricing-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    min-width: 600px;
}

.simple-pricing-table th,
.simple-pricing-table td {
    border: 1px solid #D9D9D9;
    padding: 15px 10px;
    vertical-align: middle;
}

.simple-pricing-table th {
    background-color: #0ABAB5;
    color: white;
    font-weight: bold;
    font-size: 0.95rem;
    border: 1px solid white;
    border-top: 1px solid #8F8F8F;
    border-bottom: 1px solid #8F8F8F;
}

.simple-pricing-table th:first-child {
    width: 18%;
}

.simple-pricing-section .simple-pricing-table-wrapper:nth-of-type(2) .simple-pricing-table {
    table-layout: fixed;
}

.simple-pricing-table td {
    font-size: 0.95rem;
    color: var(--text-color);
    background-color: #F7F7F7;
}

.simple-pricing-table td:first-child {
    background-color: #F7F7F7;
    text-align: left;
    padding-left: 20px;
}

.simple-pricing-table td.text-center-cell {
    text-align: center;
    padding-left: 10px;
}

@media (max-width: 768px) {
    .simple-pricing-table-wrapper {
        overflow-x: hidden;
    }
    .simple-pricing-table:not(.alternate-rows) {
        display: flex;
        flex-direction: row;
        width: 100%;
        min-width: 0;
        border: none;
        border-top: 1px solid #8F8F8F;
        border-left: 1px solid #D9D9D9;
    }
    .simple-pricing-table:not(.alternate-rows) thead {
        display: flex;
        flex: 1.2;
    }
    .simple-pricing-table:not(.alternate-rows) tbody {
        display: flex;
        flex-direction: row;
        flex: 2;
    }
    .simple-pricing-table:not(.alternate-rows) tr {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .simple-pricing-table:not(.alternate-rows) tbody tr {
        flex: 1;
    }
    .simple-pricing-table:not(.alternate-rows) th, 
    .simple-pricing-table:not(.alternate-rows) td {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 60px;
        padding: 5px;
        box-sizing: border-box;
        border: none;
        border-bottom: 1px solid #D9D9D9;
        border-right: 1px solid #D9D9D9;
        font-size: 0.85rem;
        width: 100%;
    }
    .simple-pricing-table:not(.alternate-rows) th {
        border-bottom: 1px solid white;
        border-right: 1px solid white;
        padding-left: 5px;
    }
    .simple-pricing-table:not(.alternate-rows) th:first-child,
    .simple-pricing-table:not(.alternate-rows) td:first-child {
        width: 100%;
        border-bottom: 1px solid #8F8F8F;
    }
    .simple-pricing-table:not(.alternate-rows) td:first-child {
        padding-left: 5px;
        background-color: #F7F7F7;
    }

    .simple-pricing-table.alternate-rows {
        min-width: 0;
        width: 100%;
    }
    .simple-pricing-table.alternate-rows th,
    .simple-pricing-table.alternate-rows td {
        padding: 12px 10px;
        font-size: 0.85rem;
    }
}

.simple-pricing-table.alternate-rows tbody tr:nth-child(odd) td {
    background-color: #F7F7F7;
}

.simple-pricing-table.alternate-rows tbody tr:nth-child(even) td {
    background-color: #FFFFFF;
}

/* =========================================
   PRICE SIMULATION (料金シミュレーション)
   ========================================= */

.simulation-section-bg {
    margin: 0 calc(50% - 50vw);
    padding: 100px calc(50vw - 50%) 60px;
    background-color: #F7F7F7;
}

.simulation-cases-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 20px;
}

.simulation-case-card {
    border: 2px solid #0ABAB5;
    background-color: #FFFFFF;
}

.simulation-case-header {
    background-color: #0ABAB5;
    color: white;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.case-label {
    font-weight: bold;
    font-size: 1.1rem;
}

.case-title {
    font-weight: bold;
    font-size: 1.1rem;
}

.simulation-case-body {
    padding: 30px;
}

.simulation-case-desc {
    font-size: 0.95rem;
    color: var(--text-color);
    margin: 0 0 10px 0;
}

.simulation-case-tags {
    font-size: 0.9rem;
    color: #0ABAB5;
    font-weight: bold;
    margin: 0 0 25px 0;
}

.simulation-monthly-box {
    background-color: #E8F7F6;
    border-radius: 8px;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.monthly-box-title {
    color: #0ABAB5;
    font-size: 1.3rem;
    margin: 0 0 10px 0;
    font-weight: bold;
}

.monthly-box-desc {
    font-size: 0.9rem;
    color: var(--text-color);
    margin: 0;
}

.monthly-box-right {
    text-align: right;
}

.monthly-box-price {
    margin-bottom: 5px;
}

.price-label {
    color: #0ABAB5;
    font-size: 0.85rem;
    margin-right: 10px;
    font-weight: bold;
}

.price-amount {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--text-color);
}

.price-yen {
    font-size: 1rem;
}

.monthly-box-annual {
    font-size: 0.85rem;
    color: var(--text-color);
}

.spot-section-title {
    color: #0ABAB5;
    font-size: 0.95rem;
    font-weight: bold;
    margin: 0 0 10px 0;
}

.spot-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    border-top: 1px solid #D9D9D9;
}

.spot-row:last-of-type {
    border-bottom: 1px solid #D9D9D9;
}

.spot-row.grey-bg {
    background-color: #F7F7F7;
}

.simulation-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border: 1px solid #D9D9D9;
    margin-top: 25px;
}

.total-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.total-label {
    font-weight: bold;
    font-size: 1rem;
}

.total-desc {
    color: #0ABAB5;
    font-size: 0.85rem;
    font-weight: bold;
}

.total-amount {
    font-weight: bold;
    font-size: 1.4rem;
}

@media (max-width: 768px) {
    .simulation-monthly-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .monthly-box-right {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: 
            "label amount"
            ". annual";
        align-items: baseline;
        text-align: left;
    }
    .monthly-box-price {
        display: contents;
    }
    .price-label {
        grid-area: label;
    }
    .price-amount {
        grid-area: amount;
    }
    .monthly-box-annual {
        grid-area: annual;
        padding-right: 0;
    }
    .simulation-total-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .total-right {
        align-self: flex-end;
    }
    .total-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .simulation-case-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* =========================================
   CONTACT PROMPT
   ========================================= */

.contact-prompt-section {
    margin-top: 60px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-prompt-box {
    border: 2px solid #0ABAB5;
    background-color: #FFFFFF;
    padding: 40px;
    text-align: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.contact-prompt-title {
    color: #0ABAB5;
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.contact-prompt-desc {
    color: var(--text-color);
    font-size: 0.95rem;
    margin: 0;
}

.sp-br {
    display: none;
}

@media (max-width: 768px) {
    .sp-br {
        display: block;
    }
}

.contact-prompt-arrow {
    width: 60px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(10, 186, 181, 0.1), rgba(10, 186, 181, 0.4));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    margin: 0 auto;
}