@charset "UTF-8";

    /*全体設定*/
    #Container {
        width:100%;
        /*position:relative;*/
        /*z-index:-2;*/
    }
    .PcContainer {
        max-width:1280px;
    }
    /*トップデスクリプション部設定*/
    .ColorBox {
        background:#cde8f9;
        margin:-30px 0 0;
        padding:30px 0 0;
        /*position:relative;
        z-index:-1;*/
        border-bottom:1px solid #000;
    }
    .Desc, 
    .Desc p {
        text-align:center;
        line-height:1.6;
        font-size:2rem;
    }
    .Desc h2 {
        z-index:2;
    }

    .Me3Area, 
    .Me3Area p {
        text-align:center;
        line-height:1.6;
    }
    .Me3Area h3 {
        font-size:3.6rem;
        line-height:1.6;
        text-align:center;
        margin:125px auto 125px;
    }
    /*3つのメリット部設定*/
    .M3Area {
        background:#fff;
        padding:65px 0 130px;
        border-top:1px solid #000;
        border-bottom:1px solid #000;
    }
    .MeritsArea {
        width:100%;
        max-width:960px;
        border:1px solid #000;
        border-radius:10Px;
        background:#fff8ba;
        margin:0 auto 65px;
        padding:calc(60vw / 12.8) calc(45vw / 12.8);
        overflow:hidden;
        position:relative;
        box-shadow:#d3e8f8 0 calc(15vw / 12.8);
    }
    .MeritsArea span {
        width:140px;
        height:45px;
        line-height:45px;
        font-size:2.5rem;
        display:block;
        background:#fff;
        border:1px solid #000;
        border-radius:0 0 10px 10px;
        position:absolute;
        /*top:calc(-30vw / 12.6);*/
        top:-1px;
        left:calc(50% - 55px);
    }
    .MeritsArea p, 
    .MeritsArea p img {
        display:block;
        width:calc(130vw / 12.8);
        max-width:130px;
        height:100%;
        /*margin:45px auto 40px;*/
    }
    .MeritsArea p {
        float:left;
    }
    .MeritsArea dl {
        width:100%;
        max-width:700px;
        text-align:left;
        float:right;
    }
    .MeritsArea dl dt {
        font-size:2.4rem;
        padding:0 0 calc(25vw / 12.8);
        border-bottom:3px dotted #000;
        line-height:1.6;
        margin:0 0 calc(25vw / 12.8);
    }
    .MeritsArea dl dd {
        font-size:2rem;
        line-height:1.6;
    }
    .Me3Area a {
        display:block;
        width:calc(506vw / 12.8);
        max-width:506px;
        height:100%;
        margin:150px auto;
    }
    /*試算エリア*/
    .TrialArea {
        background:#cde8f9;
        position:relative;
        z-index:0;
        padding:130px 0 130px;
        border-top:1px solid #000;
        border-bottom:1px solid #000;
    }
    .TrialArea h2 {
        margin-bottom:100px;
    }
    .TrialArea h2::after {
        max-width:65%
    }
    .T-Box {
        width:100%;
        max-width:960px;
        background:#fff;
        border:1px solid #000;
        border-radius:10px;
        box-shadow:0 calc(15vw / 12.8) #fff8ba;
        padding:calc(35vw / 12.8);
        margin:0 auto 75px;
    }
    .TrialArea a {
        display:block;
        width:100%;
        max-width:calc(506vw / 12.8);
        margin:120px auto 0;
    }

    /*StructureArea設定*/
    .StructureArea {
        background:#b1ce77;
        padding:180px 0 100px;
        border-bottom:1px solid #000;
    }
    .CHSMessage {
        width:100%;
        max-width:1280px;
        height:calc(355vw / 12.8);
        background:url("../images/img_CHSMessageBox@2x.png") no-repeat;
        background-size:contain;
        background-position:center center;
    }
    .CHSMessage h3 {
        font-size:2.3vw;
        text-align: center;
        line-height:calc(68vw / 12.8);
        padding-top:8px;
    }
    .CHSMessage p {
        font-size:1.2vw;
        line-height:1.8;
        text-align:center;
        padding-top:calc(60vw / 12.8);
    }

    /*4ステップ設定*/
    .FourStepArea {
        width:100%;
        max-width:1280px;
        margin-bottom:180px;
    }
    .FourStepArea p {
        width:100%;
        max-width:795px;
        height:65px;
        background:#cde8f9;
        border:1px solid #959595;
        border-radius:9999px;
        text-align:center;
        font-size:2.1vw;
        margin:140px auto;
        line-height:65px;
    }
    .FourStepArea dl {
        width:100%;
        max-width:960px;
        margin:0 auto;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        margin:0 auto 20px;
    }
    .FourStepArea dl.step-1 {
        width:67.25%;
        height:341px;
        max-height:341px;
        aspect-ratio: 16 / 10;
        background:url("../images/img_FixBoxSp01@2x.png") center center no-repeat;
        background-size:contain;
    }
    .FourStepArea dl.step-2 {
        width:67.25%;
        height:420px;
        max-height:420px;
        aspect-ratio:16 / 10;
        background:url("../images/img_FixBoxSp02@2x.png") center center no-repeat;
        background-size:contain;
    }
    .FourStepArea dl.step-3 {
        width:67.25%;
        height:501px;
        /*max-height:1500px;*/
        aspect-ratio:16 / 10;
        background:url("../images/img_FixBoxSp03@2x.png") center center no-repeat;
        background-size:contain;
    }

    .FourStepArea dl dt {
        width:100%;
        font-size:2.4rem;
        text-align:center;
        margin:0 0 100px;
    }
    .FourStepArea dl.step-1 dt {
        margin:30px 0 80px;
    }
    .FourStepArea dl.step-2 dt {
        margin:40px 0 80px;
    }
    .FourStepArea dl.step-3 dt {
        margin:30px 0 40px;
    }
    .FourStepArea dl.step-3 dd.first {
        margin:0 0 10px;
        /*background:none;*/
    }
    .FourStepArea dl.step-3 dd.second {
        max-width:92%;
        margin-bottom:15px;
    }
    dl.step-3 dd.second ul li {
        margin:15px 0 15px;
    }

    .FourStepArea dl dd {
        font-size:1.7vw;
        text-align:center;
        line-height:1.6;
    }
    .FourStepArea dl dd {
        font-size:2rem;
        margin-left:30px;
    }

    /*サポート部設定*/
    .SupportArea {
        width:100%;
        max-width:1280px;
    }
    .SupportArea p {
        width:100%;
        max-width:960px;
        margin:0 auto 60px;
    }
    .SuppoCheck {
        width:100%;
        max-width:960px;
        border:1px solid #959595;
        border-radius:15px;
        margin:0 auto 100px;
        box-shadow:0 15px #cde8f9;
    }
    .SuppoCheck ul, 
    .SuppoCheck ul li {
        width:100%;
    }
    .SuppoCheck ul {
        margin-bottom:20px;
        padding:60px 20px;
    }
    .SuppoCheck ul li {
        margin-bottom:10px;
        line-height:50px;
        font-size:2.4rem;
    }
    .SuppoCheck ul li img {
        width:calc(60vw / 12.8);
        max-width:60px;
        height:calc(50vw / 12.8);
        max-height:50px;
    }
    .MessageBoxB {
        width:100%;
        max-width:865px;
        border:1px solid #959595;
        border-radius:15px;
        background:#cde8f9;
        margin:0 auto 50px;
        text-align:center;
        padding:50px 50px 40px;
    }
    .MessageBoxB p:first-child {
        font-size:2.4rem;
    }
    .MessageBoxB p:last-child {
        font-size:2rem;
    }
    .SupportArea a {
        width:100%;
        max-width:506px;
        height:auto;
        margin:50px auto 120px;
        display:block;
    }
    /*for SP*/
    @media screen and (min-width:0) and (max-width:960px) {
        .Desc p {
            font-size:1.6rem;
        }
        .Desc h2 {
            font-size:2.8rem;
        }
        .Me3Area h3 {
            font-size:2.2rem;
            padding:0 40px 0;
        }
        .MeritsArea p, .MeritsArea p img {
            width:calc(130vw / 4.8);
            margin-bottom:20px;
        }
        .Me3Area a {
            width:100%;
            max-width:320px;
            margin:30px auto 50px;
        }
        .TrialArea h2 {
            font-size:2rem;
        }
        .TrialArea h2::after {
            width:95%;
            max-width:95%;
        }
        .T-Box {
            padding:calc(35vw /9.6);
        }
        .T-Box a {
            display:block;
        }
        .TrialArea a {
            width:100%;
            max-width:320px;
        }
        .StructureArea {
            width:100%;
            max-width:960px;
            padding:50px 10px;
        }
        .CHSMessage {
            background:none;
            width:100%;
            max-width:960px;
            height:100%;
            padding:0;
        }
        .CHSMessage h3 {
            font-size:2rem;
            background:#fff8ba;
            border:1px solid #959595;
            border-radius:10px 10px 0 0;
            padding:20px 10px;
        }
        .CHSMessage p {
            font-size:1.6rem;
            background:#fff;
            border-left:1px solid #959595;
            border-right:1px solid #959595;
            border-bottom:1px solid #959595;
            padding:30px 20px;
        }
        .FourStepArea p {
            font-size:2rem;
            max-width:320px;
        }
        .FourStepArea dl.step-1, 
        .FourStepArea dl.step-2, 
        .FourStepArea dl.step-3 {
            background:none;
        }
        .FourStepArea dl.step-1 dd, 
        .FourStepArea dl.step-2 dd, 
        .FourStepArea dl.step-3 dd {
            font-size:1.6rem;
        }
        .FourStepArea dl.step-1 dt, 
        .FourStepArea dl.step-2 dt, 
        .FourStepArea dl.step-3 dt {
            margin:0 auto;
            padding:10px 0 20px;
            font-size:2.2rem;
        }
        .FourStepArea dl.step-1, 
        .FourStepArea dl.step-2, 
        .FourStepArea dl.step-3 {
            width:90%;
            max-width:960px;
            height:auto;
            background:#fff8ba;
            border:1px solid #959595;
            border-radius:10px 10px 0 0;
            padding:20px 0 0;
            margin:0 auto 50px;
            box-shadow:0 15px #cde8f9;
        }
        .FourStepArea dl.step-3 {
            max-height:575px;
        }
        .FourStepArea dl.step-1 dd, 
        .FourStepArea dl.step-2 dd, 
        .FourStepArea dl.step-3 dd {
            margin:0;
            width:100%;
            height:100%;
            /*padding:20px 0;*/
        }
        .FourStepArea dl.step-1 dd {
            background:url("../images/img_Step03@2x.png")no-repeat;
            background-size:20% auto;
            background-position:right bottom;
        }
        .FourStepArea dl.step-2 dd {
            background:url("../images/img_Step02@2x.png") no-repeat;
            background-size:20% auto;
            background-position:right bottom;
        }
        .FourStepArea dl.step-3 dd.imgStep3 {
            background:url("../images/img_Step01@2x.png") no-repeat;
            background-size:20% auto;
            background-position:right bottom;
        }
        .FourStepArea dl.step-3 dd.first {
            background-image:none;
            height:auto;
        }
        .FourStepArea dl.step-3 dd.second {
            margin:0;
            height:auto;
        }
        dl.step-3 dd.second ul.txt01 li {
            margin:0 0 30px;
        }
        .SupportArea p {
            max-width:320px;
        }
        .SuppoCheck {
            width:85%;
        }
        .SuppoCheck ul li {
            font-size:1.6rem;
            line-height:15px;
        }
        .MessageBoxB {
            padding:20px 10px;
            margin-bottom:20px;
        }
        .MessageBoxB p:first-child {
            font-size:1.8rem;
        }
        .MessageBoxB p:last-child {
            font-size:1.6rem;
        }
        .SupportArea a {
            width:100%;
            max-width:320px;
            display:block;
        }
    }