/* ========================================
   HERO
======================================== */
.hero {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #EFE5E5;
}
/* ========================================
   HERO STICKY
   PCではGSAPのpin対象
   iPad・スマホでは普通の要素
======================================== */
.hero__sticky {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* ========================================
   COPY
======================================== */
.hero__copy {
    position: absolute;
    left: clamp(20px, 5vw, 90px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color:#660000;
}
.hero__copy h1 {
    margin: 0;
    font-size: clamp(14px, 6vw, 24px);
    line-height: 1.4;
    letter-spacing: .05em;
}
.hero__copy p {
    margin: 30px 0 0;
    font-size: 18px;
    line-height: 1.8;
}
/* ========================================
   IMAGE
======================================== */
.hero__image {
    position: relative;
    width: 28vw;
    height: 72vh;
    flex-shrink: 0;
    overflow: hidden;
    will-change: width, height, border-radius;
}
/* ========================================
   SWIPER
======================================== */
.heroSwiper {
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0);
}
.heroSwiper .swiper-wrapper {
    width: 100%;
    height: 100%;
}
.heroSwiper .swiper-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
}
.heroSwiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
     transform: scale(1.12) translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}
/* ========================================
   iPad
   768px ～ 1024px
   GSAPなし
   普通のSwiper
======================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .hero {
        padding: 60px 0;
    }
    .hero__sticky {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }
    .hero__copy {
        position: absolute;
        left: 5vw;
        top: 50%;
        transform: translateY(-50%);
    }
    .hero__image {
        width: 50vw;
        height: auto;
        aspect-ratio: 3 / 4;
    }
}
/* ========================================
   Smartphone
   ～767px
   GSAPなし
   普通のSwiper
======================================== */
@media screen and (max-width: 767px) {
    .hero {
        padding: 30px 0 0;
    }
    /* ------------------------------------
       HERO STICKY
       スマホでは普通の縦レイアウト
    ------------------------------------ */
    .hero__sticky {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        display: block;
        overflow: visible;
        top: -200px
    }
    /* ------------------------------------
       COPY
    ------------------------------------ */
    .hero__copy {
        position: relative;
        top: 700px;
        left: auto;
        right: auto;
        bottom: auto;
        width: 85vw;
        margin: 0 auto 30px;
        padding: 0;
        transform: none;
        opacity: 1;
        z-index: 2;
    }
    .hero__copy h1 {
        margin: 0;
        font-size: clamp(14px, 6vw, 24px);
        line-height: 1.4;
        letter-spacing: .03em;
    }
    .hero__copy p {
        margin: 15px 0 0;
        font-size: 14px;
        line-height: 1.8;
    }
    /* ------------------------------------
       IMAGE
    ------------------------------------ */
    .hero__image {
        position: relative;
        width: 90vw;
        height: 60vh;
        margin: 0 auto;
        overflow: hidden;
    }
    /* ------------------------------------
       SWIPER
    ------------------------------------ */
    .heroSwiper {
        position: relative;
        width: 100%;
        height: 100%;
    }
}

/*スムーススクロール　スマホは解除*/
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* ========================================
   COLOR AREA
======================================== */

.color-area {
    width: 100%;
    max-width: 100%;
    background: #fff;
    color: #222;
    overflow: hidden;
}


/* ========================================
   COLOR SECTION
======================================== */

.color-section {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.color-section__inner {
    width: min(1600px, 90vw);
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .color-section__inner {
        width: 90vw;
    }
}

@media screen and (max-width: 767px) {
    .color-section__inner {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}

.color-section h2,
.color-section p {
    color: inherit;
}


/* ========================================
   BROKEN GRID
======================================== */

.broken-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    column-gap: 40px;
    row-gap: 80px;
    box-sizing: border-box;
    padding: 100px 0;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .broken-grid {
        column-gap: 25px;
        row-gap: 50px;
    }
}

@media screen and (max-width: 767px) {
.broken-grid {
    padding: 50px 0;
    grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 50px;
}
}

.broken-grid__item {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.broken-grid__item img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}


/* ========================================
   broken-grid__item
======================================== */

/*左-5サイズ*/
@media screen and (min-width: 1025px) {
    .broken-grid__item--01 {
        grid-column: 1 / 5;
        margin-top: 80px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .broken-grid__item--01 {
        grid-column: 1 / 6;
        margin-top: 50px;
    }
}

@media screen and (max-width: 767px) {
    .broken-grid__item--01 {
        grid-column: 1 / 9;
        margin-top: 30px;
    }
}

/*右-7サイズ*/
@media screen and (min-width: 1025px) {
    .broken-grid__item--02 {
        grid-column: 5 / 12;
        margin-top: 200px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .broken-grid__item--02 {
        grid-column: 4 / 13;
        margin-top: 120px;
    }
}

@media screen and (max-width: 767px) {
    .broken-grid__item--02 {
        grid-column: 4 / 13;
        margin-top: 0;
    }
}

/*中央-中6サイズ*/
@media screen and (min-width: 1025px) {
    .broken-grid__item--03 {
        grid-column: 3 / 9;
        margin-top: 100px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .broken-grid__item--03 {
        grid-column: 3 / 9;
        margin-top: 80px;
    }
}

@media screen and (max-width: 767px) {
    .broken-grid__item--03 {
        grid-column: 2 / 11;
        margin-top: 0;
    }
}

/*右-4サイズ*/
@media screen and (min-width: 1025px) {
    .broken-grid__item--04 {
        grid-column: 9 / 12;
        margin-top: 250px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .broken-grid__item--04 {
        grid-column: 9 / 13;
        margin-top: 100px;
    }
}

@media screen and (max-width: 767px) {
    .broken-grid__item--04 {
        grid-column: 4 / 13;
        margin-top: 0;
    }
}

/*左-13サイズ*/
@media screen and (min-width: 1025px) {
    .broken-grid__item--05 {
        grid-column: 1 / 13;
        margin-top: 40px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .broken-grid__item--05 {
        grid-column: 1 / 13;
        margin-top: 40px;
    }
}

@media screen and (max-width: 767px) {
    .broken-grid__item--05 {
        grid-column: 1 / 13;
        margin-top: 0;
    }
}

/*中央－7サイズ*/
@media screen and (min-width: 1025px) {
    .broken-grid__item--06 {
        grid-column: 4 / 10;
        margin-top: 40px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .broken-grid__item--06 {
        grid-column: 4 / 10;
        margin-top: 40px;
    }
}

@media screen and (max-width: 767px) {
    .broken-grid__item--06 {
        grid-column: 3 / 11;
        margin-top: 0;
    }
}



/*流れる画像*/
/* スライダー全体 */
.slider-wrapper {
  display: flex; /* スライドのグループを横並び */
  overflow: hidden; /* はみ出たスライドを隠す */
}
/* スライドグループ */
.slider {
  animation: scroll-left 80s infinite linear .5s both;
  display: flex; /* スライドを横並び */
}

@media screen and (max-width: 767px) {
.slider {
  animation: scroll-left 40s infinite linear .5s both;
}
}

/* スライド */
.slide {
  width: calc(100vw / 6); /* はスライドの枚数 */
  margin:50px 30px;
}

@media screen and (max-width: 767px) {
.slide {
  width: calc(100vw / 4); /* はスライドの枚数 */
  margin:30px 10px;
}
}

/* スライドの画像 */
.slide img {
  display: block;
  width: 100%;
}
/* CSSアニメーション */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}