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

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

/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px),print {
/* main-ttl-box
-------------------------------------*/
.main-ttl-box {
    background: url(../images/design/main-ttl-bg.jpg)no-repeat top center;
}

/* intro
-------------------------------------*/
.intro .inner {
    width: min(95%, 1440px);
    margin-inline: auto;
    padding-block: 147px 200px;
}
.intro .inBox01 {
    display: grid;
    gap: calc(106 / 1920 * 100vw);
    width: min(95%,1200px);
    margin-inline: auto;
    grid-template-columns: 3% 82.9166%;
    justify-content: flex-end;
    padding-block: 0 70px;
}
.intro .inBox01 .wrap {
    padding-block: 37px 0;
}
.intro .inBox01 .img {
    margin-top: 40px;
}
.intro .txt {
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 2.1111; 
    position: relative;
}
.intro .photo {
    position: relative;
}
.intro .inBox02 {
    width: min(95%, 1360px);
    margin:0 auto 70px;
    position: relative;
    z-index: 2;
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -ms-flex-wrap: wrap;flex-wrap: wrap;
    -webkit-box-orient:horizontal;-webkit-box-direction:normal;
}

.intro .inBox02 .photo01-illust{margin:0 30px 0 0;}
.intro .inBox02 .photo02-photo{}
.intro .inBox02 img { width: 660px;}


.intro .inBox03 {
    margin-inline: auto;
    display: grid;
    grid-template-columns: 45% 37.5%;
    gap: calc(72 / 1920 * 100vw);
    position: relative;
    z-index: 1;
    padding-block: 97px 83px;
    align-items: center;
}
.intro .inBox03::before {
    position: absolute;
    content: "";
    background: #F2F2F2;
    top: 0;
    right: 0;
    width: 83.33%;
    height: 100%;
}
.intro .inBox03 .txt {
    position: relative;
    top: 10px;
}

/* philosophy
-------------------------------------*/
.philosophy {
    position: relative;
    padding-block: 0 204px;
}
.philosophy .main-photo{
    position: relative;
    margin-bottom: -25.2%;
}
.philosophy .main-photo img {
    /* width: 100%; */
    height: auto;
    width: 100vw;
    max-width: 1920px;
}
.philosophy .ttl {
    font-size: 40px;
    letter-spacing: 0.05em;
    text-align: center;
    color: #fff;
    position: relative;
    margin-bottom: 67px;
}
.philosophy .inBox01 {
    width: min(95%, 1600px);
    margin-inline: auto;
    background: #FFFFFF;
    padding-block: calc(107 / 1920 * 100vw) calc(67 / 1920 * 100vw);
    padding-inline: calc(160 / 1920 * 100vw);
    display: grid;
    grid-template-columns: 40.625% 57.578125%;
    gap: 23px;
    position: relative;
}
.philosophy .subt {
    font-size: 24px;
    letter-spacing: 0.05em;
    line-height: 1.833333;
    margin-bottom: 31px;
}
.philosophy .txt {
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2;
}
.philosophy .inBox01 .img01 {
    padding-block: 3px 0;
}
.philosophy .inBox02 {
    width: min(95%, 1440px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 51.8055% 36.1111%;
    gap: calc(53 / 1920 * 100vw);
}
.philosophy .inBox02 .txt-box {
    padding-block: calc(22 / 1920 * 100vw) 0;
}
.philosophy .inBox02 .subt {
    margin-bottom: 50px;
}
.philosophy .loop {overflow: hidden;padding-block: 80px 70px;}
.philosophy .loop__box {display: flex;width: 100vw;}
.philosophy .loop__box img {min-width: 117.3vw;}
.philosophy .loop__box img:first-child {animation: loop 50s -25s linear infinite;}
.philosophy .loop__box img:last-child {animation: loop2 50s linear infinite;}
.philosophy .lead {
    font-size: 32px;
    letter-spacing: 0.05em;
    line-height: 1.9375;
    text-align: center;
    margin-bottom: 18px;
}
.philosophy .bottom-txt {
    text-align: center;
}

/* about
-------------------------------------*/
.about {
    background: #F2F2F2;
    padding-block: 116px 180px;
    position: relative;
}
.about::before {
    position: absolute;
    content: "";
    background: #1A1A1A;
    width: 1px;
    height: 180px;
    top: -3.3%;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollLine 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes scrollLine {
    0% {
        transform: translateX(-50%) scaleY(0);
        transform-origin: top;
        opacity: 0;
    }
    30% {
        transform: translateX(-50%) scaleY(1);
        transform-origin: top;
        opacity: 1;
    }
    70% {
        transform: translateX(-50%) scaleY(1);
        transform-origin: bottom;
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scaleY(0);
        transform-origin: bottom;
        opacity: 0;
    }
}
.about .ttl {
    font-size: 40px;
    letter-spacing: 0.05em;
    text-align:center;
    margin-bottom: 78px;
}
.about .txt {
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2;
}
.about .lead {
    font-size: 24px;
    letter-spacing: 0.05em;
    line-height: 2;
    padding-block: 39px;
}
.about .inBox01 {
    width: min(95%, 1576px);
    margin-right: auto;
    display: grid;
    grid-template-columns: 55.2030% 39.0862%;
    gap: calc(90 / 1920 * 100vw);
    padding-block: 0 22px;
    align-items: center;
}
.about .inBox02 {
    width: min(95%, 1200px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 44.1666% 44.8333%;
    gap: calc(70 / 1920 * 100vw);
    align-items: center;
    padding-block: 0 30px;
}
.about .sub-photo {
    width: min(95%, 1050px);
    margin-inline: auto;
    padding-bottom: 140px;
}

/* about-block
-------------------------------------*/
.about-block {
    position: relative;
}
.about-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    height: 100%;
    background: #FFF;
    z-index: 0;
}
.about-block .inBox01 {
    width: min(95%, 1600px);
    margin-inline: auto;
    display: grid;
    position: relative;
    z-index: 1;
    padding-block: 100px 60px;
    align-items: center;
}
.about-block .inBox02{
    position: relative;
    z-index: 1;
}
.about-block .ttl {text-align: left;width: max-content;margin-bottom: 54px;}


/* about-connect
-------------------------------------*/
.about-connect {
    margin-bottom: calc(127 / 1920 * 100vw);
}
.about-connect .inBox01 {
    grid-template-columns: 31.3% 53%;
    gap: calc(52 / 1920 * 100vw);
    justify-content: flex-end;
}
.about-connect .inBox02 {
    width: min(95%, 1200px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 63.1666% 1fr;
    gap: calc(60 / 1920 * 100vw);
    padding-block: 0 100px;
}

/* about-garden
-------------------------------------*/
.about-garden .inBox01 {
    grid-template-columns: 49.25% 31.375%;
    gap: calc(110 / 1920 * 100vw);
}
.about-garden .inBox02 {
    width: min(95%, 1560px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 32.0512% 52.5641%;
    justify-content: flex-end;
    gap: calc(60 / 1920 * 100vw);
    margin-top: -5px;
    padding-block: 0 95px;
}

/* bottom-sec
-------------------------------------*/
.bottom-sec {
    padding-block: 0 240px;
}
.bottom-sec .photo {
    padding-bottom: 120px;
}
.bottom-sec .photo img {
    /* width: 100%; */
    height: auto;
    width: 100vw;
    max-width: 1920px;
}
.bottom-sec .bnr-box {
    width: min(95%, 1020px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(60 / 1920 * 100vw);
}



}


/* ========================================
@media screen and (min-width:768px) and (max-width:1520px)
======================================== */
@media screen and (min-width:768px) and (max-width:1520px) {
.intro .inBox01 {
    grid-template-columns: 3% 84.9166%;
}
.intro .inBox01 .img img {
    width: 100%;
    height: auto;
}
.intro .photo img {
    width: 100%;
    height: auto;
}
.intro .inBox03 {
    grid-template-columns: 45% 39.5%;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1640px)
======================================== */
@media screen and (min-width:768px) and (max-width:1640px) {
/* philosophy
-------------------------------------*/
.philosophy {
    padding-block: 0 12.622vw;
}
.philosophy .ttl {
    font-size: 2.439vw;
    margin-bottom: 4.085vw;
}
.philosophy .inBox01 {
    padding-block:  6.52vw 4.09vw;
    padding-inline: 8.76vw;
    gap: 1.402vw;
}
.philosophy .subt {
    font-size: 1.463vw;
    margin-bottom: 1.89vw;
}
.philosophy .txt {
    font-size: clamp(0.75rem, 0.53rem + 0.46vw, 1rem);
}
.philosophy .inBox01 .img01 {
    padding-block: 0.183vw 0;
}
.philosophy .inBox02 {
    width: min(95%, 87.80vw);
    grid-template-columns: 51.8055% 36.1111%;
    gap: 3.23vw;
}
.philosophy .inBox02 .txt-box {
    padding-block: 1.34vw 0;
}
.philosophy .inBox02 .subt {
    margin-bottom: 3.049vw;
}
.philosophy .loop {overflow: hidden;padding-block: 4.878vw 4.268vw;}
.philosophy .lead {
    font-size: 1.951vw;
    margin-bottom: 1.098vw;
}
.philosophy img {
    width: 100%;
    height: auto;
}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1520px) {
======================================== */
@media screen and (min-width:768px) and (max-width:1520px) {
.intro .inBox02 .photo01-illust{margin:0 2.3076923077vw 0 0;}
.intro .inBox02 .photo02-photo{}
.intro .inBox02 img { width: 42.8vw;}
}


/* ========================================
@media screen and (min-width:768px) and (max-width:1280px)
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
.philosophy .subt {
    font-size: clamp(1rem, 0.813rem + 0.39vw, 1.125rem);
}
}

/* ========================================
  @media screen and (min-width:768px) and (max-width:1640px)
======================================== */
@media screen and (min-width:768px) and (max-width:1640px) {
/* about
-------------------------------------*/
.about {
    padding-block: 7.073vw 10.976vw;
}
.about::before {
    width: 0.061vw;
    height: 10.976vw;
    top: -5.18vw;
}
.about .ttl {
    font-size: 2.439vw;
    margin-bottom: 4.756vw;
}
.about .txt {
    font-size: clamp(0.75rem, 0.53rem + 0.46vw, 1rem);
}
.about .lead {
    font-size: 1.463vw;
    padding-block: 2.378vw;
}
.about .inBox01 {
    width: min(95%, 96.10vw);
    grid-template-columns: 50.203% 1fr;
    gap: 2.49vw;
    padding-block: 0 1.341vw;
}
.about .inBox02 {
    width: min(95%, 73.17vw);
    grid-template-columns: 44.1666% 44.8333%;
    gap: 4.27vw;
    padding-block: 0 1.829vw;
}
.about .sub-photo {
    width: min(95%, 64.02vw);
    padding-bottom: 8.537vw;
}
.about .photo img {
    width: 100%;
    height: auto;
}
.about .sub-photo img {
    width: 100%;
    height: auto;
}

/* about-block
-------------------------------------*/
.about-block .inBox01 {
    width: min(95%, 97.56vw);
    padding-block: 6.098vw 3.659vw;
}
.about-block .ttl {margin-bottom: 3.293vw;}


/* about-connect
-------------------------------------*/
.about-connect {
    margin-bottom: 7.74vw;
}
.about-connect .inBox01 {
    grid-template-columns: 34% 49%;
    gap: 3.17vw;
}
.about-connect .inBox02 {
    width: min(95%, 73.17vw);
    grid-template-columns: 63.1666% 1fr;
    gap: 3.66vw;
    padding-block: 0 6.098vw;
}

/* about-garden
-------------------------------------*/
.about-garden .inBox01 {
    grid-template-columns: 48.25% 33.375%;
    gap: 5.71vw;
}
.about-garden .inBox02 {
    width: min(95%, 95.12vw);
    grid-template-columns: 38.0512% 46.5641%;
    gap: 2.66vw;
    margin-top: -0.305vw;
    padding-block: 0 5.793vw;
}
}

/* ========================================
  @media screen and (min-width:768px) and (max-width:1280px)
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
.bottom-sec .bnr-box img {
    width: 100%;
    height: auto;
}
}


/* ========================================
    @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* main-ttl-box
-------------------------------------*/
.main-ttl-box {
    background: url(../images/design/main-ttl-bg_sp.jpg)no-repeat;
    background-size: cover;
}

/* intro
-------------------------------------*/
.intro {
    position: relative;
    margin-bottom: 14.25vw;
}
.intro::before {
    position: absolute;
    content: "";
    background: #F2F2F2;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180.67vw;
}
.intro .inner {
    padding-block: 5.89vw 13.6vw;
}
.intro .inBox01 {
    display: grid;
    padding-block: 0 7.25vw;
    place-items: center;
    gap: 14.66vw;
}
.intro .inBox01 .img {margin-top: 7vw; margin-bottom: 5vw;}
.intro .txt {
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 2;
    position: relative;
    width: 86.96vw;
    margin-inline: auto;
}
.intro .photo {
    position: relative;
}
.intro .inBox02 {
    width: min(95%, 72.79vw);
    margin: 0 auto 0 auto;
    position: relative;
    z-index: 2;
    padding-block: 0 7.08vw;
}
.intro .inBox02 .photo01-illust{margin:0 0 2vw 0;}



.intro .inBox03 {
    width: min(95%, 91.79vw);
    margin-inline: auto;
    display: grid;
    gap: 8.66vw;
    position: relative;
    z-index: 2;
}

/* philosophy
-------------------------------------*/
.philosophy {
    position: relative;
    padding-block: 0 35.23vw;
}
.philosophy .main-photo{
    position: relative;
    margin-bottom: -83.5vw;
}
.philosophy .main-photo img {
    width: 100%;
    height: auto;
}
.philosophy .ttl {
    font-size:6.28vw;
    line-height: 1.6923;
    letter-spacing: 0.05em;
    color: #fff;
    position: relative;
    margin-bottom: 7.21vw;
    width: 82.13vw;
    margin-inline: auto;
}
.philosophy .inBox01 {
    width: min(95%, 91.79vw);
    margin-inline: auto;
    background: #FFFFFF;
    display: grid;
    position: relative;
    padding-block: 11.5vw 8.5vw;
    gap: 10.59vw;
}
.philosophy .subt {
    font-size:4.831vw;
    letter-spacing: 0.05em;
    line-height: 1.9;
    margin-bottom: 9.8vw;
    padding-inline: 4.83vw;
}
.philosophy .txt {
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 2;
    padding-inline: 4.83vw;
}
.philosophy .inBox02 {
    width: min(95%, 91.79vw);
    margin-inline: auto;
    display: grid;
    gap: 6.25vw;
}
.philosophy .inBox02 .img02 {
    order: 2;
}
.philosophy .inBox02 .txt-box {order: 1;}
.philosophy .loop {overflow: hidden;padding-block: 9.66vw 16.41vw;}
.philosophy .loop__box {display: flex;width: 100vw;}
.philosophy .loop__box img {min-width: 281vw;}
.philosophy .loop__box img:first-child {animation: loop 50s -25s linear infinite;}
.philosophy .loop__box img:last-child {animation: loop2 50s linear infinite;}
.philosophy .lead {
    font-size:6.28vw;
    letter-spacing: 0.05em;
    line-height: 1.6923;
    text-align: center;
    margin-bottom: 7.66vw;
}
.philosophy .bottom-txt {
    text-align: center;
}

/* about
-------------------------------------*/
.about {
    background: #F2F2F2;
    padding-block: 19.32vw;
    position: relative;
}
.about::before {
    position: absolute;
    content: "";
    background: #1A1A1A;
    width: 0.2vw;
    height: 33.82vw;
    top: -24vw;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollLine 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes scrollLine {
    0% {
        transform: translateX(-50%) scaleY(0);
        transform-origin: top;
        opacity: 0;
    }
    30% {
        transform: translateX(-50%) scaleY(1);
        transform-origin: top;
        opacity: 1;
    }
    70% {
        transform: translateX(-50%) scaleY(1);
        transform-origin: bottom;
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scaleY(0);
        transform-origin: bottom;
        opacity: 0;
    }
}
.about .ttl {
    font-size:6.28vw;
    letter-spacing: 0.05em;
    text-align:center;
    margin-bottom: 11.08vw;
}
.about .txt {
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 2;
}
.about .lead {
    font-size:4.348vw;
    letter-spacing: 0.05em;
    line-height: 2;
    padding-block: 10.08vw;
}
.about .inBox01 {
    display: grid;
    gap: 8.66vw;
    padding-block: 0 8.66vw;
}
.about .inBox01 .txt-box {
    width: min(95%, 86.96vw);
    margin-inline: auto;
    order: 2;
}
.about .inBox02 {
    width: min(95%, 86.96vw);
    margin-inline: auto;
    display: grid;
    gap: 8.66vw;
    align-items: center;
    padding-block: 0 8.66vw;
}
.about .inBox02 .photo {
    order: 1;
}
.about .inBox02 .txt {
    order: 2;
}
.about .sub-photo {
    width: 86.96vw;
    margin-left: auto;
    padding-block: 0 19.32vw;
}

/* about-block
-------------------------------------*/
.about-block {
    position: relative;
}
.about-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 91.79vw;
    height: 100%;
    background: #FFF;
    z-index: 0;
}
.about-block .inBox01 {
    display: grid;
    position: relative;
    z-index: 1;
    padding-block: 11.48vw 10.8vw;
    align-items: center;
    gap: 0;
}
.about-block .txt-box {
    display: contents;
}
.about-block .inBox01 .photo {
    order: 2;
    padding-block: 0 8.96vw;
}
.about-block .inBox01 .txt {
    order: 3;
    width: 82.13vw;
    margin-inline: auto;
}
.about-block .inBox02{
    position: relative;
    z-index: 1;
    width: min(95%, 82.13vw);
}
.about-block .ttl {margin-bottom: 8.66vw;order: 1;}
.about-block .inBox02 .photo {
    order: 1;
}
.about-block .inBox02 .txt {
    order: 2;
}

/* about-connect
-------------------------------------*/
.about-connect {
    margin-bottom: 14.49vw;
}

/* about-garden
-------------------------------------*/
.about-garden .inBox01 {padding-block: 11.48vw 8.66vw;}
.about-garden .inBox02 {
    width: 100%;
    display: grid;
    gap: 8.66vw;
    padding-block: 0 11.26vw;
}
.about-garden .inBox02 .photo {
    width: 91.06vw;
    margin-left: auto;
}
.about-garden .inBox02 .txt {
    width: min(95%, 82.13vw);
    margin-inline: auto;
}

/* bottom-sec
-------------------------------------*/
.bottom-sec {
    position: relative;
    padding-block: 0 24.15vw;
}
.bottom-sec .photo {
    padding-bottom: 14.49vw;
}
.bottom-sec .photo img {
    width: 100%;
    height: auto;
}
.bottom-sec .bnr-box {
    width: 82.13vw;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 4.83vw;
}


}