@charset "UTF-8";
@charset "UTF-8";
@-webkit-keyframes loop {
0% {
    transform: translateX(100%);
}

to {
    transform: translateX(-100%);
}
}

@keyframes loop {
0% {
    transform: translateX(100%);
}

to {
    transform: translateX(-100%);
}
}

@-webkit-keyframes loop2 {
0% {
    transform: translateX(0);
}

to {
    transform: translateX(-200%);
}
}

@keyframes loop2 {
0% {
    transform: translateX(0);
}

to {
    transform: translateX(-200%);
}
}
/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px),print {
#design .main-ttl-wrap {
    margin-bottom: 0;
}
#design .seo_bread_list {padding: 16px 0;}
.section-wrap {
    background: #EEF0E7;
    padding-bottom: 300px;
}

/* mv
-------------------------------------*/
.mv {
    position: relative;
    margin: 59px 0 2px;
}
.mv::before {
    position: absolute;
    content: "";
    width: 91.6666%;
    height: 155.7%;
    border-radius: 0px 100px 0 0px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
    top: 0;
    left: 0;
    pointer-events: none;
}
.mv .inner {
    width: min(95%, 1200px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 51.5% 44.0833%;
    padding: 71px 0 0;
    gap: 54px;
}
.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: -114px;
    right: 18px;
}
.mv .enttl {
    font-size: 22px;
    letter-spacing: 0;
    color: #3b8461;
    margin-bottom: 31px;
}
.mv h2 {
    margin-bottom: 29px;
}
.mv .txt {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 2.285714;
}
.mv .photo {
    position: relative;
    top: -117px;
}

/* point共通
-------------------------------------*/
.point {
    position: relative;
    margin-bottom: 164px;
}
.point .inner {padding: 154px 0 166px;}
.point .inBox {
    display: grid;
    grid-template-columns: 40.4% 58.65%;
    gap: 15px;
    align-items: start;
}
.point .num {
    font-size: 28px;
    line-height: 1.67857;
    letter-spacing: 0;
    text-align: center;
    color: #e6ff00;
    margin-bottom: 24px;
}
.point h2 {
    text-align: center;
    margin-bottom: 81px;
    position: relative;
    z-index: 3;
}
.point .txt-box {
    padding-left: 151px;
}
.point h3 {
    font-weight: 500;
    font-size: 22px;
    letter-spacing: 0.05em;
    line-height: 1.9090;
    color: #fff;
    margin-bottom: 34px;
}
.point .txt {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 2.285714;
    color: #fff;
    width: min(95%, 405px);
    margin-bottom: 32px;
}
.point .txt:nth-last-of-type(1) {
    margin-bottom: 0;
}
.point .photo-box {
    position: relative;
    top: -125px;
    margin-bottom: -125px;
}
.point .photo01 {
    margin-bottom: 17px;
}
.point .photo02 {position: absolute;bottom: -6px;right: 0;}
.point .photo03 {position: relative;left: 129px;}

/* point01
-------------------------------------*/
.point01 {
    background: url(../images/design/point01-bg.png)no-repeat top center / cover;
}
.point01 .inner {
    width: min(95%, 1502px);
    margin-inline: auto;
}


/* point02
-------------------------------------*/
.point02 {
    margin-bottom: 0;
}
.point02 .inner {
    position: relative;
    padding: 154px 0 61px;
}
.point02 h2 {margin-bottom: 56px;}
.point02 .inBox {
    display: grid;
    grid-template-columns: 43.8541% 1fr;
    gap: 118px;
    align-items: start;
}
.point02 .num {
    color: inherit;
}
.point02 h3 {
    color: inherit;
}
.point02 .txt-box {
    padding: 0;
}
.point02 .txt {
    color: inherit;
    width: 97.5%;
}
.point02 .photo01 {
    position: relative;
    top: -205px;
}
.point02 .inBox02 {
    margin-right: 38px;
    display: grid;
    grid-template-columns: 46% 1fr;
    gap: 85px;
    position: relative;
}
.point02 .inBox02::before {
    position: absolute;
    content: "";
    background: url(../images/design/bird.png)no-repeat;
    background-size: contain;
    width: 229px;
    height: 119px;
    top: -370px;
    left: 34.9%;
}
.point02 .photo02 {
    bottom: auto;
    top: -98px;
}


/* point03
-------------------------------------*/
.point03 {
    background: url(../images/design/point03-bg.png)no-repeat top center / cover;
    margin-top: -300px;
    margin-bottom: 206px;
}
.point03 .inner {
    width: min(95%, 1502px);
    margin-inline: auto;
    padding: 154px 0 201px;
    position: relative;
}
.point03 .inner::before {
    position: absolute;
    content: "";
    background: url(../images/design/leaf01.png)no-repeat;
    background-size: contain;
    width: 71px;
    height: 50px;
    top: -40px;
    left: -19px;
}
.point03 .inBox {
    gap: 107px;
}
.point03 .photo-box {
    position: relative;
    top: -101px;
    margin-bottom: -101px;
}
.point03 .photo01 {
    margin-bottom: 44px;
}
.point03 .photo02 {position: absolute;bottom: -40px;right: 43px;}
.point03 .photo03 {position: relative;left: 98px;}

/* bottom-sec
-------------------------------------*/
.bottom-sec {
    background: url(../images/design/bottom-sec-bg.png)no-repeat top center / contain;
    position: relative;
}
.bottom-sec .inner {
    width: min(95%, 1600px);
    margin-inline: auto;
    padding-bottom: 61px;
    position: relative;
}
.bottom-sec .inner::before {
    position: absolute;
    content: "";
    background: url(../images/design/leaf02.png)no-repeat;
    background-size: contain;
    width: 106px;
    height: 249px;
    top: 165px;
    right: -65px;
}
.bottom-sec h2 {
    position: absolute;
    bottom: 18px;
    right: -10px;
}
.bottom-sec .photo {
    position: relative;
    top: -45px;
}

/* bnr-box
-------------------------------------*/
.bnr-box {
    background: #F6F6F6;
    margin-top: -55px;
    margin-bottom: -140px;
}
.bnr-box .inner {
    width: min(95%, 1100px);
    margin-inline: auto;
    position: relative;
    padding: 246px 0 300px;
}
.bnr-box .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    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:1919px)
======================================== */
@media screen and (min-width:768px) and (max-width:1919px) {
.section-wrap {
    padding-bottom: 15.633vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1600px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1600px) {
/* mv
-------------------------------------*/
.mv {
    margin: 3.688vw 0 0;
}
.mv::before {
    border-radius: 0px 6.25vw 0 0px;
}
.mv .inner {
    width: 75vw;
    padding: 4.5vw 0 0;
    gap: 3.375vw;
}
.mv .txt-box::before {
    width: 10.125vw;
    height: 9vw;
    top: -7.125vw;
    right: 1.125vw;
}
.mv .enttl {
    font-size: 1.375vw;
    margin-bottom: 1.688vw;
}
.mv h2 {
    margin-bottom: 1.812vw;
}
.mv h2 img {
    width: 28.188vw;
}
.mv .txt {
    font-size: clamp(0.75rem, 0.635rem + 0.24vw, 0.875rem);
}
.mv .photo {
    top: -7.312vw;
}
.mv .photo img {
    width: 100%;
    height: auto;
}

}


/* ========================================
@media screen and (min-width:768px) and (max-width:1100px)
======================================== */
@media screen and (min-width:768px) and (max-width:1100px) {
.mv .txt {
    font-size: clamp(0.688rem, 0.543rem + 0.3vw, 0.75rem);
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1919px)
======================================== */
@media screen and (min-width:768px) and (max-width:1919px) {
.point h3 {
    font-size: 1.146vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1540px)
======================================== */
@media screen and (min-width:768px) and (max-width:1540px) {
/* point共通
-------------------------------------*/
.point {
    margin-bottom: 10.649vw;
}
.point .inner {padding: 10vw 0 10.779vw;}
.point .inBox {
    grid-template-columns: 40.4% 58.65%;
    gap: 0.974vw;
}
.point .num {
    font-size: 1.818vw;
    margin-bottom: 1.558vw;
}
.point h2 {
    margin-bottom: 5.26vw;
}
.point h2 img {
    width: 48.701vw;
}
.point .txt-box {
    padding-left: 0.805vw;
}
.point h3 {
    /* font-size: clamp(0.75rem, 0.128rem + 1.3vw, 1.375rem); */
    margin-bottom: 2.208vw;
}
.point .txt {
    font-size: clamp(0.625rem, 0.376rem + 0.52vw, 0.875rem);
    width: 26.299vw;
    margin-bottom: 2.078vw;
    font-size: clamp(0.5rem, 0.127rem + 0.78vw, 0.875rem);
}
.point .photo-box {
    top: -8.117vw;
    margin-bottom: -8.117vw;
}
.point .photo-box img {
    width: 100%;
    height: auto;
}
.point .photo01 {
    margin-bottom: 1.104vw;
}
.point .photo02 {position: absolute;bottom: -0.39vw;right: 0;}
.point .photo03 {position: relative;left: 8.377vw;}


/* point01
-------------------------------------*/
.point01 .inner {
    width: 95.532vw;
    margin-inline: auto;
}
.point01 h2 img {
    width: 49.351vw;
}
.point01 .photo02 img {width: 26.818vw;}
.point01 .photo03 img {width: 18.831vw;}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1919px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1919px) {
/* point02
-------------------------------------*/
.point02 .inner {
    padding: 8.025vw 0 3.179vw;
}
.point02 h2 {margin-bottom: 2.918vw;}
.point02 .inBox {
    grid-template-columns: 43.8541% 1fr;
    gap: 4.149vw;
}
.point02 .txt {
    width: 97.5%;
}
.point02 .photo01 {
    top: -10.683vw;
}
.point02 .photo01 img {
    width: 100%;
    height: auto;
}
.point02 .inBox02 {
    margin-right: 1.98vw;
    grid-template-columns: 46% 1fr;
    gap: 4.429vw;
}
.point02 .inBox02::before {
    width: 11.933vw;
    height: 6.201vw;
    top: -19.281vw;
    left: 34.9%;
}
.point02 .photo02 {
    top: -5.107vw;
}
.point02 .photo02 img {
    width: 22.512vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1540px)
======================================== */
@media screen and (min-width:768px) and (max-width:1540px) {
/* point03
-------------------------------------*/
.point03 {
    margin-top: -19.481vw;
    margin-bottom: 13.377vw;
}
.point03 .inner {
    width: 95.532vw;
    padding: 10vw 0 13.052vw;
}
.point03 .inner::before {
    width: 4.61vw;
    height: 3.247vw;
    top: -2.597vw;
    left: -1.234vw;
}
.point03 .inBox {
    gap: 0.948vw;
}
.point03 .photo-box {
    top: -6.558vw;
    margin-bottom: -6.558vw;
}
.point03 .photo01 {
    margin-bottom: 2.857vw;
}
.point03 .photo02 {position: absolute;bottom: -2.597vw;right: 2.792vw;}
.point03 .photo02 img {width: 26.688vw;}
.point03 .photo03 {position: relative;left: 6.364vw;}
.point03 .photo03 img {width: 16.948vw;}
.point03 .txt {
    width: 37.299vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1919px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1919px) {
/* bottom-sec
-------------------------------------*/
.bottom-sec .inner {
    width: 83.377vw;
    padding-bottom: 3.179vw;
}
.bottom-sec .inner::before {
    width: 5.524vw;
    height: 12.976vw;
    top: 8.598vw;
    right: -3.387vw;
}
.bottom-sec h2 {
    bottom: 0.938vw;
    right: -0.521vw;
}
.bottom-sec h2 img {
    width: 57.843vw;
}
.bottom-sec .photo {
    top: -2.345vw;
}
.bottom-sec .photo img {
    width: 78.166vw;
    height: auto;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1500px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1500px) {
/* bnr-box
-------------------------------------*/
.bnr-box {
    margin-top: -3.667vw;
}  
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1200px)
======================================== */
@media screen and (min-width:768px) and (max-width:1200px) {
.bnr-box .list li img {
    width: 28.333vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1140px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1140px) {
/* bnr-box
-------------------------------------*/
.bnr-box .inner {
    width: 96.491vw;
    padding: 20.5vw 0 25vw;
}
.bnr-box .list {
    gap: 3.509vw;
} 
.bnr-box .list li img {
    margin-bottom: 0.965vw;
}
.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) {
#design .main-ttl-wrap {
    margin-bottom: 0;
}
.section-wrap {
    background: #EEF0E7;
    padding-bottom: 15vw;
    padding-top: 10vw;
}

/* mv
-------------------------------------*/
.mv {
    position: relative;
}
.mv::before {
    position: absolute;
    content: "";
    width: 97.10vw;
    height: 185.75vw;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
    border-radius: 0 9.66vw 0 0;
    top: 0;
    left: 0;
    pointer-events: none;
}
.mv .inner {
    display: grid;
    position: relative;
    padding: 13.2vw 6.2vw 14.5vw;
    gap: 7.5vw;
}
.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: -5.5vw;
    left: 5.5vw;
}
.mv .enttl {
    font-size:5.797vw;
    letter-spacing: 0;
    color: #3b8461;
    text-align: center;
    margin-bottom: 8.5vw;
}
.mv h2 {
    text-align: center;
    margin-bottom: 8.9vw;
}
.mv .txt {
    font-weight: 500;
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 2;
    margin-bottom: 4vw;
    position: relative;
    left: 3vw;
}
.mv .txt:nth-last-of-type(1) {
    margin-bottom: 0;
}
.mv .photo {
    width: 82.13vw;
    margin-inline: auto;
}

/* point共通
-------------------------------------*/
.point {
    position: relative;
    margin-bottom: 0vw;
}
.point .inner {padding: 0 0 23vw;}
.point .inBox {
    display: grid;
    margin-top: -6vw;
    width: 89.37vw;
    margin-inline: auto;
}
.point .num {
    font-size:4.348vw;
    line-height: 1.67857;
    letter-spacing: 0;
    text-align: center;
    color: #e6ff00;
    margin-bottom: 6vw;
    padding: 23vw 0 0;
}
.point h2 {
    text-align: center;
    position: relative;
    z-index: 3;
}
.point .txt-box {
   display: contents;
}
.point h3 {
    font-weight: 500;
    font-size:4.348vw;
    letter-spacing: 0.05em;
    line-height: 1.777777;
    color: #fff;
    margin-bottom: 8vw;
    order: 2;
}
.point .txt {
    font-weight: 500;
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 2;
    color: #fff;
    margin-bottom: 5vw;
}
.point .txt:nth-of-type(1) {
    order: 3;
    margin-bottom: 6vw;
}
.point .txt:nth-of-type(2) {
    order: 5;
    margin-bottom: 6vw;
}
.point .txt:nth-of-type(3) {
    order: 7;
}
.point .txt:nth-last-of-type(1) {
    margin-bottom: 0;
}
.point .photo-box {
    display: contents;
}
.point .photo01 {
   order: 1;
   margin-bottom: 9.5vw;
   width: 100vw;
   margin-left: calc(50% - 50vw);
}
.point .photo02 {
    margin-bottom: 6.6vw;
}
.point .photo03 {order: 6;text-align: right;margin-bottom: 6.2vw;}

/* point01
-------------------------------------*/
.point01 {
    background: url(../images/design/point01-bg_sp.png)no-repeat top center / cover;
}
.point01 .num {
    background: url(../images/design/point-num-bg.png)no-repeat top center / auto;
}
.point01 .photo02 {
    order: 4;
}
.point01 .photo02 img {
    width: 71.50vw;
}
.point01 .photo03 img {
    width: 56.52vw;
}


/* point02
-------------------------------------*/
.point02 {
    margin-bottom: 0;
}
.point02 .inner {
    position: relative;
}
.point02 .inner::before {
    position: absolute;
    content: "";
    background: url(../images/design/bird.png)no-repeat;
    background-size: contain;
    width: 26.57vw;
    height: 13.77vw;
    top: 10.5vw;
    right: 5vw;
}
.point02 .num {
    color: inherit;
    padding: 23.4vw 0 0;
}
.point02 h3 {
    color: inherit;
    order: 1;
    margin-bottom: 7.8vw;
}
.point02 .txt {
    color: inherit;
    order: 3;
}
.point02 .inBox02 {
    display: grid;
    position: relative;
    order: 2;
}
.point02 .inBox02 .txt:nth-of-type(1) {
    order: 2;
    margin-bottom: 4vw;
}
.point02 .inBox02 .txt:nth-of-type(2) {
    order: 2;
}
.point02 .inBox02 .txt:nth-of-type(3) {
    order: 3;
    margin-bottom: 4vw;
}
.point02 .inBox02 .txt:nth-of-type(4) {
    order: 4;
    margin-bottom: 6vw;
}
.point02 .inBox02 .txt:nth-of-type(5) {
    order: 6;
    margin-bottom: 4.2vw;
}
.point02 .inBox02 .txt:nth-of-type(6) {
    order: 7;
}
.point02 .photo02 {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    order: 5;
}

/* point03
-------------------------------------*/
.point03 {
    background: url(../images/design/point03-bg_sp.png)no-repeat top center / cover;
    margin-top: -15vw;
    margin-bottom: 24vw;
}
.point03 .inner {
    padding: 0 0 17.5vw;
}
.point03 .inner::before {
    position: absolute;
    content: "";
    background: url(../images/design/leaf01.png)no-repeat;
    background-size: contain;
    width: 10.39vw;
    height: 7.25vw;
    top: -4vw;
    left: 5vw;
}
.point03 .num {
    background: url(../images/design/point-num-bg.png)no-repeat top center / auto;
}
.point03 .photo02 {
    order: 8;
    text-align: right;
    position: relative;
    left: 2.5vw;
}
.point03 .photo02 img {
    width: 63.04vw;
}
.point03 .photo03 {
    order: 5;
    text-align: left;
}
.point03 .photo03 img {
    width: 55.80vw;
}
.point03 .txt:nth-of-type(1) {margin-bottom: 4vw;}
.point03 .txt:nth-of-type(2) {
    order: 4;
}
.point03 .txt:nth-of-type(3) {
    order: 6;
    margin-bottom: 4vw;
}
.point03 .txt:nth-of-type(4) {
    order: 7;
    margin-bottom: 7vw;
}

/* bottom-sec
-------------------------------------*/
.bottom-sec {
    background: url(../images/design/bottom-sec-bg_sp.png)no-repeat top center / contain;
    position: relative;
}
.bottom-sec .inner {
    position: relative;
}
.bottom-sec .inner::before {
    position: absolute;
    content: "";
    background: url(../images/design/leaf02_sp.png)no-repeat;
    background-size: contain;
    width: 21.98vw;
    height: 42.51vw;
    top: -15vw;
    right: 0;
}
.bottom-sec h2 {
    position: absolute;
    top: 28.89vw;
    left: 5.8vw;
}
.bottom-sec .photo {
    position: relative;
}
.loop {
    overflow: hidden;
    padding: 45.5vw 0 0vw;
}
.loop .loop__box {
    display: flex;
    width: 100vw;
}
.loop .loop__box img {
    min-width: 244.45vw;
}
.loop .loop__box img:first-child {
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
}
.loop .loop__box img:last-child {
    -webkit-animation: loop2 50s linear infinite;
    animation: loop2 50s linear infinite;
}

/* bnr-box
-------------------------------------*/
.bnr-box {
    position: relative;
    margin-top: -17vw;
}
.bnr-box::before {
    position: absolute;
    content: "";
    background: url(../images/design/bnr-box-bg_sp.png)no-repeat;
    background-size: contain;
    width: 100%;
    height: 19.32vw;
    top: 0;
    left: 0;
}
.bnr-box .inner {
    width: 82.13vw;
    margin-inline: auto;
    position: relative;
    padding: 32.5vw 0 24vw;
}
.bnr-box .inner::before,
.bnr-box .inner::after {
    position: absolute;
    content: "";
}
.bnr-box .inner::before {
    background: url(../images/design/bnr-box-deco01_sp.png)no-repeat;
    background-size: contain;
    width: 65.46vw;
    height: 63.77vw;
    top: 7vw;
    left: -23vw;
}
.bnr-box .inner::after {
    background: url(../images/design/bnr-box-deco02_sp.png)no-repeat;
    background-size: contain;
    width: 56.28vw;
    height: 54.83vw;
    top: 40vw;
    right: -7vw;
}
.bnr-box .subt {
    font-weight: 500;
    font-size:4.348vw;
    letter-spacing: 0.05em;
    margin-bottom: 4vw;
    text-align: center;
    position: relative;
}
.bnr-box h2 {
    font-weight: 500;
    font-size:5.797vw;
    letter-spacing: 0.05em;
    line-height: 1.7;
    text-align: center;
    margin-bottom: 23vw;
    position: relative;
}
.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;
}

}