@charset "UTF-8";
#bullpen .btn {
  --btn-color: #C2D1D5;
  margin-inline: auto;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  gap: 30px;
  background: #0B4773;
  border-bottom: none;
  padding: 20px 30px;
  border-radius: 100vmax;
}
@media screen and (max-width:767px) {
  #bullpen .btn {
    max-width: 100%;
    gap: 15px;
    padding: 15px 20px;
  }
}
#bullpen .btn .arrow::after {
  top: 52%;
  -webkit-transform: translate(-62%, -50%) rotate(0deg);
          transform: translate(-62%, -50%) rotate(0deg);
}

.bullpen-scroll-wrapper {
  height: 800vh; /* スライド7枚分＋固定分のスクロール距離 */
  position: relative;
}

.fv-bullpen-slider {
  width: 100vw;
  height: 100vh;
  position: sticky;
  top: 0;
  left: 0;
  background-color: #0C4D86;
  z-index: 1;
}
.fv-bullpen-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/bullpen/pattern-star.png);
  background-repeat: repeat;
  background-size: 8%;
  opacity: 0.2;
}
@media screen and (max-width:767px) {
  .fv-bullpen-slider::before {
    background-size: 30%;
  }
}
.fv-bullpen-slider__bg-curtain, .fv-bullpen-slider__bg-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fv-bullpen-slider__bg-curtain {
  z-index: 2;
  overflow: hidden;
}
.fv-bullpen-slider__bg-curtain .curtain {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.fv-bullpen-slider__bg-curtain .curtain-l, .fv-bullpen-slider__bg-curtain .curtain-r {
  position: absolute;
  top: 0;
  bottom: 10%;
  width: 25vw;
  will-change: transform;
}
.fv-bullpen-slider__bg-curtain .curtain-l > * > *, .fv-bullpen-slider__bg-curtain .curtain-r > * > * {
  width: 100%;
  height: 100%;
}
.fv-bullpen-slider__bg-curtain .curtain-l {
  left: 0;
}
.fv-bullpen-slider__bg-curtain .curtain-r {
  right: 0;
}
.fv-bullpen-slider__bg-stage {
  z-index: 0;
}
.fv-bullpen-slider__bg-stage .stage {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 30%);
          transform: translate(-50%, 30%);
  width: 100vw;
}
@media screen and (max-width:767px) {
  .fv-bullpen-slider__bg-stage .stage {
    min-width: unset;
    max-height: 240px;
  }
}
.fv-bullpen-slider__item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@media screen and (max-width:767px) {
  .fv-bullpen-slider__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-flow: column-reverse;
            flex-flow: column-reverse;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-bottom: 10vh;
  }
}
.fv-bullpen-slider__item .bullpen {
  position: absolute;
  bottom: 10%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 50%;
  z-index: 3;
  -webkit-perspective: 800px;
          perspective: 800px;
}
@media screen and (max-width:767px) {
  .fv-bullpen-slider__item .bullpen {
    max-width: 255px;
    position: unset;
    -webkit-transform: unset;
            transform: unset;
  }
}
@media screen and (min-width:768px) {
  .fv-bullpen-slider__item .bullpen {
    width: 35%;
    bottom: 9vw;
  }
}
@media screen and (min-width:992px) {
  .fv-bullpen-slider__item .bullpen {
    width: 25%;
  }
}
@media screen and (min-width:1200px) {
  .fv-bullpen-slider__item .bullpen {
    max-width: 440px;
  }
}
.fv-bullpen-slider__item .bullpen-sub {
  position: absolute;
  bottom: 12%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 30%;
}
@media screen and (min-width:768px) {
  .fv-bullpen-slider__item .bullpen-sub {
    width: 20%;
    left: 80%;
    bottom: 7.5vw;
  }
}
@media screen and (min-width:992px) {
  .fv-bullpen-slider__item .bullpen-sub {
    width: 15%;
    left: 70%;
  }
}
.fv-bullpen-slider__item .bullpen-sub img {
  display: block;
  visibility: hidden;
}
.fv-bullpen-slider__item .speach-bubble-main {
  position: absolute;
  top: 23%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 90%;
  max-width: 900px;
  z-index: 3;
}
@media screen and (min-width:768px) {
  .fv-bullpen-slider__item .speach-bubble-main {
    width: 80%;
    top: 15%;
  }
}
@media screen and (min-width:992px) {
  .fv-bullpen-slider__item .speach-bubble-main {
    width: 50%;
  }
}
.fv-bullpen-slider__item .speech-bubble {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
@media screen and (max-width:767px) {
  .fv-bullpen-slider__item .speech-bubble {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: -15px;
  }
}
.fv-bullpen-slider__item .speech-bubble > * {
  pointer-events: auto;
}
.fv-bullpen-slider__item .speech-bubble01 {
  position: absolute;
  bottom: 45svh;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 80%;
}
@media screen and (max-width:767px) {
  .fv-bullpen-slider__item .speech-bubble01 {
    max-width: 370px;
    position: unset;
    -webkit-transform: unset;
            transform: unset;
  }
}
@media screen and (min-width:768px) {
  .fv-bullpen-slider__item .speech-bubble01 {
    bottom: 35vw;
    left: 6%;
    width: 30%;
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}
@media screen and (min-width:992px) {
  .fv-bullpen-slider__item .speech-bubble01 {
    bottom: 25vw;
    left: 11%;
    width: 25%;
  }
}
@media screen and (min-width:1200px) {
  .fv-bullpen-slider__item .speech-bubble01 {
    left: 21%;
    width: 18%;
    bottom: 13vw;
  }
}
.fv-bullpen-slider__item .speech-bubble02 {
  position: absolute;
  -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
}
@media screen and (max-width:767px) {
  .fv-bullpen-slider__item .speech-bubble02 {
    display: none;
  }
}
@media screen and (min-width:768px) {
  .fv-bullpen-slider__item .speech-bubble02 {
    bottom: 47vw;
    right: 6%;
    width: 30%;
  }
}
@media screen and (min-width:992px) {
  .fv-bullpen-slider__item .speech-bubble02 {
    bottom: 22vw;
    right: 11%;
    width: 25%;
  }
}
@media screen and (min-width:1200px) {
  .fv-bullpen-slider__item .speech-bubble02 {
    right: 21%;
    width: 18%;
  }
}
.fv-bullpen-slider__item .speech-bubble03 {
  position: absolute;
  top: 35%;
  right: 12%;
  width: 15%;
}
@media screen and (max-width:767px) {
  .fv-bullpen-slider__item .speech-bubble03 {
    width: 85%;
    margin-bottom: 50px;
    position: unset;
  }
}
@media screen and (min-width:768px) {
  .fv-bullpen-slider__item .speech-bubble03 {
    top: 49%;
  }
}
@media screen and (min-width:1366px) {
  .fv-bullpen-slider__item .speech-bubble03 {
    top: 35%;
  }
}
.fv-bullpen-slider__item .track {
  width: 120vw;
  -webkit-transform: translate(-25%, 0);
          transform: translate(-25%, 0);
  position: relative;
  z-index: 1;
}
@media screen and (min-width:768px) {
  .fv-bullpen-slider__item .track {
    position: absolute;
    top: 70%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 50%;
  }
}
@media screen and (min-width:1366px) {
  .fv-bullpen-slider__item .track {
    top: 63%;
  }
}
.fv-bullpen-slider__item .track img {
  visibility: hidden;
  display: block;
}
.fv-bullpen-slider__item.-first .signboard {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  max-width: 400px;
  width: 90%;
  z-index: 3;
}
@media screen and (min-width:768px) {
  .fv-bullpen-slider__item.-first .signboard {
    width: 70%;
    max-width: 750px;
  }
}
@media screen and (min-width:1200px) {
  .fv-bullpen-slider__item.-first .signboard {
    width: 50%;
  }
}
.fv-bullpen-slider__item.-third .speach-bubble-main, .fv-bullpen-slider__item.-fourth .speach-bubble-main, .fv-bullpen-slider__item.-fifth .speach-bubble-main, .fv-bullpen-slider__item.-sixth .speach-bubble-main, .fv-bullpen-slider__item.-seventh .speach-bubble-main {
  width: 70%;
  max-width: 1200px;
}
@media screen and (max-width:767px) {
  .fv-bullpen-slider__item.-third .speach-bubble-main, .fv-bullpen-slider__item.-fourth .speach-bubble-main, .fv-bullpen-slider__item.-fifth .speach-bubble-main, .fv-bullpen-slider__item.-sixth .speach-bubble-main, .fv-bullpen-slider__item.-seventh .speach-bubble-main {
    width: 90%;
  }
}
@media screen and (max-width:767px) {
  .fv-bullpen-slider__item.-third .speech-bubble01, .fv-bullpen-slider__item.-fourth .speech-bubble01, .fv-bullpen-slider__item.-fifth .speech-bubble01, .fv-bullpen-slider__item.-sixth .speech-bubble01, .fv-bullpen-slider__item.-seventh .speech-bubble01 {
    bottom: 38svh;
  }
}
@media screen and (max-width:767px) {
  .fv-bullpen-slider__item.-third .speech-bubble01, .fv-bullpen-slider__item.-fourth .speech-bubble01, .fv-bullpen-slider__item.-fifth .speech-bubble01 {
    bottom: 38svh;
  }
}

.stage picture,
.curtain-l,
.curtain-r,
.signboard picture,
.bullpen img,
.speech-bubble picture,
.speach-bubble-main picture {
  visibility: hidden;
  display: block;
}

.speach-bubble-main picture {
  opacity: 0;
}

.about-works {
  background-image: url(../img/bullpen/pattern-flower.png);
  background-repeat: repeat;
  background-size: 20%;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width:767px) {
  .about-works {
    background-size: 30%;
  }
}
@media screen and (min-width:768px) {
  .about-works::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-25%, -60%);
            transform: translate(-25%, -60%);
    width: 120vw;
    max-width: 2700px;
    aspect-ratio: 214/106;
    background: url(../img/bullpen/bg-road-curve.png) no-repeat center/contain;
  }
}
@media screen and (min-width:768px) and (max-width:991px) {
  .about-works::before {
    aspect-ratio: 214/135;
  }
}
@media screen and (min-width:768px) {
  .about-works::after {
    content: "";
    position: absolute;
    bottom: 5%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 100vw;
    aspect-ratio: 12/1;
    background: url(../img/bullpen/bg-road-straight.png) repeat center/contain;
  }
}
.about-works > .block-box {
  position: relative;
  z-index: 1;
}
.about-works__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  gap: clamp(40px, 21.935px + 5.161vw, 120px);
}
.about-works__item {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(30px, 23.226px + 1.935vw, 60px);
}
@media screen and (max-width:767px) {
  .about-works__item {
    grid-template-columns: 1fr;
  }
}
@media screen and (min-width:768px) {
  .about-works__item.-reserve .about-works__item-text {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin-inline: 15px auto;
  }
}
@media screen and (min-width:768px) {
  .about-works__item.-reserve .about-works__item-text::before {
    top: 50%;
    left: -15px;
    border-right: 15px solid #fff;
    border-left: none;
  }
}
@media screen and (min-width:768px) {
  .about-works__item.-reserve .about-works__item-image .sub-image {
    right: unset;
    left: 0;
  }
}
.about-works__item-text {
  position: relative;
  display: inline-block;
  margin-inline: auto 15px;
  padding: clamp(28px, 23.032px + 1.419vw, 50px);
  max-width: 100%;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  border-radius: 10px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width:767px) {
  .about-works__item-text {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    width: 100%;
  }
}
.about-works__item-text::before {
  content: "";
  position: absolute;
  border: 15px solid transparent;
}
@media screen and (max-width:767px) {
  .about-works__item-text::before {
    top: -30px;
    left: 50%;
    margin-left: -15px;
    border-bottom: 15px solid #fff;
  }
}
@media screen and (min-width:768px) {
  .about-works__item-text::before {
    top: 50%;
    left: 100%;
    margin-top: -15px;
    border-left: 15px solid #fff;
  }
}
.about-works__item-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  border-bottom: solid 1px #0490B3;
  margin-bottom: 20px;
  padding-bottom: 10px;
}
.about-works__item-title .num {
  font-size: clamp(24px, 20.839px + 0.903vw, 38px);
  color: #0490B3;
  font-weight: bold;
  font-family: "Prompt", sans-serif;
  line-height: 1;
  margin-top: 0.1em;
  white-space: nowrap;
}
.about-works__item-title .main-title {
  font-size: clamp(22px, 19.742px + 0.645vw, 32px);
  font-weight: bold;
  line-height: 1.4;
  white-space: nowrap;
}
.about-works__item-desc {
  font-size: clamp(16px, 15.548px + 0.129vw, 18px);
  font-weight: bold;
  color: #0A2747;
  font-family: "M PLUS 1", sans-serif;
  line-height: 1.6;
}
.about-works__item-desc p {
  margin-bottom: 10px;
}
.about-works__item-desc p:last-child {
  margin-bottom: 0;
}
.about-works__item-image {
  position: relative;
  width: 100%;
}
.about-works__item-image .main-image {
  width: 100%;
  position: relative;
}
.about-works__item-image .main-image img {
  aspect-ratio: 56/39;
  border-radius: 20px;
  overflow: hidden;
}
.about-works__item-image .main-image:has(.image01), .about-works__item-image .main-image:has(.image02) {
  padding-left: 8%;
  padding-bottom: 5.5%;
}
.about-works__item-image .main-image .image01 {
  width: 95%;
  margin-left: auto;
  border-radius: 20px;
}
.about-works__item-image .main-image .image02 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 45%;
  border-radius: 10px;
}
.about-works__item-image .sub-image {
  position: absolute;
  bottom: 0;
  right: 0;
}
.about-works__item:nth-child(1) .about-works__item-image .sub-image, .about-works__item:nth-child(4) .about-works__item-image .sub-image {
  width: 40%;
}
@media screen and (max-width:767px) {
  .about-works__item:nth-child(1) .about-works__item-image .sub-image, .about-works__item:nth-child(4) .about-works__item-image .sub-image {
    width: 50%;
    -webkit-transform: translate(20%, 30%) !important;
            transform: translate(20%, 30%) !important;
  }
}
.about-works__item:nth-child(1) .about-works__item-image .sub-image {
  -webkit-transform: translate(15%, 50%);
          transform: translate(15%, 50%);
}
.about-works__item:nth-child(4) .about-works__item-image .sub-image {
  -webkit-transform: translate(10%, 50%);
          transform: translate(10%, 50%);
}
.about-works__item:nth-child(2) .about-works__item-image .sub-image, .about-works__item:nth-child(3) .about-works__item-image .sub-image {
  width: 20%;
}
@media screen and (max-width:767px) {
  .about-works__item:nth-child(2) .about-works__item-image .sub-image, .about-works__item:nth-child(3) .about-works__item-image .sub-image {
    width: 25%;
    -webkit-transform: translate(15%, 15%) !important;
            transform: translate(15%, 15%) !important;
  }
}
.about-works__item:nth-child(2) .about-works__item-image .sub-image {
  -webkit-transform: translate(15%, 15%);
          transform: translate(15%, 15%);
}
.about-works__item:nth-child(3) .about-works__item-image .sub-image {
  -webkit-transform: translate(15%, 15%);
          transform: translate(15%, 15%);
}
@media screen and (min-width:768px) {
  .about-works__item:nth-child(3) .about-works__item-image .sub-image {
    right: unset;
    left: 0;
  }
}

.stamp-section {
  position: relative;
  background: #0490B3;
}
.stamp-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/bullpen/pattern-item.png);
  background-repeat: repeat;
  background-size: 20%;
}
@media screen and (max-width:767px) {
  .stamp-section::before {
    background-size: 30%;
  }
}
.stamp-section__title {
  width: 70%;
  margin-inline: auto;
  margin-bottom: 30px;
}
@media screen and (max-width:767px) {
  .stamp-section__title {
    width: 100%;
  }
}
.stamp-section__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: clamp(30px, 23.226px + 1.935vw, 60px);
}
.stamp-section__contents-head {
  width: 30%;
}
@media screen and (max-width:767px) {
  .stamp-section__contents-head {
    width: 65%;
  }
}
.stamp-section__contents-main {
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  padding: 80px;
}
@media screen and (max-width:767px) {
  .stamp-section__contents-main {
    padding: 40px 25px;
  }
}
.stamp-section__contents-main img {
  width: 100%;
}

.instagram-section__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
}
.instagram-section__head-illust {
  width: 90px;
  aspect-ratio: 43/77;
}
.instagram-section__head-title {
  margin-top: 1.5em;
}
.instagram-section__head-title .sub-title {
  font-size: clamp(36px, 30.581px + 1.548vw, 60px);
  font-family: "M PLUS 1", sans-serif;
  line-height: 1;
  font-weight: 900;
  margin-bottom: 0.2em;
}
.instagram-section__head-title .main-title {
  font-size: clamp(14px, 13.548px + 0.129vw, 16px);
  color: #0A2747;
}
.instagram-section__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: clamp(30px, 23.226px + 1.935vw, 60px);
}
@media screen and (min-width:768px) {
  .instagram-section__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 27px;
  }
}
@media screen and (min-width:992px) {
  .instagram-section__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}/*# sourceMappingURL=style-bullpen.css.map */