@charset "UTF-8";

/* --- デフォルトCSS設定 --- */

#Contents .main-area .main-inner {

  width: 100%;

}

#Contents .main-area {

  overflow-x: visible;

}

#LB260501GOODROCK {

  --pc-width: 1400;

  --sp-width: 750;

  --pc-artboard-width: 700;

  --sp-artboard-width: 750;

  --formula: calc(var(--variable) * var(--ratio));

  --formula_pc: calc(var(--variable) * 1);

}



@media (min-width: 768px) {

  #LB260501GOODROCK {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: calc(100vw / var(--pc-width));

    --pc-design-height: 900;

    --variable-vh: calc(100vh / var(--pc-design-height));

    --formula-safe: min(

      var(--formula),

      calc(var(--variable-vh) * var(--ratio))

    );

  }

}



@media (min-width: 1350px) {

  #LB260501GOODROCK {

    --pc-width: 1350;

    --pc-artboard-width: 500;

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: calc(1350px / var(--pc-width));

    --variable-vh: calc(100vh / var(--pc-design-height));

    --formula-safe: min(

      var(--formula),

      calc(var(--variable-vh) * var(--ratio))

    );

  }

}



@media (max-width: 767px) {

  #LB260501GOODROCK {

    --ratio: 1;

    --variable: calc(100vw / var(--sp-width));

    --formula-safe: var(--formula);

  }

}



#LB260501GOODROCK img {

  display: block;

  width: 100%;

  height: auto;

  object-fit: cover;

}



#LB260501GOODROCK h2,

#LB260501GOODROCK h3,

#LB260501GOODROCK p,

#LB260501GOODROCK li {

  margin-block: calc((1em - 1lh) / 2);

}



#LB260501GOODROCK .invisible-heading {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}



/* --- 抽出されたCSS（上から順） --- */



#LB260501GOODROCK {

  position: relative;

  min-width: 100%;

  overflow-x: clip;

  display: flex;

  --black: #000000;

  --pink: #f7d7d5;

  --light-blue: #cfe8e8;

  --white: #ffffff;

  --font-eng: neue-haas-grotesk-display, sans-serif;

  --font-jpn: hiragino-kaku-gothic-pron, sans-serif;

  --font-light: 300;

  --font-medium: 500;

  font-feature-settings: normal;

  box-sizing: border-box;

}

#LB260501GOODROCK * {

  box-sizing: inherit;

}

#LB260501GOODROCK .sec-set {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  position: relative;

  justify-content: start;

  height: calc(1340 * var(--formula));

}

#LB260501GOODROCK [class*="__inner--absolute"] {

  position: relative;

}

#LB260501GOODROCK [class*="__inner--vertical"] {

  display: flex;

  flex-direction: column;

}

#LB260501GOODROCK [class*="__credit"] {

  display: flex;

  flex-direction: column;

  gap: calc(16 * var(--formula));

}

#LB260501GOODROCK [class*="__credit"] li {

  display: flex;

  font-family: var(--font-eng);

  color: var(--black);

  font-size: calc(22 * var(--formula));

  line-height: calc(38.5 / 22);

  letter-spacing: 0.094em;

  font-weight: var(--font-light);

  gap: calc(26 * var(--formula));

}



#LB260501GOODROCK [class*="sec9__link"] {

  font-family: var(--font-eng);

  color: var(--black);

  font-size: calc(28 * var(--formula));

  line-height: 1;

  letter-spacing: 0.092em;

  font-weight: var(--font-medium);

  display: block;

  position: relative;

  width: max-content;

}

#LB260501GOODROCK [class*="sec9__link"]::after {

  content: "";

  width: calc(19 * var(--formula));

  height: calc(26 * var(--formula));

  position: absolute;

  background-image: url(../img/sec9-obj-01.svg);

  background-size: contain;

  right: calc(-55 * var(--formula));

  top: calc(1 * var(--formula));

}

#LB260501GOODROCK [class*="-img-"] {

  background: var(--white);

}

#LB260501GOODROCK [class*="__sticky-wrap"] {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  position: relative;

  justify-content: center;

}

#LB260501GOODROCK .js-scrub-scale img {

  height: 100%;

}



#LB260501GOODROCK .lp-mv-area {

  width: 50%;

  position: sticky;

  top: 0;

  height: 100vh;

}

#LB260501GOODROCK .lp-mv-01 {

  width: 100%;

  height: 100%;

  z-index: 1;

  position: relative;

}

#LB260501GOODROCK .lp-mv-txt-01 {

  width: calc(423 * var(--formula_pc));

  z-index: 5;

  position: absolute;

  bottom: calc(13 * var(--formula_pc));

  left: calc(12 * var(--formula_pc));

}

#LB260501GOODROCK .lp-mv-01 img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: top center;

}

#LB260501GOODROCK .lp-main-area {

  width: 50%;

  display: flex;

  flex-direction: column;

  overflow-x: clip;

  align-items: center;

}



#LB260501GOODROCK .sec01 {

  z-index: 0;

  width: 100%;

  min-height: auto;

  height: calc(1697 * var(--formula));

}

#LB260501GOODROCK .sec01__sticky-wrap {

  height: auto;

}

#LB260501GOODROCK .sec01__inner--absolute {

  background: var(--pink);

}



#LB260501GOODROCK .sec1-txt-02 {

  width: calc(273 * var(--formula));

  top: calc(305 * var(--formula));

  left: calc(46 * var(--formula));

}



#LB260501GOODROCK .absolute-item {

  position: absolute;

  z-index: 5;

  transform: translateZ(0);

  pointer-events: none;

}



#LB260501GOODROCK .sec1-txt-03 {

  width: calc(81 * var(--formula));

  right: calc(46 * var(--formula));

  top: calc(465 * var(--formula));

}



#LB260501GOODROCK .sec1-txt-04 {

  width: calc(316 * var(--formula));

  top: calc(628 * var(--formula));

  left: calc(47 * var(--formula));

}



#LB260501GOODROCK .sec1-txt-01 {

  width: calc(193 * var(--formula));

  right: calc(47 * var(--formula));

  top: calc(48 * var(--formula));

}



#LB260501GOODROCK .sec1-img-01 {

  width: 100%;

  z-index: 1;

  position: relative;

  aspect-ratio: 750 / 998;

}



#LB260501GOODROCK .sec02 {

  padding: calc(101 * var(--formula)) calc(46 * var(--formula)) 0

    calc(46 * var(--formula));

  align-items: start;

  min-height: auto;

}



#LB260501GOODROCK .sec02__txt {

  padding: 0 0 calc(39 * var(--formula)) 0;

}



#LB260501GOODROCK .txt-jpn {

  font-family: var(--font-jpn);

  color: var(--black);

  font-size: calc(24 * var(--formula));

  line-height: calc(42 / 24);

  letter-spacing: 0;

  text-align: left;

  font-weight: var(--font-light);

}

#LB260501GOODROCK .txt-jpn span {

  margin: 0 0 0 calc(-12 * var(--formula));

}

#LB260501GOODROCK .txt-eng {

  font-family: var(--font-eng);

  color: var(--black);

  font-size: calc(20 * var(--formula));

  line-height: calc(35 / 20);

  letter-spacing: 0.097em;

  text-align: left;

  font-weight: var(--font-medium);

}



#LB260501GOODROCK .sec02__inner--vertical {

  align-self: center;

  margin: calc(57 * var(--formula)) 0 calc(153 * var(--formula)) 0;

}



#LB260501GOODROCK .sec02__inner--vertical span {

  font-family: var(--font-eng);

  color: var(--black);

  font-size: calc(24 * var(--formula));

  line-height: calc(35 / 24);

  letter-spacing: 0.08em;

  text-align: left;

  font-weight: var(--font-medium);

  text-transform: uppercase;

  position: relative;

  display: block;

}



#LB260501GOODROCK .sec02__inner--vertical span::after {

  content: "";

  position: absolute;

  bottom: calc(-103 * var(--formula));

  left: 49%;

  width: calc(10 * var(--formula));

  height: calc(74 * var(--formula));

  background-image: url("../img/sec2-obj-01.svg");

  background-size: contain;

  background-repeat: no-repeat;



  /* アニメーション適用 */

  animation: move 1.5s infinite;

  will-change: transform;

}



#LB260501GOODROCK .sec3-img-01 {

  width: calc(750 * var(--formula));

  z-index: 1;

  position: relative;

}



#LB260501GOODROCK .sec3-txt-01 {

  width: calc(330 * var(--formula));

  z-index: 5;

  position: absolute;

  bottom: calc(14 * var(--formula));

  left: calc(12 * var(--formula));

  pointer-events: none;

}

#LB260501GOODROCK .sec03__credit {

  bottom: calc(47 * var(--formula));

  right: calc(37 * var(--formula));

  align-items: end;

  pointer-events: auto;

}



#LB260501GOODROCK .sec04 {

  background: var(--pink);

  /* padding: calc(247 * var(--formula)) 0 calc(246 * var(--formula)) 0; */

}

#LB260501GOODROCK .sec04__sticky-wrap {

  padding: calc(247 * var(--formula)) 0 calc(246 * var(--formula)) 0;

}



#LB260501GOODROCK .sec4-img-01 {

  width: calc(590 * var(--formula-safe));

}



#LB260501GOODROCK .sec4-txt-01 {

  width: calc(21.8 * var(--formula));

  top: calc(1 * var(--formula));

  left: calc(-38 * var(--formula));

}



#LB260501GOODROCK .sec4-txt-02 {

  width: calc(21.7 * var(--formula));

  bottom: calc(0 * var(--formula));

  right: calc(-36 * var(--formula));

}



#LB260501GOODROCK .sec04__credit {

  align-self: start;

  position: absolute;

  bottom: calc(-61 * var(--formula));

}



#LB260501GOODROCK .sec5-img-01 {

  width: calc(750 * var(--formula));

  z-index: 1;

  position: relative;

}

#LB260501GOODROCK .sec5-txt-01 {

  width: calc(382 * var(--formula));

  z-index: 5;

  position: absolute;

  bottom: calc(14 * var(--formula));

  left: calc(12 * var(--formula));

  pointer-events: none;

}



#LB260501GOODROCK .sec05__credit {

  bottom: calc(40 * var(--formula));

  right: calc(37 * var(--formula));

  align-items: end;

  pointer-events: auto;

}



#LB260501GOODROCK .sec06 {

  background: var(--light-blue);

  align-items: start;

}

#LB260501GOODROCK .sec06__sticky-wrap {

  padding: calc(250 * var(--formula)) 0 calc(250 * var(--formula)) 0;

  align-items: start;

}



#LB260501GOODROCK #sec06-slide {

  width: calc(630 * var(--formula-safe));

  height: calc(840 * var(--formula-safe));

}

#LB260501GOODROCK #sec06-slide.js-anim-mask {

  display: block;

  aspect-ratio: 630 / 840;

  overflow: hidden;

}

#LB260501GOODROCK .splide {

  height: calc(690 * var(--formula));

}



#LB260501GOODROCK #sec06-slide .splide__slide {

  width: calc(630 * var(--formula));

  background: var(--white);

}



#LB260501GOODROCK .sec06__credit {

  position: absolute;

  right: calc(-272 * var(--formula));

  bottom: calc(193 * var(--formula));

  align-items: end;

}



#LB260501GOODROCK .vertical-text {

  transform: rotate(90deg);

}



#LB260501GOODROCK .sec07 {

  background: var(--white);

}



#LB260501GOODROCK .sec07__sticky-wrap {

  padding: calc(247 * var(--formula)) 0 calc(246 * var(--formula)) 0;

}



#LB260501GOODROCK .sec7-img-01 {

  width: calc(590 * var(--formula-safe));

}



#LB260501GOODROCK .sec7-txt-01 {

  width: calc(21.8 * var(--formula));

  top: calc(1 * var(--formula));

  left: calc(-38 * var(--formula));

}



#LB260501GOODROCK .sec7-txt-02 {

  width: calc(21.7 * var(--formula));

  bottom: calc(0 * var(--formula));

  right: calc(-36 * var(--formula));

}



#LB260501GOODROCK .sec07__credit {

  align-self: start;

  position: absolute;

  bottom: calc(-61 * var(--formula));

}



#LB260501GOODROCK .sec08 {

  background: var(--pink);

  align-items: start;

  position: relative;

  will-change: transform;

}

#LB260501GOODROCK .sec08__sticky-wrap {

  padding: calc(223 * var(--formula)) 0 calc(223 * var(--formula)) 0;

  align-items: start;

  z-index: 6;

  position: sticky;

  top: 0;

}



#LB260501GOODROCK .sec8-img-01 {

  width: calc(670 * var(--formula-safe));

}



#LB260501GOODROCK .sec08__credit {

  position: absolute;

  bottom: calc(184 * var(--formula));

  right: calc(-223 * var(--formula));

  pointer-events: auto;

}



#LB260501GOODROCK .sec09 {

  align-items: start;

  background: var(--white);

  padding: calc(192 * var(--formula)) 0 0 0;

  min-height: auto;

}

#LB260501GOODROCK .sec09__h3 {

  font-family: var(--font-eng);

  color: var(--black);

  font-size: calc(61 * var(--formula));

  line-height: 1;

  letter-spacing: 0.082em;

  font-weight: var(--font-light);

  padding: 0 0 0 calc(38 * var(--formula));

}

#LB260501GOODROCK .sec09__h4 {

  font-family: var(--font-eng);

  color: var(--black);

  font-size: calc(28 * var(--formula));

  line-height: 1;

  letter-spacing: 0.094em;

  font-weight: var(--font-light);

  padding: calc(20 * var(--formula)) 0 0 calc(39 * var(--formula));

}

#LB260501GOODROCK .sec09__inner--grid {

  display: grid;

  grid-template-columns: auto auto;

  grid-template-rows: auto auto;

  grid-column-gap: calc(0 * var(--formula));

  grid-row-gap: calc(0 * var(--formula));

  align-items: start;

  justify-content: space-between;

  width: 100%;

  padding: calc(55 * var(--formula)) calc(37 * var(--formula))

    calc(197 * var(--formula)) calc(40 * var(--formula));

}



#LB260501GOODROCK #sec09-slide {

  grid-area: 1 / 1 / 2 / 2;

  width: calc(490 * var(--formula));

  height: calc(544 * var(--formula));

  margin: calc(2 * var(--formula)) 0 0 0;

}



#LB260501GOODROCK #sec09-slide-thumbnail {

  grid-area: 1 / 2 / 3 / 3;

  margin: calc(4 * var(--formula)) 0 0 0;

}

#LB260501GOODROCK #sec09-slide-thumbnail .splide__slide:nth-child(2) {

  margin-top: calc(-1 * var(--formula));

}

#LB260501GOODROCK #sec09-slide-thumbnail .splide__slide:nth-child(3) {

  margin-top: calc(1 * var(--formula));

}

#LB260501GOODROCK #sec09-slide-thumbnail .splide__slide:nth-child(4) {

  margin-top: calc(-2 * var(--formula));

}

#LB260501GOODROCK #sec09-slide-thumbnail .splide__slide:nth-child(6) {

  margin-top: calc(-2 * var(--formula));

}

#LB260501GOODROCK .splide__track--nav > .splide__list > .splide__slide {

  cursor: pointer;

  box-sizing: border-box;

  position: relative;

}

#LB260501GOODROCK #sec09-slide .splide__arrow svg {

  display: none;

}



#LB260501GOODROCK

  #sec09-slide-thumbnail

  .splide__track--nav

  > .splide__list

  > .splide__slide.is-active {

  border-color: transparent; /* border自体は透明にしておく */

}

#LB260501GOODROCK #sec09-slide-thumbnail .splide__slide img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  border: none; /* ここで枠線をつけないのがポイント */

}

#LB260501GOODROCK #sec09-slide-thumbnail .splide__slide::after {

  content: "";

  position: absolute;

  top: calc(-5 * var(--formula));

  left: calc(0 * var(--formula));

  right: calc(0 * var(--formula));

  bottom: calc(-4 * var(--formula));



  border: max(1px, calc(2 * var(--formula))) solid transparent;

  pointer-events: none;

  box-sizing: border-box;

  transition: border-color 0.3s;

}

#LB260501GOODROCK #sec09-slide-thumbnail .splide__slide.is-active::after {

  border-color: #cccccc;

}

#LB260501GOODROCK #sec09-slide-thumbnail .splide__track {

  padding: 0 !important;

  overflow: visible;

}

#LB260501GOODROCK #sec09-slide .splide__arrow {

  align-items: center;

  border: 0;

  border-radius: unset;

  cursor: pointer;

  display: -ms-flexbox;

  display: flex;

  height: calc(10 * var(--formula));

  -ms-flex-pack: center;

  justify-content: center;

  opacity: 1;

  padding: 0;

  position: absolute;

  top: 109%;

  transform: translateY(-50%);

  width: calc(75 * var(--formula));

  z-index: 1;

  background: transparent;

}



#LB260501GOODROCK #sec09-slide .splide__arrow--prev {

  background-image: url("../img/sec9-obj-02.svg");

  background-size: contain;

  left: calc(156 * var(--formula));

}

#LB260501GOODROCK #sec09-slide .splide__arrow--next {

  background-image: url("../img/sec9-obj-03.svg");

  background-size: contain;

  right: calc(157 * var(--formula));

}

#LB260501GOODROCK .sec09__link-cont {

  grid-area: 2 / 1 / 3 / 2;

  display: flex;

  flex-direction: column;

  margin: calc(148 * var(--formula)) 0 0 0;

  gap: calc(37 * var(--formula));

}



#LB260501GOODROCK .sec10 {

  position: relative;

  z-index: 7;

  min-height: auto;

  height: auto;

}



#LB260501GOODROCK .sec10__staff-credit {

  position: absolute;

  font-family: var(--font-eng);

  color: var(--black);

  font-size: calc(18 * var(--formula));

  line-height: 1;

  letter-spacing: 0.089em;

  text-align: left;

  font-weight: var(--font-medium);

  display: flex;

  flex-direction: column;

  gap: calc(7.4 * var(--formula));

  top: calc(24 * var(--formula));

  left: calc(24 * var(--formula));

  z-index: 5;

  pointer-events: none;

}

#LB260501GOODROCK .sec10-img-01 {

  z-index: 1;

  width: 100%;

}

@media (max-width: 767px) {

  #LB260501GOODROCK .lp-mv-area {

    display: none;

  }

  #LB260501GOODROCK .lp-main-area {

    width: 100%;

  }

}

@keyframes move {

  0% {

    transform: translateY(0);

  }

  20% {

    transform: translateY(calc(10 * var(--formula)));

  }

  40% {

    transform: translateY(0);

  }

}

#LB260501GOODROCK .js-anim-mask {

  display: block;

  overflow: hidden;

  -webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);

  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);

  will-change: clip-path, transform;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  transform: translateZ(0);

  transition: none !important;

}



@media screen and (min-width: 1350px) {

  #LB260501GOODROCK .sec-set {

    width: calc(500 * var(--formula_pc));

  }

}