html {
  height: 100%;
}

body {
  margin: 0;
}

/* #summer_campaign .bg {
  animation: slide 1s ease-in-out infinite alternate;
  background-image: linear-gradient(-120deg, #fffff5 50%, #fff6de 50%);
  bottom:0;
  left: -70%;
  opacity:.5;
  position:fixed;
  right: -70%;
  top:0;
  z-index:-1;
}

#summer_campaign .bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

#summer_campaign .bg3 {
  animation-duration:5s;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
} */

/* 2022 */
#summer_campaign .bg {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#summer_campaign .video {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: .2;
}

#summer_campaign .video video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: "object-fit: cover";
  opacity: .3;
  z-index: -2;
}

#summer_campaign .qa-box .wrap-M>* {
  background-color: #fff;
}

#summer_campaign h3,
#summer_campaign p,
#summer_campaign span {
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  letter-spacing: .05em;
}

#summer_campaign h3.blk-btm-S,
#summer_campaign p.blk-btm-S,
#summer_campaign span.blk-btm-S {
  margin-bottom: 3rem;
}

#summer_campaign .inner-L {
  padding: 120px 0 75px;
}

#summer_campaign .btn-1 {
  background-color: #fff;
}

@media screen and (min-width: 768px) {
  #summer_campaign .inner-L {
    padding: 240px 0 120px;
    width: calc(100% - 4em);
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* ---- concept-gallery ---- */
.gallery-1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-template-rows: repeat(174, 5.75vw);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.gallery-1 .g-1 {
  grid-column: 2 / span 13;
  grid-row: 20 / span 11;
}

.gallery-1 .g-2 {
  grid-column: 1 / span 11;
  grid-row: 1 / span 16;
}

.gallery-1 .g-3 {
  grid-column: 2 / span 14;
  grid-row: 33 / span 13;
}

.gallery-1 .g-4 {
  grid-column: 4 / span 10;
  grid-row: 51 / span 15;

}

.gallery-1 .g-5 {
  grid-column: 8 / span 8;
  grid-row: 68 / span 12;
  z-index: 2;
}

.gallery-1 .g-6 {
  grid-column: 1 / span 11;
  grid-row: 84 / span 16;
}

.gallery-1 .g-7 {
  grid-column: 8 / span 8;
  grid-row: 103 / span 8;
}

.gallery-1 .g-8 {
  grid-column: 1 / span 12;
  grid-row: 116 / span 10;
}

.gallery-1 .g-9 {
  grid-column: 3 / span 13;
  grid-row: 142 / span 6;
  z-index: 2;
}

.gallery-1 .g-10 {
  grid-column: 5 / span 12;
  grid-row: 128 / span 10;
}

.gallery-1 .g-11 {
  grid-column: 3 / span 14;
  grid-row: 150 / span 10;
  z-index: 2;
}

.gallery-1 .g-12 {
  grid-column: 1 / span 16;
  grid-row: 165 / span 11;
  z-index: 2;
}

.gallery-1 .g-13 {
  grid-column: 5 / span 7;
  grid-row: 57 / span 6;
  background-color: #AE9378;
  position: relative;
}

.gallery-1 .g-13 .concept-txt-box {
  top: 45%;
  transform: translate(-30%, -50%);
}

.gallery-1 .g-14 {
  grid-column: 2 / span 9;
  grid-row: 64 / span 5;
}

/* ---- gallery-img ---- */
.gallery-1 img {
  display: block;
  width: 100%;
  box-shadow: 1.4vw 1.4vw 2.3vw rgb(113 111 61 / 16%);
  object-fit: contain;
}

.gallery-1 .summer-logo img {
  box-shadow: none;
}

.summer-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-template-rows: repeat(36, 5.75vw);
}

.summer-item-grid>*:nth-child(1) {
  grid-column: 1 / span 5;
  grid-row: 1 / span 15;
}

.summer-item-grid>*:nth-child(2) {
  grid-column: 2 / span 6;
  grid-row: 19 / span 1;
}

.summer-item-grid>*:nth-child(3) {
  grid-column: 2 / span 7;
  grid-row: 31 / span 11;
}

.sp-item {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 3rem;
}

.sp-item-price {
  font-size: 1.4rem;
  letter-spacing: .05em;
}

@media screen and (min-width: 768px) {
  .head-XS.wrap-L-c>* {
    margin-bottom: 3rem;
  }

  .head-XS.wrap-L-c>*:last-child {
    margin-bottom: 0;
  }

  .gallery-1 {
    grid-template-rows: repeat(66, 5.75vw);
  }

  .gallery-1 .g-1 {
    grid-column: 3 / span 7;
    grid-row: 3 / span 4;
  }

  .gallery-1 .g-2 {
    grid-column: 13 / span 8;
    grid-row: 1 / span 9;
  }

  .gallery-1 .g-3 {
    grid-column: 13 / span 8;
    grid-row: 13 / span 5;
  }

  .gallery-1 .g-4 {
    grid-column: 2 / span 8;
    grid-row: 12 / span 9;
  }

  .gallery-1 .g-5 {
    grid-column: 14 / span 7;
    grid-row: 23 / span 7;
  }

  .gallery-1 .g-6 {
    grid-column: 2 / span 8;
    grid-row: 25 / span 9;
  }

  .gallery-1 .g-6 .concept-txt-box {
    top: 50%;
    left: 0;
    transform: translate(40%, -50%);
  }

  .gallery-1 .g-7 {
    grid-column: 12 / span 5;
    grid-row: 33 / span 4;
  }

  .gallery-1 .g-8 {
    grid-column: 2 / span 10;
    grid-row: 40 / span 6;
  }

  .gallery-1 .g-9 {
    grid-column: 4 / span 6;
    grid-row: 48 / span 3;
  }

  .gallery-1 .g-10 {
    grid-column: 11 / span 10;
    grid-row: 45 / span 6;
  }

  .gallery-1 .g-11 {
    grid-column: 2 / span 13;
    grid-row: 53 / span 7;
    z-index: 2;
  }

  .gallery-1 .g-12 {
    grid-column: 8 / span 13;
    grid-row: 61 / span 7;
    z-index: 2;
  }

  .gallery-1 .g-13 {
    grid-column: 6 / span 8;
    grid-row: 42 / span 8;
    z-index: 1;
  }

  .gallery-1 .g-13 .concept-txt-box {
    transform: translate(-40%, -50%);
  }

  .gallery-1 .g-14 {
    grid-column: 4 / span 7;
    grid-row: 51 / span 3;
    z-index: 2;
  }

  .g-col-1 {
    grid-column: 1/4;
  }

  .summer-item-grid {
    grid-template-columns: 1fr 1fr 1.88fr;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 4rem;
  }

  .summer-item-grid>*:nth-child(1) {
    grid-column: auto;
    grid-row: auto;
  }

  .summer-item-grid>*:nth-child(2) {
    grid-column: auto;
    grid-row: auto;
  }

  .summer-item-grid>*:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ---- スクロールアニメーション速度調整 ---- */
.visible.translateYs,
.invisible.translateYs {
  transform: translateY(100px);
  transition: all 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.visible.translateYs {
  transform: translateY(0);
}

.visible.translateYl,
.invisible.translateYl {
  transform: translateY(100px);
  transition: all 1.0s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.visible.translateYl {
  transform: translateY(0);
}

.visible.extend-trigger:before {
  animation: extend-wrap 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

.visible.extend-trigger.extend-R::before {
  animation: extend-right 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}


/* 2023 */
#summer_campaign2023 .bg {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#summer_campaign2023 .video {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #e2e2e2;
  opacity: .2;
}

#summer_campaign2023 .video video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: "object-fit: cover";
  opacity: .3;
  z-index: -2;
}

#summer_campaign2023 .qa-box .wrap-M>* {
  background-color: #fff;
}

.inner-L {
  width: calc(100% - 2.2em);
  max-width: 1120px;
  margin: 0 auto;
}

.inner-L {
  padding: 80px 0 80px;
}

@media screen and (min-width: 768px) {
  .inner-L {
    padding: 160px 0 160px;
  }

  .inner-L .gallery-2 {
    padding-left: 10%;
  }

  .inner-L .gallery-2:nth-last-of-type(-n+3) {
    padding-left: 0;
  }
}

#summer_campaign2023 .gallery-2 .ttl-L {
  font-size: 1.2rem;
  color: #969696;
  position: relative;
  line-height: 3.5;
  text-align: left;
}

.txt-box1 {
  background-color: #fff;
  padding: 2rem;
  margin: auto;
  position: relative;
}

.text-bg-back1 {
  background-color: #fff;
  padding: 0.75em 1em;
  letter-spacing: .1em;
}

.text-bg-back1.extend-trigger {
  display: inline-block;
  line-height: initial;
}

@media screen and (min-width: 768px) {
  #summer_campaign2023 .gallery-2 .ttl-L{
    font-size: 1.4rem;
  }
}

.gallery-2 {
  display: flex;
  flex-flow: row wrap;
  overflow: hidden;
}

.gallery-2.rl-center {
  justify-content: center;
}

.gallery-2.tb-center {
  align-items: center;
}

.gallery-2.all-center {
  justify-content: center;
  align-items: center;
}

.gallery-2 .gl-1 {
  flex-basis: 100%;
  position: relative;
  /* left: -4.5%; */
}

.gallery-2 .gl-2 {
  position: relative;
}

.gallery-2 .gl-3 {
  flex-basis: calc(90%);
  order: 2;
  margin-bottom: 4rem;
}

.gallery-2 .gl-4 {
  flex-basis: 90%;
  margin-left: auto;
  order: 1;
  margin-bottom: 4rem;
}

.gallery-2 .gl-5 {
  flex-basis: 60%;
  order: 3;
}

.gallery-2 .gl-6 {
  flex-basis: 60%;
  order: 2;
  margin-left: auto;
}

.gallery-2 .gl-7 {
  flex-basis: 80%;
  order: 1;
  margin-left: auto;
  margin-bottom: 4rem;
}

.gallery-2 .gl-8 {
  flex-basis: 90%;
  margin-bottom: 4rem;
  position: relative;
  /* left: -4.5%; */
}

.gallery-2 .gl-9 {
  flex-basis: 80%;
  margin-left: 1.5em;
  margin-bottom: 4rem;
}

.gallery-2 .gl-10 {
  flex-basis: 100%;
  margin: auto;
}

.gallery-2 .gl-11 {
  flex-basis: 100%;
  margin-bottom: 4rem;
}

.gallery-2 .gl-12 {
  flex-basis: 70%;
  margin-left: auto;
}

.gallery-2 .gl-13 {
  flex-basis: 90%;
  margin-bottom: 4rem;
}

.gallery-2 .gl-14 {
  flex-basis: 70%;
}

.gallery-2 .gl-15 {
  flex-basis: 100%;
  margin: auto;
  margin-bottom: 4rem;
}

.gallery-2 .gl-16 {
  flex-basis: calc(100% - 2em);
  margin: 0 auto 4rem;
}

.gallery-2 .gl-17 {
  flex-basis: 70%;
  margin-left: auto;
}

.gallery-2 .gl-18 {
  flex-basis: 60%;
  position: relative;
  z-index: 1;
  margin-bottom: 4rem;
}

.gallery-2 .gl-19 {
  flex-basis: 90%;
  position: relative;
  margin-left: auto;
}

.gallery-2 .gl-20 {
  flex-basis: 80%;
  margin-bottom: 4rem;
}

.gallery-2 .gl-21 {
  flex-basis: 60%;
}


@media screen and (min-width: 768px) {
  .gallery-2 .gl-1 {
    flex-basis: 45%;
    left: auto;
  }

  .gallery-2 .gl-2 {
    left: -2%;
    z-index: 1;
  }

  .gallery-2 .gl-3 {
    flex-basis: 45%;
    order: initial;
  }

  .gallery-2 .gl-4 {
    flex-basis: 55%;
    margin-left: auto;
    order: initial;
  }

  .gallery-2 .gl-5 {
    flex-basis: 40%;
    order: initial;
  }

  .gallery-2 .gl-6 {
    flex-basis: 35%;
    margin-left: auto;
    order: initial;
  }

  .gallery-2 .gl-7 {
    flex-basis: 40%;
    order: initial;
    margin-left: 4em;
  }

  .gallery-2 .gl-8 {
    flex-basis: 48%;
    left: auto;
  }

  .gallery-2 .gl-9 {
    flex-basis: 45%;
    margin-left: 4em;
  }

  .gallery-2 .gl-10 {
    flex-basis: 80%;
  }

  .gallery-2 .gl-11 {
    flex-basis: 60%;
    margin-left: auto;
  }

  .gallery-2 .gl-12 {
    flex-basis: 29.7%;
  }

  .gallery-2 .gl-13 {
    flex-basis: 40%;
    margin-right: 4em;
  }

  .gallery-2 .gl-14 {
    flex-basis: 35%;
  }

  .gallery-2 .gl-15 {
    flex-basis: calc(100% - 6em);
  }

  .gallery-2 .gl-16 {
    margin: auto;
    flex-basis: 45%;
  }

  .gallery-2 .gl-17 {
    flex-basis: 40%;
    margin-right: auto;
    margin-left: 0;
  }

  .gallery-2 .gl-18 {
    flex-basis: 45%;
    right: -4%;
  }

  .gallery-2 .gl-19 {
    flex-basis: 55%;
    left: -4%;
    margin-top: 24%;
  }

  .gallery-2 .gl-20 {
    flex-basis: 45%;
    margin-left: auto;
    margin-right: 4em;
  }

  .gallery-2 .gl-21 {
    flex-basis: 25%;
    margin-right: auto;
  }
}

/* ---- gallery-img ---- */
.gallery-2 img {
  display: block;
  width: 100%;
  box-shadow: 1.4vw 1.4vw 2.3vw rgb(113 111 61 / 16%);
  object-fit: contain;
}

.summer-gifts > * {
  display: flex;
  flex-flow: row wrap;
  margin-bottom: 9rem;
}

.summer-gifts > *:last-child {
  margin-bottom: 0;
}

.summer-gifts > * > * {
  flex-basis: 100%;
}

.summer-gifts .fit-image-c.frame-size {
  flex-basis: calc(100% - 2em);
  margin: auto;
}

.summer-gifts-item1 {
  flex-basis: 70%;
}

.summer-gifts-item2 {
  flex-basis: 90%;
  margin-left: auto;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

@media screen and (min-width: 768px) {
  .summer-gifts > *.f-reverse {
    flex-flow: row-reverse;
  }

  .txt-f-r {
    position: relative;
    right: -4%;
  }

  .txt-f-l {
    position: relative;
    left: -4%;
  }
  
  .summer-gifts > * > * {
    flex-basis: 40%;
  }

  .summer-gifts .fit-image-c,
  .summer-gifts .txt-all-box {
    flex-basis: 60%;
  }

  .summer-gifts .fit-image-c.frame-size {
    flex-basis: 50%;
    margin: initial;
  }

  .summer-gifts-item1 {
    flex-basis: 22%;
    margin: auto;
  }

  .summer-gifts-item2 {
    flex-basis: 32%;
    margin-top: auto;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 1rem;
  }
}

.special-listbox {
  overflow: hidden;
}

.special-listbox > * {
  margin-bottom: 3rem;
}

.special-box {
  background-color: #fff;
  display: grid;
}

.special-box .txt-box{
  margin: auto;
  padding: 0.75em 2em;
}

@media screen and (min-width: 768px){
.special-box {
  grid-template-columns: repeat(2, 1fr);
}   
}

/* スクロールエフェクト */
#summer_campaign2023 .visible.extend-trigger:before {
  animation: extend-wrap 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

#summer_campaign2023 .visible.extend-trigger.extend-R::before {
  animation: extend-right 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}