@charset "UTF-8";
.stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.star {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  opacity: 0.75;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
  0% {
    opacity: 0.25;
    transform: scale(0.8);
  }

  50% {
    opacity: 0.9;
    transform: scale(1);
  }

  100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
}

main{
    background-image: url(images/sub_haikei_circle.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: calc(50% + 220px) calc(50% + -900px);
}

/* -- -- -- -- top -- -- -- -- */
.sub_top{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 1.5%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 100;
}
.sub_top img{width: 100%;}

.sub_top .top_left{
    width: 33%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center;

    color: #ffffff;
    font-size: clamp(0.688rem, 0.482rem + 1.03vw, 1.2rem);
    font-family: 'A P-OTF A1ゴシック StdN', 'Noto Sans JP', sans-serif;
    line-height: 1.6;
}
.yellow_color{color: #ffed00;}

.sub_top .top_right{
    width: 65%;
}
.web_head img{
  width: 70%;
}

/* -- -- -- -- point -- -- -- -- */
.point{
  position: relative;
  width: min(90%, 900px);
  margin: 0 auto;
}
.point_bg{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 0;
  pointer-events: none;
}
.point_inner{
  position: relative;
  z-index: 1;
  text-align: left;
}
.point_inner h2{
  width: 60%;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.point_inner ul{
    margin: 0 auto;
    padding: 90px 0 60px;
    width: 80%;
}

.point_inner ul li{
    display: flex;

    justify-content: space-between;
    align-items: center;

    color: #000000;
    font-size: clamp(0.688rem, 0.482rem + 1.03vw, 1rem);
    font-family: 'A P-OTF A1ゴシック StdN', 'Noto Sans JP', sans-serif;
    line-height: 1.4;
}
.point_inner ul li:nth-child(2) {
    margin: 30px 0;
    padding: 30px 0;
}

.point_inner ul li .point_no{width: 13%;}
.point_inner ul li .point_txt{width: 82%;}

.point_inner ul li .point_txt h3{
    font-size: clamp(0.688rem, 0.482rem + 1.03vw, 1.4rem);
    font-weight: 500;
    background: linear-gradient(transparent 50%, #ffed00 50%);
    display: inline-block;
    margin-bottom: 8px;
}

/* -- -- -- -- 点線色変更 -- -- -- -- */
.point_graphic_2{
    border-top: 5px dotted #e52d8a;
    border-bottom: 5px dotted #e52d8a;
}
.point_pop_2{
    border-top: 5px dotted #e52d8a;
    border-bottom: 5px dotted #e52d8a;
}
.point_package_2{
    border-top: 5px dotted #16a135;
    border-bottom: 5px dotted #16a135;
}
.point_movie_2{
    border-top: 5px dotted #e52d8a;
    border-bottom: 5px dotted #e52d8a;
}
.point_web_2{
    border-top: 5px dotted #e52d8a;
    border-bottom: 5px dotted #e52d8a;
}
.point_event_2{
    border-top: 5px dotted #e11d48;
    border-bottom: 5px dotted #e11d48;
}
.point_illustration_2{
    border-top: 5px dotted #10b981;
    border-bottom: 5px dotted #10b981;
}
.point_character_2{
    border-top: 5px dotted #a855f7;
    border-bottom: 5px dotted #a855f7;
}
.point_ai_2{
    border-top: 5px dotted #009fe6;
    border-bottom: 5px dotted #009fe6;
}


/* -- -- -- -- record -- -- -- -- */
.record{
  position: relative;
  width: min(90%, 900px);
  margin: 100px auto 0;
}
.record_bg{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 0;
  pointer-events: none;
}
.record_inner{
  position: relative;
  z-index: 1;
  text-align: left;

  padding: 120px 10% 80px;
}
.record_inner h2{
  width: 60%;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}

/* -- -- -- -- record_movie -- -- -- -- */

.record_mov{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

  margin: 0 auto;
  width: 90%;
}

.record_mov_left{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  height: auto;
}

.record_inner .record_mov .record_mov_left li{aspect-ratio: 16 / 9;}
.record_inner .record_mov .record_mov_right li{aspect-ratio: 9 / 16;}
.record_inner .record_mov ul li iframe{width: 100%;}


/* -- -- -- -- ご相談はこちら -- -- -- -- */
.contact-link img,.service_list img{width: 100%;}

.contact-link{
    display: block;
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
}
.contact-link:hover{
    opacity: 0.5;
}

.service_list{
  width: min(90%, 1000px);
  margin: 100px auto;
}

.service_list h2{
    width: 30%;
    border-top: 5px dotted #ffed00;
    border-bottom: 5px dotted #ffed00;
    margin: 0 auto 50px;
    padding: 10px 0;
}

.service_list ul{
    background-color: #ffed00;
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #003e83;
    font-family: 'YDW バナナスリップplus plus', 'Noto Sans JP', sans-serif;
    font-size: clamp(0.688rem, 0.482rem + 1.03vw, 1.125rem);

    padding: 10px 30px;
    border-radius: 30px;
}

.service_list ul li a:hover{
    opacity: 0.5;
}