@charset "UTF-8";

section.sub-menu + .section-plan { margin: 0; }
section.section-plan { padding: 80px 0 25px 0; margin: -55px 0; }
#plan-sub-menu ul { list-style-type: none; padding-left: 0; }

.plan-images img { width: 100%; }
.plan-title { text-align: center; color: #000; }
.plan-title h3 { font-size: 5.12vw; font-weight: bold; letter-spacing: 0; }
.plan-title h4 { font-size: 5.12vw; font-weight: bold; }
/* .plan-title h4 span, .plan-title p { font-size:  3.413vw; } */

.link-campaign { background-color: #cea971; padding: 3.413vw;}
.link-campaign img { max-width: 100%; border-radius: 20px;}

.plan-detail { margin-top: 1rem; }
.plan-title h5, .plan-detail h5, .plan-option h5, .plan-recommend h5 { font-size: 4.26vw; font-weight: bold; text-align: center; }
.plan-detail .plan-detail-base, .plan-option .plan-option-base {
    list-style-type: none;
    padding: 0 10px;
}
.plan-detail-base li { line-height: 10vw; }
.plan-detail-base li span.accent { font-size: 5.12vw; font-weight: bold; }
.plan-title .plan-subtitle { font-size: 3.84vw; }
span.tax { font-size: 2.13vw; }
.plan-purpose { margin: 1rem 0; }
.plan-purpose p { font-size: 1.44rem; line-height: 2.0rem; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding-top: 1.44rem; padding-bottom: 1.44rem; }

div.discount { width: auto; }
div.discount-detail {
    display: inline-block;
    padding: 1.2vw;

}
div.discount-detail p { color: #fff; font-size: 3.84vw; font-weight: 400; line-height: 4.6vw; }
div.discount-price p { color: #dc3545; font-size: 5.12vw; font-weight: 600; text-align: center; }
div.discount-price h4 { color: #dc3545; }

.plan-option .plan-option-base {
    padding: 0;
}

.plan-detail-base .time::before, .plan-detail-base .cut::before, .plan-detail-base .cloth::before, .plan-detail-base .data::before, .plan-detail-base .camera::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: .5rem;
    background-size: contain;
    vertical-align: text-bottom;
}
.plan-detail-base .time::before { background-image: url('../images/plan/icon-plan-detail-time.png'); }
.plan-detail-base .cut::before { background-image: url('../images/plan/icon-plan-detail-cut.png'); }
.plan-detail-base .cloth::before { background-image: url('../images/plan/icon-plan-detail-cloth.png'); }
.plan-detail-base .data::before { background-image: url('../images/plan/icon-plan-detail-data.png'); }
.plan-detail-base .camera::before { background-image: url('../images/plan/icon-plan-detail-camera.png'); }

.plan-detail-base dl { margin-bottom: 0; }
.plan-detail-base dt, .plan-detail-base dd {
    padding-top: 4.26vw;
    padding-bottom: 4.26vw;
    border-bottom: 1px solid #000;
    margin-bottom: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
.plan-detail-base dt { -webkit-justify-content: flex-start; justify-content: flex-start; }
.plan-detail-base dd { -webkit-justify-content: flex-end; justify-content: flex-end; }
.plan-detail-base div { text-align: right; }

.plan-detail-plus { list-style-type: none; padding: 4.26vw 0; }
.plan-detail-plus li { padding-left: 5px; padding-right: 5px; }
.plan-detail-plus img { max-width: 100%; }

.plan-attention ul { list-style-type: none; padding: 1rem 0; }
.plan-attention ul li::before { content: '・'; }
.plan-attention ul li.attention::before, .plan-option-child li.attention::before { content: '※'; }
.plan-attention h6 { font-size: 3.413vw; font-weight: bold; margin-top: 1rem; margin-bottom: .2rem; }

.plan-option { margin-top: 1rem; }
.plan-option dt, .plan-option dd { margin-bottom: 0; }
.plan-option dd { text-align: right; }
.plan-option span.small { font-size: 2.13vw; }

.plan-option-base > li { padding: 4.26vw 2.13vw; }
.plan-option-base > li:not(:last-child) { border-bottom: 1px solid #000; }
.plan-option-base dl { margin-bottom: 0; }

.plan-option-child { list-style-type: none; padding-left: 0; font-size: 3.413vw; }
.plan-option-child li::before { content: '・'; }

.plan-recommend { margin-top: 21.3vw; text-align: center; }
.plan-recommend-menu { margin-top: 8.53vw; }

.sub-menu-child-wrapper a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent: -999px;
    z-index: 2;
    pointer-events: auto;
}
.sub-menu-child-wrapper a ~ div { opacity: 1; }
.sub-menu-child-wrapper a:hover ~ .black-filter { background-color: rgba(0,0,0,.2); transition: 0.5s ease-in-out; }

.plan-recommend-menu .sub-menu-child-wrapper.flow,
.plan-recommend-menu .sub-menu-child-wrapper.faq { background-color: #cea971; }
.plan-recommend-menu .sub-menu-child-wrapper.flow h4,
.plan-recommend-menu .sub-menu-child-wrapper.faq h4 { color: #fff; }
.plan-recommend-menu .sub-menu-child-wrapper.flow h4::before,
.plan-recommend-menu .sub-menu-child-wrapper.faq h4::before { content: none; }

@media screen and (min-width: 768px) {
    .plan-title { text-align: left; }
    .plan-title h3 { font-size: 2.24rem; }
    .plan-title h4 { font-size: 4.2rem; }
    .plan-title h4 > span.tax { font-size: 1.6rem; font-weight: 400; }
    .plan-title .plan-subtitle { font-size: 2.24rem; }

    .plan-detail .plan-detail-base, .plan-option .plan-option-base {
        border-top: none;
        border-bottom: none;
        padding: 0 10px;
    }
    .plan-detail { margin: 1rem 0; }

    .plan-purpose { margin: 1rem 0; }
    .plan-purpose p { font-size: 1.44rem; line-height: 2.0rem; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding-top: 1.44rem; padding-bottom: 1.44rem; }
    /* .plan-title h4, .plan-title p { font-size:  1.28rem; } */
    p.discount span { font-size: 1.2rem; padding: .3rem; line-height: 1.6rem; }

    .plan-detail h5, .plan-option h5, .plan-recommend h5 { font-size: 1.6rem; }
    span.tax { font-size: 1.4rem; }
    div.discount { text-align: left; }
    div.discount-detail { padding: .3rem; }
    div.discount-detail p { font-size: 1.44rem; line-height: 1.8rem; }
    div.discount-price p { font-size: 2.14rem; text-align: left; }

    .plan-detail-base dt, .plan-detail-base dd { padding-top: 1.6rem; padding-bottom: 1.6rem; border-bottom: none; }
    .plan-detail-base li { line-height: 4rem; font-size: 1.44rem; }
    .plan-detail-base li span.accent { font-size: 2.24rem; font-weight: bold; margin: 0 .5rem; }
    .plan-detail-plus { list-style-type: none; padding: 1.6rem 0; }
    .plan-attention h6 { font-size: 1.6rem; font-weight: bold; margin-top: 1rem; margin-bottom: .2rem; }

    .plan-option-base > li { padding: 1.6rem .8rem; }
    .plan-option-child { font-size: 1.28rem; }
    .plan-option span.small { font-size: 1.2rem; }

    .plan-recommend { margin-top: 8rem; }
    .plan-recommend-menu { margin-top: 3.2rem; }

    .plan-recommend-menu .sub-menu-child-wrapper.flow::before,
    .plan-recommend-menu .sub-menu-child-wrapper.faq::before { padding-top: 50%; }

    .link-campaign .slash { margin-bottom: 1.6rem; }
    .slash h5 { font-size: 1.6rem; }
    .link-campaign .btn-wrapper { margin: 20px 0 0 0; }
}