:root{
  --bg:#dedbcf;
  --blue:#7153F6
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  background:var(--bg)
}
body{
  position:relative;
  width:100%;
  max-width:1400px;
  min-height:100vh;
  margin:0 auto;
  overflow-x:hidden;
  color:#080808;
  font-family:"Noto Sans JP",sans-serif;
  font-weight:600;
  background:var(--bg)
}
a{
  color:inherit;
  text-decoration:none
}
img{
  display:block
}
header{
  position:absolute;
  top:0;
  left:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:75px;
  padding:0 32px
}
header>a{
  font-size:22px;
  font-weight:800
}
header nav{
  display:flex;
  gap:30px;
  font-size:20px;
  font-weight:800
}
header nav a:hover{
  opacity:.5
}
header button{
  display:none
}
.works-main{
  position:relative;
  min-height:100vh;
  padding:125px 38px 90px;
  overflow:hidden
}
.works-main>h1{
  position:relative;
  z-index:2;
  margin:0 0 34px;
  text-align:center;
  font-size:30px
}
.works-pickup-heading{
  width:max-content;
  margin:0 0 55px;
  color:#cfd3df;
  font-size:clamp(72px,10vw,100px);
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  transform:translateX(-80px)
}
.works-decorations{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none
}
.works-deco{
  position:absolute
}
.works-deco--rings2 {
  top:600px;
  right:0px;
  width:260px
}
.lp-deco--rings2{
  display:none
}
.works-deco--stars{
  top:400px;
  right:35px;
  width:105px
}
.works-deco--orb{
  top:520px;
  right:160px;
  width:280px;
  transform:rotate(-180deg)
}
.lp-deco--orb{
  top:460px;
  left:0px;
  width:280px;
  transform:rotate(-45deg)
}
.works-deco--rings{
  top:900px;
  left:5px;
  width:420px
}
.works-deco--purple{
  top:1720px;
  right:0px;
  width:190px
}
.works-deco--purple2{
  top:1690px;
  right:90px;
  width:140px
}
.lp-deco--purple{
  top:1020px;
  right:0px;
  width:190px
}
.lp-deco--purple2{
  top:1100px;
  right:90px;
  width:140px
}
.movie-deco--purple{
  display:none
}
.movie-deco--purple2{
  display:none
}
.works-pickups{
  position:relative;
  z-index:2;
  display:grid;
  gap:72px;
  width:min(1120px,94%);
  margin:60px auto 0;
}
.works-pickups article{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:52px;
  align-items:center;
  width:90%;
  padding:30px 48px;
  background:#f1eee3;
  border-radius:4px;
  box-shadow:24px 24px 15px #0004
}
.works-pickups article:nth-child(2){
  margin-left:auto
}
.works-pickups img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover
}
.works-pickups h2{
  margin:8px 0 4px;
  font-size:20px;
  font-weight:800;
  color: #5539CE;
}
.works-pickups p{
  margin:0 0 0 15px;
  font-size:20px;
  line-height:1.6
}
.works-results{
  position:relative;
  z-index:2;
  width:min(1260px,100%);
  margin:130px auto 0;
  padding:70px 0 55px;
  background:linear-gradient(180deg,#DEDBCF,#8E7AE5 54%,#7153F6)
}
.works-results__title{
  margin:0 50px 50px;
  text-align:center
}
.works-results__divider{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:20px;
  align-items:center;
  margin-bottom:24px
}
.works-results__divider>span{
  height:1px;
  background:#111
}
.works-results__stars{
  display:flex;
  align-items:center;
  gap:8px
}
.works-results__stars img{
  width:26px;
  height:32px;
  object-fit:contain
}
.works-results__stars img:nth-child(2){
  width:58px;
  height:58px
}
.works-results__title h2{
  margin:0;
  font-size:32px;
  font-weight:700
}
.works-gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  padding:0 34px
}
.works-gallery img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover
}
.works-back{
  display:block;
  width:max-content;
  margin:55px auto 0;
  padding:14px 25px;
  color:#fff;
  background:var(--blue);
  border-radius:999px
}
.corporate-page .works-pickups article{
  grid-template-columns:330px 1fr
}
.corporate-page .works-pickups img{
  aspect-ratio:auto;
  object-fit:contain
}
.corporate-results{
  min-height:1400px;
  background:linear-gradient(180deg,transparent 0,#c9c1df 18%,#744dff 70%,#6944f4 100%)
}
.corporate-coming-soon{
  margin:180px 0 0;
  text-align:center;
  font-size:30px;
  font-weight:900
}
.others-page .works-pickups img{
  aspect-ratio:auto;
  object-fit:contain
}
.others-gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  align-items:start
}
.others-gallery img{
  width:100%;
  height:auto;
  margin:0;
  aspect-ratio:auto;
  object-fit:contain
}
.others-gallery img:nth-child(1){
  grid-column:1 / span 2
}
.others-gallery img:nth-child(2){
  grid-column:3
}
.others-gallery img:nth-child(3){
  grid-column:4
}
.others-gallery img:nth-child(4){
  grid-column:1 / span 2;
  grid-row:2 / span 2
}
.others-gallery img:nth-child(5){
  grid-column:3 / span 2;
  grid-row:2
}
.others-gallery img:nth-child(6){
  grid-column:3 / span 2;
  grid-row:3
}
.lp-pickup{
  position:relative;
  z-index:2;
  width:min(1120px,94%);
  margin:0 auto
}
.lp-pickup article{
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:72px;
  align-items:center
}
.lp-pickup__details{
  padding:48px 60px;
  background:#f1eee3;
  border-radius:14px;
  box-shadow:24px 24px 15px #0004
}
.lp-pickup__details h2{
  margin:12px 0 4px;
  font-size:20px;
  font-weight:800;
  color: #5539CE;
}
.lp-pickup__details p{
  margin:0 0 0 10px;
  font-size:20px;
  line-height:1.7
}
.lp-pickup article>img{
  width:100%;
  height:auto;
  object-fit:contain
}
.lp-gallery{
  display:block;
  columns:3;
  column-gap:24px
}
.lp-gallery img{
  width:100%;
  height:auto;
  margin:0 0 24px;
  break-inside:avoid;
  aspect-ratio:auto;
  object-fit:contain
}
.movie-page .works-pickups img{
  aspect-ratio:auto;
  object-fit:contain
}
.movie-page .works-pickups article:first-child img{
  width:min(230px,100%);
  margin:0 auto
}
.movie-page .works-pickups h2{
  color:#5548e5
}
.movie-page .works-pickups a,
.movie-channels a{
  text-decoration:underline;
  overflow-wrap:anywhere
}
.movie-page .works-results{
  min-height:900px
}
.movie-channels{
  display:grid;
  gap:90px;
  padding:45px 45px 120px
}
.movie-channels article{
  position:relative;
  z-index:2
}
.movie-channels h3{
  margin:0 0 20px;
  font-size:30px;
  font-weight:900
}
.movie-channels a{
  font-size:18px;
  font-weight:700
}
@media(max-width:780px){
  header{
    height:62px;
    padding:0 18px
  }
  header button{
    position:relative;
    z-index:21;
    display:block;
    font-size:25px;
    background:transparent;
    border:0
  }
  header nav{
    position:fixed;
    inset:0;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:#e7e4d8fa;
    font-size:20px;

  }
  header nav.open{
    display:flex
  }
  .works-main{
    padding:100px 18px 60px
  }
  .works-pickup-heading{
    margin-bottom:35px;
    font-size:58px
  }
  .works-deco--stars{
    top:250px;
    right:12px;
    width:42px
  }
  .works-deco--orb{
    top:590px;
    right:-48px;
    width:135px
  }
  .works-deco--rings{
    top:980px;
    left:-72px;
    width:180px
  }
  .works-deco--purple{
    top:1580px;
    right:-18px;
    width:82px
  }
  .works-pickups{
    gap:38px;
    width:100%
  }
  .works-pickups article{
    grid-template-columns:1fr;
    gap:18px;
    width:100%;
    padding:20px
  }
  .works-pickups article:nth-child(2){
    margin-left:0
  }
  .works-results{
    margin-top:80px;
    padding-top:45px
  }
  .works-results__title{
  margin:0 50px 50px;
  text-align:center
}
.works-results__divider{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:20px;
  align-items:center;
  margin-bottom:24px
}
.works-results__divider>span{
  height:1px;
  background:#111
}
.works-results__stars{
  display:flex;
  align-items:center;
  gap:8px
}
.works-results__stars img{
  width:26px;
  height:32px;
  object-fit:contain
}
.works-results__stars img:nth-child(2){
  width:58px;
  height:58px
}
.works-results__title h2{
  margin:0;
  font-size:32px;
  font-weight:900
}
  .works-gallery{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    padding:0 5px
  }
  .corporate-page .works-pickups article{
    grid-template-columns:1fr
  }
  .corporate-results{
    min-height:760px
  }
  .corporate-coming-soon{
    margin-top:100px;
    font-size:22px
  }
  .others-gallery{
    grid-template-columns:repeat(2,1fr);
    gap:12px
  }
  .others-gallery img:nth-child(1){
    grid-column:1 / span 2
  }
  .others-gallery img:nth-child(2){
    grid-column:1
  }
  .others-gallery img:nth-child(3){
    grid-column:2
  }
  .others-gallery img:nth-child(4),
  .others-gallery img:nth-child(5),
  .others-gallery img:nth-child(6){
    grid-column:1 / span 2;
    grid-row:auto
  }
  .lp-pickup{
    width:100%
  }
  .lp-pickup article{
    grid-template-columns:1fr;
    gap:35px
  }
  .lp-pickup__details{
    padding:28px 22px
  }
  .lp-pickup article>img{
    width:min(360px,86%);
    margin:0 auto
  }
  .lp-gallery{
    columns:1
  }
  .lp-gallery img{
    margin-bottom:16px
  }  .movie-page .works-results{
    min-height:650px
  }
  .movie-channels{
    gap:55px;
    padding:30px 5px 80px
  }
  .movie-channels h3{
    font-size:21px
  }
  .movie-channels a{
    font-size:14px
  }
}

/* Responsive refinements shared by every work page */
img{
  max-width:100%
}
.works-pickups article>*,
.lp-pickup article>*{
  min-width:0
}
.works-pickups p,
.lp-pickup__details p,
.movie-channels h3,
.movie-channels a{
  overflow-wrap:anywhere
}

@media(max-width:1100px){
  .works-main{
    padding-right:28px;
    padding-left:28px
  }
  .works-pickups{
    width:min(940px,96%)
  }
  .works-pickups article,
  .corporate-page .works-pickups article{
    grid-template-columns:minmax(220px,280px) minmax(0,1fr);
    gap:36px;
    width:94%;
    padding:26px 32px
  }
  .lp-pickup article{
    grid-template-columns:minmax(0,1fr) minmax(280px,36vw);
    gap:42px
  }
  .lp-pickup__details{
    padding:38px 42px
  }
  .works-gallery{
    gap:20px;
    padding:0 24px
  }
}

@media(max-width:780px){
  header{
    padding:0 20px
  }
  header>a{
    position:relative;
    z-index:22;
    font-size:19px
  }
  header button{
    width:44px;
    height:44px;
    padding:0;
    color:#111;
    font-size:0;
    cursor:pointer;
    background:transparent
  }
  header button::before{
    display:block;
    content:"☰";
    font-size:27px;
    line-height:1
  }
  header button[aria-expanded="true"]::before{
    content:"×";
    font-size:34px
  }
  header nav{
    z-index:20;
    gap:26px;
    overflow-y:auto
  }
  .works-main{
    padding:90px 16px 55px
  }
  .works-main>h1{
    margin-bottom:26px;
    font-size:clamp(24px,7vw,30px)
  }
  .works-pickup-heading{
    margin-bottom:32px;
    font-size:clamp(44px,15vw,66px);
    transform:translateX(-45px)
  }
  .works-pickups{
    gap:36px;
    width:100%;
    margin-top:42px
  }
  .works-pickups article,
  .corporate-page .works-pickups article{
    grid-template-columns:1fr;
    gap:18px;
    width:100%;
    padding:20px;
    overflow:hidden;
    box-shadow:12px 14px 12px #0003
  }
  .works-pickups img{
    max-height:520px;
    object-fit:contain
  }
  .works-pickups h2{
    font-size:17px
  }
  .works-pickups p{
    max-width:100%;
    margin-left:0;
    font-size:14px;
    line-height:1.75;
    word-break:break-all
  }
  .works-results{
    margin-top:72px;
    padding:42px 0 48px
  }
  .works-results__title{
    margin:0 16px 38px
  }
  .works-results__divider{
    gap:10px;
    margin-bottom:18px
  }
  .works-results__stars{
    gap:5px
  }
  .works-results__stars img{
    width:20px;
    height:26px
  }
  .works-results__stars img:nth-child(2){
    width:44px;
    height:44px
  }
  .works-results__title h2{
    font-size:clamp(23px,7vw,30px)
  }
  .works-gallery{
    gap:12px;
    padding:0 4px
  }
  .works-back{
    margin-top:45px;
    padding:12px 22px
  }
  .lp-pickup article{
    grid-template-columns:1fr;
    gap:30px
  }
  .lp-pickup__details{
    padding:26px 20px;
    overflow:hidden;
    box-shadow:12px 14px 12px #0003
  }
  .lp-pickup__details h2{
    font-size:18px
  }
  .lp-pickup__details p{
    margin-left:0;
    font-size:14px
  }
  .movie-channels{
    gap:50px;
    padding:28px 4px 70px
  }
  .movie-channels h3{
    font-size:clamp(18px,5.4vw,22px);
    line-height:1.5
  }
  .movie-channels a{
    font-size:13px;
    line-height:1.7
  }
  .works-deco--rings2{
    top:620px;
    right:-52px;
    width:130px
  }
  .works-deco--purple2{
    top:1560px;
    right:34px;
    width:64px
  }
}

@media(max-width:480px){
  .works-main{
    padding-right:12px;
    padding-left:12px
  }
  .works-pickup-heading{
    transform:translateX(-28px)
  }
  .works-deco--stars{
    top:235px;
    right:8px;
    width:34px
  }
  .works-deco--orb{
    right:-36px;
    width:105px
  }
  .works-deco--rings{
    left:-55px;
    width:140px
  }
  .works-deco--rings2{
    right:-42px;
    width:105px
  }
  .works-deco--purple{
    right:-12px;
    width:66px
  }
  .works-deco--purple2{
    right:28px;
    width:50px
  }
  .works-pickups article{
    padding:16px
  }
  .works-gallery{
    grid-template-columns:1fr;
    gap:16px;
    padding:0 2px
  }
  .works-gallery img{
    aspect-ratio:auto;
    height:auto
  }
  .others-gallery{
    grid-template-columns:1fr
  }
  .others-gallery img:nth-child(n){
    grid-column:1;
    grid-row:auto
  }
  .lp-pickup article>img{
    width:min(320px,92%)
  }
  .corporate-results{
    min-height:620px
  }
  .corporate-coming-soon{
    margin-top:80px;
    font-size:19px
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
}