@charset "UTF-8";
/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px),print {
#technic .main-ttl-wrap {
    margin-bottom: 0;
}
#technic .seo_bread_list {padding: 16px 0;}

/* mv
-------------------------------------*/
.mv {
    position: relative;
    margin: 0 0 79px;
    background: #EDF0E7;
}
.mv::before {
    position: absolute;
    content: "";
    width: 91.6666%;
    height: 64.2%;
    border-radius: 0px 100px 100px 0px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
    top: 116px;
    left: 0;
    pointer-events: none;
}
.mv .inner {
    width: min(95%, 1200px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 46.55% 44.0833%;
    padding: 134px 0 77px;
    gap: 113px;
}
.mv .txt-box {
    position: relative;
}
.mv .txt-box::before {
    position: absolute;
    content: "";
    background: url(../images/page-common/mv-deco.png)no-repeat;
    background-size: contain;
    width: 162px;
    height: 144px;
    top: -118px;
    right: -42px;
}
.mv .enttl {
    font-size: 22px;
    letter-spacing: 0;
    color: #3b8461;
    margin-bottom: 27px;
}
.mv h2 {
    font-weight: 500;
    font-size: 36px;
    letter-spacing: 0.05em;
    line-height: 1.027777;
    margin-bottom: 29px;
}
.mv .txt {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 2.285714;
}
.mv .photo {
    position: relative;
    top: -121px;
}

/* sec共通
-------------------------------------*/
.sec {
    position: relative;
    margin-bottom: 57px;
}
.sec::before {
    position: absolute;
    content: "";
    background: #F6F6F6;
    width: 74.4791%;
    bottom: 0;
    pointer-events: none;
}
.sec .inner {
    width: min(95%, 1280px);
    margin-inline: auto;
    position: relative;
    padding-bottom: 50px;
}
.sec .ttl-box {
    position: relative;
    width: min(95%, 1070px);
    margin-left: auto;
    padding: 33px 0 0;
}
.sec .num {
    font-size: 42px;
    letter-spacing: 0;
    color: #3B8461;
    text-align: right;
    position: relative;
    top: 22px;
    right: 91px;
}
.sec h2 {
    font-weight: 500;
    font-size: 32px;
    letter-spacing: 0.05em;
    line-height: 1.5;
    color: #fff;
    text-align: right;
    background: #3B8461;
    padding: 9px 0;
    margin-right: 40px;
}
.sec h2 span {
    padding: 0 100px 0 0;
}
.sec .inBox {
    display: grid;
    grid-template-columns: 46.09375% 40.625%;
    align-items: start;
    gap: 80px;
}
.sec .photo-box {
    position: relative;
    top: -104px;
    left: 0;
    margin-bottom: -104px;
}
.sec .photo01 {
    margin-bottom: 30px;
}
.sec .txt-box {padding: 56px 0 0;}
.sec h3 {
    font-weight: 500;
    font-size: 22px;
    letter-spacing: 0.05em;
    line-height: 1.9090;
    margin-bottom: 40px;
}
.sec .txt {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2;
    margin-bottom: 32px;
}
.sec .txt:nth-last-of-type(1) {
    margin-bottom: 0;
}

/* sec01
-------------------------------------*/
.sec01::before {
    right: 0;
    height: 618px;
}
.sec01 .photo02 {text-align: center;position: relative;left: -23px;}

/* sec02
-------------------------------------*/
.sec02::before {
    left: 0;
    height: 542px;
}
.sec02 .inner {
    padding-bottom: 28px;
}
.sec02 .inner::before {
    position: absolute;
    content: "";
    background: url(../images/technic/leaf.png)no-repeat;
    background-size: contain;
    width: 71px;
    height: 50px;
    top: -16px;
    left: -160px;
}
.sec02 .inBox {
    grid-template-columns: 58.1% 37.890625%;
    gap: 51px;
}
.sec02 .ttl-box {margin-right: auto;margin-left: 0;}
.sec02 .txt-box {padding: 56px 0 0 90px;}
.sec02 .num {right: 0;left: 90px;text-align: left;}
.sec02 h2 {margin-right: 0;margin-left: 40px;text-align: left;}
.sec02 h2 span {
  padding: 0 0 0 50px;
}
.sec02 h3 {
    margin-bottom: 39px;
}
.sec02 .txt {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 2.285714;
    width: min(95%, 570px);
    margin-bottom: 28px;
}
.sec02 .photo01 {margin-bottom: 21px;}
.sec02 .photo02 {
    position: relative;
    right: 73px;
}

/* sec03
-------------------------------------*/
.sec03 {
    margin-bottom: 140px;
}
.sec03::before {
    right: 0;
    height: 488px;
    bottom: 38px;
}
.sec03 .inner {
    padding-bottom: 0;
}
.sec03 h2 span {padding: 0 234px 0 0;}
.sec03 h3 {
    margin-bottom: 37px;
}
.sec03 .txt {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 2.285714;
    margin-bottom: 28px;
}
.sec03 .photo02 {text-align: center;position: relative;left: 96px;}

/* bottom-sec
-------------------------------------*/
.bottom-sec {
    background: #FAFCF5;
}
.bottom-sec .inner{
    width: min(95%, 1200px);
    margin-inline: auto;
    padding: 140px 0 160px;
}
.bottom-sec h2 {
    margin-bottom: 80px;
    text-align: center;
}
.bottom-sec .photo {
    text-align: center;
}
.bottom-sec .photo img {
    width: 100%;
    height: auto;
}

/* bnr-box
-------------------------------------*/
.bnr-box {
    background: #F6F6F6;
    margin-bottom: -125px;
}
.bnr-box .inner {
    width: min(95%, 1100px);
    margin-inline: auto;
    position: relative;
    padding: 160px 0 284px;
}
.bnr-box .list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
} 
.bnr-box .list li img {
    margin-bottom: 11px;
}
.bnr-box .list li .txt {
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 1.7142857;
    text-align: center;
}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1600px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1600px) {
/* mv
-------------------------------------*/
.mv {
    margin: 0 0 5.188vw;
}
.mv::before {
    border-radius: 0px 6.25vw 6.25vw 0px;
    top: 7.25vw;
}
.mv .inner {
width: 75vw;
grid-template-columns: 49.55% 44.0833%;
padding: 8.375vw 0 4.813vw;
gap: 5.062vw;
}
.mv .txt-box::before {
    width: 10.125vw;
    height: 9vw;
    top: -7.375vw;
    right: -2.625vw;
}
.mv .enttl {
    font-size: 1.375vw;
    margin-bottom: 1.688vw;
}
.mv h2 {
    font-size: 2.25vw;
    margin-bottom: 1.812vw;
}
.mv .txt {
    font-size: clamp(0.688rem, 0.514rem + 0.36vw, 0.875rem);
}
.mv .photo {
    top: -7.562vw;
}
.mv .photo img {
    width: 100%;
    height: auto;
}

}


/* ========================================
@media screen and (min-width:768px) and (max-width:1440px)
======================================== */
@media screen and (min-width:768px) and (max-width:1440px) {
.mv .inner {
    width: 89vw;
    gap: 3vw;
}
.mv .txt-box::before {
    top: -8.25vw;
}
.mv .photo {
    top: -8.4vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1100px)
======================================== */
@media screen and (min-width:768px) and (max-width:1100px) {
.mv .inner {
    padding: 4.545vw 0 12.636vw;
}
.mv .txt {
    font-size: clamp(0.625rem, 0.394rem + 0.48vw, 0.875rem);
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1350px)
======================================== */
@media screen and (min-width:768px) and (max-width:1350px) {
/* sec共通
-------------------------------------*/
.sec h3 {
    font-size: clamp(1.125rem, 0.795rem + 0.69vw, 1.375rem);
}
.sec .inBox .photo01 img {
    width: 100%;
    height: auto;
}
.sec .txt {
    font-size: clamp(0.625rem, 0.295rem + 0.69vw, 0.875rem);
}

/* sec02
-------------------------------------*/
.sec02 .inBox {
    grid-template-columns: 61% 34.890625%;
}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1280px)
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
/* sec共通
-------------------------------------*/
.sec {
    margin-bottom: 4.453vw;
}
.sec .inner {
    padding-bottom: 3.906vw;
}
.sec .ttl-box {
    width: 83.594vw;
    padding: 2.578vw 0 0;
}
.sec .num {
    font-size: 3.281vw;
    top: 1.719vw;
    right: 7.109vw;
}
.sec h2 {
    font-size: 2.5vw;
    padding: 0.703vw 0;
    margin-right: 3.125vw;
}
.sec h2 span {
    padding: 0 7.813vw 0 0;
}
.sec .inBox {
    gap: 6.25vw;
}
.sec .photo-box {
    top: -8.125vw;
    left: 0;
    margin-bottom: -8.125vw;
}
.sec .photo01 {
    margin-bottom: 2.344vw;
}
.sec .txt-box {padding: 4.375vw 0 0;}
.sec h3 {
    margin-bottom: 3.125vw;
}
.sec .txt {
    margin-bottom: 2.5vw;
}

/* sec01
-------------------------------------*/
.sec01::before {
    height: 47.281vw;
}
.sec01 .photo02 {left: -1.797vw;}
.sec01 .photo02 img {width: 28.516vw;}


/* sec02
-------------------------------------*/
.sec02::before {
    height: 39.344vw;
}
.sec02 .inner {
    padding-bottom: 2.188vw;
}
.sec02 .inner::before {
    width: 5.547vw;
    height: 3.906vw;
    top: -1.25vw;
    left: -12.5vw;
}
.sec02 .inBox {
    gap: 3.984vw;
}
.sec02 .txt-box {padding: 4.375vw 0 0 7.031vw;}
.sec02 .num {right: 0;left: 7.031vw;text-align: left;}
.sec02 h2 {margin-right: 0;margin-left: 3.125vw;text-align: left;}
.sec02 h2 span {
  padding: 0 0 0 3.906vw;
}
.sec02 h3 {
    margin-bottom: 3.047vw;
}
.sec02 .txt {
    margin-bottom: 2.188vw;
}
.sec02 .photo01 {margin-bottom: 1.641vw;}
.sec02 .photo02 {
    right: 5.703vw;
}
.sec02 .photo02 img {
    width: 23.047vw;
}

/* sec03
-------------------------------------*/
.sec03 {
    margin-bottom: 10.938vw;
}
.sec03::before {
    height: 38.125vw;
    bottom: 4.969vw;
}
.sec03 h2 span {padding: 0 18.281vw 0 0;}
.sec03 h3 {
    margin-bottom: 2.891vw;
}
.sec03 .txt {
    margin-bottom: 2.188vw;
}
.sec03 .photo02 {left: 7.5vw;}
.sec03 .photo02 img {
    width: 23.047vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1100px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1100px) {
.sec h3 {
    font-size: clamp(0.875rem, 0.297rem + 1.2vw, 1.125rem);
}
.sec02 .inBox {
    grid-template-columns: 65% 30.890625%;
}
.sec03::before {
    height: 45.545vw;
    bottom: 2.454vw;
}
}

@media screen and (min-width:768px) and (max-width:1600px) {
.sec02 .inner::before {
    width: 4.438vw;
    height: 3.125vw;
    top: -1vw;
    left: 0;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1100px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1100px) {
.bottom-sec h2 img {
    width: 91.545vw;
    height: auto;
}
}


/* ========================================
@media screen and (min-width:768px) and (max-width:1140px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1140px) {
/* bnr-box
-------------------------------------*/
.bnr-box {
    margin-bottom: -10.965vw;
}
.bnr-box .inner {
    padding: 14.035vw 0 24.912vw;
}
.bnr-box .list {
    gap: 3.509vw;
} 
.bnr-box .list li img {
    margin-bottom: 0.965vw;
    width: 100%;
    height: auto;
}
.bnr-box .list li .txt {
    font-size: clamp(0.688rem, 0.3rem + 0.81vw, 0.875rem);
}

}


/* ========================================
@media screen and (max-width: 767px) 
======================================== */
@media screen and (max-width: 767px) {
#technic .main-ttl-wrap {
    margin-bottom: 0;
}
.section-wrap {
    background: #EEF0E7;
    padding-bottom: 7vw;
    padding-top: 10vw;
}

/* mv
-------------------------------------*/
.mv {
    position: relative;
    background: #EDF0E7;
}
.mv::before {
    position: absolute;
    content: "";
    width: 97.10vw;
    height: 173.43vw;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
    border-radius: 0 9.66vw 9.66vw 0;
    top: 10vw;
    left: 0;
    pointer-events: none;
}
.mv .inner {
    display: grid;
    position: relative;
    padding: 23.5vw 8.94vw 25vw;
    gap: 7.7vw;
}
.mv .inner::before {
    position: absolute;
    content: "";
    background: url(../images/page-common/mv-deco_sp.png)no-repeat;
    background-size: contain;
    width: 28.02vw;
    height: 24.88vw;
    top: 4.5vw;
    left: 5.5vw;
}
.mv .enttl {
    font-size:5.797vw;
    letter-spacing: 0;
    color: #3b8461;
    text-align: center;
    margin-bottom: 8.5vw;
}
.mv h2 {
    font-weight: 500;
    font-size:5.797vw;
    letter-spacing: 0.05em;
    line-height: 1.027777;
    text-align: center;
    margin-bottom: 8.4vw;
}
.mv .txt {
    font-weight: 500;
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 2;
    margin-bottom: 4vw;
}
.mv .txt:nth-last-of-type(1) {
    margin-bottom: 0;
}

/* sec共通
-------------------------------------*/
.sec {
    position: relative;
    margin-bottom: 0.5vw;
    padding: 25vw 0 0;
}
.sec .inner {
    background: #F6F6F6;
    padding-bottom: 8vw;
}
.sec .ttl-box {
    position: relative;
    width: 89.37vw;
    margin-inline: auto;
    top: -21vw;
    margin-bottom: -16.5vw;
}
.sec .num {
    font-size:8.213vw;
    letter-spacing: 0;
    color: #3B8461;
    text-align: center;
    position: relative;
    top: 4.2vw;
}
.sec h2 {
    font-weight: 500;
    font-size:5.314vw;
    letter-spacing: 0.05em;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    background: #3B8461;
    padding: 1.35vw 0;
}
.sec .inBox {
    display: grid;
    width: 82.13vw;
    margin-inline: auto;
}
.sec .photo-box {display: contents;}
.sec .photo01 {order: 1;margin-bottom: 4.5vw;}
.sec .photo02 {order: 6;margin-bottom: 6.5vw;}
.sec .txt-box {
    display: contents;
}
.sec h3 {
    font-weight: 500;
    font-size:4.348vw;
    letter-spacing: 0.05em;
    line-height: 1.7777;
    margin-bottom: 5.5vw;
    order: 2;
}
.sec .txt {
    font-weight: 500;
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 2;
    margin-bottom: 4vw;
}
.sec .txt:nth-of-type(1) {
    order: 3;
}
.sec .txt:nth-of-type(2) {
    order: 4;
}
.sec .txt:nth-of-type(3) {
    order: 5;
    margin-bottom: 6vw;
}
.sec .txt:nth-of-type(4) {
    order: 6;
}
.sec .txt:nth-of-type(5) {
    order: 8;
}
.sec .txt:nth-last-of-type(1) {
    margin-bottom: 0;
}

/* .sec02
-------------------------------------*/
.sec02 .inner::before {
    position: absolute;
    content: "";
    background: url(../images/technic/leaf_sp.png)no-repeat;
    background-size: contain;
    width: 10.145vw;
    height: 7.4vw;
    top: -3.16vw;
    right: 9vw;
}
.sec02 .txt:nth-of-type(3) {
    margin-bottom: 4vw;
}
.sec02 .txt:nth-of-type(4) {margin-bottom: 6vw;}

/* .sec03
-------------------------------------*/
.sec03 {
    margin-bottom: 10vw;
}
.sec03 .txt:nth-of-type(2) {margin-bottom: 6.5vw;}
.sec03 .photo02 {order: 5;}

/* bottom-sec
-------------------------------------*/
.bottom-sec {
    background: #FAFCF5;
}
.bottom-sec .inner{
    width: 89.37vw;
    margin-inline: auto;
    padding: 16.5vw 0 15vw;
}
.bottom-sec h2 {
    margin-bottom: 8vw;
    text-align: center;
    padding-right: 3vw;
}
.bottom-sec .photo {
    text-align: center;
}
.bottom-sec .photo img {
    width: 100%;
    height: auto;
}


/* bnr-box
-------------------------------------*/
.bnr-box {
    position: relative;
    background: #F6F6F6;
    margin-bottom: -15vw;
}
.bnr-box .inner {
    width: 82.13vw;
    margin-inline: auto;
    position: relative;
    padding: 28.7vw 0 39vw;
}
.bnr-box .list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    text-align: center;
    gap: 6.25vw;
} 
.bnr-box .list li img {
    margin-bottom: 3.38vw;
}
.bnr-box .list li .txt {
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 1.7142857;
    text-align: center;
}

}