.elementor-2836 .elementor-element.elementor-element-7b8fb77{--display:flex;}.elementor-2836 .elementor-element.elementor-element-6fde15a{--display:flex;--margin-top:-25px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2836 .elementor-element.elementor-element-3b03b56{--display:flex;}.elementor-2836 .elementor-element.elementor-element-e815030{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2836 .elementor-element.elementor-element-a14cea6{--display:flex;}.elementor-2836 .elementor-element.elementor-element-a44918a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2836 .elementor-element.elementor-element-af20b44{--display:flex;}.elementor-2836 .elementor-element.elementor-element-bfe28a3{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2836 .elementor-element.elementor-element-121bc60{--display:flex;}.elementor-2836 .elementor-element.elementor-element-683f215{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2836 .elementor-element.elementor-element-7230a30{--display:flex;}.elementor-2836 .elementor-element.elementor-element-bdc2259{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2836 .elementor-element.elementor-element-651bfb9{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2836 .elementor-element.elementor-element-14ba87b{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2836 .elementor-element.elementor-element-3ace587{--display:flex;}.elementor-2836 .elementor-element.elementor-element-f292a0e{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-d40820f *//* =========================================================
   MOON LOOP STUDIO
   WEB HERO V2

   完全新規
   BLACK / WHITE / GOLD / GRAY
========================================================= */

.mls-webhero2{

  --black:#0A0A0A;
  --black2:#121212;

  --white:#FFFFFF;
  --moon:#F8F8F5;

  --gold:#B38A45;
  --gold-light:#D4B875;

  position:relative;

  width:100%;

  height:max(760px,100svh);

  min-height:760px;

  overflow:hidden;

  display:flex;

  align-items:center;

  justify-content:center;

  background:
    radial-gradient(
      circle at 50% 47%,
      #1A1A1A 0%,
      #101010 47%,
      #070707 100%
    );

  color:#fff;

  isolation:isolate;
}


.mls-webhero2,
.mls-webhero2 *,
.mls-webhero2 *::before,
.mls-webhero2 *::after{
  box-sizing:border-box;
}



/* =========================================================
   STARS
========================================================= */

.mls-webhero2__stars{

  position:absolute;

  z-index:-5;

  inset:0;

  pointer-events:none;
}


.mls-webhero2__stars i{

  position:absolute;

  width:2px;
  height:2px;

  border-radius:50%;

  background:
    rgba(255,255,255,.65);
}


.mls-webhero2__stars i:nth-child(1){
  left:8%;
  top:22%;
}

.mls-webhero2__stars i:nth-child(2){
  left:16%;
  top:67%;
}

.mls-webhero2__stars i:nth-child(3){
  left:28%;
  top:14%;
}

.mls-webhero2__stars i:nth-child(4){
  left:37%;
  top:84%;
}

.mls-webhero2__stars i:nth-child(5){
  left:73%;
  top:18%;
}

.mls-webhero2__stars i:nth-child(6){
  left:85%;
  top:37%;
}

.mls-webhero2__stars i:nth-child(7){
  left:91%;
  top:73%;
}

.mls-webhero2__stars i:nth-child(8){
  left:68%;
  top:86%;
}



/* =========================================================
   BACK TYPO
========================================================= */

.mls-webhero2__backtype{

  position:absolute;

  z-index:-3;

  left:50%;

  top:-2%;

  transform:
    translateX(-50%);

  white-space:nowrap;

  font-family:
    "Times New Roman",
    Georgia,
    serif;

  font-size:
    clamp(95px,12vw,190px);

  line-height:.85;

  font-weight:400;

  letter-spacing:.06em;

  color:transparent;

  -webkit-text-stroke:
    1px
    rgba(179,138,69,.40);

  pointer-events:none;
}



/* =========================================================
   TOP
========================================================= */

.mls-webhero2__top{

  position:absolute;

  z-index:20;

  left:
    clamp(28px,5vw,78px);

  right:
    clamp(28px,5vw,78px);

  top:
    clamp(26px,3.5vw,45px);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;
}


.mls-webhero2__brand{

  display:flex;

  align-items:center;

  gap:11px;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.mls-webhero2__brand span{

  color:
    rgba(255,255,255,.55);
}


.mls-webhero2__brand i{

  width:35px;
  height:1px;

  background:
    var(--gold);
}


.mls-webhero2__brand strong{

  color:
    var(--gold-light);
}



.mls-webhero2__services{

  display:flex;

  align-items:center;

  gap:
    clamp(22px,3vw,45px);

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.18em;

  color:
    rgba(255,255,255,.35);
}



/* =========================================================
   SIDE
========================================================= */

.mls-webhero2__side{

  position:absolute;

  z-index:10;

  top:50%;

  display:flex;

  flex-direction:column;

  gap:8px;

  transform:
    translateY(-50%);

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.19em;

  color:
    rgba(255,255,255,.28);
}


.mls-webhero2__side i{

  width:36px;
  height:1px;

  margin-top:8px;

  background:
    var(--gold);
}


.mls-webhero2__side--left{

  left:
    clamp(28px,4.5vw,70px);
}


.mls-webhero2__side--right{

  right:
    clamp(28px,4.5vw,70px);

  align-items:flex-end;

  text-align:right;
}



/* =========================================================
   MOON STAGE
========================================================= */

.mls-webhero2__moon-stage{

  position:relative;

  width:
    min(70vw,860px);

  aspect-ratio:1;

  transform:
    translate3d(
      var(--hero-x,0px),
      var(--hero-y,0px),
      0
    );

  transition:
    transform .12s linear;

  will-change:transform;
}



/* =========================================================
   ORBITS
========================================================= */

.mls-webhero2__orbit{

  position:absolute;

  pointer-events:none;

  border-radius:50%;
}


.mls-webhero2__orbit--outer{

  inset:-9%;

  border:
    1px solid
    rgba(179,138,69,.35);

  transform:
    rotate(-12deg);
}


.mls-webhero2__orbit--inner{

  inset:-3%;

  border:
    1px solid
    rgba(255,255,255,.08);

  transform:
    rotate(8deg);
}


.mls-webhero2__orbit--outer i{

  position:absolute;

  left:50%;
  top:-6px;

  width:11px;
  height:11px;

  transform:
    translateX(-50%);

  border-radius:50%;

  background:
    var(--gold-light);

  box-shadow:
    0 0 0 8px
    rgba(179,138,69,.10);
}



/* =========================================================
   MOON
========================================================= */

.mls-webhero2__moon{

  position:absolute;

  inset:0;

  overflow:hidden;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 36% 30%,
      #FFFFFF 0%,
      #FCFCFA 42%,
      #EFEFEA 76%,
      #DADAD4 100%
    );

  color:
    var(--black);

  box-shadow:
    0 55px 110px
    rgba(0,0,0,.46),
    0 0 0 1px
    rgba(255,255,255,.15);
}



/* =========================================================
   AXIS
========================================================= */

.mls-webhero2__axis{

  position:absolute;

  left:50%;

  top:0;
  bottom:0;

  width:1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      180deg,
      transparent 2%,
      rgba(179,138,69,.34) 20%,
      rgba(179,138,69,.08) 48%,
      rgba(179,138,69,.08) 52%,
      rgba(179,138,69,.25) 80%,
      transparent 98%
    );

  pointer-events:none;
}



/* =========================================================
   CONTENT

   ここを旧版よりかなり広く取る
========================================================= */

.mls-webhero2__content{

  position:relative;

  z-index:5;

  width:82%;

  max-width:720px;

  text-align:center;
}



/* =========================================================
   PHASES
========================================================= */

.mls-webhero2__phases{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:
    clamp(15px,2vw,25px);

  margin-bottom:
    clamp(22px,3vw,35px);
}


.mls-webhero2__phases i{

  position:relative;

  display:block;

  width:
    clamp(20px,2.3vw,30px);

  aspect-ratio:1;

  overflow:hidden;

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

  border-radius:50%;
}


.mls-webhero2__phases .phase-a{

  background:
    linear-gradient(
      90deg,
      #999 48%,
      #E6D4AA 48%
    );
}


.mls-webhero2__phases .phase-b{

  background:
    linear-gradient(
      90deg,
      transparent 50%,
      #E6D4AA 50%
    );
}


.mls-webhero2__phases .phase-c{

  background:
    #E6D4AA;
}


.mls-webhero2__phases .phase-d{

  background:
    linear-gradient(
      90deg,
      #D1A345 50%,
      transparent 50%
    );
}


.mls-webhero2__phases .phase-e{

  background:
    linear-gradient(
      90deg,
      #D1A345 45%,
      #999 45%
    );
}



/* =========================================================
   H1
========================================================= */

.mls-webhero2__content h1{

  margin:
    0 0
    clamp(28px,3.5vw,43px);

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  line-height:1.4;

  font-weight:800;

  letter-spacing:.18em;

  color:
    rgba(10,10,10,.38);
}



/* =========================================================
   EYEBROW
========================================================= */

.mls-webhero2__eyebrow{

  margin:
    0 0
    clamp(14px,2vw,20px);

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.21em;

  color:
    var(--gold);
}



/* =========================================================
   TITLE
========================================================= */

.mls-webhero2__title{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(42px,4.4vw,68px);

  line-height:1.48;

  font-weight:500;

  letter-spacing:-.055em;

  text-align:center;

  line-break:strict;
}


.mls-webhero2__title-line{

  display:block;

  white-space:nowrap;
}


.mls-webhero2__title strong{

  font-weight:500;
}



/* =========================================================
   LEAD
========================================================= */

.mls-webhero2__lead{

  width:min(100%,540px);

  margin:
    clamp(25px,3vw,35px)
    auto 0;

  padding-top:
    clamp(18px,2vw,24px);

  border-top:
    1px solid
    rgba(10,10,10,.13);
}


.mls-webhero2__lead p{

  margin:0;

  font-size:10px;

  line-height:2;

  color:
    rgba(10,10,10,.55);
}


.mls-webhero2__lead p + p{

  margin-top:6px;
}



/* =========================================================
   ACTIONS
========================================================= */

.mls-webhero2__actions{

  display:flex;

  justify-content:center;

  gap:8px;

  margin-top:
    clamp(26px,3vw,38px);
}


.mls-webhero2__actions a{

  min-height:48px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:25px;

  padding:
    0 17px;

  text-decoration:none;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:800;

  color:
    var(--black);

  transition:
    transform .3s ease,
    background .3s ease,
    color .3s ease;
}


.mls-webhero2__actions a i{

  font-family:
    Georgia,
    serif;

  font-size:16px;

  font-style:normal;
}


.mls-webhero2__primary{

  min-width:175px;

  background:
    var(--black);

  color:#fff !important;
}


.mls-webhero2__secondary{

  min-width:165px;

  border:
    1px solid
    rgba(10,10,10,.15);
}


.mls-webhero2__actions a:hover{

  transform:
    translateY(-3px);
}


.mls-webhero2__primary:hover{

  background:#252525;
}


.mls-webhero2__secondary:hover{

  background:
    rgba(10,10,10,.05);
}



/* =========================================================
   BOTTOM
========================================================= */

.mls-webhero2__bottom{

  position:absolute;

  z-index:20;

  left:
    clamp(28px,5vw,78px);

  right:
    clamp(28px,5vw,78px);

  bottom:
    clamp(22px,3vw,36px);

  display:grid;

  grid-template-columns:
    1fr auto 1fr;

  gap:30px;

  align-items:end;

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;
}


.mls-webhero2__bottom > div{

  display:flex;

  align-items:center;

  gap:10px;

  color:
    rgba(255,255,255,.34);
}


.mls-webhero2__bottom > div i{

  width:36px;
  height:1px;

  background:
    var(--gold);
}


.mls-webhero2__bottom > div strong{

  color:
    var(--gold-light);
}


.mls-webhero2__bottom > div:last-child{

  justify-self:end;
}



/* SCROLL */

.mls-webhero2__bottom > a{

  justify-self:center;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:8px;

  color:
    rgba(255,255,255,.58);

  text-decoration:none;
}


.mls-webhero2__bottom > a i{

  position:relative;

  width:1px;
  height:31px;

  overflow:hidden;

  background:
    rgba(255,255,255,.14);
}


.mls-webhero2__bottom > a i::after{

  content:"";

  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:40%;

  background:
    var(--gold-light);

  animation:
    webhero2Scroll
    2s ease-in-out
    infinite;
}


@keyframes webhero2Scroll{

  from{
    transform:
      translateY(-120%);
  }

  to{
    transform:
      translateY(330%);
  }

}



/* =========================================================
   INITIAL REVEAL
========================================================= */

.mls-webhero2__moon-stage{

  opacity:0;

  transform:
    translateY(25px);

  transition:
    opacity .9s ease,
    transform 1.1s
    cubic-bezier(.2,.8,.2,1);
}


.mls-webhero2.is-ready
.mls-webhero2__moon-stage{

  opacity:1;

  transform:
    translate3d(
      var(--hero-x,0px),
      var(--hero-y,0px),
      0
    );
}



/* =========================================================
   TABLET
========================================================= */

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

  .mls-webhero2__moon-stage{

    width:min(76vw,730px);
  }


  .mls-webhero2__content{

    width:84%;
  }


  .mls-webhero2__title{

    font-size:
      clamp(38px,4.7vw,54px);
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  .mls-webhero2{

    height:max(760px,100svh);

    min-height:760px;
  }



  /* TOP */

  .mls-webhero2__top{

    left:20px;
    right:20px;
    top:22px;
  }


  .mls-webhero2__brand{

    font-size:5px;

    letter-spacing:.12em;
  }


  .mls-webhero2__brand i{

    width:20px;
  }


  .mls-webhero2__services{

    display:none;
  }



  /* BACK */

  .mls-webhero2__backtype{

    top:8%;

    font-size:
      clamp(56px,16vw,78px);
  }



  /* SIDE */

  .mls-webhero2__side{

    display:none;
  }



  /* MOON */

  .mls-webhero2__moon-stage{

    width:
      min(94vw,520px);
  }


  .mls-webhero2__orbit--outer{

    inset:-5%;
  }


  .mls-webhero2__orbit--inner{

    inset:-1%;
  }



  /* CONTENT */

  .mls-webhero2__content{

    width:86%;

    max-width:none;
  }


  .mls-webhero2__phases{

    margin-bottom:21px;

    gap:12px;
  }


  .mls-webhero2__phases i{

    width:18px;
  }


  .mls-webhero2__content h1{

    margin-bottom:21px;

    font-size:5px;
  }


  .mls-webhero2__eyebrow{

    margin-bottom:12px;

    font-size:4px;

    letter-spacing:.13em;
  }



  /* TITLE */

  .mls-webhero2__title{

    font-size:
      clamp(27px,7.5vw,36px);

    line-height:1.58;

    letter-spacing:-.05em;
  }


  .mls-webhero2__title-line{

    white-space:normal;
  }



  /* LEAD */

  .mls-webhero2__lead{

    width:94%;

    margin-top:20px;

    padding-top:16px;
  }


  .mls-webhero2__lead p{

    font-size:8px;

    line-height:1.85;
  }



  /* ACTION */

  .mls-webhero2__actions{

    display:grid;

    grid-template-columns:
      1fr 1fr;

    gap:6px;

    margin-top:21px;
  }


  .mls-webhero2__actions a{

    min-width:0;

    min-height:42px;

    gap:6px;

    padding:
      0 10px;

    font-size:6px;
  }



  /* BOTTOM */

  .mls-webhero2__bottom{

    left:20px;
    right:20px;

    bottom:18px;

    grid-template-columns:
      1fr auto;
  }


  .mls-webhero2__bottom
  > div:first-child{

    display:none;
  }


  .mls-webhero2__bottom > a{

    grid-column:1;

    justify-self:start;

    flex-direction:row;
  }


  .mls-webhero2__bottom > a i{

    width:32px;
    height:1px;
  }


  .mls-webhero2__bottom
  > div:last-child{

    grid-column:2;
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:390px){

  .mls-webhero2__title{

    font-size:
      clamp(25px,7.1vw,31px);
  }


  .mls-webhero2__lead p{

    font-size:7.5px;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .mls-webhero2 *,
  .mls-webhero2 *::before,
  .mls-webhero2 *::after{

    animation:none !important;

    transition:none !important;
  }


  .mls-webhero2__moon-stage{

    opacity:1;

    transform:none;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c026178 *//* =========================================================
   MOON LOOP STUDIO
   WEB PRODUCTION

   WEB DIAGNOSIS
========================================================= */

.mls-webproblem{

  --paper:#F1EBDF;
  --paper-light:#F7F3EA;

  --ink:#172126;

  --navy:#093D52;
  --navy-deep:#062E3E;

  --gold:#A67C37;
  --gold-light:#D4B875;

  --orange:#BD6637;

  --problem-accent:#A67C37;

  position:relative;

  width:100%;

  overflow:hidden;

  background:var(--paper);

  color:var(--ink);
}


.mls-webproblem,
.mls-webproblem *,
.mls-webproblem *::before,
.mls-webproblem *::after{
  box-sizing:border-box;
}



/* =========================================================
   ACTIVE COLORS
========================================================= */

.mls-webproblem[data-active="content"]{
  --problem-accent:#A67C37;
}


.mls-webproblem[data-active="design"]{
  --problem-accent:#BD6637;
}


.mls-webproblem[data-active="mobile"]{
  --problem-accent:#567A84;
}


.mls-webproblem[data-active="action"]{
  --problem-accent:#5A7058;
}


.mls-webproblem[data-active="landing"]{
  --problem-accent:#7B5E82;
}



/* =========================================================
   INTRO
========================================================= */

.mls-webproblem__intro{

  width:
    min(
      calc(100% - clamp(90px,12vw,190px)),
      1400px
    );

  margin-inline:auto;

  padding:
    clamp(105px,11vw,165px)
    0
    clamp(90px,9vw,130px);
}



/* =========================================================
   META
========================================================= */

.mls-webproblem__meta{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(23,33,38,.15);

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.mls-webproblem__meta span{
  color:var(--orange);
}


.mls-webproblem__meta strong{
  color:rgba(23,33,38,.34);
}



/* =========================================================
   INTRO GRID
========================================================= */

.mls-webproblem__intro-grid{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(290px,.38fr);

  gap:
    clamp(55px,8vw,125px);

  align-items:end;

  margin-top:
    clamp(55px,7vw,90px);
}


.mls-webproblem__eyebrow{

  margin:0 0 14px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.19em;

  color:var(--orange);
}


.mls-webproblem h2{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(47px,5.6vw,82px);

  line-height:1.58;

  font-weight:500;

  letter-spacing:-.055em;

  line-break:strict;
}


.mls-webproblem h2 span,
.mls-webproblem h2 strong{
  display:block;
}


.mls-webproblem h2 strong{

  color:var(--navy);

  font-weight:500;
}



/* =========================================================
   LEAD
========================================================= */

.mls-webproblem__lead{

  padding-left:19px;

  border-left:
    2px solid var(--orange);
}


.mls-webproblem__lead > span{

  display:block;

  margin-bottom:11px;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.16em;

  color:var(--navy);
}


.mls-webproblem__lead p{

  margin:0;

  font-size:12px;

  line-height:2.05;

  color:rgba(23,33,38,.60);
}


.mls-webproblem__lead p + p{
  margin-top:12px;
}



/* =========================================================
   STAGE
========================================================= */

.mls-webproblem-stage{

  display:grid;

  grid-template-columns:
    minmax(390px,.76fr)
    minmax(550px,1.24fr);

  min-height:
    clamp(720px,78vw,980px);

  background:
    var(--paper-light);
}



/* =========================================================
   VISUAL
========================================================= */

.mls-webproblem-stage__visual{

  position:relative;

  min-height:100%;

  overflow:hidden;

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:
    clamp(60px,7vw,110px);

  background:
    var(--navy-deep);

  color:#fff;

  isolation:isolate;

  transition:
    background .6s ease;
}



/* =========================================================
   GHOST
========================================================= */

.mls-webproblem-stage__ghost{

  position:absolute;

  z-index:-1;

  left:-4%;
  bottom:7%;

  max-width:120%;

  font-family:Arial,sans-serif;

  font-size:
    clamp(95px,13vw,205px);

  line-height:.72;

  font-weight:900;

  letter-spacing:-.09em;

  color:
    rgba(255,255,255,.045);

  transform:
    translateX(
      var(--problem-ghost-x,0px)
    );

  transition:
    opacity .35s ease,
    transform .65s
    cubic-bezier(.2,.8,.2,1);

  pointer-events:none;
}



/* =========================================================
   STATUS
========================================================= */

.mls-webproblem-stage__status{

  position:absolute;

  left:
    clamp(35px,5vw,75px);

  right:
    clamp(35px,5vw,75px);

  top:
    clamp(35px,5vw,70px);

  display:grid;

  grid-template-columns:
    auto 1fr auto;

  gap:13px;

  align-items:center;

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.18em;
}


.mls-webproblem-stage__status span{

  color:
    rgba(255,255,255,.42);
}


.mls-webproblem-stage__status i{

  height:1px;

  background:
    rgba(255,255,255,.16);
}


.mls-webproblem-stage__status strong{

  color:
    var(--problem-accent);

  transition:
    color .4s ease;
}



/* =========================================================
   MESSAGE
========================================================= */

.mls-webproblem-stage__message{

  position:relative;

  z-index:3;
}


.mls-webproblem-stage__message small{

  display:block;

  margin-bottom:
    clamp(30px,4vw,50px);

  font-family:Georgia,serif;

  font-size:
    clamp(55px,7vw,100px);

  line-height:1;

  font-style:italic;

  color:
    var(--problem-accent);

  transition:
    color .4s ease;
}


.mls-webproblem-stage__message p{

  max-width:550px;

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(31px,3.5vw,51px);

  line-height:1.75;

  font-weight:500;

  letter-spacing:-.04em;

  color:#fff;
}



/* =========================================================
   SIGNAL
========================================================= */

.mls-webproblem-stage__signal{

  position:absolute;

  left:
    clamp(35px,5vw,75px);

  right:
    clamp(35px,5vw,75px);

  bottom:
    clamp(35px,5vw,70px);

  height:34px;

  display:flex;

  align-items:center;

  gap:7px;

  overflow:hidden;
}


.mls-webproblem-stage__signal::before{

  content:"";

  position:absolute;

  left:0;
  right:0;

  top:50%;

  height:1px;

  background:
    rgba(255,255,255,.12);
}


.mls-webproblem-stage__signal span{

  position:relative;

  z-index:2;

  width:6px;

  height:
    var(--signal-h,8px);

  background:
    var(--problem-accent);

  opacity:.75;

  transition:
    height .5s ease,
    background .4s ease;
}


.mls-webproblem-stage__signal span:nth-child(1){
  --signal-h:9px;
}


.mls-webproblem-stage__signal span:nth-child(2){
  --signal-h:20px;
}


.mls-webproblem-stage__signal span:nth-child(3){
  --signal-h:12px;
}


.mls-webproblem-stage__signal span:nth-child(4){
  --signal-h:28px;
}


.mls-webproblem-stage__signal span:nth-child(5){
  --signal-h:15px;
}



/* =========================================================
   LIST
========================================================= */

.mls-webproblem-list{

  padding:
    clamp(45px,6vw,90px)
    clamp(40px,6vw,90px);

  background:
    var(--paper-light);
}



/* =========================================================
   ITEM
========================================================= */

.mls-webproblem-item{

  appearance:none;

  position:relative;

  width:100%;

  min-height:
    clamp(115px,11vw,155px);

  display:grid;

  grid-template-columns:
    55px
    minmax(0,1fr)
    35px;

  gap:
    clamp(15px,3vw,35px);

  align-items:center;

  padding:
    clamp(25px,3vw,38px)
    0;

  border:0;

  border-bottom:
    1px solid
    rgba(23,33,38,.14);

  background:transparent;

  color:var(--ink);

  text-align:left;

  cursor:pointer;

  transition:
    padding-left .4s
    cubic-bezier(.2,.8,.2,1),
    background .35s ease;
}


.mls-webproblem-item:first-child{

  border-top:
    1px solid
    rgba(23,33,38,.14);
}



/* ACTIVE BAR */

.mls-webproblem-item::before{

  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:0;

  background:
    var(--problem-accent);

  transition:
    width .35s ease;
}


.mls-webproblem-item:hover,
.mls-webproblem-item.is-active{

  padding-left:
    clamp(14px,2vw,25px);
}


.mls-webproblem-item.is-active::before{
  width:3px;
}



/* =========================================================
   NUMBER
========================================================= */

.mls-webproblem-item__number{

  font-family:Georgia,serif;

  font-size:
    clamp(24px,2.4vw,35px);

  line-height:1;

  font-style:italic;

  color:
    rgba(23,33,38,.28);

  transition:
    color .35s ease;
}


.mls-webproblem-item.is-active
.mls-webproblem-item__number{

  color:
    var(--problem-accent);
}



/* =========================================================
   MAIN
========================================================= */

.mls-webproblem-item__main small{

  display:block;

  margin-bottom:6px;

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.17em;

  color:
    var(--problem-accent);
}


.mls-webproblem-item__main strong{

  display:block;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(19px,2vw,28px);

  line-height:1.55;

  font-weight:500;
}


.mls-webproblem-item__main p{

  margin:
    8px 0 0;

  font-size:10px;

  line-height:1.85;

  color:
    rgba(23,33,38,.50);
}



/* =========================================================
   MARK
========================================================= */

.mls-webproblem-item__mark{

  justify-self:end;

  display:grid;

  place-items:center;

  width:32px;
  height:32px;

  border:
    1px solid
    rgba(23,33,38,.18);

  border-radius:50%;

  font-family:Arial,sans-serif;

  font-size:18px;

  line-height:1;

  font-style:normal;

  font-weight:300;

  color:
    rgba(23,33,38,.40);

  transition:
    transform .4s ease,
    border-color .4s ease,
    color .4s ease;
}


.mls-webproblem-item.is-active
.mls-webproblem-item__mark{

  transform:
    rotate(45deg);

  border-color:
    var(--problem-accent);

  color:
    var(--problem-accent);
}



/* =========================================================
   CONCLUSION
========================================================= */

.mls-webproblem__conclusion{

  display:grid;

  grid-template-columns:
    minmax(270px,.42fr)
    minmax(0,1fr);

  gap:
    clamp(50px,9vw,140px);

  align-items:start;

  padding:
    clamp(100px,11vw,165px)
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  background:
    #DCE2D7;
}



/* LEFT */

.mls-webproblem__conclusion > div{

  padding-top:10px;
}


.mls-webproblem__conclusion > div span{

  display:block;

  margin-bottom:15px;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--orange);
}


.mls-webproblem__conclusion > div strong{

  display:block;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(20px,2.2vw,31px);

  line-height:1.75;

  font-weight:500;

  color:var(--navy);
}



/* BIG MESSAGE */

.mls-webproblem__conclusion > p{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(37px,4.7vw,68px);

  line-height:1.75;

  font-weight:500;

  letter-spacing:-.05em;
}


.mls-webproblem__conclusion > p span,
.mls-webproblem__conclusion > p strong{
  display:block;
}


.mls-webproblem__conclusion > p span{

  color:
    rgba(23,33,38,.48);
}


.mls-webproblem__conclusion > p strong{

  color:var(--navy);

  font-weight:500;
}



/* =========================================================
   CHANGE ANIMATION
========================================================= */

.mls-webproblem.is-changing
.mls-webproblem-stage__message{

  opacity:.15;

  transform:
    translateY(16px);
}


.mls-webproblem-stage__message{

  transition:
    opacity .25s ease,
    transform .4s
    cubic-bezier(.2,.8,.2,1);
}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  /* INTRO */

  .mls-webproblem__intro{

    width:
      calc(100% - 48px);

    padding:
      78px 0
      70px;
  }


  .mls-webproblem__meta strong{
    display:none;
  }


  .mls-webproblem__intro-grid{

    display:block;

    margin-top:43px;
  }


  .mls-webproblem h2{

    font-size:
      clamp(35px,9.3vw,45px);

    line-height:1.72;
  }


  .mls-webproblem__lead{

    margin-top:31px;

    padding-left:15px;
  }



  /* STAGE */

  .mls-webproblem-stage{

    display:flex;

    flex-direction:column;

    min-height:0;
  }



  /* VISUAL */

  .mls-webproblem-stage__visual{

    min-height:430px;

    padding:
      95px 24px
      70px;
  }


  .mls-webproblem-stage__status{

    left:24px;
    right:24px;
    top:30px;
  }


  .mls-webproblem-stage__message small{

    font-size:55px;

    margin-bottom:27px;
  }


  .mls-webproblem-stage__message p{

    font-size:
      clamp(29px,7.8vw,37px);

    line-height:1.75;
  }


  .mls-webproblem-stage__signal{

    left:24px;
    right:24px;
    bottom:24px;
  }



  /* LIST */

  .mls-webproblem-list{

    padding:
      12px 24px
      55px;
  }


  .mls-webproblem-item{

    grid-template-columns:
      39px
      1fr
      28px;

    gap:11px;

    min-height:0;

    padding:
      27px 0;
  }


  .mls-webproblem-item:hover,
  .mls-webproblem-item.is-active{

    padding-left:10px;
  }


  .mls-webproblem-item__main strong{

    font-size:
      clamp(20px,5.7vw,26px);
  }


  .mls-webproblem-item__main p{

    font-size:9px;
  }


  .mls-webproblem-item__mark{

    width:27px;
    height:27px;

    font-size:15px;
  }



  /* CONCLUSION */

  .mls-webproblem__conclusion{

    display:block;

    padding:
      78px 24px
      90px;
  }


  .mls-webproblem__conclusion > p{

    margin-top:43px;

    font-size:
      clamp(31px,8.4vw,40px);
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:390px){

  .mls-webproblem__intro{

    width:
      calc(100% - 40px);
  }


  .mls-webproblem-item{

    grid-template-columns:
      34px
      1fr
      25px;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .mls-webproblem *,
  .mls-webproblem *::before,
  .mls-webproblem *::after{

    animation:none !important;

    transition:none !important;
  }

}

/* =========================================================
   MLS WEB PROBLEM
   FINAL COLOR + LAYOUT FIX

   WHITE / BLACK / GOLD / GRAY
========================================================= */

.mls-webproblem{

  /* =======================================================
     COLOR SYSTEM
  ======================================================== */

  --paper:#FFFFFF;
  --paper-light:#F7F7F5;

  --ink:#111111;

  --black:#111111;
  --black-soft:#1B1B1B;

  --gold:#B38A45;
  --gold-light:#D3B476;

  --gray:#8C8C88;
  --gray-light:#D8D8D3;
  --gray-pale:#EFEFEC;

  --problem-accent:var(--gold);

  background:
    var(--paper);

  color:
    var(--ink);

  /*
    動的コンテンツの切替による
    ブラウザのスクロール補正を止める
  */
  overflow-anchor:none;
}



/* =========================================================
   REMOVE OLD ACTIVE COLORS
========================================================= */

.mls-webproblem[data-active="content"],
.mls-webproblem[data-active="design"],
.mls-webproblem[data-active="mobile"],
.mls-webproblem[data-active="action"],
.mls-webproblem[data-active="landing"]{

  --problem-accent:
    var(--gold);

}



/* =========================================================
   INTRO
========================================================= */

.mls-webproblem__meta{

  border-color:
    rgba(17,17,17,.14);
}


.mls-webproblem__meta span{

  color:
    var(--gold);
}


.mls-webproblem__meta strong{

  color:
    rgba(17,17,17,.35);
}


.mls-webproblem__eyebrow{

  color:
    var(--gold);
}


.mls-webproblem h2 strong{

  color:
    var(--black);
}


.mls-webproblem__lead{

  border-left-color:
    var(--gold);
}


.mls-webproblem__lead > span{

  color:
    var(--black);
}


.mls-webproblem__lead p{

  color:
    rgba(17,17,17,.58);
}



/* =========================================================
   DESKTOP STAGE
   高さを固定して04→05のズレを止める
========================================================= */

@media(min-width:768px){

  .mls-webproblem-stage{

    /*
      min-heightではなくheightにする。
      左の文章量が変わっても
      セクション全体の高さを変えない。
    */

    height:
      clamp(760px,78vw,980px);

    min-height:0;

    align-items:stretch;

    overflow:hidden;
  }



  /* =======================================================
     RIGHT LIST

     5行を必ず等分する。
     activeになっても上下位置は一切動かない。
  ======================================================== */

  .mls-webproblem-list{

    min-height:0;

    display:grid;

    grid-template-rows:
      repeat(5,minmax(0,1fr));

    padding:
      clamp(42px,5vw,72px)
      clamp(40px,6vw,90px);

    overflow:hidden;

    background:
      var(--paper-light);
  }


  .mls-webproblem-item{

    min-height:0;

    height:100%;

    padding:
      18px 0;

    align-self:stretch;
  }


  /*
    active時にpadding-leftを変えると
    微妙な再レイアウトが起きるため、
    中身だけ動かす。
  */

  .mls-webproblem-item:hover,
  .mls-webproblem-item.is-active{

    padding-left:0;
  }


  .mls-webproblem-item__number,
  .mls-webproblem-item__main,
  .mls-webproblem-item__mark{

    transition:
      transform .38s
      cubic-bezier(.2,.8,.2,1),
      color .3s ease,
      border-color .3s ease;
  }


  .mls-webproblem-item:hover
  .mls-webproblem-item__number,

  .mls-webproblem-item.is-active
  .mls-webproblem-item__number,

  .mls-webproblem-item:hover
  .mls-webproblem-item__main,

  .mls-webproblem-item.is-active
  .mls-webproblem-item__main{

    transform:
      translateX(14px);
  }


  .mls-webproblem-item:hover
  .mls-webproblem-item__mark,

  .mls-webproblem-item.is-active
  .mls-webproblem-item__mark{

    transform:
      translateX(-4px)
      rotate(45deg);
  }

}



/* =========================================================
   LEFT VISUAL
========================================================= */

.mls-webproblem-stage__visual{

  background:
    var(--black);

  color:#FFFFFF;

  overflow-anchor:none;
}



/* =========================================================
   LEFT MESSAGE
   切替文章の高さを固定
========================================================= */

.mls-webproblem-stage__message{

  /*
    文章が2行→3行になっても
    上下位置を変えない
  */

  min-height:
    clamp(310px,28vw,400px);

  display:flex;

  flex-direction:column;

  justify-content:flex-start;
}


.mls-webproblem-stage__message small{

  color:
    var(--gold);
}


.mls-webproblem-stage__message p{

  color:#FFFFFF;
}



/* =========================================================
   LEFT GHOST
========================================================= */

.mls-webproblem-stage__ghost{

  color:
    rgba(255,255,255,.045);
}



/* =========================================================
   STATUS
========================================================= */

.mls-webproblem-stage__status span{

  color:
    rgba(255,255,255,.43);
}


.mls-webproblem-stage__status i{

  background:
    rgba(255,255,255,.15);
}


.mls-webproblem-stage__status strong{

  color:
    var(--gold);
}



/* =========================================================
   SIGNAL
========================================================= */

.mls-webproblem-stage__signal::before{

  background:
    rgba(255,255,255,.15);
}


.mls-webproblem-stage__signal span{

  background:
    var(--gold);
}



/* =========================================================
   RIGHT AREA
========================================================= */

.mls-webproblem-list{

  background:
    var(--paper-light);
}


.mls-webproblem-item{

  border-color:
    rgba(17,17,17,.14);

  color:
    var(--black);
}


.mls-webproblem-item:first-child{

  border-top-color:
    rgba(17,17,17,.14);
}



/* ACTIVE BAR */

.mls-webproblem-item::before{

  background:
    var(--gold);
}


.mls-webproblem-item__number{

  color:
    rgba(17,17,17,.26);
}


.mls-webproblem-item.is-active
.mls-webproblem-item__number{

  color:
    var(--gold);
}



/* =========================================================
   ITEM TEXT
========================================================= */

.mls-webproblem-item__main small{

  color:
    var(--gold);
}


.mls-webproblem-item__main strong{

  color:
    var(--black);
}


.mls-webproblem-item__main p{

  color:
    rgba(17,17,17,.48);
}



/* =========================================================
   PLUS / CLOSE
========================================================= */

.mls-webproblem-item__mark{

  border-color:
    rgba(17,17,17,.20);

  color:
    rgba(17,17,17,.42);

  background:
    transparent;
}


.mls-webproblem-item.is-active
.mls-webproblem-item__mark{

  border-color:
    var(--gold);

  color:
    var(--gold);
}



/* =========================================================
   CONCLUSION
========================================================= */

.mls-webproblem__conclusion{

  background:
    var(--gray-pale);
}


.mls-webproblem__conclusion > div span{

  color:
    var(--gold);
}


.mls-webproblem__conclusion > div strong{

  color:
    var(--black);
}


.mls-webproblem__conclusion > p span{

  color:
    rgba(17,17,17,.43);
}


.mls-webproblem__conclusion > p strong{

  color:
    var(--black);
}



/* =========================================================
   CHANGE ANIMATION

   transformで上下させない。
   opacityだけで切り替える。
   これもカクつき防止。
========================================================= */

.mls-webproblem.is-changing
.mls-webproblem-stage__message{

  opacity:.10;

  transform:none;
}


.mls-webproblem-stage__message{

  transform:none;

  transition:
    opacity .24s ease;
}



/* =========================================================
   MOBILE

   スマホは固定heightにしない
========================================================= */

@media(max-width:767px){

  .mls-webproblem-stage{

    height:auto;

    overflow:visible;
  }


  .mls-webproblem-list{

    display:block;

    padding:
      12px 24px
      55px;

    overflow:visible;
  }


  .mls-webproblem-item{

    height:auto;

    min-height:0;

    padding:
      27px 0;
  }


  .mls-webproblem-item:hover,
  .mls-webproblem-item.is-active{

    padding-left:0;
  }


  .mls-webproblem-item.is-active
  .mls-webproblem-item__main,

  .mls-webproblem-item.is-active
  .mls-webproblem-item__number{

    transform:
      translateX(8px);
  }


  .mls-webproblem-stage__message{

    min-height:265px;
  }


  .mls-webproblem-item.is-active
  .mls-webproblem-item__mark{

    transform:
      rotate(45deg);
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2b70a6b *//* =========================================================
   MOON LOOP STUDIO
   WEBSITE OR LP

   WHITE / BLACK / GOLD / GRAY
========================================================= */

.mls-webchoice{

  --black:#111111;
  --black-soft:#1A1A1A;

  --white:#FFFFFF;
  --offwhite:#F5F5F2;

  --gold:#B38A45;
  --gold-light:#D2B473;

  --gray:#8D8D89;
  --gray-light:#D6D6D1;
  --gray-pale:#EEEEEA;

  position:relative;

  width:100%;

  overflow:hidden;

  background:var(--white);

  color:var(--black);
}


.mls-webchoice,
.mls-webchoice *,
.mls-webchoice *::before,
.mls-webchoice *::after{
  box-sizing:border-box;
}



/* =========================================================
   INTRO
========================================================= */

.mls-webchoice__intro{

  width:
    min(
      calc(100% - clamp(90px,12vw,190px)),
      1400px
    );

  margin-inline:auto;

  padding:
    clamp(105px,11vw,165px)
    0
    clamp(90px,9vw,130px);
}



/* META */

.mls-webchoice__meta{

  display:flex;

  justify-content:space-between;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(17,17,17,.14);

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.mls-webchoice__meta span{
  color:var(--gold);
}


.mls-webchoice__meta strong{
  color:rgba(17,17,17,.34);
}



/* =========================================================
   HEADING
========================================================= */

.mls-webchoice__heading{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(290px,.38fr);

  gap:
    clamp(55px,8vw,125px);

  align-items:end;

  margin-top:
    clamp(55px,7vw,90px);
}


.mls-webchoice__heading > div:first-child > p{

  margin:0 0 14px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.19em;

  color:var(--gold);
}


.mls-webchoice h2{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(47px,5.5vw,80px);

  line-height:1.62;

  font-weight:500;

  letter-spacing:-.055em;

  line-break:strict;
}


.mls-webchoice h2 span,
.mls-webchoice h2 strong{
  display:block;
}


.mls-webchoice h2 strong{
  font-weight:500;
}



/* LEAD */

.mls-webchoice__lead{

  padding-left:19px;

  border-left:
    2px solid var(--gold);
}


.mls-webchoice__lead p{

  margin:0;

  font-size:12px;

  line-height:2.05;

  color:
    rgba(17,17,17,.58);
}


.mls-webchoice__lead p + p{
  margin-top:13px;
}


.mls-webchoice__lead strong{

  color:var(--black);

  font-weight:600;
}



/* =========================================================
   STAGE
========================================================= */

.mls-webchoice-stage{

  position:relative;

  display:grid;

  grid-template-columns:
    var(--website-width,56%)
    var(--lp-width,44%);

  min-height:
    clamp(730px,72vw,900px);

  transition:
    grid-template-columns .8s
    cubic-bezier(.2,.8,.2,1);
}



/* =========================================================
   PANEL
========================================================= */

.mls-webchoice-panel{

  position:relative;

  min-width:0;

  overflow:hidden;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  padding:
    clamp(45px,5vw,75px)
    clamp(38px,5vw,80px)
    clamp(45px,5vw,70px);

  isolation:isolate;

  transition:
    background .7s ease,
    color .7s ease;
}



/* HIT AREA */

.mls-webchoice-panel__hit{

  appearance:none;

  position:absolute;

  z-index:20;

  inset:0;

  width:100%;
  height:100%;

  border:0;

  padding:0;

  background:transparent;

  cursor:pointer;
}



/* =========================================================
   WEBSITE / BLACK
========================================================= */

.mls-webchoice-panel--website{

  background:
    var(--black);

  color:#fff;
}



/* =========================================================
   LP / WHITE
========================================================= */

.mls-webchoice-panel--lp{

  background:
    var(--offwhite);

  color:
    var(--black);

  border-left:
    1px solid
    rgba(17,17,17,.12);
}



/* =========================================================
   TOP
========================================================= */

.mls-webchoice-panel__top{

  position:relative;

  z-index:4;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  padding-bottom:18px;

  border-bottom:
    1px solid
    currentColor;

  opacity:.45;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.mls-webchoice-panel__top span{

  font-family:Georgia,serif;

  font-size:18px;

  font-style:italic;

  color:
    var(--gold-light);
}



/* =========================================================
   GHOST
========================================================= */

.mls-webchoice-panel__ghost{

  position:absolute;

  z-index:-1;

  left:-3%;

  top:14%;

  font-family:Arial,sans-serif;

  font-size:
    clamp(150px,20vw,330px);

  line-height:.75;

  font-weight:900;

  letter-spacing:-.10em;

  pointer-events:none;

  transition:
    transform 1s
    cubic-bezier(.2,.8,.2,1),
    opacity .5s ease;
}


.mls-webchoice-panel--website
.mls-webchoice-panel__ghost{

  color:
    rgba(255,255,255,.035);
}


.mls-webchoice-panel--lp
.mls-webchoice-panel__ghost{

  color:
    rgba(17,17,17,.035);
}


.mls-webchoice-panel.is-active
.mls-webchoice-panel__ghost{

  transform:
    translateX(3%);
}



/* =========================================================
   CONTENT
========================================================= */

.mls-webchoice-panel__content{

  position:relative;

  z-index:5;

  max-width:600px;

  margin:
    clamp(90px,11vw,155px)
    0
    clamp(45px,6vw,80px);

  pointer-events:none;
}



/* TYPE */

.mls-webchoice-panel__type{

  margin:
    0 0
    clamp(28px,4vw,45px);

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.21em;

  color:
    var(--gold-light);
}



/* H3 */

.mls-webchoice-panel h3{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(36px,4.1vw,59px);

  line-height:1.67;

  font-weight:500;

  letter-spacing:-.05em;

  line-break:strict;
}


.mls-webchoice-panel h3 span,
.mls-webchoice-panel h3 strong{

  display:block;
}


.mls-webchoice-panel h3 strong{
  font-weight:500;
}



/* DESCRIPTION */

.mls-webchoice-panel__description{

  max-width:530px;

  margin:
    clamp(28px,4vw,45px)
    0 0;

  padding-top:24px;

  border-top:
    1px solid currentColor;

  font-size:11px;

  line-height:2.05;

  opacity:.60;
}



/* =========================================================
   USES
========================================================= */

.mls-webchoice-panel__uses{

  display:flex;

  flex-wrap:wrap;

  gap:7px;

  margin-top:
    clamp(27px,4vw,40px);
}


.mls-webchoice-panel__uses span{

  padding:
    8px 11px;

  border:
    1px solid currentColor;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:700;

  letter-spacing:.05em;

  opacity:.55;
}



/* =========================================================
   ANSWER
========================================================= */

.mls-webchoice-panel__answer{

  margin-top:
    clamp(38px,5vw,60px);

  padding-left:16px;

  border-left:
    2px solid var(--gold);
}


.mls-webchoice-panel__answer span{

  display:block;

  margin-bottom:8px;

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.18em;

  color:
    var(--gold-light);
}


.mls-webchoice-panel__answer strong{

  display:block;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(17px,1.7vw,23px);

  line-height:1.8;

  font-weight:500;
}



/* =========================================================
   SELECT
========================================================= */

.mls-webchoice-panel__select{

  position:relative;

  z-index:25;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:25px;

  padding-top:18px;

  border-top:
    1px solid currentColor;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  opacity:.45;

  pointer-events:none;

  transition:
    opacity .4s ease;
}


.mls-webchoice-panel__select i{

  font-family:Georgia,serif;

  font-size:18px;

  font-style:normal;
}


.mls-webchoice-panel.is-active
.mls-webchoice-panel__select{

  opacity:1;
}



/* =========================================================
   ACTIVE GOLD LINE
========================================================= */

.mls-webchoice-panel::after{

  content:"";

  position:absolute;

  z-index:10;

  left:0;
  right:100%;
  top:0;

  height:4px;

  background:
    var(--gold);

  transition:
    right .6s
    cubic-bezier(.2,.8,.2,1);
}


.mls-webchoice-panel.is-active::after{
  right:0;
}



/* =========================================================
   DIVIDER
========================================================= */

.mls-webchoice-divider{

  position:absolute;

  z-index:30;

  left:
    var(--divider-x,56%);

  top:0;
  bottom:0;

  width:1px;

  transform:
    translateX(-50%);

  background:
    rgba(179,138,69,.65);

  pointer-events:none;

  transition:
    left .8s
    cubic-bezier(.2,.8,.2,1);
}


.mls-webchoice-divider > span{

  position:absolute;

  left:50%;
  top:47px;

  display:grid;

  place-items:center;

  width:45px;
  height:45px;

  transform:
    translateX(-50%);

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

  border-radius:50%;

  background:
    var(--black);

  color:
    var(--gold-light);

  font-family:Georgia,serif;

  font-size:10px;

  font-style:italic;
}



/* ORBIT TRACK */

.mls-webchoice-divider > div{

  position:absolute;

  left:50%;
  top:22%;
  bottom:14%;

  width:1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(179,138,69,.22),
      rgba(179,138,69,.85),
      rgba(179,138,69,.22),
      transparent
    );
}


.mls-webchoice-divider > div i{

  position:absolute;

  left:50%;

  top:
    var(--orbit-y,24%);

  width:9px;
  height:9px;

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

  border-radius:50%;

  background:
    var(--gold);

  box-shadow:
    0 0 0 7px
    rgba(179,138,69,.11);

  transition:
    top .7s
    cubic-bezier(.2,.8,.2,1);
}



/* =========================================================
   STATES
========================================================= */

.mls-webchoice[data-choice="website"]{

  --website-width:56%;
  --lp-width:44%;
  --divider-x:56%;
  --orbit-y:24%;
}


.mls-webchoice[data-choice="lp"]{

  --website-width:44%;
  --lp-width:56%;
  --divider-x:44%;
  --orbit-y:72%;
}



/* =========================================================
   BOTTOM
========================================================= */

.mls-webchoice__bottom{

  display:grid;

  grid-template-columns:
    minmax(250px,.38fr)
    minmax(0,1fr);

  gap:
    clamp(50px,9vw,140px);

  align-items:start;

  padding:
    clamp(95px,10vw,150px)
    max(
      calc((100vw - 1400px) / 2),
      clamp(45px,7vw,110px)
    );

  background:
    var(--gray-pale);
}



/* LABEL */

.mls-webchoice__bottom-label{

  display:flex;

  align-items:center;

  gap:10px;

  padding-top:12px;

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.17em;
}


.mls-webchoice__bottom-label span{

  color:
    rgba(17,17,17,.38);
}


.mls-webchoice__bottom-label i{

  width:30px;
  height:1px;

  background:
    var(--gold);
}


.mls-webchoice__bottom-label strong{

  color:
    var(--gold);
}



/* BIG MESSAGE */

.mls-webchoice__bottom > p{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(39px,4.8vw,69px);

  line-height:1.72;

  font-weight:500;

  letter-spacing:-.05em;
}


.mls-webchoice__bottom > p span,
.mls-webchoice__bottom > p strong{

  display:block;
}


.mls-webchoice__bottom > p span{

  color:
    rgba(17,17,17,.40);
}


.mls-webchoice__bottom > p strong{

  color:
    var(--black);

  font-weight:500;
}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  /* INTRO */

  .mls-webchoice__intro{

    width:
      calc(100% - 48px);

    padding:
      78px 0
      70px;
  }


  .mls-webchoice__meta strong{
    display:none;
  }


  .mls-webchoice__heading{

    display:block;

    margin-top:43px;
  }


  .mls-webchoice h2{

    font-size:
      clamp(35px,9.3vw,45px);

    line-height:1.72;
  }


  .mls-webchoice__lead{

    margin-top:31px;

    padding-left:15px;
  }



  /* =======================================================
     STAGE

     Mobileでは上下レイアウト。
     クリックで選んだ方を少し大きくする。
  ======================================================== */

  .mls-webchoice-stage{

    display:flex;

    flex-direction:column;

    min-height:0;
  }


  .mls-webchoice-panel{

    min-height:630px;

    padding:
      34px 24px
      35px;
  }


  .mls-webchoice-panel--lp{

    border-left:0;

    border-top:
      1px solid
      rgba(17,17,17,.12);
  }



  /* DIVIDER */

  .mls-webchoice-divider{
    display:none;
  }



  /* GHOST */

  .mls-webchoice-panel__ghost{

    top:17%;

    font-size:
      clamp(140px,44vw,190px);
  }



  /* CONTENT */

  .mls-webchoice-panel__content{

    margin:
      85px 0
      45px;
  }


  .mls-webchoice-panel h3{

    font-size:
      clamp(31px,8.5vw,41px);

    line-height:1.72;
  }


  .mls-webchoice-panel__description{

    font-size:10px;
  }


  .mls-webchoice-panel__answer strong{

    font-size:
      clamp(18px,5vw,23px);
  }



  /* BOTTOM */

  .mls-webchoice__bottom{

    display:block;

    padding:
      78px 24px
      90px;
  }


  .mls-webchoice__bottom-label{

    flex-wrap:wrap;
  }


  .mls-webchoice__bottom > p{

    margin-top:43px;

    font-size:
      clamp(31px,8.4vw,40px);
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:390px){

  .mls-webchoice__intro{

    width:
      calc(100% - 40px);
  }


  .mls-webchoice-panel{

    min-height:650px;
  }


  .mls-webchoice-panel__uses span{

    padding:
      7px 9px;

    font-size:5.5px;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .mls-webchoice *,
  .mls-webchoice *::before,
  .mls-webchoice *::after{

    animation:none !important;

    transition:none !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-025674f *//* =========================================================
   MOON LOOP STUDIO
   PROJECT ARCHIVE V2
========================================================= */

.mls-projects{

  --black:#111111;
  --white:#FFFFFF;

  --gold:#B38A45;
  --gold-light:#D2B472;

  --gray:#888884;
  --gray-light:#D9D9D4;
  --gray-pale:#F0F0ED;

  width:100%;

  overflow:hidden;

  background:#fff;

  color:var(--black);
}


.mls-projects,
.mls-projects *,
.mls-projects *::before,
.mls-projects *::after{
  box-sizing:border-box;
}



/* =========================================================
   IMPORTANT

   Elementor等のdisplay指定より
   hiddenを優先
========================================================= */

.mls-projects [hidden]{
  display:none !important;
}



/* =========================================================
   INTRO
========================================================= */

.mls-projects__intro{

  width:
    min(
      calc(100% - clamp(90px,12vw,190px)),
      1400px
    );

  margin:auto;

  padding:
    clamp(105px,11vw,165px)
    0
    clamp(90px,9vw,130px);
}


.mls-projects__meta{

  display:flex;

  justify-content:space-between;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(17,17,17,.14);

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.mls-projects__meta span{
  color:var(--gold);
}


.mls-projects__meta strong{
  color:rgba(17,17,17,.32);
}



/* =========================================================
   HEADING
========================================================= */

.mls-projects__heading{

  display:grid;

  grid-template-columns:
    1fr minmax(280px,.38fr);

  gap:
    clamp(55px,8vw,125px);

  align-items:end;

  margin-top:
    clamp(55px,7vw,90px);
}


.mls-projects__heading > div:first-child > p{

  margin:0 0 14px;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--gold);
}


.mls-projects h2{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(46px,5.4vw,78px);

  line-height:1.62;

  font-weight:500;

  letter-spacing:-.055em;
}


.mls-projects h2 span,
.mls-projects h2 strong{
  display:block;
}


.mls-projects h2 strong{
  font-weight:500;
}


.mls-projects__lead{

  padding-left:18px;

  border-left:
    2px solid var(--gold);
}


.mls-projects__lead > span{

  display:block;

  margin-bottom:11px;

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.16em;
}


.mls-projects__lead p{

  margin:0;

  font-size:12px;

  line-height:2;

  color:
    rgba(17,17,17,.56);
}



/* =========================================================
   FILTER
========================================================= */

.mls-projects-filter{

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid rgba(17,17,17,.13);

  border-bottom:
    1px solid rgba(17,17,17,.13);
}


.mls-projects-filter button{

  appearance:none;

  min-height:96px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

  padding:
    0 clamp(30px,4vw,70px);

  border:0;

  border-right:
    1px solid rgba(17,17,17,.13);

  background:#fff;

  color:var(--black);

  cursor:pointer;

  transition:
    background .3s ease,
    color .3s ease;
}


.mls-projects-filter button:last-child{
  border-right:0;
}


.mls-projects-filter button.is-active{

  background:var(--black);

  color:#fff;
}


.mls-projects-filter span{

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:900;

  letter-spacing:.15em;
}


.mls-projects-filter small{

  font-family:Georgia,serif;

  font-size:20px;

  font-style:italic;

  color:var(--gold);
}



/* =========================================================
   STAGE
========================================================= */

.mls-projects-stage{

  display:grid;

  grid-template-columns:
    40% 60%;

  min-height:790px;

  background:
    var(--gray-pale);
}



/* =========================================================
   LIST
========================================================= */

.mls-projects-list{

  background:#fff;
}



/* =========================================================
   PROJECT
========================================================= */

.mls-project{

  appearance:none;

  position:relative;

  width:100%;

  min-height:145px;

  display:grid;

  grid-template-columns:
    55px 1fr 25px;

  gap:28px;

  align-items:center;

  padding:
    30px
    clamp(35px,5vw,70px);

  border:0;

  border-bottom:
    1px solid rgba(17,17,17,.13);

  background:#fff;

  color:var(--black);

  text-align:left;

  cursor:pointer;

  transition:
    background .32s ease,
    color .32s ease;
}


.mls-project::before{

  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:0;

  background:var(--gold);

  transition:
    width .3s ease;
}


.mls-project:hover,
.mls-project.is-active{

  background:var(--black);

  color:#fff;
}


.mls-project.is-active::before{
  width:4px;
}



/* NUMBER */

.mls-project__number{

  font-family:Georgia,serif;

  font-size:25px;

  font-style:italic;

  color:
    rgba(17,17,17,.30);
}


.mls-project:hover
.mls-project__number,
.mls-project.is-active
.mls-project__number{

  color:var(--gold-light);
}



/* TEXT */

.mls-project__text small{

  display:block;

  margin-bottom:8px;

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:900;

  letter-spacing:.15em;

  color:var(--gold);
}


.mls-project__text strong{

  display:block;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(18px,1.7vw,25px);

  line-height:1.5;

  font-weight:500;
}


.mls-project > i{

  justify-self:end;

  font-family:Georgia,serif;

  font-size:19px;

  font-style:normal;

  color:var(--gold);

  transition:
    transform .3s ease;
}


.mls-project:hover > i,
.mls-project.is-active > i{

  transform:
    translate(4px,-4px);
}



/* ORIGINAL */

.mls-project--original{

  background:
    #F2F2EF;
}



/* =========================================================
   VIEWER
========================================================= */

.mls-project-viewer{

  min-width:0;

  display:flex;

  flex-direction:column;

  padding:
    clamp(40px,5vw,75px);

  background:var(--black);

  color:#fff;
}



/* TOP */

.mls-project-viewer__top{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:30px;

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:800;

  letter-spacing:.18em;

  color:
    rgba(255,255,255,.38);
}


.mls-project-viewer__top > div{

  display:flex;

  align-items:center;

  gap:11px;
}


.mls-project-viewer__top
[data-view-number]{

  font-family:Georgia,serif;

  font-size:20px;

  font-style:italic;

  color:var(--gold-light);
}


.mls-project-viewer__top i{

  width:40px;
  height:1px;

  background:
    rgba(255,255,255,.18);
}


.mls-project-viewer__top strong{

  color:var(--gold-light);
}



/* =========================================================
   TITLE
========================================================= */

.mls-project-viewer__title{

  display:flex;

  justify-content:space-between;

  align-items:flex-end;

  gap:30px;

  margin:
    clamp(30px,4vw,48px)
    0 22px;

  transition:
    opacity .2s ease;
}


.mls-project-viewer.is-changing
.mls-project-viewer__title{

  opacity:.08;
}


.mls-project-viewer__title small{

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.17em;

  color:
    rgba(255,255,255,.38);
}


.mls-project-viewer__title h3{

  max-width:68%;

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(28px,3vw,45px);

  line-height:1.4;

  font-weight:500;

  text-align:right;
}



/* =========================================================
   SCREEN
========================================================= */

.mls-project-screen{

  flex:1;

  min-height:500px;

  overflow:hidden;

  border:
    1px solid rgba(255,255,255,.18);

  background:
    #EFEFEC;
}



/* BAR */

.mls-project-screen__bar{

  height:46px;

  display:grid;

  grid-template-columns:
    auto 1fr auto;

  gap:15px;

  align-items:center;

  padding:
    0 16px;

  background:#E5E5E1;

  color:var(--black);
}


.mls-project-screen__bar > div{

  display:flex;

  gap:5px;
}


.mls-project-screen__bar > div i{

  width:6px;
  height:6px;

  border-radius:50%;

  background:
    rgba(17,17,17,.25);
}


.mls-project-screen__bar > span{

  overflow:hidden;

  white-space:nowrap;

  text-overflow:ellipsis;

  font-family:Arial,sans-serif;

  font-size:5px;

  color:
    rgba(17,17,17,.45);
}


.mls-project-screen__bar > strong{

  font-family:Arial,sans-serif;

  font-size:5px;

  font-weight:900;

  letter-spacing:.14em;

  color:var(--gold);
}



/* =========================================================
   CANVAS
========================================================= */

.mls-project-screen__canvas{

  position:relative;

  height:
    calc(100% - 46px);

  min-height:454px;

  overflow:hidden;

  background:#E8E8E4;
}


.mls-project-screen__canvas img{

  position:absolute;

  z-index:2;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:top center;

  opacity:0;

  transform:
    scale(1.025);

  transition:
    opacity .5s ease,
    transform 1.2s
    cubic-bezier(.2,.8,.2,1);
}


.mls-project-screen.is-loaded
.mls-project-screen__canvas img{

  opacity:1;

  transform:
    scale(1);
}



/* =========================================================
   LOADER
========================================================= */

.mls-project-screen__loader{

  position:absolute;

  z-index:1;

  inset:0;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  gap:25px;

  transition:
    opacity .3s ease;
}


.mls-project-screen.is-loaded
.mls-project-screen__loader{

  opacity:0;
}



/* MOON */

.mls-project-screen__moon{

  position:relative;

  width:74px;
  height:74px;

  overflow:hidden;

  border-radius:50%;

  background:#fff;

  border:
    1px solid rgba(17,17,17,.15);
}


.mls-project-screen__moon i{

  position:absolute;

  left:-55%;
  top:-5%;

  width:110%;
  height:110%;

  border-radius:50%;

  background:var(--black);

  animation:
    mlsProjectMoon 1.5s
    ease-in-out infinite alternate;
}


@keyframes mlsProjectMoon{

  from{
    transform:translateX(-5px);
  }

  to{
    transform:translateX(18px);
  }

}


.mls-project-screen__loader > span{

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;

  color:
    rgba(17,17,17,.45);
}



/* =========================================================
   FOOT
========================================================= */

.mls-project-viewer__foot{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:30px;

  padding-top:23px;
}


.mls-project-viewer__foot p{

  margin:0;
}


.mls-project-viewer__foot p span{

  display:block;

  margin-bottom:5px;

  font-family:Arial,sans-serif;

  font-size:5px;

  letter-spacing:.17em;

  color:
    rgba(255,255,255,.35);
}


.mls-project-viewer__foot p strong{

  font-family:Arial,sans-serif;

  font-size:6px;

  letter-spacing:.13em;

  color:var(--gold-light);
}


.mls-project-viewer__foot a{

  min-width:165px;

  min-height:48px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:25px;

  padding:
    0 17px;

  border:
    1px solid rgba(255,255,255,.22);

  color:#fff;

  text-decoration:none;

  font-family:Arial,sans-serif;

  font-size:7px;

  font-weight:800;

  transition:
    background .3s ease,
    color .3s ease;
}


.mls-project-viewer__foot a:hover{

  background:var(--gold);

  color:var(--black);
}


.mls-project-viewer__foot a i{

  font-family:Georgia,serif;

  font-size:17px;

  font-style:normal;
}



/* =========================================================
   END
========================================================= */

.mls-projects__end{

  padding:
    clamp(100px,11vw,160px)
    max(
      calc((100vw - 1400px)/2),
      clamp(45px,7vw,110px)
    );

  background:
    var(--gray-pale);
}


.mls-projects__end > span{

  font-family:Arial,sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.18em;

  color:var(--gold);
}


.mls-projects__end p{

  margin:
    40px 0 0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(38px,4.8vw,68px);

  line-height:1.72;

  letter-spacing:-.05em;
}


.mls-projects__end p span,
.mls-projects__end p strong{

  display:block;
}


.mls-projects__end p span{

  color:
    rgba(17,17,17,.40);
}


.mls-projects__end p strong{

  font-weight:500;
}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  .mls-projects__intro{

    width:
      calc(100% - 48px);

    padding:
      78px 0 70px;
  }


  .mls-projects__meta strong{
    display:none;
  }


  .mls-projects__heading{
    display:block;
  }


  .mls-projects h2{

    font-size:
      clamp(35px,9vw,44px);
  }


  .mls-projects__lead{

    margin-top:30px;
  }



  .mls-projects-filter{

    grid-template-columns:
      repeat(2,1fr);
  }


  .mls-projects-filter button{

    min-height:65px;

    padding:0 18px;
  }



  .mls-projects-stage{

    display:flex;

    flex-direction:column;

    min-height:0;
  }


  .mls-project-viewer{

    order:1;

    padding:
      30px 24px 33px;
  }


  .mls-projects-list{

    order:2;
  }


  .mls-project-viewer__top > span{
    display:none;
  }


  .mls-project-viewer__title{

    display:block;

    margin:
      28px 0 18px;
  }


  .mls-project-viewer__title h3{

    max-width:none;

    margin-top:9px;

    text-align:left;

    font-size:
      clamp(28px,7.5vw,36px);
  }


  .mls-project-screen{

    min-height:410px;
  }


  .mls-project-screen__canvas{

    min-height:364px;
  }


  .mls-project-viewer__foot p{
    display:none;
  }


  .mls-project-viewer__foot a{

    width:100%;
  }


  .mls-project{

    min-height:105px;

    grid-template-columns:
      37px 1fr 22px;

    gap:13px;

    padding:
      22px 24px;
  }


  .mls-projects__end{

    padding:
      78px 24px 90px;
  }


  .mls-projects__end p{

    font-size:
      clamp(31px,8.3vw,40px);
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .mls-projects *,
  .mls-projects *::before,
  .mls-projects *::after{

    animation:none !important;
    transition:none !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4356327 */.mls-process-visual{
  --bg:#f6f4ef;
  --panel:#ffffff;
  --black:#111111;
  --gray:#6f6f6a;
  --line:#d9d4ca;
  --gold:#b58a3a;
  --gold-soft:#d7bf8e;

  background:var(--bg);
  color:var(--black);
  padding:120px 0;
  overflow:hidden;
}

.mls-process-visual,
.mls-process-visual *{
  box-sizing:border-box;
}

.mls-process-visual__inner{
  width:min(1400px, calc(100% - 64px));
  margin:0 auto;
}

.mls-process-visual__intro{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  align-items:end;
  margin-bottom:56px;
}

.mls-process-visual__eyebrow{
  margin:0 0 16px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--gold);
}

.mls-process-visual__title{
  margin:0;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(44px, 6vw, 86px);
  line-height:1.18;
  font-weight:500;
  letter-spacing:-0.04em;
}

.mls-process-visual__lead{
  margin:0;
  font-size:16px;
  line-height:2;
  color:var(--gray);
  max-width:520px;
}

.mls-process-visual__nav{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:16px;
  margin-bottom:28px;
}

.mls-process-thumb{
  position:relative;
  border:1px solid var(--line);
  background:#fff;
  padding:0;
  overflow:hidden;
  cursor:pointer;
  text-align:left;
  min-height:130px;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.mls-process-thumb:hover{
  transform:translateY(-3px);
}

.mls-process-thumb.is-active{
  border-color:var(--gold);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.mls-process-thumb img{
  width:100%;
  height:130px;
  object-fit:cover;
  display:block;
  filter:grayscale(20%);
}

.mls-process-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.12));
  pointer-events:none;
}

.mls-process-thumb__num,
.mls-process-thumb__label{
  position:absolute;
  z-index:2;
  color:#fff;
}

.mls-process-thumb__num{
  top:14px;
  left:14px;
  font-size:22px;
  font-style:italic;
  font-family:Georgia, serif;
}

.mls-process-thumb__label{
  left:14px;
  bottom:14px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
}

.mls-process-stage{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(360px, .9fr);
  gap:28px;
  align-items:stretch;
}

.mls-process-stage__media{
  position:relative;
  min-height:640px;
  background:#000;
  overflow:hidden;
}

.mls-process-slide{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease, visibility .45s ease;
}

.mls-process-slide.is-active{
  opacity:1;
  visibility:visible;
}

.mls-process-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.mls-process-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.10));
}

.mls-process-slide figcaption{
  position:absolute;
  left:24px;
  bottom:22px;
  z-index:2;
  color:#fff;
  font-size:12px;
  letter-spacing:.18em;
  font-weight:700;
}

.mls-process-stage__copy{
  position:relative;
  min-height:640px;
  background:var(--panel);
  border:1px solid var(--line);
  padding:42px 42px 96px;
}

.mls-process-copy{
  position:absolute;
  inset:42px 42px 96px 42px;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s ease;
}

.mls-process-copy.is-active{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.mls-process-copy__meta{
  margin:0 0 18px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--gold);
}

.mls-process-copy h3{
  margin:0 0 22px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(30px, 3vw, 52px);
  line-height:1.35;
  font-weight:500;
  letter-spacing:-0.04em;
}

.mls-process-copy > p{
  margin:0 0 26px;
  font-size:15px;
  line-height:2;
  color:var(--gray);
}

.mls-process-copy ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
}

.mls-process-copy li{
  padding:0 0 12px 18px;
  border-bottom:1px solid var(--line);
  position:relative;
  font-size:14px;
  line-height:1.8;
  color:var(--black);
}

.mls-process-copy li::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
  position:absolute;
  left:0;
  top:.7em;
}

.mls-process-stage__controls{
  position:absolute;
  left:42px;
  right:42px;
  bottom:30px;
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.mls-process-control{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--black);
  min-width:120px;
  height:48px;
  padding:0 18px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}

.mls-process-control:hover{
  background:var(--black);
  color:#fff;
  border-color:var(--black);
}

@media (max-width: 1100px){
  .mls-process-visual__intro{
    grid-template-columns:1fr;
    gap:24px;
  }

  .mls-process-visual__nav{
    grid-template-columns:repeat(3, 1fr);
  }

  .mls-process-stage{
    grid-template-columns:1fr;
  }

  .mls-process-stage__media,
  .mls-process-stage__copy{
    min-height:auto;
  }

  .mls-process-stage__media{
    height:520px;
  }

  .mls-process-stage__copy{
    padding:36px 28px 92px;
  }

  .mls-process-copy{
    inset:36px 28px 92px 28px;
    position:relative;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .mls-process-copy.is-active{
    display:block;
  }

  .mls-process-stage__controls{
    left:28px;
    right:28px;
    bottom:24px;
  }
}

@media (max-width: 767px){
  .mls-process-visual{
    padding:80px 0;
  }

  .mls-process-visual__inner{
    width:calc(100% - 32px);
  }

  .mls-process-visual__title{
    font-size:42px;
    line-height:1.28;
  }

  .mls-process-visual__lead{
    font-size:14px;
    line-height:1.9;
  }

  .mls-process-visual__nav{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding-bottom:8px;
    scroll-snap-type:x mandatory;
  }

  .mls-process-thumb{
    flex:0 0 78%;
    min-width:78%;
    scroll-snap-align:start;
  }

  .mls-process-thumb img{
    height:120px;
  }

  .mls-process-stage__media{
    height:340px;
    min-height:340px;
  }

  .mls-process-stage__copy{
    padding:28px 20px 90px;
  }

  .mls-process-copy{
    inset:28px 20px 90px 20px;
  }

  .mls-process-copy h3{
    font-size:34px;
    line-height:1.45;
  }

  .mls-process-copy > p{
    font-size:14px;
  }

  .mls-process-stage__controls{
    left:20px;
    right:20px;
    bottom:20px;
  }

  .mls-process-control{
    flex:1;
    min-width:0;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d9c820e *//* =========================================================
   MOON LOOP STUDIO
   BEYOND THE PAGE

   STATIC EDITORIAL
   WHITE / BLACK / GOLD / GRAY
========================================================= */

.mls-beyond-editorial{

  --black:#101010;
  --black-soft:#191919;

  --white:#FFFFFF;
  --offwhite:#F5F4F0;

  --gold:#B38A45;
  --gold-light:#D3B474;

  --gray:#858581;
  --gray-light:#D7D7D1;
  --gray-pale:#EEEEEA;

  width:100%;

  overflow:hidden;

  background:var(--white);

  color:var(--black);
}


.mls-beyond-editorial,
.mls-beyond-editorial *,
.mls-beyond-editorial *::before,
.mls-beyond-editorial *::after{
  box-sizing:border-box;
}



/* =========================================================
   INTRO
========================================================= */

.mls-beyond-editorial__intro{

  width:
    min(
      calc(100% - clamp(90px,12vw,190px)),
      1400px
    );

  margin-inline:auto;

  padding:
    clamp(105px,11vw,165px)
    0
    clamp(90px,9vw,130px);
}



/* META */

.mls-beyond-editorial__meta{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid rgba(16,16,16,.14);

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.mls-beyond-editorial__meta span{

  color:var(--gold);
}


.mls-beyond-editorial__meta strong{

  color:
    rgba(16,16,16,.32);
}



/* =========================================================
   HEADING
========================================================= */

.mls-beyond-editorial__heading{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(290px,.38fr);

  gap:
    clamp(55px,8vw,125px);

  align-items:end;

  margin-top:
    clamp(55px,7vw,90px);
}


.mls-beyond-editorial__heading
> div:first-child > p{

  margin:0 0 14px;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.19em;

  color:var(--gold);
}


.mls-beyond-editorial h2{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(47px,5.5vw,80px);

  line-height:1.62;

  font-weight:500;

  letter-spacing:-.055em;

  line-break:strict;
}


.mls-beyond-editorial h2 span,
.mls-beyond-editorial h2 strong{

  display:block;
}


.mls-beyond-editorial h2 strong{

  font-weight:500;
}



/* LEAD */

.mls-beyond-editorial__lead{

  padding-left:19px;

  border-left:
    2px solid var(--gold);
}


.mls-beyond-editorial__lead p{

  margin:0;

  font-size:12px;

  line-height:2.05;

  color:
    rgba(16,16,16,.57);
}


.mls-beyond-editorial__lead p + p{

  margin-top:12px;
}



/* =========================================================
   01 / MOVIE
========================================================= */

.mls-beyond-movie{

  background:var(--black);

  color:#fff;
}



/* =========================================================
   MOVIE VISUAL
========================================================= */

.mls-beyond-movie__visual{

  position:relative;

  width:100%;

  height:
    clamp(620px,74vw,920px);

  overflow:hidden;

  isolation:isolate;
}


.mls-beyond-movie__visual > img{

  position:absolute;

  z-index:-3;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center;

  filter:
    grayscale(12%)
    contrast(1.04);
}



/* SHADE */

.mls-beyond-movie__shade{

  position:absolute;

  z-index:-2;

  inset:0;

  background:

    linear-gradient(
      90deg,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.43) 42%,
      rgba(0,0,0,.13) 76%
    ),

    linear-gradient(
      0deg,
      rgba(0,0,0,.55),
      transparent 47%
    );
}



/* =========================================================
   MOVIE INDEX
========================================================= */

.mls-beyond-movie__index{

  position:absolute;

  left:
    clamp(30px,5vw,80px);

  right:
    clamp(30px,5vw,80px);

  top:
    clamp(35px,5vw,70px);

  display:flex;

  justify-content:space-between;

  align-items:center;

  color:#fff;
}


.mls-beyond-movie__index span{

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(29px,3vw,44px);

  font-style:italic;

  color:var(--gold-light);
}


.mls-beyond-movie__index strong{

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:900;

  letter-spacing:.20em;
}



/* =========================================================
   MOVIE COPY

   top/bottom両方で縛らず
   下から安定して配置
========================================================= */

.mls-beyond-movie__copy{

  position:absolute;

  left:
    clamp(45px,8vw,130px);

  right:
    clamp(45px,8vw,130px);

  bottom:
    clamp(65px,9vw,135px);

  max-width:900px;
}


.mls-beyond-movie__copy > p{

  margin:0 0
    clamp(18px,2.5vw,30px);

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:900;

  letter-spacing:.22em;

  color:var(--gold-light);
}


.mls-beyond-movie h3{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(49px,6.7vw,102px);

  line-height:1.42;

  font-weight:500;

  letter-spacing:-.06em;

  line-break:strict;
}


.mls-beyond-movie h3 span,
.mls-beyond-movie h3 strong{

  display:block;
}


.mls-beyond-movie h3 strong{

  font-weight:500;
}



/* =========================================================
   MOVIE DETAIL
========================================================= */

.mls-beyond-movie__detail{

  display:grid;

  grid-template-columns:
    .30fr .42fr .28fr;

  gap:
    clamp(35px,6vw,90px);

  align-items:start;

  padding:
    clamp(60px,7vw,95px)
    max(
      calc((100vw - 1400px)/2),
      clamp(45px,7vw,110px)
    );

  background:var(--black-soft);
}


.mls-beyond-movie__detail > div{

  display:flex;

  align-items:center;

  gap:12px;

  padding-top:6px;
}


.mls-beyond-movie__detail
> div span{

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:900;

  letter-spacing:.18em;

  color:var(--gold-light);
}


.mls-beyond-movie__detail
> div i{

  flex:1;

  height:1px;

  background:
    rgba(255,255,255,.16);
}


.mls-beyond-movie__detail > p{

  margin:0;

  font-size:11px;

  line-height:2;

  color:
    rgba(255,255,255,.60);
}



/* TAGS */

.mls-beyond-movie__detail ul{

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:0;

  margin:0;

  padding:0;

  list-style:none;

  border-top:
    1px solid
    rgba(255,255,255,.15);
}


.mls-beyond-movie__detail li{

  padding:13px 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.15);

  font-size:8px;

  color:
    rgba(255,255,255,.65);
}



/* =========================================================
   02 / EVENT
========================================================= */

.mls-beyond-event{

  display:grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(390px,.70fr);

  min-height:
    clamp(760px,82vw,980px);

  background:
    var(--offwhite);
}



/* =========================================================
   EVENT COPY
========================================================= */

.mls-beyond-event__copy{

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:
    clamp(80px,10vw,150px)
    clamp(55px,8vw,130px);
}



/* INDEX */

.mls-beyond-event__index{

  display:flex;

  align-items:center;

  gap:15px;

  margin-bottom:
    clamp(55px,7vw,90px);
}


.mls-beyond-event__index span{

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(29px,3vw,44px);

  font-style:italic;

  color:var(--gold);
}


.mls-beyond-event__index strong{

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:900;

  letter-spacing:.19em;
}



/* EYEBROW */

.mls-beyond-event__eyebrow{

  margin:0 0 17px;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:900;

  letter-spacing:.20em;

  color:var(--gold);
}



/* EVENT H3 */

.mls-beyond-event h3{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(49px,5.4vw,78px);

  line-height:1.55;

  font-weight:500;

  letter-spacing:-.055em;
}


.mls-beyond-event h3 span,
.mls-beyond-event h3 strong{

  display:block;
}


.mls-beyond-event h3 strong{

  font-weight:500;
}



/* DESCRIPTION */

.mls-beyond-event__description{

  max-width:570px;

  margin:
    clamp(28px,4vw,45px)
    0 0;

  padding-top:23px;

  border-top:
    1px solid
    rgba(16,16,16,.14);

  font-size:11px;

  line-height:2;

  color:
    rgba(16,16,16,.56);
}



/* =========================================================
   EVENT SERVICES
========================================================= */

.mls-beyond-event__services{

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  margin-top:
    clamp(40px,5vw,65px);

  border-top:
    1px solid
    var(--gray-light);
}


.mls-beyond-event__services > div{

  display:grid;

  grid-template-columns:
    35px 1fr;

  gap:10px;

  align-items:center;

  min-height:70px;

  border-bottom:
    1px solid
    var(--gray-light);
}


.mls-beyond-event__services
> div:nth-child(odd){

  border-right:
    1px solid
    var(--gray-light);
}


.mls-beyond-event__services span{

  font-family:
    Georgia,
    serif;

  font-size:16px;

  font-style:italic;

  color:var(--gold);
}


.mls-beyond-event__services strong{

  font-size:9px;

  font-weight:500;
}



/* NOTE */

.mls-beyond-event__note{

  display:grid;

  grid-template-columns:
    80px 1fr;

  gap:20px;

  margin-top:
    clamp(35px,5vw,55px);
}


.mls-beyond-event__note span{

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  font-weight:900;

  letter-spacing:.18em;

  color:var(--gold);
}


.mls-beyond-event__note p{

  margin:0;

  font-size:9px;

  line-height:1.9;

  color:
    rgba(16,16,16,.48);
}



/* =========================================================
   EVENT VISUAL
========================================================= */

.mls-beyond-event__visual{

  position:relative;

  min-height:100%;

  margin:0;

  overflow:hidden;

  background:var(--black);
}


.mls-beyond-event__visual img{

  width:100%;
  height:100%;

  min-height:
    clamp(760px,82vw,980px);

  display:block;

  object-fit:cover;

  filter:
    grayscale(100%)
    contrast(1.05);
}


.mls-beyond-event__visual::after{

  content:"";

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      0deg,
      rgba(0,0,0,.54),
      transparent 48%
    );
}


.mls-beyond-event__visual figcaption{

  position:absolute;

  z-index:2;

  left:30px;
  bottom:30px;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:900;

  letter-spacing:.19em;

  color:
    rgba(255,255,255,.72);
}



/* =========================================================
   03 / GRAPHIC
========================================================= */

.mls-beyond-graphic{

  padding:
    clamp(90px,10vw,150px)
    max(
      calc((100vw - 1400px)/2),
      clamp(45px,7vw,110px)
    );

  background:#fff;
}



/* TOP */

.mls-beyond-graphic__top{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:30px;

  padding-bottom:20px;

  border-bottom:
    1px solid
    rgba(16,16,16,.14);
}


.mls-beyond-graphic__index{

  display:flex;

  align-items:center;

  gap:15px;
}


.mls-beyond-graphic__index span{

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(29px,3vw,44px);

  font-style:italic;

  color:var(--gold);
}


.mls-beyond-graphic__index strong{

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:900;

  letter-spacing:.19em;
}


.mls-beyond-graphic__top > p{

  margin:0;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:900;

  letter-spacing:.18em;

  color:
    rgba(16,16,16,.34);
}



/* =========================================================
   GRAPHIC GRID
========================================================= */

.mls-beyond-graphic__grid{

  display:grid;

  grid-template-columns:
    1.03fr .97fr;

  grid-template-rows:
    auto auto;

  gap:
    clamp(35px,5vw,70px);

  margin-top:
    clamp(55px,7vw,90px);
}



/* VISUAL */

.mls-beyond-graphic__visual{

  grid-row:
    1 / 3;

  margin:0;

  min-height:
    clamp(650px,65vw,850px);

  overflow:hidden;

  background:
    var(--black);
}


.mls-beyond-graphic__visual img{

  width:100%;
  height:100%;

  min-height:
    clamp(650px,65vw,850px);

  display:block;

  object-fit:cover;

  filter:
    grayscale(88%)
    contrast(1.05);
}



/* MESSAGE */

.mls-beyond-graphic__message{

  align-self:end;

  padding-top:
    clamp(60px,8vw,120px);
}


.mls-beyond-graphic__message > span{

  display:block;

  margin-bottom:18px;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:900;

  letter-spacing:.20em;

  color:var(--gold);
}


.mls-beyond-graphic h3{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(43px,4.7vw,67px);

  line-height:1.62;

  font-weight:500;

  letter-spacing:-.055em;
}


.mls-beyond-graphic h3 span,
.mls-beyond-graphic h3 strong{

  display:block;
}


.mls-beyond-graphic h3 strong{

  font-weight:500;
}



/* DETAIL */

.mls-beyond-graphic__detail{

  align-self:start;

  padding-top:
    clamp(30px,4vw,50px);

  border-top:
    1px solid
    rgba(16,16,16,.14);
}


.mls-beyond-graphic__detail > p{

  max-width:570px;

  margin:0;

  font-size:11px;

  line-height:2;

  color:
    rgba(16,16,16,.56);
}



/* LIST */

.mls-beyond-graphic__detail ul{

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:0;

  margin:
    clamp(35px,4vw,50px)
    0 0;

  padding:0;

  border-top:
    1px solid
    var(--gray-light);

  list-style:none;
}


.mls-beyond-graphic__detail li{

  min-height:61px;

  display:flex;

  align-items:center;

  gap:14px;

  border-bottom:
    1px solid
    var(--gray-light);

  font-size:9px;
}


.mls-beyond-graphic__detail
li:nth-child(odd){

  border-right:
    1px solid
    var(--gray-light);
}


.mls-beyond-graphic__detail li span{

  font-family:
    Georgia,
    serif;

  font-size:15px;

  font-style:italic;

  color:var(--gold);
}



/* =========================================================
   END
========================================================= */

.mls-beyond-editorial__end{

  display:grid;

  grid-template-columns:
    minmax(250px,.35fr)
    minmax(0,1fr);

  gap:
    clamp(50px,9vw,140px);

  padding:
    clamp(100px,11vw,160px)
    max(
      calc((100vw - 1400px)/2),
      clamp(45px,7vw,110px)
    );

  background:
    var(--gray-pale);
}



/* LABEL */

.mls-beyond-editorial__end > div{

  display:flex;

  align-items:center;

  gap:11px;

  padding-top:14px;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:900;

  letter-spacing:.17em;
}


.mls-beyond-editorial__end
> div span{

  color:
    rgba(16,16,16,.37);
}


.mls-beyond-editorial__end
> div i{

  flex:1;

  height:1px;

  background:var(--gold);
}


.mls-beyond-editorial__end
> div strong{

  color:var(--gold);
}



/* MESSAGE */

.mls-beyond-editorial__end > p{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(39px,4.8vw,69px);

  line-height:1.74;

  letter-spacing:-.05em;
}


.mls-beyond-editorial__end
> p span,
.mls-beyond-editorial__end
> p strong{

  display:block;
}


.mls-beyond-editorial__end
> p span{

  color:
    rgba(16,16,16,.40);
}


.mls-beyond-editorial__end
> p strong{

  color:var(--black);

  font-weight:500;
}



/* =========================================================
   TABLET
========================================================= */

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

  .mls-beyond-event{

    grid-template-columns:
      1fr .65fr;
  }


  .mls-beyond-movie h3{

    font-size:
      clamp(48px,6vw,72px);
  }


  .mls-beyond-movie__detail{

    grid-template-columns:
      .3fr .7fr;
  }


  .mls-beyond-movie__detail ul{

    grid-column:
      1 / -1;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  /* INTRO */

  .mls-beyond-editorial__intro{

    width:
      calc(100% - 48px);

    padding:
      78px 0 70px;
  }


  .mls-beyond-editorial__meta strong{
    display:none;
  }


  .mls-beyond-editorial__heading{

    display:block;

    margin-top:42px;
  }


  .mls-beyond-editorial h2{

    font-size:
      clamp(35px,9.2vw,44px);

    line-height:1.72;
  }


  .mls-beyond-editorial__lead{

    margin-top:31px;

    padding-left:15px;
  }



  /* =======================================================
     MOVIE
  ======================================================== */

  .mls-beyond-movie__visual{

    height:
      min(680px,82svh);

    min-height:570px;
  }


  .mls-beyond-movie__shade{

    background:

      linear-gradient(
        0deg,
        rgba(0,0,0,.78),
        rgba(0,0,0,.14) 70%
      );
  }


  .mls-beyond-movie__index{

    left:24px;
    right:24px;
    top:28px;
  }


  .mls-beyond-movie__copy{

    left:24px;
    right:24px;

    bottom:45px;
  }


  .mls-beyond-movie h3{

    font-size:
      clamp(40px,10.8vw,52px);

    line-height:1.55;
  }


  .mls-beyond-movie__detail{

    display:block;

    padding:
      45px 24px
      55px;
  }


  .mls-beyond-movie__detail > p{

    margin-top:28px;

    font-size:10px;
  }


  .mls-beyond-movie__detail ul{

    margin-top:30px;
  }



  /* =======================================================
     EVENT
  ======================================================== */

  .mls-beyond-event{

    display:flex;

    flex-direction:column;

    min-height:0;
  }


  .mls-beyond-event__copy{

    padding:
      75px 24px
      80px;
  }


  .mls-beyond-event__index{

    margin-bottom:50px;
  }


  .mls-beyond-event h3{

    font-size:
      clamp(39px,10.4vw,50px);

    line-height:1.62;
  }


  .mls-beyond-event__description{

    font-size:10px;
  }


  .mls-beyond-event__services{

    grid-template-columns:1fr;
  }


  .mls-beyond-event__services
  > div:nth-child(odd){

    border-right:0;
  }


  .mls-beyond-event__note{

    grid-template-columns:1fr;

    gap:8px;
  }


  .mls-beyond-event__visual{

    min-height:560px;
  }


  .mls-beyond-event__visual img{

    min-height:560px;

    height:560px;
  }



  /* =======================================================
     GRAPHIC
  ======================================================== */

  .mls-beyond-graphic{

    padding:
      75px 24px
      85px;
  }


  .mls-beyond-graphic__top > p{
    display:none;
  }


  .mls-beyond-graphic__grid{

    display:flex;

    flex-direction:column;

    gap:0;

    margin-top:50px;
  }


  .mls-beyond-graphic__visual{

    min-height:480px;
  }


  .mls-beyond-graphic__visual img{

    min-height:480px;

    height:480px;
  }


  .mls-beyond-graphic__message{

    order:-1;

    padding:
      0 0 45px;
  }


  .mls-beyond-graphic h3{

    font-size:
      clamp(37px,9.8vw,47px);

    line-height:1.65;
  }


  .mls-beyond-graphic__detail{

    padding-top:40px;
  }


  .mls-beyond-graphic__detail > p{

    font-size:10px;
  }


  .mls-beyond-graphic__detail ul{

    grid-template-columns:1fr;
  }


  .mls-beyond-graphic__detail
  li:nth-child(odd){

    border-right:0;
  }



  /* =======================================================
     END
  ======================================================== */

  .mls-beyond-editorial__end{

    display:block;

    padding:
      78px 24px
      90px;
  }


  .mls-beyond-editorial__end
  > div{

    max-width:270px;
  }


  .mls-beyond-editorial__end
  > p{

    margin-top:40px;

    font-size:
      clamp(31px,8.3vw,40px);
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bab71f4 *//* =========================================================
   MOON LOOP STUDIO
   SIMPLE HORIZONTAL FAQ

   WHITE / BLACK / GOLD / GRAY
========================================================= */

.mls-simplefaq{

  --black:#111111;
  --white:#FFFFFF;
  --offwhite:#F6F5F1;

  --gold:#B38A45;
  --gold-light:#D1B16F;

  --gray:#858581;
  --gray-light:#D8D8D3;
  --gray-pale:#EEEEEA;

  position:relative;

  width:100%;

  overflow:hidden;

  background:
    var(--offwhite);

  color:
    var(--black);
}


.mls-simplefaq,
.mls-simplefaq *,
.mls-simplefaq *::before,
.mls-simplefaq *::after{
  box-sizing:border-box;
}



/* =========================================================
   VERY SUBTLE MOON ARC
========================================================= */

.mls-simplefaq::after{

  content:"";

  position:absolute;

  z-index:0;

  right:-260px;
  top:180px;

  width:610px;
  height:610px;

  border:
    1px solid
    rgba(179,138,69,.13);

  border-radius:50%;

  pointer-events:none;
}



/* =========================================================
   INTRO
========================================================= */

.mls-simplefaq__intro{

  position:relative;

  z-index:2;

  width:
    min(
      calc(100% - clamp(90px,12vw,190px)),
      1400px
    );

  margin-inline:auto;

  padding:
    clamp(105px,11vw,165px)
    0
    clamp(85px,9vw,125px);
}



/* META */

.mls-simplefaq__meta{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:30px;

  padding-bottom:15px;

  border-bottom:
    1px solid
    rgba(17,17,17,.14);

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:800;

  letter-spacing:.19em;
}


.mls-simplefaq__meta span{

  color:
    var(--gold);
}


.mls-simplefaq__meta strong{

  color:
    rgba(17,17,17,.31);
}



/* =========================================================
   HEADING
========================================================= */

.mls-simplefaq__heading{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(290px,.38fr);

  gap:
    clamp(55px,8vw,125px);

  align-items:end;

  margin-top:
    clamp(55px,7vw,90px);
}


.mls-simplefaq__heading
> div:first-child > p{

  margin:
    0 0 14px;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:800;

  letter-spacing:.19em;

  color:
    var(--gold);
}


.mls-simplefaq h2{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(47px,5.5vw,80px);

  line-height:1.62;

  font-weight:500;

  letter-spacing:-.055em;

  line-break:strict;
}


.mls-simplefaq h2 span,
.mls-simplefaq h2 strong{

  display:block;
}


.mls-simplefaq h2 strong{

  font-weight:500;
}



/* LEAD */

.mls-simplefaq__lead{

  padding-left:19px;

  border-left:
    2px solid
    var(--gold);
}


.mls-simplefaq__lead p{

  margin:0;

  font-size:12px;

  line-height:2.05;

  color:
    rgba(17,17,17,.56);
}


.mls-simplefaq__lead p + p{

  margin-top:12px;
}



/* =========================================================
   FAQ LIST
========================================================= */

.mls-simplefaq__list{

  position:relative;

  z-index:2;

  width:
    min(
      calc(100% - clamp(90px,12vw,190px)),
      1400px
    );

  margin-inline:auto;

  padding-bottom:
    clamp(105px,11vw,165px);

  border-top:
    1px solid
    rgba(17,17,17,.15);
}



/* =========================================================
   FAQ ITEM
========================================================= */

.mls-simplefaq-item{

  position:relative;

  display:grid;

  grid-template-columns:
    75px
    minmax(280px,.82fr)
    minmax(380px,1.18fr);

  gap:
    clamp(25px,5vw,75px);

  align-items:start;

  min-height:
    clamp(205px,18vw,270px);

  padding:
    clamp(43px,5vw,68px)
    0;

  border-bottom:
    1px solid
    rgba(17,17,17,.15);

  transition:
    padding-left .4s
    cubic-bezier(.2,.8,.2,1),
    background .4s ease;
}



/* GOLD LINE */

.mls-simplefaq-item::before{

  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:0;

  background:
    var(--gold);

  transition:
    width .35s ease;
}


.mls-simplefaq-item:hover{

  padding-left:
    clamp(10px,1.5vw,20px);
}


.mls-simplefaq-item:hover::before{

  width:3px;
}



/* =========================================================
   NUMBER
========================================================= */

.mls-simplefaq-item__number{

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(28px,3vw,44px);

  line-height:1;

  font-style:italic;

  color:
    rgba(17,17,17,.22);

  transition:
    color .35s ease;
}


.mls-simplefaq-item:hover
.mls-simplefaq-item__number{

  color:
    var(--gold);
}



/* =========================================================
   QUESTION
========================================================= */

.mls-simplefaq-item__question{

  padding-top:2px;
}


.mls-simplefaq-item__question small{

  display:block;

  margin-bottom:
    clamp(14px,2vw,20px);

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:900;

  letter-spacing:.19em;

  color:
    var(--gold);
}


.mls-simplefaq-item__question h3{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(22px,2.2vw,32px);

  line-height:1.7;

  font-weight:500;

  letter-spacing:-.025em;

  line-break:strict;
}



/* =========================================================
   ANSWER
========================================================= */

.mls-simplefaq-item__answer{

  position:relative;

  display:grid;

  grid-template-columns:
    40px
    minmax(0,1fr);

  gap:
    clamp(16px,2.5vw,30px);

  padding-left:
    clamp(25px,4vw,55px);

  border-left:
    1px solid
    rgba(17,17,17,.13);
}



/* A */

.mls-simplefaq-item__answer > span{

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(21px,2vw,29px);

  line-height:1;

  font-style:italic;

  color:
    var(--gold);
}



/* TEXT */

.mls-simplefaq-item__answer p{

  max-width:640px;

  margin:0;

  font-size:11px;

  line-height:2.15;

  color:
    rgba(17,17,17,.58);
}



/* =========================================================
   HOVER DETAIL
========================================================= */

.mls-simplefaq-item__answer::after{

  content:"";

  position:absolute;

  right:0;
  bottom:-18px;

  width:0;
  height:1px;

  background:
    var(--gold);

  transition:
    width .55s
    cubic-bezier(.2,.8,.2,1);
}


.mls-simplefaq-item:hover
.mls-simplefaq-item__answer::after{

  width:
    clamp(60px,8vw,110px);
}



/* =========================================================
   END
========================================================= */

.mls-simplefaq__end{

  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
    minmax(250px,.35fr)
    minmax(0,1fr);

  gap:
    clamp(50px,9vw,140px);

  padding:
    clamp(100px,11vw,160px)
    max(
      calc((100vw - 1400px)/2),
      clamp(45px,7vw,110px)
    );

  background:
    var(--black);

  color:#fff;
}



/* LABEL */

.mls-simplefaq__end > div{

  display:flex;

  align-items:center;

  gap:11px;

  padding-top:14px;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:900;

  letter-spacing:.17em;
}


.mls-simplefaq__end > div span{

  color:
    rgba(255,255,255,.38);
}


.mls-simplefaq__end > div i{

  flex:1;

  height:1px;

  background:
    var(--gold);
}


.mls-simplefaq__end > div strong{

  color:
    var(--gold-light);
}



/* MESSAGE */

.mls-simplefaq__end > p{

  margin:0;

  font-family:
    "Yu Mincho",
    serif;

  font-size:
    clamp(39px,4.8vw,69px);

  line-height:1.72;

  letter-spacing:-.05em;
}


.mls-simplefaq__end > p span,
.mls-simplefaq__end > p strong{

  display:block;
}


.mls-simplefaq__end > p span{

  color:
    rgba(255,255,255,.40);
}


.mls-simplefaq__end > p strong{

  font-weight:500;

  color:#fff;
}



/* =========================================================
   TABLET
========================================================= */

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

  .mls-simplefaq-item{

    grid-template-columns:
      60px
      .9fr
      1.1fr;

    gap:30px;
  }


  .mls-simplefaq-item__answer{

    padding-left:25px;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  .mls-simplefaq::after{

    right:-310px;

    top:270px;

    width:500px;
    height:500px;
  }



  /* INTRO */

  .mls-simplefaq__intro{

    width:
      calc(100% - 48px);

    padding:
      78px 0 70px;
  }


  .mls-simplefaq__meta strong{
    display:none;
  }


  .mls-simplefaq__heading{

    display:block;

    margin-top:42px;
  }


  .mls-simplefaq h2{

    font-size:
      clamp(35px,9.3vw,44px);

    line-height:1.72;
  }


  .mls-simplefaq__lead{

    margin-top:31px;

    padding-left:15px;
  }



  /* LIST */

  .mls-simplefaq__list{

    width:
      calc(100% - 48px);

    padding-bottom:80px;
  }



  /* ITEM */

  .mls-simplefaq-item{

    display:grid;

    grid-template-columns:
      42px
      minmax(0,1fr);

    gap:
      12px 14px;

    min-height:0;

    padding:
      34px 0;
  }


  .mls-simplefaq-item:hover{

    padding-left:0;
  }


  .mls-simplefaq-item:hover::before{

    width:0;
  }



  /* NUMBER */

  .mls-simplefaq-item__number{

    grid-column:1;
    grid-row:1;

    font-size:24px;
  }



  /* QUESTION */

  .mls-simplefaq-item__question{

    grid-column:2;
    grid-row:1;
  }


  .mls-simplefaq-item__question small{

    margin-bottom:10px;

    font-size:5px;
  }


  .mls-simplefaq-item__question h3{

    font-size:
      clamp(20px,5.6vw,26px);

    line-height:1.65;
  }



  /* ANSWER */

  .mls-simplefaq-item__answer{

    grid-column:
      1 / -1;

    grid-row:2;

    grid-template-columns:
      42px
      1fr;

    gap:14px;

    margin-top:19px;

    padding:
      23px 0 0;

    border-left:0;

    border-top:
      1px solid
      rgba(17,17,17,.12);
  }


  .mls-simplefaq-item__answer > span{

    font-size:19px;
  }


  .mls-simplefaq-item__answer p{

    max-width:none;

    font-size:10px;

    line-height:2.05;
  }


  .mls-simplefaq-item__answer::after{
    display:none;
  }



  /* END */

  .mls-simplefaq__end{

    display:block;

    padding:
      78px 24px
      90px;
  }


  .mls-simplefaq__end > div{

    max-width:260px;
  }


  .mls-simplefaq__end > p{

    margin-top:40px;

    font-size:
      clamp(31px,8.3vw,40px);
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-53cc85d *//* =========================================================
   MOON LOOP STUDIO
   FINAL WEB CTA

   BLACK / WHITE / GOLD / GRAY
========================================================= */

.mls-webcta{

  --black:#0D0D0D;
  --black-soft:#161616;

  --white:#FFFFFF;
  --offwhite:#F3F2ED;

  --gold:#B38A45;
  --gold-light:#D4B875;

  --gray:#898985;

  position:relative;

  width:100%;

  min-height:
    max(780px,100svh);

  overflow:hidden;

  display:flex;

  flex-direction:column;

  justify-content:center;

  background:

    radial-gradient(
      circle at 75% 48%,
      #1A1A1A 0%,
      #111111 40%,
      #090909 100%
    );

  color:#fff;

  isolation:isolate;
}


.mls-webcta,
.mls-webcta *,
.mls-webcta *::before,
.mls-webcta *::after{
  box-sizing:border-box;
}



/* =========================================================
   BACK TYPE
========================================================= */

.mls-webcta__backtype{

  position:absolute;

  z-index:-4;

  left:-2%;

  bottom:-8%;

  font-family:
    Arial,
    sans-serif;

  font-size:
    clamp(150px,23vw,380px);

  line-height:.72;

  font-weight:900;

  letter-spacing:-.11em;

  color:
    rgba(255,255,255,.025);

  pointer-events:none;
}



/* =========================================================
   BACK ORBIT
========================================================= */

.mls-webcta__orbit{

  position:absolute;

  z-index:-3;

  right:-16vw;

  top:50%;

  width:
    min(82vw,1100px);

  aspect-ratio:1;

  transform:
    translateY(-50%);

  border:
    1px solid
    rgba(179,138,69,.12);

  border-radius:50%;

  pointer-events:none;
}


.mls-webcta__orbit::before{

  content:"";

  position:absolute;

  inset:9%;

  border:
    1px solid
    rgba(255,255,255,.035);

  border-radius:50%;
}



/* =========================================================
   INNER
========================================================= */

.mls-webcta__inner{

  width:
    min(
      calc(100% - clamp(80px,10vw,160px)),
      1450px
    );

  margin-inline:auto;

  display:grid;

  grid-template-columns:
    minmax(430px,.95fr)
    minmax(450px,1.05fr);

  gap:
    clamp(45px,7vw,110px);

  align-items:center;

  padding:
    clamp(100px,10vw,145px)
    0
    100px;
}



/* =========================================================
   CONTENT
========================================================= */

.mls-webcta__content{

  position:relative;

  z-index:5;

  max-width:690px;
}



/* META */

.mls-webcta__meta{

  display:flex;

  align-items:center;

  gap:12px;

  margin-bottom:
    clamp(55px,7vw,90px);

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:900;

  letter-spacing:.18em;
}


.mls-webcta__meta span{

  color:
    rgba(255,255,255,.38);
}


.mls-webcta__meta i{

  width:
    clamp(30px,4vw,65px);

  height:1px;

  background:
    var(--gold);
}


.mls-webcta__meta strong{

  color:
    var(--gold-light);
}



/* =========================================================
   EYEBROW
========================================================= */

.mls-webcta__eyebrow{

  margin:
    0 0 17px;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:900;

  letter-spacing:.22em;

  color:
    var(--gold-light);
}



/* =========================================================
   HEADING
========================================================= */

.mls-webcta h2{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size:
    clamp(51px,6vw,88px);

  line-height:1.47;

  font-weight:500;

  letter-spacing:-.06em;

  line-break:strict;
}


.mls-webcta h2 span,
.mls-webcta h2 strong{

  display:block;
}


.mls-webcta h2 span{

  color:
    rgba(255,255,255,.40);
}


.mls-webcta h2 strong{

  font-weight:500;

  color:#fff;
}



/* =========================================================
   LEAD
========================================================= */

.mls-webcta__lead{

  max-width:560px;

  margin-top:
    clamp(28px,4vw,43px);

  padding-top:23px;

  border-top:
    1px solid
    rgba(255,255,255,.13);
}


.mls-webcta__lead p{

  margin:0;

  font-size:11px;

  line-height:2.05;

  color:
    rgba(255,255,255,.58);
}


.mls-webcta__lead p + p{

  margin-top:11px;
}



/* =========================================================
   ACTIONS
========================================================= */

.mls-webcta__actions{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:
    clamp(35px,5vw,55px);
}


.mls-webcta__actions a{

  min-height:62px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:35px;

  padding:
    0 20px;

  text-decoration:none;

  font-family:
    Arial,
    sans-serif;

  font-size:8px;

  font-weight:900;

  letter-spacing:.04em;

  transition:
    transform .35s ease,
    background .35s ease,
    color .35s ease,
    border-color .35s ease;
}


.mls-webcta__actions a i{

  font-family:
    Georgia,
    serif;

  font-size:19px;

  font-style:normal;
}



/* PRIMARY */

.mls-webcta__primary{

  min-width:235px;

  background:
    var(--gold);

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

  color:
    var(--black);
}


.mls-webcta__primary:hover{

  transform:
    translateY(-4px);

  background:
    var(--gold-light);

  border-color:
    var(--gold-light);
}



/* SECONDARY */

.mls-webcta__secondary{

  min-width:220px;

  border:
    1px solid
    rgba(255,255,255,.18);

  color:
    rgba(255,255,255,.72);
}


.mls-webcta__secondary:hover{

  transform:
    translateY(-4px);

  border-color:
    rgba(255,255,255,.45);

  color:#fff;
}



/* =========================================================
   NOTE
========================================================= */

.mls-webcta__note{

  display:flex;

  align-items:center;

  gap:10px;

  margin:
    20px 0 0;

  font-size:8px;

  line-height:1.7;

  color:
    rgba(255,255,255,.36);
}


.mls-webcta__note span{

  width:5px;
  height:5px;

  border-radius:50%;

  background:
    var(--gold);
}



/* =========================================================
   MOON STAGE
========================================================= */

.mls-webcta-moon{

  position:relative;

  justify-self:end;

  width:
    min(44vw,650px);

  aspect-ratio:1;
}



/* =========================================================
   ORBIT
========================================================= */

.mls-webcta-moon__orbit{

  position:absolute;

  inset:-7%;

  border:
    1px solid
    rgba(179,138,69,.30);

  border-radius:50%;

  transform:
    rotate(-12deg);
}


.mls-webcta-moon__orbit::before{

  content:"";

  position:absolute;

  inset:9%;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:50%;
}


.mls-webcta-moon__orbit i{

  position:absolute;

  left:50%;
  top:-5px;

  width:10px;
  height:10px;

  transform:
    translateX(-50%);

  border-radius:50%;

  background:
    var(--gold-light);

  box-shadow:
    0 0 0 7px
    rgba(179,138,69,.11);
}



/* =========================================================
   MOON BODY
========================================================= */

.mls-webcta-moon__body{

  position:absolute;

  inset:0;

  overflow:hidden;

  border-radius:50%;

  background:

    radial-gradient(
      circle at 37% 31%,
      #FFFFFF 0%,
      #F9F9F6 43%,
      #E7E7E1 76%,
      #CBCBC5 100%
    );

  box-shadow:

    0 55px 110px
    rgba(0,0,0,.45),

    0 0 90px
    rgba(255,255,255,.08);
}



/* =========================================================
   MOON SHADOW
========================================================= */

.mls-webcta-moon__shadow{

  position:absolute;

  z-index:2;

  width:108%;
  height:108%;

  left:
    var(--cta-shadow,-29%);

  top:-4%;

  border-radius:50%;

  background:
    #101010;

  transition:
    left 1.05s
    cubic-bezier(.2,.8,.2,1);
}



/* =========================================================
   MOON CENTER
========================================================= */

.mls-webcta-moon__center{

  position:absolute;

  z-index:4;

  left:50%;
  top:50%;

  width:70%;

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

  text-align:center;

  color:
    var(--black);

  opacity:
    var(--cta-center-opacity,0);

  transition:
    opacity .5s ease .25s;
}


.mls-webcta-moon__center span{

  display:block;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:900;

  letter-spacing:.24em;
}


.mls-webcta-moon__center strong{

  display:block;

  margin:
    15px 0;

  font-family:
    "Times New Roman",
    Georgia,
    serif;

  font-size:
    clamp(45px,5vw,74px);

  line-height:1;

  font-weight:400;

  letter-spacing:.09em;
}


.mls-webcta-moon__center small{

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  font-weight:900;

  letter-spacing:.20em;

  color:
    var(--gold);
}



/* =========================================================
   LABELS
========================================================= */

.mls-webcta-moon__label{

  position:absolute;

  z-index:8;

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  font-weight:900;

  letter-spacing:.18em;

  color:
    rgba(255,255,255,.35);
}


.mls-webcta-moon__label--01{

  left:-8%;
  top:23%;
}


.mls-webcta-moon__label--02{

  right:-10%;
  top:29%;
}


.mls-webcta-moon__label--03{

  left:-4%;
  bottom:21%;
}


.mls-webcta-moon__label--04{

  right:-5%;
  bottom:18%;
}



/* =========================================================
   CTA ACTIVE STATE

   三日月 → 満月
========================================================= */

.mls-webcta.is-moon-full{

  --cta-shadow:-108%;

  --cta-center-opacity:1;
}



/* =========================================================
   INITIAL REVEAL
========================================================= */

.mls-webcta__content,
.mls-webcta-moon{

  opacity:0;

  transform:
    translateY(24px);

  transition:
    opacity .8s ease,
    transform 1s
    cubic-bezier(.2,.8,.2,1);
}


.mls-webcta.is-visible
.mls-webcta__content,
.mls-webcta.is-visible
.mls-webcta-moon{

  opacity:1;

  transform:
    translateY(0);
}


.mls-webcta.is-visible
.mls-webcta-moon{

  transition-delay:.10s;
}



/* =========================================================
   BOTTOM
========================================================= */

.mls-webcta__bottom{

  position:absolute;

  z-index:10;

  left:
    clamp(35px,5vw,75px);

  right:
    clamp(35px,5vw,75px);

  bottom:
    clamp(25px,3vw,40px);

  display:grid;

  grid-template-columns:
    auto 1fr auto;

  gap:15px;

  align-items:center;

  font-family:
    Arial,
    sans-serif;

  font-size:5px;

  font-weight:900;

  letter-spacing:.17em;
}


.mls-webcta__bottom span{

  color:
    rgba(255,255,255,.35);
}


.mls-webcta__bottom i{

  height:1px;

  background:
    rgba(255,255,255,.12);
}


.mls-webcta__bottom strong{

  color:
    var(--gold-light);
}



/* =========================================================
   TABLET
========================================================= */

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

  .mls-webcta__inner{

    grid-template-columns:
      1fr .8fr;
  }


  .mls-webcta-moon{

    width:
      min(42vw,520px);
  }


  .mls-webcta h2{

    font-size:
      clamp(47px,6vw,70px);
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  .mls-webcta{

    min-height:auto;

    padding-bottom:85px;
  }



  /* INNER */

  .mls-webcta__inner{

    width:
      calc(100% - 48px);

    display:flex;

    flex-direction:column;

    gap:65px;

    padding:
      80px 0
      55px;
  }



  /* CONTENT */

  .mls-webcta__content{

    width:100%;
  }


  .mls-webcta__meta{

    margin-bottom:48px;
  }


  .mls-webcta h2{

    font-size:
      clamp(39px,10.5vw,50px);

    line-height:1.58;
  }


  .mls-webcta__lead{

    margin-top:28px;
  }


  .mls-webcta__lead p{

    font-size:10px;
  }



  /* ACTIONS */

  .mls-webcta__actions{

    display:grid;

    grid-template-columns:1fr;

    gap:8px;
  }


  .mls-webcta__actions a{

    width:100%;

    min-width:0;

    min-height:58px;
  }



  /* MOON */

  .mls-webcta-moon{

    align-self:center;

    width:
      min(84vw,460px);
  }


  .mls-webcta-moon__label{

    display:none;
  }



  /* BACK */

  .mls-webcta__orbit{

    width:680px;

    right:-470px;
  }



  /* BOTTOM */

  .mls-webcta__bottom{

    left:24px;
    right:24px;
    bottom:21px;

    grid-template-columns:
      auto 1fr;
  }


  .mls-webcta__bottom strong{

    display:none;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .mls-webcta *,
  .mls-webcta *::before,
  .mls-webcta *::after{

    transition:none !important;

    animation:none !important;
  }


  .mls-webcta__content,
  .mls-webcta-moon{

    opacity:1;

    transform:none;
  }

}
/* =========================================================
   FINAL CTA HEADING FIX
========================================================= */

.mls-webcta h2{

  margin:0;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  /* 以前より一段小さく */
  font-size:
    clamp(44px,4.6vw,72px);

  line-height:1.52;

  font-weight:500;

  letter-spacing:-.055em;

  line-break:strict;
}


.mls-webcta h2
> .mls-webcta__title-sub{

  display:block;

  margin-bottom:.08em;

  color:
    rgba(255,255,255,.38);
}


.mls-webcta h2 strong{

  display:block;

  font-weight:500;

  color:#fff;
}


/* 1行の途中では折らない */

.mls-webcta h2 strong > span{

  display:block;

  white-space:nowrap;
}



/* =========================================================
   DESKTOP
========================================================= */

@media(min-width:1101px){

  /* コピー側を少し広くする */

  .mls-webcta__inner{

    grid-template-columns:
      minmax(560px,1.05fr)
      minmax(430px,.95fr);

  }


  .mls-webcta__content{

    max-width:760px;
  }

}



/* =========================================================
   TABLET
========================================================= */

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

  .mls-webcta h2{

    font-size:
      clamp(42px,5.4vw,60px);
  }


  .mls-webcta__inner{

    grid-template-columns:
      1.08fr .92fr;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  .mls-webcta h2{

    font-size:
      clamp(31px,8.5vw,39px);

    line-height:1.62;

    letter-spacing:-.045em;
  }


  .mls-webcta h2 strong > span{

    white-space:nowrap;
  }

}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f292a0e *//* =========================================================
   MOON LOOP STUDIO / SITE FOOTER 34
   BLACK / WHITE / GOLD / GRAY
========================================================= */

.mls-footer34{
  --bg:#0b0b0c;
  --white:#f4f3ef;
  --gold:#b99446;
  --gold-light:#dec993;
  --muted:#898984;
  --line:#333330;

  position:relative;
  isolation:isolate;
  width:100%;
  max-width:100%;
  overflow:hidden;
  background:var(--bg);
  color:var(--white);

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

  font-size:13px;
  line-height:1.8;
  text-align:left;
}

.mls-footer34,
.mls-footer34 *,
.mls-footer34 *::before,
.mls-footer34 *::after{
  box-sizing:border-box;
}

.mls-footer34 p{
  margin:0;
}

.mls-footer34 a{
  color:inherit;
  text-decoration:none;
}

.mls-footer34 a:focus-visible{
  outline:2px solid var(--gold-light);
  outline-offset:5px;
}

.mls-footer34__inner{
  width:min(1320px,calc(100% - clamp(40px,8vw,144px)));
  margin-inline:auto;
  padding:clamp(55px,7vw,95px) 0 25px;
}

/* =========================================================
   TOP / BRAND
========================================================= */

.mls-footer34__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:30px;
  padding-bottom:clamp(45px,6vw,80px);
}

.mls-footer34__brand{
  min-width:0;
}

.mls-footer34__logo{
  display:block;
  width:min(320px,100%);
}

.mls-footer34__logo img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}

.mls-footer34__brand>p{
  margin-top:27px;
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;
  font-size:clamp(19px,2vw,26px);
  font-weight:500;
  line-height:1.75;
  letter-spacing:.02em;
  color:#e5e2d9;
}

/* =========================================================
   BACK TO TOP
========================================================= */

.mls-footer34__back{
  display:inline-flex;
  align-items:center;
  gap:20px;
  flex-shrink:0;
  padding-top:3px;
}

.mls-footer34__back-text{
  color:#a9a8a2;
  font:700 10px/1.5 Arial,sans-serif;
  letter-spacing:.14em;
  transition:color .25s;
}

.mls-footer34__back-icon{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border:1px solid #655333;
  border-radius:50%;
  color:var(--gold-light);
  font:400 24px/1 Arial,sans-serif;
  transition:
    background .3s,
    border-color .3s,
    color .3s,
    transform .3s;
}

.mls-footer34__back:hover .mls-footer34__back-text{
  color:var(--gold-light);
}

.mls-footer34__back:hover .mls-footer34__back-icon{
  background:var(--gold);
  border-color:var(--gold);
  color:#111;
  transform:translateY(-4px);
}

/* =========================================================
   COLUMNS
========================================================= */

.mls-footer34__columns{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1.2fr)
    minmax(0,1.1fr);
  gap:clamp(30px,5vw,80px);

  padding:clamp(30px,4vw,50px) 0 clamp(55px,7vw,90px);
  border-top:1px solid var(--line);
}

.mls-footer34__column{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
  min-width:0;
}

.mls-footer34__heading{
  margin-bottom:12px!important;
  color:var(--gold-light);
  font:700 10px/1.6 Arial,sans-serif;
  letter-spacing:.15em;
}

.mls-footer34__column>a{
  display:inline-flex;
  align-items:baseline;
  gap:12px;
  max-width:100%;
  color:#b3b2ac;
  font-size:13px;
  line-height:1.7;
  transition:color .25s;
}

.mls-footer34__column>a:hover{
  color:#fff;
}

.mls-footer34__column>a span{
  color:var(--gold);
  font-size:14px;
  font-weight:400;
  transition:transform .25s;
}

.mls-footer34__column>a:hover span{
  transform:translate(2px,-2px);
}

/* COMPANY */

.mls-footer34__company-name{
  color:#f0eee7;
  font-size:14px;
  font-weight:600;
  line-height:1.7;
}

.mls-footer34__company-detail{
  color:#999892;
  font-size:12px;
  line-height:2;
}

.mls-footer34__company .mls-footer34__company-link{
  font-size:12px;
  color:#b3b2ac;
}

.mls-footer34__company .mls-footer34__company-link:first-of-type{
  margin-top:5px;
}

/* =========================================================
   COPYRIGHT / BOTTOM
========================================================= */

.mls-footer34__bottom{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:20px 38px;

  padding-top:23px;
  border-top:1px solid var(--line);

  color:#777771;
  font:400 10px/1.7 Arial,sans-serif;
  letter-spacing:.025em;
}

.mls-footer34__motto{
  color:#92918b;
  font-family:Georgia,"Times New Roman",serif;
  font-size:11px;
  letter-spacing:.035em;
  white-space:nowrap;
}

.mls-footer34__motto span{
  color:var(--gold);
}

.mls-footer34__location{
  white-space:nowrap;
  font-size:9px;
  letter-spacing:.12em;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:950px){
  .mls-footer34__columns{
    grid-template-columns:1fr 1fr;
    gap:45px 35px;
  }

  .mls-footer34__company{
    grid-column:1/-1;
    padding-top:25px;
    border-top:1px solid var(--line);
  }

  .mls-footer34__bottom{
    grid-template-columns:1fr auto;
  }

  .mls-footer34__motto{
    grid-column:1/-1;
    grid-row:2;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:650px){
  .mls-footer34__inner{
    width:calc(100% - 40px);
    padding:55px 0 23px;
  }

  .mls-footer34__top{
    gap:20px;
    padding-bottom:45px;
  }

  .mls-footer34__logo{
    width:min(230px,100%);
  }

  .mls-footer34__brand>p{
    margin-top:21px;
    font-size:20px;
  }

  .mls-footer34__back{
    gap:0;
  }

  .mls-footer34__back-text{
    display:none;
  }

  .mls-footer34__back-icon{
    width:44px;
    height:44px;
    font-size:21px;
  }

  .mls-footer34__columns{
    grid-template-columns:1fr 1fr;
    gap:35px 22px;
    padding:35px 0 55px;
  }

  .mls-footer34__heading{
    font-size:9px;
    margin-bottom:8px!important;
    letter-spacing:.1em;
  }

  .mls-footer34__column{
    gap:14px;
  }

  .mls-footer34__column>a{
    font-size:12px;
    gap:7px;
  }

  .mls-footer34__column>a span{
    font-size:12px;
  }

  .mls-footer34__company{
    grid-column:1/-1;
    padding-top:30px;
  }

  .mls-footer34__company-name{
    font-size:13px;
  }

  .mls-footer34__bottom{
    grid-template-columns:1fr;
    gap:10px;
    font-size:9px;
  }

  .mls-footer34__motto{
    grid-column:auto;
    grid-row:auto;
    white-space:normal;
    font-size:10px;
  }

  .mls-footer34__location{
    font-size:8px;
  }
}

@media(max-width:360px){
  .mls-footer34__inner{
    width:calc(100% - 32px);
  }

  .mls-footer34__logo{
    width:min(200px,100%);
  }

  .mls-footer34__brand>p{
    font-size:18px;
  }

  .mls-footer34__columns{
    gap:30px 15px;
  }

  .mls-footer34__column>a{
    font-size:11px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){
  .mls-footer34 *,
  .mls-footer34 *::before,
  .mls-footer34 *::after{
    animation:none!important;
    transition:none!important;
  }

  .mls-footer34__back:hover .mls-footer34__back-icon{
    transform:none;
  }
}/* End custom CSS */