@charset "UTF-8";

body.page-template-pricing-2021 {
    background-color: #fff;
}

/* breadcrumb */
.breadcrumb {
    max-width: 920px;
    margin-right: auto;
    margin-left: auto;
}

@media screen and (width >= 1220px) {
    .breadcrumb {
        max-width: 1200px;
    }
}

@media screen and (width <= 735px) {
    .site-header {
        border-bottom: 1px solid rgb(0 0 0 / 6%);
        background-color: transparent;
    }
}

@media only screen and (width <= 960px) {
    body.page-template-pricing-2021 {
        min-width: 100%;
        word-break: break-all;
    }

    .page-template-pricing-2021 .wrapper {
        padding: 0 5px;
    }
}

.bold {
    font-weight: bold;
}

.mt2 {
    margin-top: 2rem;
}

.mr05 {
    margin-right: 0.5rem;
}

.p05 {
    padding: 0.5rem 0;
}

.d-inline-block {
    display: inline-block;
}

@media (width <= 1219px) {
    .d-xl-hide {
        display: none;
    }
}

#main {
    max-width: 100vw;
}

#main > .wrapper {
    padding: 0 20px;
}

.pricing-main {
    padding-bottom: 50px;
}

.pricing-main-heading {
    margin: 0 0 10px;
    font-size: 30px;
    line-height: 39px;
    text-align: center;
}

h3.function-name {
    margin: 0.4rem;
    font-size: 18px;
    line-height: 23px;
}

.balloon {
    position: relative;
    display: inline-block;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 7px 20px;
    border-radius: 8px;
    margin: 1.5em 0;
    background: rgb(255 189 201 / 40%);
    color: #555;
    font-size: 1rem;
    text-align: center;
}

.balloon::before {
    position: absolute;
    top: 100%;
    left: 50%;
    border: 8px solid transparent;
    border-top: 12px solid rgb(255 189 201 / 40%);
    margin-left: -8px;
    content: '';
}

.balloon p {
    padding: 0;
    margin: 0;
}

.col-balloon {
    display: flex;
}

.reduced-text {
    font-size: 1rem;
    font-weight: normal;
}

.box-header {
    padding: 0.25rem 0;
}

.box-header-contact {
    padding-top: 13px;
    padding-bottom: 13px;
}

.box-footer {
    padding: 0.75rem 0 0.1rem;
}

.bg-green {
    background-color: #eef6f2;
}

.bg-darker-gray {
    background-color: #f3f3f3;
}

.bg-darker-green {
    background-color: #d9e9e1;
}

.table {
    width: 100%;
}

.table thead th {
    padding: 0.5rem 0;
    background: #f3f3f3;
}

.table thead th:first-child {
    background: #fff;
}

.table thead th:nth-child(2n + 3) {
    background: #d9e9e1;
}

.table td,
.table tbody th {
    padding: 0.75rem;
    background-color: #fff;
}

.table tr:nth-child(odd) td,
.table tbody tr:nth-child(odd) th {
    background-color: #fbfbfb;
}

.table tr:nth-child(odd) td:nth-child(2n + 3) {
    background-color: #eef6f2;
}

.plan-name {
    display: block;
    font-size: 20px;
    font-weight: bold;
    line-height: normal;
}

.col5 .plan-name {
    font-size: 16px;
    letter-spacing: -0.05em;
    line-height: 30px;
}

.amount {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 2.25rem;
    font-weight: 500;
    line-height: normal;
}

.unit {
    margin-left: 4px;
    font-weight: bold;
    letter-spacing: 0.1rem;
    line-height: normal;
}

.icon-tooltip {
    position: relative;
    top: 2px;
    width: 16px;
    fill: #000;
}

.icon-tooltip:hover {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(346deg)
        brightness(100%) contrast(100%);
}

.symbol .icon-tooltip {
    top: 0;
    margin-right: -23px;
}

.icon-blank::after {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 4px;
    background-image: url('img/icon_link-blank.svg');
    background-size: contain;
    content: '';
    vertical-align: top;
}

.icon-blank:hover {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(346deg)
        brightness(100%) contrast(100%);
}

.icon-arrow {
    margin-top: 0.5rem;
    line-height: 1rem;
}

.icon-arrow::after {
    display: inline-block;
    width: 1rem;
    height: 0.75rem;
    margin-bottom: 0.25rem;
    margin-left: 4px;
    background-image: url('img/icon_arrow-bottom.svg');
    background-size: contain;
    content: '';
    vertical-align: middle;
}

.icon-arrow:hover {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(346deg)
        brightness(100%) contrast(100%);
}

.icon-accounting {
    position: relative;
    top: 8px;
    width: 30px;
    margin-right: 10px;
}

.icon-scroll {
    position: relative;
    top: 3px;
    width: 16px;
}

.text-link-more {
    padding-top: 0.5rem;
    line-height: 1rem;
}

.sp-reveal {
    display: none;
}

ul.note {
    color: #aaa;
    list-style-type: none;
    padding-inline-start: 10px;
}

ul.note li {
    font-size: 0.875rem;
}

ul.note li::before {
    content: '※ ';
}

.plan-box {
    border-radius: 3px;
    margin: 1em 0.5em;
    background: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    text-align: center;
}

ul.items {
    display: flex;
    padding: 0 0.6rem;
    line-height: 1.4;
    list-style: none;
    text-align: left;
}

.items li small {
    font-size: 13px;
}

.items li {
    width: 100%;
}

.items li:first-child {
    width: 125px;
    flex-shrink: 0;
}

@media screen and (width >=900px) and (width <=1219px) {
    ul.items {
        flex-wrap: wrap;
    }

    .items li,
    .items li:first-child {
        width: 100%;
    }
}

.arrow {
    position: relative;
    color: #4e8064;
}

.arrow::after {
    position: absolute;
    top: 50%;
    right: 2em;
    width: 7px;
    height: 7px;
    border-top: 2px solid #4e8064;
    border-right: 2px solid #4e8064;
    margin-top: -5px;
    content: '';
    transform: rotate(45deg);
}

.symbol {
    font-size: 1.5rem;
    line-height: 1;
}

li.symbol,
td.symbol {
    font-family:
        '游ゴシック', YuGothic, 'Hiragino Kaku Gothic ProN',
        'Hiragino Kaku Gothic Pro', 'ＭＳ ゴシック', sans-serif;
}

.modal-wrapper {
    position: fixed;
    z-index: 999;
    padding: 40px 10px;
    inset: 0;
    text-align: center;
}

.modal-wrapper:not(:target) {
    opacity: 0;
    visibility: hidden;
}

.modal-wrapper:target {
    opacity: 1;
    transition:
        opacity 0.4s,
        visibility 0.4s;
    visibility: visible;
}

.modal-wrapper::after {
    display: inline-block;
    height: 100%;
    margin-left: -0.05em;
    content: '';
    vertical-align: middle;
}

.modal-wrapper .modal-window {
    position: relative;
    z-index: 20;
    display: inline-block;
    width: 90%;
    max-width: 600px;
    box-sizing: border-box;
    padding: 30px 30px 15px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 30px rgb(0 0 0 / 60%);
    vertical-align: middle;
}

.modal-wrapper .modal-window .modal-content {
    max-height: 80vh;
    overflow-y: auto;
    text-align: left;
}

.modal-overlay {
    position: absolute;
    z-index: 10;
    background: rgb(0 0 0 / 80%);
    inset: 0;
}

.modal-wrapper .modal-close {
    position: absolute;
    z-index: 20;
    top: -15px;
    right: -5px;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
}

.modal-wrapper .modal-close:hover {
    color: #2b2e38 !important;
}

.modal-note {
    color: #aaa;
    font-size: 0.875rem;
}

.pricing-cta {
    margin: 2rem 0 3rem;
    text-align: center;
}

.pricing-cta::before {
    display: none;
}

.pricing-cta .button {
    margin: 0.5rem;
}

/* tablet portrait */
@media screen and (width <= 959px) {
    .sp-hide {
        display: none;
    }
}

.page-template-pricing-2021 .wrapper {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

#container .px-8 {
    padding: 0 2rem;
}

@media (width >= 1220px) {
    .page-template-pricing-2021 .wrapper {
        max-width: 1240px;
        padding: 0;
    }
}

/* sp portrait */
@media only screen and (width <= 1024px) {
    .amount {
        font-size: 1.875rem;
    }
}

@media only screen and (width <= 960px) {
    body.page-template-pricing-2021 {
        word-break: initial;
    }

    #main > .wrapper {
        padding: 0;
    }

    .scroll-table {
        overflow: auto;
        margin: 10px 10px 20px;
        background: #fff;
    }

    .scroll-table table td {
        white-space: nowrap;
    }

    .sp-hide {
        display: none;
    }

    .sp-reveal {
        display: block;
        font-size: 1rem;
        text-align: center;
    }

    .table .sp-function {
        background-color: #ddd;
    }

    table tbody {
        font-size: 1rem;
        text-align: center;
    }

    .btn-cta,
    .btn-cta-secondary {
        display: inline-block;
        max-width: 320px;
        margin: 10px;
    }

    .plan-box {
        max-width: 100%;
        margin: 0 10px 20px;
    }

    ul.items {
        text-align: center;
    }

    .icon-accounting {
        position: relative;
        top: 1px;
        width: 20px;
    }

    .fixed {
        position: sticky;
        z-index: 10;
        left: 0;
    }

    .scroll-table table th {
        width: 80px;
    }
}

@media only screen and (width <= 899px) {
    .plan-items-wrapper {
        display: table;
        margin: 0 auto;
    }

    ul.items {
        text-align: left;
    }

    .col5 .plan-name {
        font-size: 20px;
    }
}

@media screen and (width <= 760px) {
    td {
        display: table-cell;
    }
}

/* PC */
@media screen and (width >= 900px) {
    .wrapper-plan-box {
        display: flex;
    }

    .col1 {
        flex: 0 0 15%;
    }

    .col2,
    .col3,
    .col4,
    .col5 {
        flex: 1 0 0;
        margin-right: 0.5em;
        margin-left: 0.5em;
    }

    table {
        margin: 0 auto;
        table-layout: auto;
        text-align: center;
    }

    table tbody th {
        width: 15%;
    }
}

@media (width >= 1218px) {
    .pricing-cta {
        padding: 0;
        margin: 2rem 0 3rem;
    }
}

.wrapper-plan-box {
    padding: 0;
}

/* pricing-main-cta */
.pricing-main-cta {
    padding: 0;
    margin: 4px 0 20px;
}

.pricing-main-cta-col {
    width: 100%;
    box-sizing: border-box;
    padding: 2px;
    margin-bottom: 10px;
}

.pricing-main-cta-inner {
    padding: 20px 10px;
    text-align: center;
}

.pricing-main-cta h2 {
    margin: 0.5em 0 0;
    font-size: 21px;
    line-height: 25px;
}

.pricing-main-cta p {
    margin: 0.5em 0 1em;
    line-height: 1.2;
}

@media only screen and (width <= 960px) {
    .pricing-main-cta {
        padding: 0 8px;
    }
}

@media only screen and (width <= 750px) {
    .pricing-main-cta {
        display: none;
    }
}

@media only screen and (width >= 900px) {
    .plan-box {
        position: relative;
        overflow: hidden;
        padding-bottom: 60px;
    }

    .box-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
}

/* spbottom-cta */
.spbottom-cta {
    display: none;
}

@media only screen and (width <= 750px) {
    .spbottom-cta {
        position: fixed;
        z-index: 100;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        background-color: #fff;
    }

    .spbottom-cta-inner {
        width: calc(100% - 80px);
        box-sizing: border-box;
        padding: 1rem;
        margin: 0;
    }

    .spbottom-cta-button {
        position: relative;
        display: block;
        padding: 0.75rem 1rem 0.75rem 0.3rem;
        border-radius: 50px;
        background: #fb7c2d;
        box-shadow: 0 4px 0 rgb(144 144 144 / 20%);
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        line-height: 24px;
        text-align: center;
        transition: ease-out 0.3s;
    }

    .spbottom-cta-button::after {
        position: absolute;
        top: 0;
        right: 15px;
        bottom: 0;
        width: 9px;
        background: url('../img/home/icon-arrow-right.svg') no-repeat center;
        background-size: 9px auto;
        content: '';
    }

    .spbottom-cta-button:hover {
        box-shadow:
            0 4px 0 rgb(144 144 144 / 20%),
            inset 100rem 0 0 0 #ff6c00;
        color: #fff;
    }
}

/* modal-pricing-table */
.ml4sf-modal-pricing-table-wrapper {
    overflow: auto;
    max-height: 50vh;
}

.ml4sf-modal-pricing-table {
    width: 100%;
}

.ml4sf-modal-pricing-table thead th {
    padding: 0.3rem;
    text-align: center;
}

.ml4sf-modal-pricing-table tbody td {
    padding: 0.75rem;
}

.ml4sf-modal-pricing-table tbody tr:nth-child(even) {
    background-color: #fbfbfb;
}

.modal-wrapper .ml4sf-modal-pricing-table tbody td:first-child {
    min-width: auto;
}

/* revision-notice */
@media screen and (width <= 960px) {
    .revision-notice.revision-notice-box {
        margin-right: 1rem;
        margin-left: 1rem;
    }
}

/* wordpress entry body styles for pricing single page */
.pricing-entry-content {
    width: 100%;
    padding-bottom: 3rem;
    margin-top: 2rem;
}

@media screen and (width <= 960px) {
    .pricing-entry-content {
        width: 90%;
    }
}

.pricing-entry-content .note-indent + .note-indent {
    margin-top: -0.5em;
}

.pricing-entry-content .pricing-entry-group {
    margin-bottom: 4rem;
}

.pricing-entry-content .pricing-entry-group:last-child {
    margin-bottom: 0;
}

.pricing-entry-content h2:not(.heading-with-line) {
    padding: 0.5rem 0 0.5rem 1rem;
    border-left: 5px solid #3ea966;
    margin: 4rem 0 2rem;
    color: #3ea966;
    font-size: 1.5rem;
    font-weight: bold;
}

.pricing-entry-content h2:first-child {
    margin-top: 0;
}

.pricing-entry-content h3 {
    border: 0;
    margin: 2rem 0 1rem;
    color: #3ea966;
    font-size: 1.25rem;
    font-weight: bold;
}

.pricing-entry-content h4 {
    border: 0;
    margin: 2rem 0 1rem;
    color: #2f3e36;
    font-size: 1rem;
    font-weight: bold;
}

.pricing-entry-content h3 + h4 {
    margin-top: 1rem;
}

.pricing-entry-content hr {
    height: auto;
    border: 1px solid #ccc;
    margin: 1rem 0;
    background-color: transparent;
}

.pricing-entry-content ul,
.pricing-entry-content ol {
    padding-left: 1rem;
}

.pricing-entry-content li > ul,
.pricing-entry-content li > ol {
    padding-left: 2rem;
    margin-bottom: 1rem;
}

.pricing-entry-content li {
    margin: 0.5rem 0;
}

.pricing-entry-content li:last-child {
    margin-bottom: 0;
}

.pricing-entry-content table {
    border-collapse: collapse;
}

.pricing-entry-content .th-nowrap table th {
    width: 1%;
    white-space: nowrap;
}

.pricing-entry-content table,
.pricing-entry-content th,
.pricing-entry-content td,
.pricing-entry-content .wp-block-table.is-style-stripes td,
.pricing-entry-content .wp-block-table.is-style-stripes th {
    border: 1px solid #dedede;
}

.pricing-entry-content .wp-block-table thead {
    border-bottom: 1px solid #dedede;
}

.pricing-entry-content .wp-block-table.is-style-stripes {
    border-bottom: 0;
}

.pricing-entry-content th,
.pricing-entry-content
    .wp-block-table.is-style-stripes
    tbody
    tr:nth-child(odd) {
    background-color: #f8f8f8;
}

.pricing-entry-content .wp-block-table thead th,
.pricing-entry-content .wp-block-table.is-style-stripes thead th {
    background-color: #f3f3f3;
}

.pricing-entry-content img {
    vertical-align: bottom;
}

.pricing-entry-content .wp-block-table .wp-element-caption {
    margin-top: 0.3rem;
    color: #606060;
    font-size: 0.75rem;
    text-align: center;
}

/* stylelint-disable selector-class-pattern -- kebab case class names are defined by wordpress */
.pricing-entry-content p.has-background,
.pricing-entry-content
    .wp-block-group.has-background
    .wp-block-group__inner-container {
    padding: 1.25em 2.375em;
}

.pricing-entry-content
    .wp-block-group.has-background
    .wp-block-group__inner-container
    > *:last-child,
.pricing-entry-content
    .box-border
    .wp-block-group__inner-container
    > *:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

@media screen and (width <= 639px) {
    .pricing-entry-content p.has-background,
    .pricing-entry-content
        .wp-block-group.has-background
        .wp-block-group__inner-container {
        padding: 1.25em;
    }
}
/* stylelint-enable selector-class-pattern */

.pricing-entry-content .pricing-aside {
    position: sticky;
    top: 100px;
}

.pricing-entry-content .pricing-aside-heading {
    border-bottom: 2px solid #3ea966;
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
}

.pricing-entry-content .pricing-aside-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.pricing-entry-content .pricing-aside-list li {
    padding: 0;
    border-bottom: 1px solid #d5d5d5;
    margin: 0;
}

.pricing-entry-content .pricing-aside-list li a {
    display: block;
    padding: 0.75rem 0.5rem;
}

.pricing-entry-content .pricing-aside-list li a:hover {
    background-color: #f2f9f7;
}

@media screen and (width >= 992px) {
    .pricing-entry-content .pricing-detail-table table th {
        min-width: 180px;
    }
}

@media screen and (width <= 781px) {
    .pricing-entry-content .pricing-aside {
        display: none;
    }
}