@charset "UTF-8";

/*----------------------------------
  共通：セクション内の見出しブロック
-----------------------------------*/
.p-top-section {
  background-color: #1c1c1c;
  padding-block: 3.75rem;
  border-top: 1px solid #f3f3f3;
}

@media (min-width: 768px) {
  .p-top-section {
    padding-block: 6.25rem;
  }
}

.p-top-news {
  border-top: none;
}

.p-top-section__head {
  -webkit-margin-after: 1.875rem;
  margin-block-end: 1.875rem;
}

@media (min-width: 768px) {
  .p-top-section__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-margin-after: 3.125rem;
    margin-block-end: 3.125rem;
  }
}

.p-top-section__lead {
  color: #ffffff;
  font-size: max(0.875rem, 11.2px);
}

@media (min-width: 0px) {
  .p-top-section__lead {
    font-size: 0.875rem;
  }
}

.p-top-section__lead {
  font-weight: 500;
  line-height: 2.2857142857;
  -webkit-margin-before: 0.9375rem;
  margin-block-start: 0.9375rem;
}

@media (min-width: 768px) {
  .p-top-section__lead {
    max-width: 25rem;
    -webkit-margin-before: 0;
    margin-block-start: 0;
  }
}

/*----------------------------------
  装飾：ピンクの縁取り文字ループ
-----------------------------------*/
.c-marquee {
  position: relative;
  overflow: hidden;
  background-color: transparent;
}

.c-marquee__track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: c-marquee-scroll 125s linear infinite;
  animation: c-marquee-scroll 125s linear infinite;
}

.c-marquee__text {
  color: transparent;
  -webkit-text-stroke: 1px rgba(232, 62, 140, 0.7);
  font-family: "Lato", sans-serif;
  font-weight: 700;
  white-space: nowrap;
  font-size: max(7.5rem, 96px);
}

@media (min-width: 0px) {
  .c-marquee__text {
    font-size: 7.5rem;
  }
}

.c-marquee__text {
  font-weight: 700;
  letter-spacing: 0.03em;
  -webkit-padding-end: 2.5rem;
  padding-inline-end: 2.5rem;
}

@media (min-width: 768px) {
  .c-marquee__text {
    font-size: max(11rem, 140.8px);
    font-weight: 700;
  }
}

@media (min-width: 768px) and (min-width: 0px) {
  .c-marquee__text {
    font-size: 11rem;
  }
}

@-webkit-keyframes c-marquee-scroll {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@keyframes c-marquee-scroll {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

/*----------------------------------
  intro：一人ひとりの投球に本気で向き合うプロショップ
-----------------------------------*/
.p-top-intro {
  background-color: #1c1c1c;
  padding-block: 3.75rem;
}

@media (min-width: 768px) {
  .p-top-intro {
    padding-block: 6.25rem;
  }
}

.p-top-intro__contents {
  display: flex;
  flex-direction: column;
  row-gap: 1.5625rem;
}

@media (min-width: 900px) {
  .p-top-intro__contents {
    flex-direction: row;
    align-items: center;
    column-gap: 3.75rem;
  }
}

.p-top-intro__left {
  display: flex;
  flex-direction: column;
  row-gap: 1.25rem;
}

@media (max-width: 899.98px) {
  .p-top-intro__left {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 1.25rem;
  }
}

@media (min-width: 900px) {
  .p-top-intro__left {
    width: 35.1629502573%;
    flex-shrink: 0;
  }
}

.p-top-intro__photo {
  width: 100%;
  border-radius: 0.625rem;
  overflow: hidden;
  aspect-ratio: 409/312;
}

.p-top-intro__photo img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}

.p-service-intro__photo {
  width: 10rem;
  border-radius: 0.625rem;
  overflow: hidden;
  aspect-ratio: 1/1;
}

@media (min-width: 768px) {
  .p-service-intro__photo {
    width: 14.5625rem;
  }
}

.p-service-intro__photo img {
  width: 100%;
  object-fit: contain;
  height: 100%;
}

.p-top-intro__body {
  color: #ffffff;
  width: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .p-top-intro__body {
    width: 56.9468267581%;
    flex: 1;
    min-width: 0;
  }
}

.p-top-intro__heading {
  color: #ffffff;
  font-weight: 700;
  border-bottom: 1px solid #f3f3f3;
  padding-block-end: 1.875rem;
  font-size: max(1.25rem, 16px);
}

@media (min-width: 0px) {
  .p-top-intro__heading {
    font-size: 1.25rem;
  }
}

.p-top-intro__heading {
  font-weight: 700;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .p-top-intro__heading {
    font-size: max(1.625rem, 20.8px);
    font-weight: 700;
    line-height: 1.6153846154;
  }
}

@media (min-width: 768px) and (min-width: 0px) {
  .p-top-intro__heading {
    font-size: 1.625rem;
  }
}

.p-top-intro--service .p-top-intro__heading {
  border-bottom: none;
  padding-block-end: 0.9375rem;
}

@media (min-width: 768px) {
  .p-top-intro--service .p-top-intro__heading {
    padding-block-end: 0px;
  }
}

.p-top-intro__text {
  padding-block-start: 1.875rem;
  color: #ffffff;
  font-size: max(0.875rem, 11.2px);
}

@media (min-width: 0px) {
  .p-top-intro__text {
    font-size: 0.875rem;
  }
}

.p-top-intro__text {
  font-weight: 500;
  line-height: 2.2857142857;
}

.p-top-intro__text+.p-top-intro__text {
  margin-block-start: 1.25rem;
}

/*----------------------------------
  About us（左：見出し＋文章＋ボタン／右：カード3つ）
-----------------------------------*/
.p-top-about__layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1.875rem;
}

@media (min-width: 900px) {
  .p-top-about__layout {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-column-gap: 2.1875rem;
    -moz-column-gap: 2.1875rem;
    column-gap: 2.1875rem;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

.p-top-about {
  border-top: none;
  -webkit-padding-before: 4.0625rem;
  padding-block-start: 4.0625rem;
}

@media (min-width: 900px) {
  .p-top-about__left {
    width: 32.590051458%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: sticky;
    top: 6.25rem;
  }
}

.p-top-about__intro {
  color: #ffffff;
  font-size: max(0.875rem, 11.2px);
}

@media (min-width: 0px) {
  .p-top-about__intro {
    font-size: 0.875rem;
  }
}

.p-top-about__intro {
  font-weight: 500;
  line-height: 2.2857142857;
  -webkit-margin-before: 2.9375rem;
  margin-block-start: 2.9375rem;
}


.p-top-about__btn {
  -webkit-margin-before: 1.5625rem;
  margin-block-start: 1.5625rem;
  display: inline-block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media (min-width: 900px) {
  .p-top-about__btn {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
}

.p-top-about__cards {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1.5625rem;
  -webkit-padding-before: 0.9375rem;
  padding-block-start: 0.9375rem;
}

.c-about-card--policy::after {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(41, 27, 52, 0.35)), color-stop(55%, rgba(25, 25, 25, 0.6)), to(rgba(41, 27, 52, 0.95)));
  background: linear-gradient(180deg, rgba(41, 27, 52, 0.35) 0%, rgba(25, 25, 25, 0.6) 55%, rgba(41, 27, 52, 0.95) 100%);
}

.c-about-card--service::after {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(27, 52, 32, 0.35)), color-stop(55%, rgba(25, 25, 25, 0.6)), to(rgba(27, 52, 48, 0.95)));
  background: linear-gradient(180deg, rgba(27, 52, 32, 0.35) 0%, rgba(25, 25, 25, 0.6) 55%, rgba(27, 52, 48, 0.95) 100%);
}

.c-about-card--faq::after {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(61, 46, 23, 0.35)), color-stop(55%, rgba(25, 25, 25, 0.6)), to(rgba(61, 46, 23, 0.95)));
  background: linear-gradient(180deg, rgba(61, 46, 23, 0.35) 0%, rgba(25, 25, 25, 0.6) 55%, rgba(61, 46, 23, 0.95) 100%);
}

.c-about-card__icon-circle {
  position: absolute;
      right: 5%;
  bottom: 1.5625rem;
  z-index: 1;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 100vmax;
  display: grid;
  place-items: center;
}

@media (min-width: 768px) {
  .c-about-card__icon-circle {
    right: 2.1875rem;
    bottom: 2.1875rem;
  }
}

.c-about-card__icon-circle::after {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background: url("https://mugen-bowling.com/system_panel/uploads/images/arrow-white-right.png") no-repeat center/contain;
}

.c-about-card--policy .c-about-card__icon-circle {
  background: -webkit-gradient(linear, left top, left bottom, from(#8096f4), to(#8068d0));
  background: linear-gradient(180deg, #8096f4, #8068d0);
}

.c-about-card--service .c-about-card__icon-circle {
  background: -webkit-gradient(linear, left top, left bottom, from(#0cbe56), to(#05868e));
  background: linear-gradient(180deg, #0cbe56, #05868e);
}

.c-about-card--faq .c-about-card__icon-circle {
  background: -webkit-gradient(linear, left top, left bottom, from(#f4c848), to(#ef7090));
  background: linear-gradient(180deg, #f4c848, #ef7090);
}

.p-top-about {
  position: relative;
  z-index: 0;
}

.p-top-about__bg {
  position: absolute;
  top: auto;
  bottom: 16.875rem;
  left: 50%;
  translate: -50%;
  z-index: -1;
  pointer-events: none;
  width: 78vw;
  max-width: 64.0625rem;
  aspect-ratio: 1025/1031;
  opacity: 0.4;
}

.p-top-about__bg img {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  -o-object-fit: contain;
  object-fit: contain;
  opacity: 0.2;
  will-change: transform;
  -o-object-position: center;
  object-position: center;
}

.p-top-about__marquee {
  position: relative;
  z-index: 0;
  -webkit-margin-before: -1.25rem;
  margin-block-start: -1.25rem;
  -webkit-margin-after: -1.2px;
  margin-block-end: -1.2px;
  -webkit-transform: translateY(0.5rem);
  transform: translateY(0.5rem);
}

@media (min-width: 768px) {
  .p-top-about__marquee {
    -webkit-margin-before: -1.25rem;
    margin-block-start: -1.25rem;
  }
}

.p-top-about__marquee .c-marquee__text {
  line-height: 1;
}

.p-top-about__marquee2 .c-marquee__text {
  line-height: 1.5;
}

.p-top-about__photos {
  position: relative;
  z-index: 0;
}

/*----------------------------------
  Company
-----------------------------------*/
.p-top-company {
  border-top: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-padding-after: 0;
  padding-block-end: 0;
  -webkit-padding-before: 13px;
  padding-block-start: 13px;
}

.p-top-company__marquee {
  -webkit-transform: translateY(-25px);
  transform: translateY(-25px);
}

.p-top-company__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-margin-before: 1.875rem;
  margin-block-start: 1.875rem;
}

@media (min-width: 768px) {
  .p-top-company__body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-column-gap: 3.75rem;
    -moz-column-gap: 3.75rem;
    column-gap: 3.75rem;
    -webkit-margin-before: 3.125rem;
    margin-block-start: 3.125rem;
  }
}

.p-top-company__body {
  -webkit-margin-before: 3.75rem;
  margin-block-start: 3.75rem;
  -webkit-column-gap: 3.8125rem;
  -moz-column-gap: 3.8125rem;
  column-gap: 3.8125rem;
}

@media (min-width: 768px) {

  .p-top-company__profile,
  .p-top-company__rep {
    width: 50%;
    min-width: 0;
  }
}


@media (min-width: 768px) {
  .p-top-company__profile {
    max-width: 490px;
  }
}

.p-top-company__rep {
  -webkit-margin-before: 6.25rem;
  margin-block-start: 6.25rem;
}

@media (min-width: 768px) {
  .p-top-company__rep {
    -webkit-margin-before: 0;
    margin-block-start: 0;
  }
}

.p-top-company__label {
  position: relative;
  color: #ffffff;
  font-weight: 700;
  font-size: max(1.25rem, 16px);
}

@media (min-width: 0px) {
  .p-top-company__label {
    font-size: 1.25rem;
  }
}

.p-top-company__label {
  font-weight: 700;
  -webkit-padding-start: 1.375rem;
  padding-inline-start: 1.375rem;
  -webkit-margin-after: 2.5rem;
  margin-block-end: 2.5rem;
}

.p-top-company__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 0.8125rem;
  height: 0.8125rem;
  border-radius: 0.1875rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#0d7fca), to(#67c9e0));
  background: linear-gradient(180deg, #0d7fca, #67c9e0);
}

.p-top-company__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 0.3125rem;
  padding-block: 1.375rem;
  border-top: 1px solid #f3f3f3;
}

.p-top-company__row:last-child {
  border-bottom: 1px solid #f3f3f3;
}

.p-top-company__row-label {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: #ffffff;
  font-size: max(0.875rem, 11.2px);
}

@media (min-width: 0px) {
  .p-top-company__row-label {
    font-size: 0.875rem;
  }
}

.p-top-company__row-label {
  font-weight: 600;
}

.p-top-company__row-value {
  color: #ffffff;
  font-size: max(0.875rem, 11.2px);
}

@media (min-width: 0px) {
  .p-top-company__row-value {
    font-size: 0.875rem;
  }
}

.p-top-company__row-value {
  font-weight: 500;
  line-height: 1.8571428571;
  overflow-wrap: break-word;
  word-break: break-all;
}

@media (min-width: 768px) {
  .p-top-company__row-value {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
  }
}

.p-top-company__rep-text {
  color: #ffffff;
  font-size: max(0.875rem, 11.2px);
}

@media (min-width: 0px) {
  .p-top-company__rep-text {
    font-size: 0.875rem;
  }
}

.p-top-company__rep-text {
  font-weight: 500;
  line-height: 2.2857142857;
}

.p-top-company__rep-text+.p-top-company__rep-text {
  -webkit-margin-before: 1.875rem;
  margin-block-start: 1.875rem;
}

.p-top-company__rep-photo {
  -webkit-margin-after: 2.5rem;
  margin-block-end: 2.5rem;
  width: 100%;
  border-radius: 0.625rem;
  overflow: hidden;
  aspect-ratio: 558/228;
}

.p-top-company__rep-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.p-top-company__rep-name {
  color: #ffffff;
  text-align: right;
  -webkit-margin-before: 2.5rem;
  margin-block-start: 2.5rem;
  font-size: max(0.9375rem, 12px);
}

@media (min-width: 0px) {
  .p-top-company__rep-name {
    font-size: 0.9375rem;
  }
}

.p-top-company__rep-name {
  font-weight: 700;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-padding-start: 0.625rem;
  padding-inline-start: 0.625rem;
  padding-block: 0.125rem;
  -webkit-border-start: 1px solid #ffffff;
  border-inline-start: 1px solid #ffffff;
  -webkit-margin-start: auto;
  margin-inline-start: auto;
  -webkit-margin-end: 0;
  margin-inline-end: 0;
}

/*----------------------------------
  news（TOP掲載分）
-----------------------------------*/
.p-top-news {
  background-color: #1c1c1c;
  padding-block: 3.75rem;
}

@media (min-width: 768px) {
  .p-top-news {
    padding-block: 6.25rem;
  }
}

.p-top-news {
  -webkit-padding-before: 4.6875rem;
  padding-block-start: 4.6875rem;
  -webkit-padding-after: 8.125rem;
  padding-block-end: 8.125rem;
}

.p-top-news__list {
  -webkit-margin-before: 1.875rem;
  margin-block-start: 1.875rem;
}

.p-top-news__list .webgene-blog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.p-top-news__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-margin-before: 2.5rem;
  margin-block-start: 2.5rem;
}

@media (min-width: 768px) {
  .p-top-news__btn {
    -webkit-margin-before: 4.0625rem;
    margin-block-start: 4.0625rem;
  }
}

/*----------------------------------
  Instagram
-----------------------------------*/
.p-top-instagram {
  background-color: #1c1c1c;
  padding-block: 3.75rem;
}

@media (min-width: 768px) {
  .p-top-instagram {
    padding-block: 6.25rem;
  }
}

.p-top-instagram__grid {
  -webkit-margin-before: 1.875rem;
  margin-block-start: 1.875rem;
}

@media (min-width: 768px) {
  .p-top-instagram__grid {
    -webkit-margin-before: 3.125rem;
    margin-block-start: 3.125rem;
  }
}

.p-top-instagram__grid .webgene-blog {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .p-top-instagram__grid .webgene-blog {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

.c-insta__thumb {
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  border-radius: 0.625rem;
  overflow: hidden;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

@media (any-hover: hover) {
  .c-insta__thumb:hover {
    opacity: 0.8;
  }
}

.c-insta__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.c-insta__thumb img+span {
  display: none;
}

.c-insta__body {
  -webkit-margin-before: 0.75rem;
  margin-block-start: 0.75rem;
}

.c-insta__date {
  color: #c8c8c8;
  font-family: "Lato", sans-serif;
  font-size: max(0.75rem, 9.6px);
}

@media (min-width: 0px) {
  .c-insta__date {
    font-size: 0.75rem;
  }
}

.c-insta__date {
  font-weight: 500;
}

.c-insta__link {
  display: block;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

@media (any-hover: hover) {
  .c-insta__link:hover {
    opacity: 0.7;
  }
}

.c-insta__title {
  color: #ffffff;
  -webkit-margin-before: 0.375rem;
  margin-block-start: 0.375rem;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: max(0.875rem, 11.2px);
}

@media (min-width: 0px) {
  .c-insta__title {
    font-size: 0.875rem;
  }
}

.c-insta__title {
  font-weight: 500;
  line-height: 1.5714285714;
}