@charset "UTF-8";
/* ---------------------------
About
--------------------------- */
#trailer {
  padding: 60px;
}
@media screen and (max-width: 860px) {
  #trailer {
    padding: 60px 0;
  }
}
#trailer .area-title {
  color: #221815;
  font-family: serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  text-align: center;
}
#trailer .trailer-inner {
  margin: 30px auto 50px;
  max-width: 1120px;
}
@media screen and (max-width: 860px) {
  #trailer .trailer-inner {
    margin: 100px 0 0;
  }
}
@media screen and (max-width: 480px) {
  #trailer .trailer-inner {
    margin: 40px 0 0;
  }
}
#trailer .trailer-inner .trailer-btns {
  margin-bottom: 30px;
}
@media screen and (max-width: 860px) {
  #trailer .trailer-inner .trailer-btns {
    padding: 0 7%;
  }
}
#trailer .trailer-inner .trailer-btns ul {
  display: flex;
  gap: 40px;
}
#trailer .trailer-inner .trailer-btns ul li {
  position: relative;
  font-family: serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  color: #AAA;
}
#trailer .trailer-inner .trailer-btns ul li:hover {
  cursor: pointer;
  color: #181818;
}
#trailer .trailer-inner .trailer-btns ul li:after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -20px;
  background: #000;
}
#trailer .trailer-inner .trailer-btns ul li:first-child::after {
  display: none;
}
#trailer .trailer-inner .trailer-btns ul li.current {
  color: #181818;
}
#trailer .trailer-inner .trailer-btns ul li.current:hover {
  cursor: inherit;
}
#trailer .trailer-inner .trailer-btns ul li.current:before {
  content: "";
  display: block;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 6px; /* ←これを小さくすると縦に潰れる */
  background: #000;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
          clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#trailer .trailer-inner iframe {
  width: 100%;
  height: 56.25vw;
}
@media screen and (min-width: 1201px) {
  #trailer .trailer-inner iframe {
    height: 675px;
  }
}

#introduction {
  color: #FFF;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.6em;
  padding: 60px 0 20px;
  max-width: 1320px;
  margin: 0 auto;
}
@media screen and (max-width: 860px) {
  #introduction {
    padding: 0px 0 60px;
  }
}
#introduction .area-title {
  color: #221815;
  font-family: serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  margin-bottom: 30px;
}
#introduction .copy1 {
  padding: 0 30px;
  max-width: 1120px;
  margin: 0 auto 50px;
}
@media screen and (max-width: 860px) {
  #introduction .copy1 {
    padding: 0;
    margin: 0 auto 60px;
  }
}
#introduction .copy2 {
  margin: 50px 0;
  padding-left: 5px;
}
@media screen and (max-width: 860px) {
  #introduction .copy2 {
    width: 90%;
    max-width: 520px;
  }
}
#introduction .page-inner {
  display: flex;
}
#introduction .page-inner .alpha {
  width: 56%;
}
#introduction .page-inner .beta {
  width: 44%;
  padding: 0 7%;
}
@media screen and (max-width: 860px) {
  #introduction .page-inner {
    flex-direction: column;
  }
  #introduction .page-inner .alpha {
    width: 100%;
  }
  #introduction .page-inner .beta {
    width: 100%;
    margin: 60px 0 0;
  }
}
#introduction p {
  color: #181818;
  font-size: 14px;
  font-family: sans-serif;
  line-height: 2em;
  padding-right: 15px;
}
@media screen and (max-width: 860px) {
  #introduction p {
    padding: 0;
  }
}
#introduction .scroll-text {
  overflow-y: scroll;
  z-index: 100;
  padding-right: 15px;
  height: 340px;
}
@media screen and (max-width: 860px) {
  #introduction .scroll-text {
    padding-right: 0;
  }
}
#introduction .scroll-text::-webkit-scrollbar {
  width: 5px; /* 横幅設定 */
}
#introduction .scroll-text::-webkit-scrollbar-thumb {
  display: block;
  background: #000;
  position: relative;
}
#introduction .scroll-text::-webkit-scrollbar-track {
  border-right: solid 1px #999;
}

#story {
  letter-spacing: 0.05em;
  line-height: 1.6em;
  padding-bottom: 100px;
  background: linear-gradient(to bottom, transparent 0px, transparent 250px, #f1f1f1 250px, #f1f1f1 100%);
}
@media screen and (max-width: 860px) {
  #story {
    background: none;
    padding-bottom: 0px;
  }
}
#story .area-title {
  color: #221815;
  font-family: serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  margin-bottom: 30px;
}
@media screen and (max-width: 860px) {
  #story .area-title {
    padding: 0 7%;
  }
}
#story p {
  color: #181818;
  font-size: 14px;
  line-height: 2em;
  padding-right: 15px;
  font-family: sans-serif;
}
#story .copy1 {
  width: 85%;
  margin: 50px 0;
}
@media screen and (max-width: 860px) {
  #story .copy1 {
    padding: 0 7%;
    width: 100%;
    max-width: 380px;
  }
}
#story .thumbs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 50px;
}
#story .page-inner {
  display: flex;
  max-width: 1320px;
  margin: 0 auto;
}
@media screen and (max-width: 860px) {
  #story .page-inner {
    flex-direction: column-reverse;
    background: #f1f1f1;
    padding: 60px 0;
  }
}
#story .page-inner .alpha {
  width: 56%;
  padding-left: 10%;
}
@media screen and (max-width: 860px) {
  #story .page-inner .alpha {
    width: 100%;
    padding: 0;
  }
}
#story .page-inner .beta {
  width: 44%;
  padding: 80px 7% 0;
}
@media screen and (max-width: 860px) {
  #story .page-inner .beta {
    margin: 0 auto 60px;
    padding: 0;
  }
}
@media screen and (max-width: 860px) {
  #story .scroll-text {
    padding: 0 7%;
  }
}
#story .meaning img {
  max-width: 210px;
  display: block;
  border: solid 1px #c5c5c5;
}
@media screen and (max-width: 860px) {
  #story .meaning img {
    border: none;
  }
}

#profile {
  color: #FFF;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.6em;
}
#profile .area-title {
  height: 100px;
}
#profile .area-title img {
  height: 100%;
  width: auto;
}
#profile .cast {
  height: 100vh;
  background: #F0F;
  position: relative;
}
#profile .cast-inner {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  background: rgba(0, 255, 255, 0.5);
}
#profile .cast-bg {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 99;
}
#profile .cast-list {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(4, 1fr);
  max-width: 640px;
}
#profile .cast-list li {
  position: relative;
  height: 0;
  padding-top: 100%;
}
#profile .cast-list li .thumb {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 255, 0.5);
}
#profile .staff dl {
  max-width: 760px;
  margin: 0 auto 60px;
}
#profile .staff dl:last-child {
  margin-bottom: 0;
}
#profile .staff-name {
  height: 45px;
  margin-bottom: 30px;
}
#profile .staff-name img {
  height: 100%;
  width: auto;
}

.gallery {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
.gallery-item {
  background: #FFF;
  height: 600px;
}

.footer {
  background: #F00;
  height: 100vh;
}

.footer-billing {
  text-align: center;
  padding: 60px 30px;
}
.footer-billing img {
  max-width: 1030px;
}
@media screen and (max-width: 860px) {
  .footer-billing {
    padding: 0 15px 30px;
  }
}