@charset "UTF-8";

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



#MO260722pochacco {

  max-width: 100%;

  min-width: 100%;

  font-feature-settings: "palt";

  position: relative;

  display: flex;

  --black: #000000;

  --white: #ffffff;

  --sky-blue: #b4cedd;

  --font-jpn: "游ゴシック体", Yu Gothic, YuGothic, yu-gothic-pr6n, sans-serif;

  --font-credit: pragmatica, sans-serif;

  --pc-width: 1400;

  --sp-width: 750;

  --pc-artboard-width: 500;

  --sp-artboard-width: 750;

  --font-l: 300;

  --font-r: 400;

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

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

}



@media (min-width: 1401px) {

  #MO260722pochacco {

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

    --variable: 1px;

  }

}

@media (min-width: 768px) and (max-width: 1400px) {

  #MO260722pochacco {

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

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

  }

}

@media (max-width: 767px) {

  #MO260722pochacco {

    --ratio: 1;

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

  }

}



#MO260722pochacco img {

  display: block;

  width: 100%;

  height: auto;

}



#MO260722pochacco h2,

#MO260722pochacco h3,

#MO260722pochacco p,

#MO260722pochacco li {

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

}



#MO260722pochacco .invisible-heading {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: 1px;

  padding: 0;

  overflow: hidden;

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

  border: 0;

}



#MO260722pochacco [class*="-img-"]:has(a) {

  background: var(--white);

  display: flex;

  flex-direction: column;

  line-height: 0;

  font-size: 0;

}



/* --- 属性セレクタ設定 --- */



#MO260722pochacco [class*="__txt"] {

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

  color: var(--black);

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

  line-height: calc(58 / 24);

  letter-spacing: 0.025em;

  text-align: center;

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

}



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

  display: flex;

  flex-direction: column;

  align-items: center;

}



#MO260722pochacco video {

  width: 100%;

  height: auto;

  object-fit: cover;

}



#MO260722pochacco [class*="__inner--grid"] {

  display: grid;

}

#MO260722pochacco [class*="__inner--grid"] > * {

  grid-area: 1/1;

}

#MO260722pochacco [class*="__inner--grid"] > [class*="sec-txt"] {

  z-index: 5;

}

#MO260722pochacco [class*="__inner--grid"] > [class*="sec-img"] {

  z-index: 1;

}

#MO260722pochacco [class*="__credit"] {

  display: flex;

  flex-direction: column;

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

}



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

  display: flex;

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

  color: var(--black);

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

  line-height: 1;

  letter-spacing: 0;

  text-align: center;

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

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

}



#MO260722pochacco [class*="__inner--horizontal"] {

  display: flex;

  align-items: flex-start;

}



#MO260722pochacco [class*="-txt-"]:not(.footer-txt-02,.lp-pc-txt-02,.lp-pc-txt-01,.teaser-txt-01) {

  pointer-events: none;

}



/* --- 固有クラス設定 --- */



#MO260722pochacco .sec-set {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

}



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

#MO260722pochacco .lp-left-area,

#MO260722pochacco .lp-right-area {

  flex: 1;

  position: sticky;

  top: 0;

  height: 100vh;

  display: grid;

  place-items: center;

}



#MO260722pochacco .lp-main-area {

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

}

#MO260722pochacco .lp-pc-txt-01 {

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

}



#MO260722pochacco .lp-mv-sec {

}

#MO260722pochacco .z5-relative{

  position: relative;

  z-index: 5;

}

#MO260722pochacco .lp-mv-img-01 {

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

}



#MO260722pochacco .lp-mv-img-02 {

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

}



#MO260722pochacco .teaser-sec {

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

}



#MO260722pochacco .teaser-sec__txt--teaser {

  margin: calc(103 * var(--formula)) 0 calc(62 * var(--formula)) 0;

}



#MO260722pochacco .teaser-sec__h2--date {

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

  color: var(--black);

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

  line-height: 1;

  letter-spacing: 0.025em;

  text-align: center;

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

  background: var(--sky-blue);

  border-radius: calc(25 * var(--formula));

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

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

  display: grid;

  place-items: center;

}



#MO260722pochacco .teaser-txt-01 {

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

  margin: calc(29 * var(--formula)) 0 calc(18 * var(--formula)) 0;

}



#MO260722pochacco .teaser-sec__inner--video {

  position: relative;

  overflow: hidden;

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

  margin: calc(105 * var(--formula)) 0 0 calc(-7 * var(--formula));

}

#MO260722pochacco .video-sound-btn {

  position: absolute;

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

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

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

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

  background: transparent;

  border: none;

  padding: 0;

  cursor: pointer;

}



#MO260722pochacco .video-sound-btn img {

  display: none;

}



#MO260722pochacco .video-sound-btn[data-state="off"] .icon-off {

  display: block;

}

#MO260722pochacco .video-sound-btn[data-state="on"] .icon-on {

  display: block;

}

#MO260722pochacco .heading-txt-01 {

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

  margin: calc(15 * var(--formula)) 0 calc(30 * var(--formula))

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

}



#MO260722pochacco .sec-img-01 {

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

}



#MO260722pochacco .sec-txt-01 {

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

  margin: calc(21 * var(--formula)) 0 0 calc(20 * var(--formula));

}



#MO260722pochacco .sec01__credit {

  margin: calc(30 * var(--formula)) 0 calc(32 * var(--formula)) 0;

  align-items: center;

}



#MO260722pochacco .sec02__inner--horizontal {

  align-self: flex-end;

}

#MO260722pochacco .sec-txt-02 {

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

  margin: calc(5 * var(--formula)) calc(23 * var(--formula)) 0 0;

}

#MO260722pochacco .splide__pagination {

  padding: 0;

  left: auto;

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

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

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

}

#MO260722pochacco .splide__pagination__page {

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

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

  opacity: 1;

  background: unset;

  border: 1px solid var(--white);

  margin: 0;

}

#MO260722pochacco .splide__pagination__page.is-active {

  transform: scale(1);

  background: var(--white);

}

#MO260722pochacco #sec02-slide {

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

}

#MO260722pochacco #sec02-slide .splide__slide {

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

}



#MO260722pochacco .sec02__credit {

  margin: calc(31 * var(--formula)) 0 calc(31 * var(--formula))

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

}



#MO260722pochacco .sec03__inner--horizontal {

  align-self: flex-start;

}



#MO260722pochacco .sec-img-04 {

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

}



#MO260722pochacco .sec-txt-03 {

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

  margin: calc(5 * var(--formula)) 0 0 calc(20 * var(--formula));

}



#MO260722pochacco .sec03__credit {

  margin: calc(31 * var(--formula)) 0 calc(35 * var(--formula)) 0;

  align-items: center;

}



#MO260722pochacco .sec-img-05 {

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

}



#MO260722pochacco .sec04__credit {

  margin: calc(31 * var(--formula)) 0 calc(29 * var(--formula)) 0;

}



#MO260722pochacco .sec-img-06 {

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

}



#MO260722pochacco .sec-txt-04 {

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

  justify-self: end;

  margin: calc(22 * var(--formula)) calc(23 * var(--formula)) 0 0;

}



#MO260722pochacco .sec05__credit {

  margin: calc(32 * var(--formula)) 0 calc(30 * var(--formula)) 0;

  align-items: center;

}



#MO260722pochacco .heading-txt-02 {

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

  margin: calc(163 * var(--formula)) 0 calc(31 * var(--formula))

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

}



#MO260722pochacco .sec-img-07 {

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

}



#MO260722pochacco .sec-img-08 {

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

}



#MO260722pochacco .sec06__inner--horizontal {

  margin: calc(18 * var(--formula)) 0 0 calc(35 * var(--formula));

  align-self: flex-start;

}



#MO260722pochacco .sec-img-09 {

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

}



#MO260722pochacco .sec-txt-05 {

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

  margin: calc(5 * var(--formula)) 0 0 calc(21 * var(--formula));

}



#MO260722pochacco .sec06__credit {

  align-items: center;

  margin: calc(31 * var(--formula)) 0 calc(33 * var(--formula)) 0;

}

#MO260722pochacco .sec06__credit li:nth-of-type(1) {

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

}

#MO260722pochacco .sec06__credit li:nth-of-type(2) {

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

}



#MO260722pochacco .sec07__inner--grid {

  align-self: flex-end;

}



#MO260722pochacco #sec07-slide {

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

}

#MO260722pochacco #sec07-slide .splide__slide {

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

}

#MO260722pochacco .sec-txt-06 {

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

  justify-self: end;

  margin: calc(21 * var(--formula)) calc(20 * var(--formula)) 0 0;

}



#MO260722pochacco .sec07__credit {

  margin: calc(31 * var(--formula)) 0 calc(34 * var(--formula)) 0;

  align-items: center;

}

#MO260722pochacco .sec07__credit li:nth-of-type(1) {

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

}



#MO260722pochacco .sec-img-12 {

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

}



#MO260722pochacco .sec-txt-07 {

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

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

}



#MO260722pochacco .sec08__credit {

  margin: calc(31 * var(--formula)) 0 calc(33 * var(--formula)) 0;

  align-items: center;

}



#MO260722pochacco #sec09-slide,

#MO260722pochacco #sec09-slide .splide__slide {

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

}

#MO260722pochacco .sec-txt-08 {

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

  justify-self: end;

  margin: calc(16 * var(--formula)) calc(24 * var(--formula)) 0 0;

}



#MO260722pochacco .sec09__credit {

  align-items: center;

  margin: calc(33 * var(--formula)) 0 calc(30 * var(--formula)) 0;

}



#MO260722pochacco .long-t-shirt-sec {

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

}



#MO260722pochacco .heading-txt-03 {

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

  margin: calc(16 * var(--formula)) 0 calc(22 * var(--formula))

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

}



#MO260722pochacco .sec10__line-anm {

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

  height: calc(141 * var(--formula)) !important;

}



#MO260722pochacco .sec-img-15 {

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

  align-self: flex-start;

  margin: 0 0 calc(20 * var(--formula)) calc(25 * var(--formula));

}



#MO260722pochacco .sec10__inner--horizontal {

  align-self: flex-end;

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

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

}



#MO260722pochacco .sec-txt-09 {

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

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

}



#MO260722pochacco .sec-img-16 {

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

}



#MO260722pochacco .sec10__credit {

  align-items: center;

  margin: calc(31 * var(--formula)) 0 calc(34 * var(--formula))

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

}

#MO260722pochacco .sec10__credit li:nth-of-type(1) {

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

}

#MO260722pochacco .sec10__credit li:nth-of-type(2) {

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

}



#MO260722pochacco .sec11__line-anm {

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

}



#MO260722pochacco .sec11__inner--grid {

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

}



#MO260722pochacco .sec-img-17 {

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

}



#MO260722pochacco .sec-txt-10 {

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

  justify-self: end;

  margin: calc(20 * var(--formula)) calc(22 * var(--formula)) 0 0;

}



#MO260722pochacco .sec11__credit {

  align-items: center;

  margin: calc(30 * var(--formula)) 0 calc(31 * var(--formula))

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

}

#MO260722pochacco .sec11__credit li:nth-of-type(1) {

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

}

#MO260722pochacco .sec11__credit li:nth-of-type(2) {

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

}



#MO260722pochacco .sec12__line-anm {

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

}



#MO260722pochacco .sec12__inner--horizontal {

  align-self: flex-start;

}



#MO260722pochacco #sec12-slide,

#MO260722pochacco #sec12-slide .splide__slide {

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

}



#MO260722pochacco .sec-txt-11 {

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

  margin: calc(1 * var(--formula)) 0 0 calc(9 * var(--formula));

}



#MO260722pochacco .sec12__credit {

  margin: calc(31 * var(--formula)) 0 calc(30 * var(--formula))

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

  align-items: flex-end;

}

#MO260722pochacco .sec12__credit li:nth-of-type(1) {

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

}

#MO260722pochacco .sec12__credit li:nth-of-type(2) {

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

}

#MO260722pochacco .back-sec {

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

}



#MO260722pochacco .heading-txt-04 {

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

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

}



#MO260722pochacco .sec13__line-anm {

  height: calc(146 * var(--formula)) !important;

}



#MO260722pochacco .sec-img-20 {

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

  align-self: flex-end;

}



#MO260722pochacco .sec-img-21 {

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

  margin: calc(20 * var(--formula)) 0 0 calc(-10 * var(--formula));

}



#MO260722pochacco .sec13__credit {

  margin: calc(31 * var(--formula)) 0 calc(32 * var(--formula)) 0;

}



#MO260722pochacco .sec-img-22 {

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

}



#MO260722pochacco .sec-img-23 {

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

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

}



#MO260722pochacco .sec14__credit {

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

}



#MO260722pochacco .footer-txt-02 {

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

  margin: calc(113 * var(--formula)) 0 calc(83 * var(--formula)) 0;

}



#MO260722pochacco .footer-txt-03 {

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

}



#MO260722pochacco .footer-txt-01 {

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

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

}



#MO260722pochacco .lp-pc-txt-02 {

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

}

@media (max-width: 767px) {

  #MO260722pochacco .lp-left-area,

  #MO260722pochacco .lp-right-area {

    display: none;

  }



  #MO260722pochacco .lp-main-area {

    width: 100%;

  }

}

/* 

////////////////////////////////////////////

animate-item

////////////////////////////////////////////

*/

#MO260722pochacco [class*="__line-anm"] {

display: block;

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

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

  background-color: var(--sky-blue);

  /* Z軸の移動を加えてGPU処理を安定させる */

  transform: scaleY(0) translateZ(0); 

  transform-origin: top center;

  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);

  /* 裏面を非表示にしてアンチエイリアスのバグを防ぐ */

  backface-visibility: hidden;

}



#MO260722pochacco [class*="__line-anm"].is-visible {

  transform: scaleY(1) translateZ(0);

}

#MO260722pochacco .fade-in {

  opacity: 0;

  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);

}



#MO260722pochacco .fade-in.is-visible {

  opacity: 1;

}

#MO260722pochacco .slide-right {

  opacity: 0;

  transform: translateX(calc(-40 * var(--formula)));

}



#MO260722pochacco .is-visible.slide-right {

  opacity: 1;

  transform: translateX(0);

  transition: all 1s ease-out;

}

#MO260722pochacco .slide-left {

  opacity: 0;

  transform: translateX(calc(40 * var(--formula)));

}



#MO260722pochacco .is-visible.slide-left {

  opacity: 1;

  transform: translateX(0);

  transition: all 1s ease-out;

}