@charset "UTF-8";

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

.footer .footer-inner .page-top {

  display: none;

}

#footer.footer {

  padding-top: 0;

}

.footer .toTop {

  margin-right: calc(500 * 100vw / 1400);

}

#MO260611accessory {

  min-width: 100%;

  font-feature-settings: normal;

  display: flex;

  position: relative;

  background: var(--aqua);

  --black: #000000;

  --white: #ffffff;

  --blue: #1264c6;

  --aqua: #e7fffd;

  --yellow: #ffff94;

  --font-eng: baskerville-display-pt, serif;

  --font-jpn: yu-gothic-pr6n, sans-serif;

  --font-r: 400;

  --pc-width: 1400;

  --sp-width: 750;

  --pc-artboard-width: 490;

  --sp-artboard-width: 750;

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

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

}



@media (min-width: 1401px) {

  #MO260611accessory {

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

    --variable: 1px;

  }

}

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

  #MO260611accessory {

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

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

  }

}

@media (max-width: 767px) {

  #MO260611accessory {

    --ratio: 1;

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

  }

}



#MO260611accessory img,

#MO260611accessory video {

  display: block;

  width: 100%;

  height: auto;

}



#MO260611accessory h2,

#MO260611accessory h3,

#MO260611accessory p,

#MO260611accessory li {

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

}



#MO260611accessory .invisible-heading {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

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

  border: 0;

}



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

  background: var(--white);

}



#MO260611accessory [class*="-img-"] a {

  display: flex;

  flex-direction: column;

  line-height: 0;

  font-size: 0;

}

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



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

  display: flex;

}



#MO260611accessory [class*="__txt"] {

  font-family:;

  color:;

  font-size:;

  line-height:;

  letter-spacing:;

  text-align:;

  font-weight:;

}



#MO260611accessory [class*="__credit"] {

  display: flex;

  flex-direction: column;

  font-feature-settings: "ss01";

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

  align-items: center;

}



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

  display: flex;

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

  color: var(--black);

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

  line-height: 1;

  letter-spacing: 0;

  text-align: center;

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

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

}



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

  display: flex;

  flex-direction: column;

  align-items: center;

}



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

  position: relative;

}



#MO260611accessory [class*="__h3"] {

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

  color: var(--blue);

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

  line-height: calc(90 / 82);

  letter-spacing: 0;

  text-align: left;

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

  position: relative;

  font-feature-settings: "ss01";

}

#MO260611accessory [class*="modal__txt"] {

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

  color: var(--black);

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

  line-height: calc(56 / 28);

  letter-spacing: 0.05em;

  text-align: left;

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

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

  font-feature-settings: "palt";

  pointer-events: auto;

}

#MO260611accessory [class*="__ttl"] {

  display: flex;

  flex-direction: column;

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

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

  align-items: start;

  pointer-events: auto;

}



#MO260611accessory [class*="__subttl"] {

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

  color: var(--blue);

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

  line-height: 1;

  letter-spacing: 0;

  text-align: left;

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

  font-feature-settings: "palt";

}



#MO260611accessory [class*="modal__inner"] {

  display: flex;

  flex-direction: column;

  align-items: start;

  width: 100%;

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

  pointer-events: none;

}

#MO260611accessory [class*="left__h2"] {

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

  color: var(--blue);

  font-size: calc(40.3 * (100vw / 1400));

  line-height: 1;

  letter-spacing: 0;

  text-align: left;

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

  position: relative;

  font-feature-settings: "ss01";

}

#MO260611accessory [class*="modal__h3-txt"] {

  display: inline-block;

  position: relative;

  font-feature-settings: "ss01";

}

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



#MO260611accessory .z5-absolute {

  z-index: 5;

  position: absolute;

}



#MO260611accessory .sec-set {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  position: relative;

}



#MO260611accessory .z1-relative {

  z-index: 1;

  position: relative;

}



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



#MO260611accessory .lp-left-area,

#MO260611accessory .lp-right-area {

  position: sticky;

  top: 0;

  height: 100vh;

  display: grid;

  place-items: center;

  flex: 1;

}



#MO260611accessory .lp-main-area {

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

}

#MO260611accessory .left__h2 {

  display: flex;

  flex-direction: column;

  align-items: start;

  top: calc(64 * (100vw / 1400));

  left: calc(72 * (100vw / 1400));

}



#MO260611accessory .left__h2--upper::before {

  content: "’";

  position: absolute;

  top: calc(-1 * (100vw / 1400));

  left: calc(-8 * (100vw / 1400));

}

#MO260611accessory .left__h2--lower {

  font-size: calc(38.5 * (100vw / 1400));

  line-height: 0.86;

}



#MO260611accessory .lp-img-11 {

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

}



#MO260611accessory .content-area {

  overflow-x: clip;

}



#MO260611accessory .lp-video-sec {

  margin-top: -100dvh;

}



#MO260611accessory .lp-btn-01 {

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

  position: absolute;

  z-index: 5;

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

}



#MO260611accessory .modal-btn__inner--horizontal {

  background: var(--yellow);

  width: 100%;

  border-top-color: var(--black);

  border-top-width: 1px;

  border-top-style: solid;

  border-bottom-color: var(--black);

  border-bottom-width: 1px;

  border-bottom-style: solid;

  position: sticky;

  top: 0;

  z-index: 10;

}

#MO260611accessory .modal-btn__inner--horizontal > * {

  flex: 1;

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

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  cursor: pointer;

}

#MO260611accessory [class*="__inner--horizontal"] > *:not(:last-child) {

  border-right-style: solid;

  border-right-color: var(--black);

  border-right-width: 1px;

}

#MO260611accessory .modal-btn__accessories {

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

}

#MO260611accessory .modal-btn__accessories > * {

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

}

#MO260611accessory .modal-btn__txt {

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

  color: var(--black);

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

  line-height: calc(40 / 32);

  letter-spacing: 0.025em;

  text-align: center;

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

  font-feature-settings: "ss01";

}



#MO260611accessory .modal-btn__sup {

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

  color: var(--black);

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

  line-height: 1;

  letter-spacing: 0.025em;

  text-align: center;

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

}



#MO260611accessory .modal-btn__summer {

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

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

}



#MO260611accessory .sec1 {

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

}



#MO260611accessory .lp-img-01 {

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

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

}



#MO260611accessory .sec1__inner--vertical {

  position: absolute;

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

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

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

  pointer-events: none;

}



#MO260611accessory .sec1__line-anm {

  position: relative;

  display: inline-block;

  width: 3px;

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

  overflow: hidden;

}



#MO260611accessory .sec1__line-anm::before {

  content: "";

  position: absolute;

  top: 0;

  width: 1px;

  left: 50%;

  transform: translateX(-50%);



  height: 100%;

  background-color: var(--black);

  animation: linePassThroughFirefox 2.5s cubic-bezier(0.76, 0, 0.24, 1) infinite;

}

#MO260611accessory .lp-txt-01 {

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

}



#MO260611accessory .sec2 {

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

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

}



#MO260611accessory .lp-img-02 {

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

}



#MO260611accessory .sec3 {

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

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

}



#MO260611accessory .splide__pagination {

  padding: 0;

  left: auto;

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

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

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

}

#MO260611accessory .splide__pagination__page {

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

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

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

  background: var(--aqua);

  opacity: 1;

  margin: 0;

}

#MO260611accessory .splide__pagination__page.is-active {

  transform: scale(1);

  background: var(--black);

}



#MO260611accessory .sec4 {

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

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

}



#MO260611accessory .lp-img-05 {

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

}



#MO260611accessory .sec5 {

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

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

}



#MO260611accessory .lp-img-06 {

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

}



#MO260611accessory .sec6 {

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

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

}



#MO260611accessory .lp-img-07 {

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

}



#MO260611accessory .sec7 {

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

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

}



#MO260611accessory .lp-img-08 {

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

}



#MO260611accessory .sec8 {

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

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

}



#MO260611accessory .lp-img-09 {

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

}



#MO260611accessory .footer-sec {

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

}



#MO260611accessory .lp-img-10 {

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

}



#MO260611accessory .footer__loop-anm {

  display: flex;

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

  padding-right: calc(50 * var(--formula));

}

#MO260611accessory .footer__loop-wrap {

  position: absolute;

  top: 49.5%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 100%;

}

#MO260611accessory .footer__loop-inner {

  display: flex;

  width: max-content;

  animation: infinite-scroll 60s linear infinite;

}

#MO260611accessory .footer__loop-anm li {

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

  color: var(--yellow);

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

  line-height: 1;

  letter-spacing: 0;

  text-align: left;

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

  white-space: nowrap;

}



#MO260611accessory .lp-btn-02 {

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

  left: 50%;

  transform: translate(-50%, -50%);

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

}



#MO260611accessory .footer__h3 {

  color: var(--black);

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

  line-height: calc(40.25 / 23);

  align-self: start;

  padding: calc(80 * var(--formula)) 0 calc(37 * var(--formula))

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

}



#MO260611accessory .footer__credit {

  align-self: start;

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

  align-items: start;

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

}

#MO260611accessory .footer__credit li {

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

}

#MO260611accessory .lp-txt-02 {

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

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

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

}



#MO260611accessory dialog {

  border: none;

  background: color-mix(in srgb, var(--aqua) 86%, transparent);

  padding: 0;

  margin: 0;

  position: absolute;

  top: var(--modal-top, 0px);

  height: var(--modal-height, 100dvh);

  max-height: none;

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

  left: 50%;

  transform: translateX(-50%);

  display: none;

  opacity: 0;

  transition:

    opacity 0.5s ease,

    display 0.5s ease allow-discrete;

  z-index: 500;

}

#MO260611accessory .screen-area {

  position: sticky;

  top: 0;

  height: 100dvh;

  border: none;

  background: color-mix(in srgb, var(--aqua) 86%, transparent);

  padding: 0;

  margin: 0;

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

  display: flex;

  align-items: center;

  justify-content: center;

  overflow-y: auto;

  left: 0;

  right: 0;

  margin-inline: auto;



  opacity: 0;

  pointer-events: none;

  transition: opacity 0.5s ease;

  z-index: 500;

}

#MO260611accessory dialog[open] {

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 1;



  @starting-style {

    opacity: 0;

  }

}

#MO260611accessory .screen-area.is-open {

  opacity: 1;

  pointer-events: auto;

}

#MO260611accessory .modal__h3-txt1::before {

  content: "\201C";

  position: absolute;

  top: 0;

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

}



#MO260611accessory .modal__subttl-accessories {

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

}



#MO260611accessory .modal__close-btn {

  position: absolute;

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

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

  border: none;

  background: transparent;

  cursor: pointer;

  padding: 0;

  outline: none;

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

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

  pointer-events: auto;

}

.modal__close-btn::before,

.modal__close-btn::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

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

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

  background-color: var(--black);

}

.modal__close-btn::before {

  transform: translate(-50%, -50%) rotate(45deg);

}



/* 2本目の線を左に45度回転 */

.modal__close-btn::after {

  transform: translate(-50%, -50%) rotate(-45deg);

}



#MO260611accessory .modal__inner-summer {

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

}



#MO260611accessory .modal__ttl-summer {

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

}



#MO260611accessory .modal__h3-txt2::before {

  content: "“";

  position: absolute;

  top: 0;

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

}



#MO260611accessory .screen__inner {

  display: grid;

  place-items: center;

  height: 100%;

  width: 100%;

}



#MO260611accessory .screen__ttl {

  align-items: center;

  grid-area: 1/1;

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

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

  pointer-events: none;

}



#MO260611accessory .screen__h3 {

  text-align: center;

  display: flex;

  flex-direction: column;

  pointer-events: none;

}



#MO260611accessory .screen__h3--upper {

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

  letter-spacing: -0.015em;

  line-height: 1;

  pointer-events: none;

}

#MO260611accessory .screen__h3--upper::before {

  content: "’";

  position: absolute;

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

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

  pointer-events: none;

}

#MO260611accessory .screen__h3--lower {

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

  letter-spacing: -0.015em;

  line-height: 0.78;

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

  pointer-events: none;

}



#MO260611accessory .screen__subttl {

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

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

  pointer-events: none;

}



#MO260611accessory .screen__inner--vertical {

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

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

  pointer-events: none;

}



#MO260611accessory .lp-txt-03 {

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

  pointer-events: none;

}



#MO260611accessory .screen__line-anm {

  position: relative;

  display: inline-block;

  width: 3px;

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

  overflow: hidden;

}

#MO260611accessory .screen__line-anm::before {

  content: "";

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 1px;

  height: 100%;

  background-color: var(--blue);

  animation: linePassThroughFirefox 2.5s cubic-bezier(0.76, 0, 0.24, 1) infinite;

}

#MO260611accessory .right__txt {

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

  color: var(--blue);

  font-size: calc(20 * (100vw / 1400));

  line-height: 1;

  letter-spacing: 0;

  text-align: right;

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

  font-feature-settings: "ss01";

  bottom: calc(62 * (100vw / 1400));

  right: calc(75 * (100vw / 1400));

}



#MO260611accessory .lp-img-12 {

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

}

@media (max-width: 767px) {

  .main-area.lp {

    padding-top: 0;

  }

  #MO260611accessory .lp-left-area,

  #MO260611accessory .lp-right-area {

    display: none;

  }



  #MO260611accessory .lp-main-area {

    width: 100%;

  }

  #MO260611accessory dialog,

  #MO260611accessory .screen-area {

    width: 100%;

  }

  #header.header {

    position: relative;

  }

}

/* 

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

animation

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

*/

@keyframes infinite-scroll {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-50%);

  }

}



#MO260611accessory .fade-in {

  opacity: 0;

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

}

#MO260611accessory .is-visible.fade-in {

  opacity: 1;

}

@keyframes linePassThroughFirefox {

  0% {

    transform: translateX(-50%) translateY(-100%);

  }

  50% {

    transform: translateX(-50%) translateY(0);

  }

  100% {

    transform: translateX(-50%) translateY(100%);

  }

}