@charset "utf-8";

/*-----------------------------------------------
    index
-----------------------------------------------*/
.cmnMaintit{
    background-image: url(../img/plan/maintit.jpg);
    z-index: 2;
    position: relative;
}
@media only screen and (max-width:1215px){
    .cmnMaintit{
        background-image: url(../img/plan/maintit_sp.jpg);
    }
}
/*----------------------
    secPlan
------------------------*/
.secPlan{
    padding: 14rem 0 0;
    position: relative;
    z-index: 1;
}
.secPlan .bgWrap{
    position: relative;
    z-index: 2;
}
.secPlan::before {
    content: '';
    display: block;
    width: 137rem;
    height: 137rem;
    position: absolute;
    top: -50rem;
    left: -60rem;
    z-index: 0;
    background: radial-gradient(ellipse at center, rgba(21, 133, 143, 1) 0%, rgba(21, 133, 143, 0) 60%, rgba(21, 133, 143, 0) 100%);
    opacity: 0.2;
    pointer-events: none;
}
.secPlan::after {
    content: '';
    display: block;
    width: 137rem;
    height: 137rem;
    position: absolute;
    top: 86rem;
    right: -60rem;
    z-index: 0;
    background: radial-gradient(ellipse at center, rgba(0, 105, 52, 1) 0%, rgba(0, 105, 52, 0) 60%, rgba(0, 105, 52, 0) 100%);
    opacity: 0.2;
    pointer-events: none;
}
.secPlan .boxComparison .note{
    font-size: var(--pcFontSize12);
    letter-spacing: 0.04em;
    margin-top: 4rem;
    line-height: 1.833;
}
.secPlan .boxPlanImg{
    margin-top: 15rem;
    display: flex;
    gap: 4rem;
}

@media only screen and (max-width:1215px){
    .secPlan {
        padding: 5rem 0 0;
    }
    .secPlan .boxComparison .note {
        font-size: var(--pcFontSize11);
        letter-spacing: 0;
        margin-top: 2.5rem;
        line-height: 1.545;
    }
    .secPlan::before {
        display: none;
    }
    .secPlan::after {
        display: none;
    }
    .secPlan .boxPlanImg {
        margin-top: 4rem;
        display: block;
    }
    .secPlan .boxPlanImg .listPlan + .listPlan{
        margin-top: 1rem;
    }
}
/*----------------------
    secPlanConcept
------------------------*/
/* secPlanConcept */
.secPlanConcept{
    padding: 14rem 0 0;
    position: relative;
    z-index: 1;
}
.secPlanConcept::before{
    content: '';
    display: block;
    width: 137rem;
    height: 137rem;
    position: absolute;
    top: 60rem;
    left: -80rem;
    z-index: 0;
    background: radial-gradient(ellipse at center, rgba(241, 204, 52, 1) 0%, rgba(241, 204, 52, 0) 60%, rgba(241, 204, 52, 0) 100%);
    opacity: 0.2;
    pointer-events: none;
}
.secPlanConcept::after{
    content: '';
    display: block;
    width: 137rem;
    height: 137rem;
    position: absolute;
    top: 210rem;
    right: -60rem;
    z-index: 0;
    background: radial-gradient(ellipse at center, rgba(223, 108, 148, 1) 0%, rgba(223, 108, 148, 0) 60%, rgba(223, 108, 148, 0) 100%);
    opacity: 0.2;
    pointer-events: none;
}
.secPlanConcept .bgWrap{
    position: relative;
    z-index: 1;
}
.secPlanConcept .boxWrap{
    display: flex;
    justify-content: space-between;
    gap: 0 4rem;
    margin-bottom: 19rem;
}
.secPlanConcept .imgPlanFamily{
    margin-bottom: 3.5rem;
}
.secPlanConcept .boxWrap .tit{
    font-size: var(--pcFontSize24);
    line-height: 1.6;
    letter-spacing: 0.04em;
    margin-bottom: 2.5rem;
    font-weight: 600;
}

.secPlanConcept .boxLeft .txtPlan{
    font-size: var(--pcFontSize18);
    letter-spacing: 0.06em;
    margin-bottom: 2rem;
    color: var(--planSubTitXColor);
}
.secPlanConcept .boxLeft .txtName{
    font-size: var(--pcFontSize50);
    letter-spacing: 0.06em;
    margin-bottom: 4rem;
    font-weight: 600;
}
.secPlanConcept .boxLeft .txtInfo{
    font-size: var(--pcFontSize16);
    letter-spacing: 0.06em;
}
.secPlanConcept .boxFloor .boxTxt{
    padding-bottom: 3rem;
    margin-bottom: 5rem;
    border-bottom: 0.1rem solid var(--planBorderColor);
}

.secPlanConcept .boxRight{
    width: 62rem;
    flex-shrink: 0;
}
.secPlanConcept .boxLeft{
    width: 62rem;
}
.secPlanConcept .txtDetail + .txtDetail{
    margin-top: 3rem;
}
.secPlanConcept .imgStaff{
    margin-top: 4rem;
}
.secPlanConcept .imgFloor02{
    margin-top: 4.5rem;
}
.secPlanConcept .imgFloor{
    text-align: center;
}
.secPlanConcept .imgFloor .note{
    font-size: var(--pcFontSize12);
    letter-spacing: 0.04em;
    margin-top: 4rem;
    text-align: right;
}
.secPlanConcept .imgFloor02 .note{
    font-size: var(--pcFontSize14);
    letter-spacing: 0.04em;
    margin-top: 2.5rem;
}
.secPlanConcept .boxContents .boxTit{
    font-size: var(--pcFontSize24);
    line-height: 1.6;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--whiteColor);
    background: linear-gradient(
    to right,
    var(--planBorderColor) 0%,
    var(--planBorderColor)  70%,
    var(--planTitGrad) 100% );
    padding: 1.1rem 2.5rem;
}
.secPlanConcept .boxTit .subTit{
    font-size: var(--pcFontSize14);
    letter-spacing: 0.04em;
}
.secPlanConcept .boxContents .contentsFlex{
    margin-top: 3rem;
    display: flex;
    gap: 3rem;
}
.secPlanConcept .boxContents .titContents{
    font-size: var(--pcFontSize16);
    letter-spacing: 0.04em;
    color: var(--planBorderColor);
    line-height: 1;
    position: relative;
}
.secPlanConcept .boxContents.boxClean .titContents{
    color: var(--planCleanColor);
    margin-top: 0;
}
.secPlanConcept .titContents .titSub{
    font-size: var(--pcFontSize12);
    letter-spacing: 0.04em;
    color: var(--textColor);
}
.secPlanConcept .boxContents .txtContents{
    font-size: var(--pcFontSize16);
    letter-spacing: 0.04em;
    line-height: 1.875;
    margin-top: 1rem;
}
.secPlanConcept .boxContents .boxImg{
    width: 23rem;
    flex-shrink: 0;
}
.secPlanConcept .boxContents.boxClean .boxImg{
    width: 18.2rem;
}
.secPlanConcept .boxContents.boxFree{
    margin-top: 5.5rem;
}
.secPlanConcept .boxContents.boxConvenient{
    margin-top: 5.5rem;
}
.secPlanConcept .boxContents.boxClean{
    margin-top: 8rem;
    position: relative;
}
.secPlanConcept .boxContents .iconAll{
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: -2.6rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--whiteColor);
    font-size: var(--pcFontSize17);
    line-height: 1.41;
    background: var(--planCleanColor);
}
.secPlanConcept .boxContents .note{
    font-size: var(--pcFontSize12);
    letter-spacing: 0.04em;
    margin-top: 4rem;
    line-height: 1.833;
}
.secPlanConcept .boxContents .linkBubble{
    text-decoration: underline;
}
.secPlanConcept .boxContents.boxConvenient .note{
    /* white-space: nowrap; */
    margin-top: 6rem;
}
.secPlanConcept .boxBubble{
    margin-top: 3rem;
    position: relative;
    margin-bottom: 4.5rem;
}
.secPlanConcept .boxBubble .listBubble{
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}
.secPlanConcept .boxBubble .itemList{
    width: 14rem;
    height: 4rem;
    border-radius: 2rem;
    border: 0.1rem solid var(--planCleanColor);
    background: var(--whiteColor);
    color: var(--planCleanColor);
    font-size: var(--pcFontSize16);
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.secPlanConcept .boxBubble .titBubble{
    font-size: var(--pcFontSize24);
    line-height: 1.6;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--planCleanColor);
}
.secPlanConcept .boxBubble .imgBubble{
    position: absolute;
    top: 7rem;
    right: 0;
    width: 16rem;
    height: 17.1rem;
}
@media only screen and (max-width:1215px){
    .secPlanConcept{
        padding: 4.5rem 0 0;
    }
    .secPlanConcept::before{
        display: none;
    }
    .secPlanConcept::after{
        display: none;
    }
    .secPlanConcept .boxWrap{
        flex-direction: column;
        gap: 1rem 0;
        margin-bottom: 10rem;
    }
    .secPlanConcept .txtDetail{
        margin-bottom: 4.5rem;
    }
    .secPlanConcept .img{
        text-align: center;
    }
    .secPlanConcept .imgMap{
        text-align: center;
    }
    .secPlanConcept .imgMap .note{
        font-size: var(--spFontSize10);
        letter-spacing: 0;
        line-height: 1.6;
        margin-top: 0.7rem;
    }
    .secPlanConcept .boxWrap .tit {
        font-size: var(--spFontSize18);
        line-height: 1.56;
        letter-spacing: 0;
        margin-bottom: 2rem;
    }
    .secPlanConcept .boxRight {
        width: 100%;
        display: contents;
    }
    .secPlanConcept .imgFloor02 {
        margin-top: 1rem;
        order: 4;
    }
    .secPlanConcept .imgFloor02 .note {
        font-size: var(--spFontSize11);
        letter-spacing: 0;
        line-height: 1.55;
        margin-top: 1rem;
    }
    .secPlanConcept .imgStaff {
        margin-top: 2rem;
        order: 3;
    }
    .secPlanConcept .imgPlanFamily {
        width: 16rem;
        margin: 0;
    }
    .secPlanConcept .boxContents .boxTit {
        font-size: var(--spFontSize14);
        letter-spacing: 0;
        padding: 0.9rem 1.2rem;
        background: linear-gradient(to right, var(--planBorderColor) 0%, var(--planBorderColor) 80%, var(--planTitGrad) 100%);
    }
    .secPlanConcept .boxContents .boxImg {
        width: 10rem;
    }
    .secPlanConcept .boxContents .titContents {
        font-size: var(--spFontSize14);
        letter-spacing: 0;
        line-height: 1;
    }
    .secPlanConcept .titContents .titSub {
        font-size: var(--spFontSize12);
        letter-spacing: 0;
    }
    .secPlanConcept .boxContents .txtContents {
        font-size: var(--spFontSize12);
        letter-spacing: 0;
        margin-top: 0.9rem;
        line-height: 1.667;
    }
    .secPlanConcept .boxContents.boxConvenient {
        margin-top: 3rem;
        order: 7;
    }
    .secPlanConcept .boxFloor {
        margin-top: 1rem;
        order: 2;
    }
    .secPlanConcept .boxContents .note {
        font-size: var(--spFontSize11);
        letter-spacing: 0;
        margin-top: 2rem;
        line-height: 1.545;
    }
    .secPlanConcept .boxLeft {
        width: 100%;
        display: contents;
    }
    .secPlanConcept .boxRight .boxTxt{
        order: 1;
    }
    .secPlanConcept .boxContents .boxContents .boxTxt{
        order: unset;
    }
    .secPlanConcept .boxContents .contentsFlex {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
    .secPlanConcept .boxContents.boxClean {
        margin-top: 2.8rem;
        position: relative;
        order: 5;
    }
    .secPlanConcept .boxBubble {
        margin-top: 2.2rem;
        margin-bottom: 3rem;
    }
    .secPlanConcept .boxContents.boxFree {
        margin-top: 4rem;
        order: 6;
    }
    .secPlanConcept .boxContents .iconAll {
        width: 7rem;
        height: 7rem;
        right: 0;
        top: -1.5rem;
        font-size: var(--spFontSize13);
        line-height: 1.41;
    }
    .secPlanConcept .boxBubble .listBubble {
        gap: 0.5rem;
        max-width: 16.5rem;
        flex-wrap: wrap;
        margin-bottom: 1.5;
    }
    .secPlanConcept .boxBubble .itemList {
        width: 8rem;
        height: 3rem;
        border-radius: 1.5rem;
        font-size: var(--spFontSize12);
        letter-spacing: 0;
    }
    .secPlanConcept .boxBubble .imgBubble {
        position: absolute;
        top: 3rem;
        right: 0;
        width: 11.6rem;
        height: 12.4rem;
    }
    .secPlanConcept .boxBubble .titBubble {
        font-size: var(--spFontSize18);
        line-height: 1.556;
        letter-spacing: 0;
        margin-bottom: 1rem;
        font-weight: 600;
        color: var(--planCleanColor);
    }
    .secPlanConcept .boxContents.boxClean .boxImg {
        width: 10rem;
    }
    .secPlanConcept .boxContents.boxClean .titContents {
        margin-top: 0;
        margin-bottom: 1rem;
        line-height: 1;
    }
    .secPlanConcept .imgFloor .note {
        font-size: var(--spFontSize11);
        letter-spacing: 0;
        margin-top: 3rem;
        line-height: 1.545;
        text-align: left;
    }
    .secPlanConcept .boxFloor .boxTxt {
        padding-bottom: 0rem;
        margin-bottom: 3rem;
    }
    .secPlanConcept .imgFloor {
        width: 100%;
    }
    .secPlanConcept .imgFloor img{
        width: 89.553%;
        margin: 0 0 0 auto;
    }
    .secPlanConcept .boxContents.boxConvenient .note{
        margin-top: 3rem;
    }
}

@media only screen and (max-width:370px){
    .secPlanConcept .boxBubble .imgBubble {
        top: 1rem;
    }
    .secPlanConcept .boxContents .contentsFlex {
        gap: 2rem;
    }
}