@charset "utf-8";
.nav_list li.nav-life_simulation{
    background: #23a387;
    color: #fff;
}
.foot_nav_list li.nav-life_simulation{
    background: rgba(255, 255, 255, 0.85);
}

.foot_nav_list li.nav-life_simulation a{
    color: #000;
}


.sec_life_subttl {
    font-size: 18px;
}
.con_imgbox {
    margin: 60px 0 60px;
}
.pos_ab {
    position: absolute;
    right: 0;
    top: 50%;
    /* max-width: 550px;
    width: 55%; */
    max-width: 580px;
    width: 100%;
}


/* onoff */
.onoff_ttl_box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* margin-bottom: -18px; */
    flex-wrap: wrap;
}
.onoff_ttl01 {
    font-size: 20px;
    line-height: 2;
    font-weight: 300;
    letter-spacing: 0.15em;

}
.on_ttl02 {
    color: #52a5dc;
    font-size: 140px;
}
.pos_ab_on {
    position: absolute;
    bottom: -2px;
    z-index: 1;
}
.pos_ab01_01 {
    position: absolute;
}
.pos_ab01_02 {
    position: absolute;
}



/* on */
.on_line {
    width: 100%;
    max-width: 1000px;
    /* position: relative; */
    height: 1px;
    background: #52a5dc;
    display: none;
}
.bg_bule {
    background-color: #e3eef9;
    padding: 80px 0;
}
.onoff_z1 {
    z-index: 1;
    transition-delay: 0.5s;
}
.on01_01{
    width: 20%;
    position: absolute;
    left: 3%;
    top: 0;
}
.on01_02 {
    width: 33.5%;
    position: absolute;
    top: 7.3%;
    left: 2%;
}
.yaji01 {
    width: 28%;
    position: absolute;
    left: 35.3%;
    top: 0;
}

.on02_01{
    width: 35.2%;
    position: absolute;
    right: 0;
    top: 1%;
}
.on02_02 {
    width: 31.4%;
    position: absolute;
    top: 8.2%;
    right: 0;
}
.yaji02 {
    width: 23%;
    position: absolute;
    left: 41.3%;
    top: 18.8%;
}

.on03_01{
    width: 22%;
    position: absolute;
    left: 38%;
    top: 29.5%;
}
.on03_02 {
    width: 43%;
    position: absolute;
    top: 31.8%;
    left: 0;
}
.on03_03 {
    width: 16%;
    position: absolute;
    top: 42.5%;
    left: 46%;
}
.yaji03 {
    width: 34%;
    position: absolute;
    top: 40%;
    left: 39%;
}

.on04_01{
    width: 27%;
    position: absolute;
    right: 6.2%;
    top: 34.6%;
}
.on04_02 {
    width: 24.3%;
    position: absolute;
    top: 29.8%;
    right: 0;
}
.yaji04 {
    width: 31.3%;
    position: absolute;
    right: 14.9%;
    top: 55%;
}

.on05_01{
    width: 38.8%;
    position: absolute;
    right: 2.6%;
    top: 66.7%;
}
.on05_02 {
    width: 37%;
    position: absolute;
    top: 75%;
    right: 5%;
}
.yaji05 {
    width: 30.2%;
    position: absolute;
    left: 24.9%;
    top: 74.1%;
}

.on06_01{
    width: 24.1%;
    position: absolute;
    left: 22.3%;
    top: 78.8%;
}
.on06_02 {
    width: 24.2%;
    position: absolute;
    top: 71.6%;
    left: 0;
}
.db768 {
    display: none;
}



/* off */
.off_ttl02 {
    color: #41b25d;
    font-size: 140px;
}
.off_line {
    width: 100%;
    max-width: 1000px;
    /* position: relative; */
    height: 1px;
    background: #41b25d;
    display: none;
}
.bg_green {
    background-color: #e3f1e0;
    padding: 80px 0;
}
.pt40 {
    padding-top: 40px;
}
.db500 {
    display: none;
}

.off01_01{
    width: 19.45%;
    position: absolute;
    right: 11.7%;
    top: 0;
}
.off01_02 {
    width: 26%;
    position: absolute;
    top: 6.1%;
    right: 5.7%;
}
.off_yaji01 {
    width: 41.55%;
    position: absolute;
    left: 25.3%;
    top: 0.6%;
}

.off02_01{
    width: 30%;
    position: absolute;
    right: 42.3%;
    top: 77px;
}
.off02_02 {
    width: 33.4%;
    position: absolute;
    top: 4%;
    left: 0;
}
.off_yaji02_01 {
width: 1.4%;
    position: absolute;
    left: 21%;
    top: 26.8%;
}

.off02_03{
    width: 26.5%;
    position: absolute;
    left: 2.9%;
    top: 30.4%;
}
.off02_04 {
    width: 21.5%;
    position: absolute;
    top: 44.3%;
    left: 0;
}
.off_yaji02_02 {
    width: 6.6%;
    position: absolute;
    left: 29.3%;
    top: 35.9%;
}
.off02_05{
    width: 26.5%;
    position: absolute;
    left: 36.8%;
    top: 30.4%;
}
.off02_06 {
    width: 21.5%;
    position: absolute;
    top: 44.3%;
    left: 34%;
}
.off_yaji02_03 {
    width: 6.75%;
    position: absolute;
    right: 29.6%;
    top: 36.4%;
}
.off02_07{
    width: 26.5%;
    position: absolute;
    left: 70.5%;
    top: 30.4%;
}
.off02_08 {
    width: 26%;
    position: absolute;
    top: 44.3%;
    right: 9.3%;
}
.off_yaji02_04 {
    width: 29.25%;
    position: absolute;
    right: 8.3%;
    top: 49.5%;
}
.off02_09{
    width: 23.4%;
    position: absolute;
    left: 38.2%;
    top: 52.5%;
}

.off03_01 {
    width: 21.8%;
    position: absolute;
    top: 65.2%;
    left: 39%;
}
.off03_02 {
    width: 48.5%;
    position: absolute;
    right: 0;
    top: 71.7%;
}
.off_yaji03{
    width: 31.2%;
    position: absolute;
    left: 6.9%;
    top: 59%;
}

.off04_01 {
    width: 17.15%;
    position: absolute;
    top: 59.3%;
    left: 0;
}
.off04_02 {
    width: 34.9%;
    position: absolute;
    left: 2.9%;
    top: 75%;
}




@media screen and (max-width: 1000px) {
.sec_life_subttl {
    font-size: 16px;
}
.onoff_ttl01 {
    font-size: 18px;
}
.on_ttl02 {
    font-size: 100px;
}
.off_ttl02 {
    font-size: 100px;
}
}


@media screen and (max-width: 750px) {

.onoff_ttl01 {
    width: 100%;
    text-align: center;
}
.bg_bule {
    padding: 60px 0;
}

/* on */
.on_area {
    max-width: 450px;
    margin: 0 auto;
}

.on01_01_sp{
    width: 56%;
    position: absolute;
    left: 1.4%;
    top: 0;
}
.on01_02_sp {
    width: 79%;
    position: absolute;
    top: 3.5%;
    left: 2%;
}
.yaji01_sp {
    width: 54%;
    position: absolute;
    left: 5.8%;
    top: 8.3%;
}

.on02_01_sp{
    width: 100.4%;
    position: absolute;
    right: 0px;
    top: 15.4%;
}
.on02_02_sp {
    width: 51%;
    position: absolute;
    top: 19%;
    right: 5.1%;
}
.yaji02_sp {
    width: 46.6%;
    position: absolute;
    left: 3.8%;
    top: 22%;
}

.on03_01_sp{
    width: 64.5%;
    position: absolute;
    left: 0;
    top: 37.75%;
}
.on03_02_sp {
    width: 94.8%;
    position: absolute;
    top: 27.9%;
    left: 0;
}
.on03_03_sp {
    width: 35.8%;
    position: absolute;
    top: 42.4%;
    right: 4.6%;
}
.yaji03_sp {
    width: 27%;
    position: absolute;
    top: 43%;
    left: 8.8%;
    }

.on04_01_sp{
    width: 78%;
    position: absolute;
    left: 6.5%;
    top: 48.7%;
}
.on04_02_sp {
    width: 66.8%;
    position: absolute;
    top: 48.4%;
    right: 0;
}
.yaji04_sp {
    width: 68%;
    position: absolute;
    left: 8.4%;
    top: 59.2%;
}

.on05_01_sp{
    width: 94.8%;
    position: absolute;
    right: 0;
    top: 66.7%;
}
.on05_02_sp {
    width: 91.5%;
    position: absolute;
    top: 71%;
    left: 0;
}
.yaji05_sp {
    width: 70.2%;
    position: absolute;
    right: 15.3%;
    top: 80.9%;
}

.on06_01_sp{
    width: 69.5%;
    position: absolute;
    right: 0;
    top: 91.4%;
}
.on06_02_sp {
    width: 52.9%;
    position: absolute;
    top: 87.8%;
    right: 9.3%;
}



/* off */
.off_area {
    max-width: 450px;
    margin: 0 auto;
}
.bg_green {
    padding: 60px 0;
}
.off01_01_sp{
    width: 55.95%;
    position: absolute;
    right: 13.7%;
    top: 0;
}
.off01_02_sp {
    width: 64.7%;
    position: absolute;
    top: 2.9%;
    right: 7%;
}
.off_yaji01_sp {
    width: 91.3%;
    position: absolute;
    top: 11.8%;
    right: 0;
}

.off02_01_sp{
    width: 91.3%;
    position: absolute;
    right: 0;
    top: 27%;
}
.off02_02_sp {
    width: 93%;
    position: absolute;
    top: 17.7%;
    right: 0;
}
.off_yaji02_01_sp {
    width: 2.9%;
    position: absolute;
    top: 31.7%;
    left: 13.6%;
}
.off02_03_sp{
    width: 54.7%;
    position: absolute;
    left: 8%;
    top: 34.65%;
}
.off02_04_sp {
    width: 61.6%;
    position: absolute;
    left: 0;
    top: 39.59%;
}
.off_yaji02_02_sp {
    width: 16.1%;
    position: absolute;
    right: 17.8%;
    top: 37.7%;
}
.off02_05_sp{
    width: 54.7%;
    position: absolute;
    right: 6.7%;
    top: 42.86%;
}
.off02_06_sp {
    width: 62.15%;
    position: absolute;
    top: 47.8%;
    left: 30.5%;
}
.off_yaji02_03_sp {
    width: 16.45%;
    position: absolute;
    left: 13%;
    top: 46.5%;
}
.off02_07_sp{
    width: 54.7%;
    position: absolute;
    left: 16.4%;
    top: 51.4%;
}
.off02_08_sp {
    width: 74.5%;
    position: absolute;
    top: 56.3%;
    left: 18.5%;
}
.off_yaji02_04_sp {
    width: 64%;
    position: absolute;
    right: 6.6%;
    top: 58.2%;
}
.off02_09_sp{
    width: 43.4%;
    position: absolute;
    left: 7%;
    top: 65.15%;
}

.off03_01_sp {
    width: 92.3%;
    position: absolute;
    top: 68.7%;
    right: 0;
}
.off03_02_sp {
    width: 93%;
    position: absolute;
    left: 0;
    top: 72%;
}
.off_yaji03_sp{
    width: 56.72%;
    position: absolute;
    left: 0;
    bottom: 11.8%;
}

.off04_01_sp {
    width: 49.45%;
    position: absolute;
    bottom: 7.65%;
    right: 0;
}
.off04_02_sp {
    width: 75.4%;
    position: absolute;
    right: 7%;
    bottom: 0;
}
}


@media screen and (max-width: 750px) {
}

@media screen and (max-width: 650px) {
.pos_ab {
    max-width: 380px;
    width: 90%;
    right: unset;
    left: 50%;
    transform: translateX(-50%);
    top: 40%;
}
.sec_life_subttl {
    font-size: 13px;
    letter-spacing: 0;
}
.on_ttl02 {
    font-size: 80px;
}
.off_ttl02 {
    font-size: 80px;
}
.onoff_ttl01 {
    font-size: 16px;
}
}

@media screen and (max-width: 500px) {
.db500 {
    display: block;
}
}