@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 {

/* top-contents
-------------------------------------*/
.top-contents {
    padding-bottom: 220px;
}
.top-contents .inBox {
    width: min(95%, 1760px);
    margin-right: auto;
    display: grid;
    grid-template-columns: 54.5454% 1fr;
    gap: calc(121 / 1920 * 100vw);
    padding-block: calc(114 / 1920 * 100vw) calc(100 / 1920 * 100vw);
    align-items: flex-start;
}
.top-contents .inBox .photo img {
    width: 100%;
    height: auto;
}
.top-contents .inBox .txt-box {
    display: flex;
    gap: calc(82 / 1920 * 100vw);
    padding-block: calc(88 / 1920 * 100vw) 0;
}
.top-contents .inBox .txt {
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 2.1111;
    padding-block: calc(56 / 1920 * 100vw) 0;
}
.top-contents .loop {overflow: hidden;}
.top-contents .loop__box {display: flex;width: 100vw;}
.top-contents .loop__box img {min-width: 117.3vw;}
.top-contents .loop__box img:first-child {animation: loop 50s -25s linear infinite;}
.top-contents .loop__box img:last-child {animation: loop2 50s linear infinite;}




/* sec共通
-------------------------------------*/
.section-wrap {
    background: #F2F2F2;
    padding-block: 200px 160px;
}
.sec {
    position: relative;
    padding-block: 0 142px;
    margin-bottom: 200px;
}
.sec::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 83.3333%;
    height: 100%;
    background: #FFF;
    z-index: 0;
}
.sec .inBox,
.sec .inBox02 {
    position: relative;
    z-index: 1;
}
.sec .inBox {
    display: grid;
    gap: 60px;
    width: min(95%, 1560px);
    margin-left: auto;
    margin-bottom: -48px;
}
.sec .inBox .txt-box {
    padding-top: 137px;
}
.sec .ttl {
    font-size: 40px;
    letter-spacing: 0.05em;
    margin-bottom: 73px;
}
.sec .txt {
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2;
    max-width: 500px;
}
.sec .main-photo {
    position: relative;
    top: -60px;
}
.sec .main-photo img {
    width: 100%;
    height: auto;
}
.sec .sub-photo img {
    width: 100%;
    height: auto;
}
.btn {
    width: min(95%, 400px);
}
.btn a {
    text-decoration: none;
    position: relative;
    font-size: 18px;
    line-height: 1.8888;
    letter-spacing: 0.05em;
    display: block;
    border-bottom: 1px solid #1A1A1A;
    padding: 0 0 19px 14px;
}
.btn a::after {
    content: "→";
    position: absolute;
    top: 36%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 1.45;
    font-family: "Castoro", serif;
    transition: 0.3s;
}
.btn a:hover::after {
    right: 5px;
}
.sec .inBox02 .btn {
    margin-top: 89px;
    position: relative;
    bottom: -3px;
}

/* design
-------------------------------------*/
.design .inBox {
    grid-template-columns: 32.0512% 64.1025%;
}
.design .inBox02 {
    display: grid;
    align-items: flex-end;
    gap: 100px;
    width: min(95%, 1815px);
    margin-left: auto;
    grid-template-columns: 47.1074% 27.5482%;
}

/* material
-------------------------------------*/
.material .inBox {
    grid-template-columns: 64.1025% 32.0512%;
    margin-right: auto;
    margin-left: 0;
    margin-bottom: -34px;
}
.material .inBox02 {
    display: grid;
    align-items: flex-end;
    gap: 73px;
    width: min(95%, 1440px);
    margin-inline: auto;
    grid-template-columns: 34.7222% 51.875%;
    justify-content: flex-end;
}
.material .inBox02 .sub-photo {
    position: relative;
    top: 32px;
}

/* performance
-------------------------------------*/
.performance {
    margin-bottom: 0;
}
.performance .inBox {
    gap: 14px;
    grid-template-columns: 35% 64.1025%;
    margin-bottom: -52px;
}
.performance .inBox02 {
    display: grid;
    align-items: flex-end;
    gap: 100px;
    width: min(95%, 1440px);
    margin-inline: auto;
    grid-template-columns: 50% 34.7222%;
}
.performance .inBox02 .sub-photo {position: relative;top: -35px;}


/* bottom-sec
-------------------------------------*/
.bottom-sec {
    position: relative;
    padding-block: 0 240px;
}
.bottom-sec h2 {
    position: absolute;
    top: 10.8%;
    left: 49.8%;
    transform: translateX(-50%);
}
.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);
}

.bottom-sec .bnr-box img{width: 100%;}


}

/* ========================================
@media screen and (min-width:768px) and (max-width:1440px)
======================================== */
@media screen and (min-width:768px) and (max-width:1440px) {
.top-contents h2 img {
    width: 6.81vw;
}
.top-contents .inBox .txt {
    font-size: clamp(0.75rem, 0.607rem + 0.3vw, 0.875rem);
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1280px)
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
.top-contents .inBox {
    grid-template-columns: 51.5454% 1fr;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1840px)
======================================== */
@media screen and (min-width:768px) and (max-width:1840px) {
/* sec共通
-------------------------------------*/
.section-wrap {
    padding-block: 10.87vw;
}
.sec {
    padding-block: 0 7.717vw;
}
.sec .inBox {
    gap: 3.261vw;
    width: min(95%, 84.78vw);
    margin-bottom: -1.609vw;
}
.sec .inBox .txt-box {
    padding-top: 7.446vw;
}
.sec .ttl {
    font-size: 2.174vw;
    margin-bottom: 3.967vw;
}
.sec .txt {
    font-size: clamp(0.75rem, 0.571rem + 0.37vw, 1rem);
}
.sec .main-photo {
    top: -3.261vw;
}
.btn {
    width: min(95%, 21.74vw);
}
.btn a {
    font-size: clamp(0.75rem, 0.481rem + 0.56vw, 1.125rem);
    padding: 0 0 1.033vw 0.761vw;
}
.btn a::after {
    right: 0.543vw;
    font-size: 0.978vw;
}
.btn a:hover::after {
    right: 0.272vw;
}
.sec .inBox02 .btn {
    margin-top: 4.837vw;
    bottom: -0.163vw;
}

/* design
-------------------------------------*/
.design .inBox {
    grid-template-columns: 32.0512% 64.1025%;
}
.design .inBox02 {
    gap: 5.435vw;
    width: min(95%, 98.64vw);
    grid-template-columns: 45% 29.5482%;
}

/* material
-------------------------------------*/
.material .inBox {
    grid-template-columns: 61.1025% 35.0512%;
    margin-bottom: 1.152vw;
}
.material .inBox02 {
    gap: 3.967vw;
    width: min(95%, 78.26vw);
    grid-template-columns: 38.7222% 47.875%;
}
.material .inBox02 .sub-photo {
    top: 1.739vw;
}

/* performance
-------------------------------------*/
.performance .inBox {
    gap: 2.761vw;
    grid-template-columns: 39% 61.1025%;
    margin-bottom: 0.174vw;
}
.performance .inBox02 {
    gap: 5.435vw;
    width: min(95%, 78.26vw);
    grid-template-columns: 46% 38.7222%;
}
.performance .inBox02 .sub-photo {top: -1.902vw;}

}

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

/* ========================================
  @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {

/* top-contents
-------------------------------------*/
.top-contents {
    padding-bottom: 19.32vw;
    padding-top: 3.6vw;
}
.top-contents .inBox {
    display: grid;
    gap: 22.02vw;
}
.top-contents .inBox .txt-box {width: 86.96vw;margin-inline: auto;}
.top-contents .inBox .ttl {
    text-align: center;
    margin:0 auto 14.49vw;
    width: 15vw;
}
.top-contents .inBox .txt {
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 2;
}
.top-contents .loop {overflow: hidden;padding-block: 13.89vw 0;}
.top-contents .loop__box {display: flex;width: 100vw;}
.top-contents .loop__box img {min-width: 312.9vw;}
.top-contents .loop__box img:first-child {animation: loop 50s -25s linear infinite;}
.top-contents .loop__box img:last-child {animation: loop2 50s linear infinite;}

/* sec共通
-------------------------------------*/
.section-wrap {
    background: #F2F2F2;
    padding-block: 14.49vw 2.49vw;
}
.sec {
    position: relative;
    padding-block: 13.9vw;
    margin-bottom: 13.08vw;
}
.sec::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 91.79vw;
    height: 100%;
    background: #FFF;
    z-index: 0;
}
.sec .inBox,
.sec .inBox02 {
    position: relative;
    z-index: 1;
}
.sec .inBox {
    display: grid;
    width: 91.79vw;
    margin-inline: auto;
    margin-bottom: 8.66vw;
}
.sec .inBox02 {
    width: 91.79vw;
    margin-inline: auto;
    display: grid;
    gap: 8.66vw;
}
.sec .inBox .txt-box {
   display: contents;
}
.sec .inBox .txt {
    order: 3;
}
.sec .ttl {
    font-size:6.28vw;
    letter-spacing: 0.05em;
    margin-bottom: 9vw;
    order: 1;
    width: 82.13vw;
    margin-inline: auto;
}
.sec .txt {
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 2;
    width: 82.13vw;
    margin-inline: auto;
}
.sec .main-photo {order: 2;margin-bottom: 8.66vw;}
.btn {
    width: 82.13vw;
    margin-inline: auto;
    margin-top: 12.66vw;
}
.btn a {
    text-decoration: none;
    position: relative;
    font-size:3.865vw;
    line-height: 2.125;
    letter-spacing: 0.05em;
    display: block;
    border-bottom: 0.2vw solid #1A1A1A;
    padding: 0 0 4.7vw 3.38vw;
}
.btn a::after {
    content: "→";
    position: absolute;
    top: 36%;
    right: 2.42vw;
    transform: translateY(-50%);
    font-size:4.831vw;
    line-height: 1.45;
    font-family: "Castoro", serif;
    transition: 0.3s;
}
.btn a:hover::after {
    right: 1.21vw;
}

/* material
-------------------------------------*/
.material .inBox02 .sub-photo {
    order: 1;
}
.material .inBox02 .txt-box {
    order: 2;
}

/* performance
-------------------------------------*/
.performance .ttl {
    width: fit-content;
    margin-left: 5vw;
}
.performance .inBox02 .sub-photo {width: 89.37vw;margin-left: auto;}

/* bottom-sec
-------------------------------------*/
.bottom-sec {
    position: relative;
    padding-block: 0 24.15vw;
}
.bottom-sec h2 {
    position: absolute;
    top: 16.5vw;
    left: 49.8%;
    transform: translateX(-50%);
}
.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;
}
}