/* ヘッダー */
@media screen and (min-width: 1024px) {
}
.l-header {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 5; /* ← スクロール前 */
 background-color: #fff;
 transition: all 0.1s ease;
 padding: 20px;
}

.l-header.is-fixed {
 top: 0;
 left: 0;
 width: 100%;
 z-index: 6; /* ← スクロール後に z-index を上げる */
 background-color: #fff;
 padding: 20px;
}
@media screen and (min-width: 768px) {
 .l-header.is-fixed {
  top: 0;
  left: 0;
  width: 100%;
  position: fixed;
  z-index: 6; /* ← スクロール後に z-index を上げる */
  background-color: #fff;
  padding: 20px;
 }
}

.l-header__container {
 display: flex;
 justify-content: flex-start;
 align-items: center;
 gap: 30px;
}
@media screen and (min-width: 768px) {
 .l-header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
 }
}

.l-header__logo img {
 height: 50px;
}
@media screen and (min-width: 768px) {
 .l-header__logo img {
  height: auto;
 }
}
.l-header__logo-sub img {
 height: 50px;
}
@media screen and (min-width: 768px) {
 .l-header__logo-sub img {
  height: auto;
 }
}
@media screen and (min-width: 768px) {
 .l-header {
  padding: 15px 30px;
 }
 .l-header__logo img {
  height: 45px;
 }
 .l-header__logo-sub img {
  height: auto;
 }
}
/* PCメニュー */
.l-header__menu {
 display: none;
 gap: 24px;
 align-items: center;
}
@media screen and (min-width: 1024px) {
 .l-header__menu {
  display: flex;
 }
}

.l-header__menu a {
 font-weight: 700;
 color: #202124;
 text-decoration: none;
}

.l-header__menu .is-btn a {
 background: #ff4537; /* 既存のCTA色に寄せる */
 color: #fff;
 padding: 10px 18px;
 border-radius: 999px;
}

/* ハンバーガー（SPのみ表示） */
.l-header__toggle {
 width: 44px;
 height: 44px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 6px;
}
.l-header__toggle span {
 width: 22px;
 height: 2px;
 background: #202124;
 display: block;
}
@media screen and (min-width: 1024px) {
 .l-header__toggle {
  display: none;
 }
}

/* ドロワー */
.l-header__drawer {
 position: fixed;
 top: 0;
 right: 0;
 width: min(86vw, 360px);
 height: 100vh;
 background: #fff;
 transform: translateX(100%);
 transition: transform 0.25s ease;
 z-index: 999; /* ヘッダーより前 */
 padding: 90px 24px 24px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.l-header__drawer.is-open {
 transform: translateX(0);
}

.l-header__drawerMenu li + li {
 margin-top: 18px;
}
.l-header__drawerMenu a {
 color: #202124;
 font-weight: 700;
 text-decoration: none;
 font-size: 1.8rem;
}

/*----------------------------------------------------------------メインビジュアル----------------------------------------------------------------*/
.kv {
 position: relative;
 width: 100%;
 min-height: 830px;
 overflow: visible;
 padding-top: 90px;
}
@media screen and (min-width: 768px) {
 .kv {
  position: relative;
  width: 100%;
  min-height: 665px;
  overflow: visible; /* ← 切れないように overflow を解除 */
  padding-top: 60px;
 }
}
@media screen and (min-width: 1024px) {
 .kv {
  position: relative;
  width: 100%;
  min-height: 805px;
  overflow: visible; /* ← 切れないように overflow を解除 */
  padding-top: 60px;
 }
}

.kv__bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: url("http://build-connect.jp/wp-content/themes/theme-2025/assets/images/home/blue-bg.png")
  center/cover no-repeat;
 z-index: 1;
}

.kv__orange {
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 230px;
 background: #f8a800;
 z-index: 2;
}
@media screen and (min-width: 768px) {
 .kv__orange {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 125px;
  background: #f8a800;
  z-index: 2;
 }
}

.kv__inner {
 position: relative;
 z-index: 5;
 height: 100%;
 display: flex;
 align-items: center;
}

.kv__content {
 width: 100%;
 display: flex;
 justify-content: space-between;
 position: relative;
 flex-direction: column;
}

.kv__lead {
 width: 100%;
 position: relative;
 z-index: 200;
}

.kv__catch {
 font-size: 1.8rem;
 line-height: 1.8;
 font-weight: bold;
 margin: 20px 0;
 color: #fff;
}
@media screen and (min-width: 768px) {
 .kv__catch {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 30px 0;
  color: #fff;
 }
}
@media screen and (min-width: 1024px) {
 .kv__catch {
  font-size: 3rem;
  font-weight: bold;
  margin: 30px 0;
  color: #fff;
 }
}

.kv__main-text {
 width: 100%;
 max-width: 900px;
 margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
 .kv__main-text {
  width: 100%;
  max-width: 660px;
  margin-bottom: 20px;
 }
}
@media screen and (min-width: 1023px) {
 .kv__main-text {
  width: 100%;
  max-width: 750px;
  margin-bottom: 20px;
 }
}
@media screen and (min-width: 1025px) {
 .kv__main-text {
  width: 100%;
  max-width: 900px;
  margin-bottom: 20px;
 }
}

.kv__desc {
 margin-bottom: 20px;
 font-size: 1.8rem;
 line-height: 1.8;
 color: #fff;
}
@media screen and (min-width: 768px) {
 .kv__desc {
  margin-bottom: 20px;
  font-size: 2rem;
  line-height: 1.8;
  color: #fff;
 }
}
@media screen and (min-width: 1024px) {
 .kv__desc {
  margin-bottom: 20px;
  font-size: 3rem;
  line-height: 1.8;
  color: #fff;
 }
}

.kv__bottom {
 position: absolute;
 bottom: -60%;
 left: 30%;
 transform: translateX(-50%);
 width: 60%;
 z-index: 155;
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
}
@media screen and (min-width: 359px) {
 .kv__bottom {
  position: absolute;
  bottom: -57%;
  left: 25%;
  transform: translateX(-50%);
  width: 60%;
  z-index: 155;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
 }
}
@media screen and (min-width: 389px) {
 .kv__bottom {
  position: absolute;
  bottom: -55%;
  left: 31%;
  transform: translateX(-50%);
  width: 60%;
  z-index: 155;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
 }
}
@media screen and (min-width: 411px) {
 .kv__bottom {
  position: absolute;
  bottom: -55%;
  left: 33%;
  transform: translateX(-50%);
  width: 60%;
  z-index: 155;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
 }
}
@media screen and (min-width: 413px) {
 .kv__bottom {
  position: absolute;
  bottom: -55%;
  left: 33%;
  transform: translateX(-50%);
  width: 60%;
  z-index: 155;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
 }
}
@media screen and (min-width: 429px) {
 .kv__bottom {
  position: absolute;
  bottom: -53%;
  left: 33%;
  transform: translateX(-50%);
  width: 60%;
  z-index: 155;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
 }
}
@media screen and (min-width: 767px) {
 .kv__bottom {
  position: absolute;
  bottom: -18%;
  left: 26%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 155;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
 }
}
@media screen and (min-width: 769px) {
 .kv__bottom {
  position: absolute;
  bottom: -18%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 155;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
 }
}
@media screen and (min-width: 1023px) {
 .kv__bottom {
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 155;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
 }
}
@media screen and (min-width: 1025px) {
 .kv__bottom {
  position: absolute;
  bottom: -15%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 155;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
 }
}

.kv__price {
 font-size: 2rem;
 padding-bottom: 20px;
 color: #fff;
}
@media screen and (min-width: 768px) {
 .kv__price {
  font-size: 2rem;
  padding-bottom: 20px;
  color: #fff;
 }
}
@media screen and (min-width: 1024px) {
 .kv__price {
  font-size: 3rem;
  padding-bottom: 20px;
  color: #fff;
 }
}

.kv__price_small {
 font-size: 1.6rem;
 color: #fff;
}
@media screen and (min-width: 768px) {
 .kv__price_small {
  font-size: 1.7rem;
  color: #fff;
 }
}
@media screen and (min-width: 1024px) {
 .kv__price_small {
  font-size: 2rem;
  color: #fff;
 }
}

.kv__btn {
 position: absolute;
 bottom: -110%;
 left: 0%;
 display: inline-block;
 background: #ff4537;
 color: #fff;
 padding: 25px 25px;
 border-radius: 50px;
 font-size: 1.8rem;
 font-weight: bold;
 text-align: center;
 white-space: nowrap;
}
@media screen and (min-width: 767px) {
 .kv__btn {
  position: absolute;
  bottom: -67%;
  left: 59%;
  display: inline-block;
  background: #ff4537;
  color: #fff;
  padding: 20px 40px;
  border-radius: 50px;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
 }
}
@media screen and (min-width: 769px) {
 .kv__btn {
  position: absolute;
  bottom: -30%;
  left: 45%;
  display: inline-block;
  background: #ff4537;
  color: #fff;
  padding: 20px 40px;
  border-radius: 50px;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
 }
}
@media screen and (min-width: 819px) {
 .kv__btn {
  position: absolute;
  bottom: -63%;
  left: 38%;
  display: inline-block;
  background: #ff4537;
  color: #fff;
  padding: 20px 40px;
  border-radius: 50px;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
 }
}
@media screen and (min-width: 1023px) {
 .kv__btn {
  position: absolute;
  bottom: -50%;
  left: 42%;
  display: inline-block;
  background: #ff4537;
  color: #fff;
  padding: 20px 50px;
  border-radius: 50px;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
 }
}
@media screen and (min-width: 1025px) {
 .kv__btn {
  position: absolute;
  bottom: -15%;
  left: 52%;
  display: inline-block;
  background: #ff4537;
  color: #fff;
  padding: 30px 50px;
  border-radius: 50px;
  font-size: 3.5rem;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
 }
}

.kv__character {
 position: absolute;
 bottom: -85%;
 right: -7%;
 width: 90%;
 height: auto;
 max-height: 100%;
 z-index: 150;
}
@media screen and (min-width: 389px) {
 .kv__character {
  position: absolute;
  bottom: -83%;
  right: -7%;
  width: 90%;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 411px) {
 .kv__character {
  position: absolute;
  bottom: -80%;
  right: -7%;
  width: 90%;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 413px) {
 .kv__character {
  position: absolute;
  bottom: -80%;
  right: -7%;
  width: 90%;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 429px) {
 .kv__character {
  position: absolute;
  bottom: -78%;
  right: -7%;
  width: 90%;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 539px) {
 .kv__character {
  position: absolute;
  bottom: -56%;
  right: -7%;
  width: 90%;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 767px) {
 .kv__character {
  position: absolute;
  bottom: -26%;
  right: -3%;
  width: 40%;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 769px) {
 .kv__character {
  position: absolute;
  bottom: 9%;
  right: -3%;
  width: auto;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 819px) {
 .kv__character {
  position: absolute;
  bottom: -26%;
  right: -3%;
  width: 40%;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 1023px) {
 .kv__character {
  position: absolute;
  bottom: -27%;
  right: -2%;
  width: 45%;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 1025px) {
 .kv__character {
  position: absolute;
  bottom: 5%;
  right: 5%;
  width: auto;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}

.kv__character img {
 display: block;
 max-height: 775px; /* これで画面内におさまるよう調整 */
 height: auto;
 width: auto;
}
@media screen and (min-width: 768px) {
 .kv__character img {
  display: block;
  max-height: 649px; /* これで画面内におさまるよう調整 */
  height: auto;
  width: auto;
 }
}
@media screen and (min-width: 1024px) {
 .kv__character img {
  display: block;
  max-height: 775px; /* これで画面内におさまるよう調整 */
  height: auto;
  width: auto;
 }
}

@media screen and (max-width: 768px) {
 .kv__content {
  flex-direction: column;
 }
 .kv__main-text {
  margin: 0 auto 20px;
 }
 .kv__bottom {
  flex-direction: column;
 }
}

/*----------------------------------------------------------------特徴----------------------------------------------------------------*/
.features {
 padding: 80px 0;
 background: #fff;
}
@media screen and (min-width: 768px) {
 .features {
  padding: 100px 0;
  background: #fff;
 }
}

.features__heading {
 text-align: center;
 margin-bottom: 80px;
}
@media screen and (min-width: 768px) {
 .features__heading {
  text-align: center;
  margin-bottom: 100px;
 }
}

.features__list {
 display: flex;
 justify-content: center;
 gap: 30px;
 flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
 .features__list {
  display: flex;
  justify-content: center;
  gap: 30px;
 }
}

.feature__item {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 100%;
 text-align: center;
}
@media screen and (min-width: 767px) {
 .feature__item {
  width: 100%;
 }
}
@media screen and (min-width: 820px) {
 .feature__item {
  width: 100%;
 }
}
@media screen and (min-width: 1024px) {
 .feature__item {
  width: 48%;
 }
}
@media screen and (min-width: 1025px) {
 .feature__item {
  width: 32%;
 }
}
.feature__img {
 width: 100%;
 max-width: 260px;
 margin: 0 auto 20px;
}
@media screen and (min-width: 768px) {
 .feature__img {
  width: 100%;
  max-width: 300px;
  margin: 0 auto 20px;
 }
}

.feature__desc {
 width: 100%;
 background: #f5f5f5;
 padding: 20px;
 text-align: left;
 min-height: 370px; /* もしくは最低高さとして使うと安全 */
}
@media screen and (min-width: 768px) {
 .feature__desc {
  width: 100%;
  background: #f5f5f5;
  padding: 20px;
  text-align: left;
  min-height: 410px;
 }
}
@media screen and (min-width: 1024px) {
 .feature__desc {
  width: 90%;
  background: #f5f5f5;
  padding: 30px;
  text-align: left;
  min-height: 410px; /* もしくは最低高さとして使うと安全 */
 }
}

.feature__desc h3 {
 line-height: 1.8;
 text-align: center;
 font-size: 2rem;
 margin-bottom: 20px;
 font-weight: bold;
 color: #202124;
}

.feature__desc p {
 font-size: 1.6rem;
 padding-bottom: 10px;
 color: #202124;
 line-height: 1.8;
}

/*-----------------------------------------------------------動画らいぶらり----------------------------------------------------------------*/
.library {
 padding: 40px 0;
 background: #fff;
}
@media screen and (min-width: 768px) {
 .library {
  padding: 100px 0;
  background: #fff;
 }
}

.library__heading {
 text-align: center;
 margin-bottom: 80px;
}
@media screen and (min-width: 768px) {
 .library__heading {
  text-align: center;
  margin-bottom: 100px;
 }
}

.library__grid {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 30px;
}
.library__grid02 {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: 30px;
}
@media screen and (min-width: 768px) {
 .library__grid02 {
  display: flex;
  justify-content: center;
  gap: 30px;
 }
}

.library__item {
 display: flex;
 flex-direction: column;
 align-items: center;
 background: #0050b3;
 color: #fff;
 width: 32%;
 padding: 20px;
 border-radius: 6px;
}
@media screen and (min-width: 768px) {
 .library__item {
  width: 48%;
 }
}
@media screen and (min-width: 769px) {
 .library__item {
  width: 32%;
 }
}
.library__title {
 text-align: center;
 font-size: 2rem;
 margin-bottom: 20px;
 font-weight: bold;
}

.library__thumb img {
 width: 100%;
 height: auto;
 margin-bottom: 0px;
 border-radius: 4px;
}

.library__desc {
 width: 95%;
 font-size: 1.6rem;
 line-height: 1.8;
}
@media screen and (min-width: 768px) {
 .library__desc {
  width: 80%;
  font-size: 1.6rem;
  line-height: 1.8;
 }
}
.library__note {
 text-align: right;
 margin-top: 30px;
 font-size: 1.5rem;
 color: #666;
 line-height: 1.8;
}

@media screen and (max-width: 768px) {
 .library__item {
  width: 100%;
 }
}

/*-----------------------------------------------------------料金----------------------------------------------------------------*/

.pricing {
 padding: 70px 0;
 background: #fff;
}
@media screen and (min-width: 768px) {
 .pricing {
  padding: 100px 0;
  background: #fff;
 }
}

.pricing__heading {
 text-align: center;
 margin-bottom: 60px;
}

.pricing__desc {
 font-size: 2rem;
 font-weight: 600;
 margin-bottom: 50px;
 line-height: 1.8;
}
@media screen and (min-width: 768px) {
 .pricing__desc {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 50px;
 }
}

.pricing__table table {
 width: 100%;
 border-collapse: collapse;
 text-align: center;
 font-size: 2rem;
 table-layout: fixed;
}

.pricing__table th,
.pricing__table td {
 border: 1px solid #4970a0;
 padding: 10px 15px;
 line-height: 1.8;
 vertical-align: middle; /* 縦方向の中央揃え */
}

.pricing__table th {
 background: #0050b3;
 color: #fff;
 font-weight: bold;
}

.pricing__table td {
 background: #fff;
 color: #202124;
}

.pricing__table .price {
 color: #e60012;
 font-weight: bold;
 font-size: 2.5rem;
}
.pricing__note {
 margin-top: 20px;
 font-size: 1.5rem;
 color: #666;
}
@media screen and (min-width: 768px) {
 .pricing__note {
  text-align: right;
 }
}
@media screen and (max-width: 768px) {
 .pricing__table table,
 .pricing__table thead,
 .pricing__table tbody,
 .pricing__table th,
 .pricing__table td,
 .pricing__table tr {
  display: block;
 }
 .pricing__table td {
  text-align: left;
  padding-left: 10px;
 }
}
@media screen and (max-width: 768px) {
 .pricing__table td::before {
  content: attr(data-label); /* HTML側で data-label を使う */
  font-weight: bold;
  display: block;
  color: #0050b3;
  margin-bottom: 5px;
 }
}

/* カード表示用（スマホ専用） */
.pricing__cards {
 display: none;
}

@media screen and (max-width: 768px) {
 .pricing__table {
  display: none;
 }

 .pricing__cards {
  display: flex;
  flex-direction: column;
  gap: 30px;
 }

 .pricing__card {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
 }

 .pricing__card h4 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #0050b3;
 }

 .pricing__card ul {
  list-style: none;
  padding: 0;
  font-size: 1.5rem;
  color: #202124;
 }

 .pricing__card li {
  margin-bottom: 10px;
  line-height: 1.6;
 }

 .price {
  color: #e60012;
  font-size: 2rem;
  font-weight: bold;
 }
}

/*-----------------------------------------------------------料金----------------------------------------------------------------*/

.case {
 padding: 60px 0;
 background: #fff;
}
@media screen and (min-width: 768px) {
 .case {
  padding: 100px 0;
  background: #fff;
 }
}
.case__heading {
 text-align: center;
 margin-bottom: 60px;
}

.case__desc {
 text-align: center;
 font-size: 1.6rem;
 margin-bottom: 60px;
}

.case__list {
 display: flex;
 justify-content: space-between;
 gap: 30px;
 flex-wrap: wrap;
}

.case__item {
 width: 32%;
 background: #0050b3;
 color: #fff;
 padding: 20px;
 text-align: center;
 border-radius: 6px;
}

.case__company {
 font-size: 1.8rem;
 font-weight: bold;
 margin-bottom: 15px;
}

.case__img img {
 width: 100%;
 height: auto;
 margin-bottom: 15px;
 border-radius: 4px;
}

.case__comment {
 font-size: 1.4rem;
 line-height: 1.8;
}

@media screen and (max-width: 768px) {
 .case__item {
  width: 100%;
 }
}

/*-----------------------------------------------------------料金----------------------------------------------------------------*/
.faq {
 padding: 60px 0;
 background: #fff;
}
@media screen and (min-width: 768px) {
 .faq {
  padding: 100px 0;
  background: #fff;
 }
}

.faq__heading {
 text-align: center;
 margin-bottom: 60px;
}

.faq__desc {
 text-align: center;
 font-size: 1.6rem;
 margin-bottom: 60px;
}

.faq__item {
 background: #0050b3;
 color: #fff;
 padding: 20px 10px;
 margin-bottom: 30px;
 border-radius: 6px;
}
@media screen and (min-width: 768px) {
 .faq__item {
  background: #0050b3;
  color: #fff;
  padding: 30px 40px;
  margin-bottom: 30px;
  border-radius: 6px;
 }
}
.faq__qbox {
 display: flex;
 align-items: flex-start;
 gap: 20px;
 flex-direction: column;
}
@media screen and (min-width: 768px) {
 .faq__qbox {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  flex-direction: row;
 }
}

.faq__qicon {
 width: 80px;
 flex-shrink: 0;
}

.faq__content {
 flex-grow: 1;
}

.faq__question {
 font-size: 2rem;
 font-weight: bold;
 margin-bottom: 20px;
 margin-top: 10px;
}
@media screen and (min-width: 768px) {
 .faq__question {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  margin-top: 10px;
 }
}

.faq__answer {
 background: #fff;
 color: #202124;
 padding: 20px 10px;
 border-radius: 4px;
 font-size: 1.6rem;
 min-height: 180px;
 line-height: 1.8;
}
@media screen and (min-width: 768px) {
 .faq__answer {
  background: #fff;
  color: #202124;
  padding: 20px 30px;
  border-radius: 4px;
  font-size: 2rem;
  min-height: 180px;
  line-height: 1.8;
 }
}
/*-----------------------------------------------------------流れ----------------------------------------------------------------*/
.flow {
 background: #fff;
 padding: 70px 0;
 position: relative;
}
@media screen and (min-width: 768px) {
 .flow {
  background: #fff;
  padding: 100px 0;
  position: relative;
 }
}

.flow__heading {
 text-align: center;
 margin-bottom: 60px;
}

.flow__desc {
 text-align: center;
 font-size: 1.6rem;
 margin-bottom: 80px;
}

/* 中央縦線 */
.flow__line {
 position: absolute;
 top: 330px;
 left: 50%;
 width: 3px;
 height: calc(100% - 700px);
 background: #0050b3;
 z-index: 1;
}
@media screen and (min-width: 768px) {
 .flow__line {
  position: absolute;
  top: 330px;
  left: 50%;
  width: 3px;
  height: calc(100% - 700px);
  background: #0050b3;
  z-index: 1;
 }
}
@media screen and (min-width: 1024px) {
 .flow__line {
  position: absolute;
  top: 330px;
  left: 50%;
  width: 3px;
  height: calc(100% - 700px);
  background: #0050b3;
  z-index: 1;
 }
}

.flow__item {
 display: flex;
 justify-content: space-between;
 align-items: stretch;
 background: #0050b3;
 padding: 20px;
 margin-bottom: 60px;
 border-radius: 6px;
 position: relative;
 z-index: 2;
}
@media screen and (min-width: 768px) {
 .flow__item {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background: #0050b3;
  padding: 40px;
  margin-bottom: 60px;
  border-radius: 6px;
  position: relative;
  z-index: 2;
 }
}

.flow__content {
 display: flex;
 align-items: flex-start;
 gap: 30px;
 width: 100%;
 color: #fff;
 justify-content: space-around;
}
@media screen and (min-width: 768px) {
 .flow__content {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  color: #fff;
  justify-content: space-evenly;
 }
}

.flow__step-icon {
 width: 200px;
 flex-shrink: 0;
}

.flow__title {
 font-size: 2rem;
 text-align: center;
 font-weight: bold;
 margin-top: 10px;
 margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
 .flow__title {
  font-size: 3rem;
  text-align: left;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 20px;
 }
}

.flow__text {
 font-size: 1.6rem;
 line-height: 1.6;
}
.flow__text-block {
 width: 50%;
}
.flow__img-box {
 width: 50%;
 background: #fff;
 border-radius: 4px;
}
.flow__img-icon {
 min-width: 600px;
}
@media screen and (min-width: 768px) {
 .flow__img-icon {
  min-width: 360px;
 }
}
@media screen and (min-width: 1024px) {
 .flow__img-icon {
  min-width: 600px;
 }
}
.lp__closing {
 padding: 20px 0;
 text-align: center;
}
@media screen and (min-width: 768px) {
 .lp__closing {
  padding: 50px 0;
  text-align: center;
 }
}

.lp__closing img {
 max-width: 100%;
 height: auto;
}
@media screen and (max-width: 768px) {
 .flow__img-icon {
  min-width: auto;
  width: 100%;
 }
 .flow__content {
  flex-direction: column;
  align-items: center;
 }
 .flow__text-block,
 .flow__img-box {
  width: 100%;
 }
}

/*----------------------------------------------------------------メインビジュアル----------------------------------------------------------------*/
.footer_kv {
 position: relative;
 width: 100%;
 min-height: 600px;
 overflow: visible; /* ← 切れないように overflow を解除 */
 padding-top: 0px;
}
@media screen and (min-width: 768px) {
 .footer_kv {
  position: relative;
  width: 100%;
  min-height: 604px;
  overflow: visible; /* ← 切れないように overflow を解除 */
  padding-top: 60px;
 }
}
@media screen and (min-width: 1024px) {
 .footer_kv {
  position: relative;
  width: 100%;
  min-height: 730px;
  overflow: visible; /* ← 切れないように overflow を解除 */
  padding-top: 60px;
 }
}

.footer_kv .kv__bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: url("http://build-connect.jp/wp-content/themes/theme-2025/assets/images/home/blue-bg.png")
  center/cover no-repeat;
 z-index: 1;
}

.footer_kv .kv__inner {
 position: relative;
 z-index: 5;
 height: 100%;
 display: flex;
 align-items: center;
}

.footer_kv .kv__content {
 width: 100%;
 display: flex;
 justify-content: space-between;
 position: relative;
 flex-direction: column;
}

.footer_kv .kv__lead {
 width: 100%;
 position: relative;
 z-index: 200;
}

.footer_kv .kv__catch {
 font-size: 1.8rem;
 line-height: 1.8;
 font-weight: bold;
 margin: 20px 0;
 color: #fff;
}
@media screen and (min-width: 768px) {
 .footer_kv .kv__catch {
  font-size: 2rem;
  font-weight: bold;
  margin: 20px 0;
  color: #fff;
 }
}
@media screen and (min-width: 1024px) {
 .footer_kv .kv__catch {
  font-size: 3rem;
  font-weight: bold;
  margin: 30px 0;
  color: #fff;
 }
}

.footer_kv .kv__main-text {
 width: 100%;
 max-width: 900px;
 margin-bottom: 20px;
}
@media screen and (min-width: 767px) {
 .footer_kv .kv__main-text {
  width: 100%;
  max-width: 460px;
  margin-bottom: 20px;
 }
}
@media screen and (min-width: 769px) {
 .footer_kv .kv__main-text {
  width: 100%;
  max-width: 660px;
  margin-bottom: 20px;
 }
}
@media screen and (min-width: 819px) {
 .footer_kv .kv__main-text {
  width: 100%;
  max-width: 500px;
  margin-bottom: 20px;
 }
}
@media screen and (min-width: 1023px) {
 .footer_kv .kv__main-text {
  width: 100%;
  max-width: 700px;
  margin-bottom: 20px;
 }
}
@media screen and (min-width: 1025px) {
 .footer_kv .kv__main-text {
  width: 100%;
  max-width: 900px;
  margin-bottom: 20px;
 }
}

.footer_kv .kv__desc {
 margin-bottom: 20px;
 font-size: 3rem;
 line-height: 1.8;
 color: #fff;
}

.footer_kv .kv__bottom {
 position: absolute;
 bottom: -15%;
 left: 50%;
 transform: translateX(-50%);
 width: 100%;
 z-index: 155;
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
}

.footer_kv .kv__price {
 font-size: 3rem;
 padding-bottom: 20px;
 color: #fff;
}

.footer_kv .kv__price_small {
 font-size: 2rem;
 color: #fff;
}
.footer_kv .kv__btns {
 z-index: 155;
}
.footer_kv .kv__btn {
 position: absolute;
 bottom: -155%;
 left: 50%;
 transform: translateX(-50%);
 display: inline-block;
 background: #ff4537;
 color: #fff;
 padding: 20px 30px;
 border-radius: 50px;
 font-size: 1.8rem;
 font-weight: bold;
 text-align: center;
 white-space: nowrap;
}
@media screen and (min-width: 767px) {
 .footer_kv .kv__btn {
  position: absolute;
  bottom: -120%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  background: #ff4537;
  color: #fff;
  padding: 30px 50px;
  border-radius: 50px;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
 }
}
@media screen and (min-width: 769px) {
 .footer_kv .kv__btn {
  position: absolute;
  bottom: -60%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  background: #ff4537;
  color: #fff;
  padding: 30px 50px;
  border-radius: 50px;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
 }
}
@media screen and (min-width: 819px) {
 .footer_kv .kv__btn {
  position: absolute;
  bottom: -110%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  background: #ff4537;
  color: #fff;
  padding: 30px 50px;
  border-radius: 50px;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
 }
}
@media screen and (min-width: 1023px) {
 .footer_kv .kv__btn {
  position: absolute;
  bottom: -88%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  background: #ff4537;
  color: #fff;
  padding: 30px 50px;
  border-radius: 50px;
  font-size: 3.5rem;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
 }
}
@media screen and (min-width: 1025px) {
 .footer_kv .kv__btn {
  position: absolute;
  bottom: -50%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  background: #ff4537;
  color: #fff;
  padding: 30px 50px;
  border-radius: 50px;
  font-size: 3.5rem;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
 }
}
.footer_kv .kv__character {
 position: absolute;
 bottom: -120%;
 right: -6%;
 width: 87%;
 height: auto;
 max-height: 100%;
 z-index: 150;
}
@media screen and (min-width: 389px) {
 .footer_kv .kv__character {
  position: absolute;
  bottom: -111%;
  right: -6%;
  width: 87%;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 411px) {
 .footer_kv .kv__character {
  position: absolute;
  bottom: -98%;
  right: -6%;
  width: 87%;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 413px) {
 .footer_kv .kv__character {
  position: absolute;
  bottom: -97%;
  right: -6%;
  width: 87%;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 429px) {
 .footer_kv .kv__character {
  position: absolute;
  bottom: -88%;
  right: -6%;
  width: 87%;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 767px) {
 .footer_kv .kv__character {
  position: absolute;
  bottom: -13%;
  right: -3%;
  width: 60%;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 769px) {
 .footer_kv .kv__character {
  position: absolute;
  bottom: 37%;
  right: -3%;
  width: auto;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 819px) {
 .footer_kv .kv__character {
  position: absolute;
  bottom: 3%;
  right: -3%;
  width: 60%;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 1023px) {
 .footer_kv .kv__character {
  position: absolute;
  bottom: 9%;
  right: -2%;
  width: 60%;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}
@media screen and (min-width: 1025px) {
 .footer_kv .kv__character {
  position: absolute;
  bottom: 27%;
  right: 5%;
  width: auto;
  height: auto;
  max-height: 100%;
  z-index: 150;
 }
}

.footer_kv .kv__character img {
 display: block;
 max-height: 775px; /* これで画面内におさまるよう調整 */
 height: auto;
 width: auto;
}
@media screen and (min-width: 768px) {
 .footer_kv .kv__character img {
  display: block;
  max-height: 650px; /* これで画面内におさまるよう調整 */
  height: auto;
  width: auto;
 }
}
@media screen and (min-width: 1024px) {
 .footer_kv .kv__character img {
  display: block;
  max-height: 775px; /* これで画面内におさまるよう調整 */
  height: auto;
  width: auto;
 }
}

@media screen and (max-width: 768px) {
 .footer_kv .kv {
  height: auto;
  padding: 100px 0 50px;
 }
 .footer_kv .kv__content {
  flex-direction: column;
 }
 .footer_kv .kv__main-text {
  margin: 0 auto 20px;
 }
 .footer_kv .kv__bottom {
  flex-direction: column;
 }
}

.l-footer {
 background: #fff;
 padding: 20px 0;
 text-align: center;
}
@media screen and (min-width: 768px) {
 .l-footer {
  background: #fff;
  padding: 50px 0;
  text-align: center;
 }
}

.footer__logo img {
 height: 50px;
}
@media screen and (min-width: 768px) {
 .footer__logo img {
  max-width: 300px;
  height: auto;
 }
}

.l-footer__menu {
 margin-top: 20px;
 display: flex;
 gap: 24px;
 justify-content: center;
 flex-wrap: wrap;
 flex-direction: column;
}
@media screen and (min-width: 768px) {
 .l-footer__menu {
  margin-top: 20px;
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
 }
}
.l-footer__menu a {
 font-size: 1.4rem;
 color: #555;
 text-decoration: none;
}

.l-footer__menu a:hover {
 text-decoration: underline;
}

/* カード内の動画エリアの高さを固定 */
.library__thumb {
 position: relative; /* ← 追加で必要 */
 cursor: pointer;
 width: 100%;
 height: auto; /* ← 必要に応じて調整可能 */
 overflow: hidden;
 border-radius: 4px;
 margin-bottom: 15px;
 background: #000; /* 黒背景で見栄えを安定 */
}

/* 動画は枠内でトリミング＆縮小 */
.library__thumb video {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
/* 再生前の再生マーク */
.library__thumb::after {
 content: "▶";
 position: absolute;
 z-index: 10;
 font-size: 48px;
 font-weight: bold;
 color: #fff;
 opacity: 0.9;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 pointer-events: none;
}

/* 再生中は再生マークを非表示 */
.library__thumb.is-playing::after {
 display: none;
}
/* 画像だけのアイテムは▶を非表示 */
.no-video .library__thumb::after {
 display: none !important;
}
.kv__btn02 {
 display: inline-block;
 background: #ff4537;
 color: #fff;
 padding: 20px 30px;
 border-radius: 50px;
 font-size: 2.4rem;
 font-weight: bold;
 text-align: center;
 white-space: nowrap;
}
@media screen and (min-width: 768px) {
 .kv__btn02 {
  display: inline-block;
  background: #ff4537;
  color: #fff;
  padding: 30px 50px;
  border-radius: 50px;
  font-size: 5rem;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
 }
}
@media screen and (min-width: 1024px) {
 .kv__btn02 {
  display: inline-block;
  background: #ff4537;
  color: #fff;
  padding: 30px 50px;
  border-radius: 50px;
  font-size: 5rem;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
 }
}
.pricing__btn {
 display: flex;
 justify-content: center;
 padding-top: 40px;
}
.flow__btn {
 display: flex;
 justify-content: center;
 padding-top: 10px;
}
@media screen and (min-width: 768px) {
 .flow__btn {
  display: flex;
  justify-content: flex-start;
  padding-top: 10px;
 }
}
.flow__btn-white {
 display: inline-block;
 padding: 12px 20px;
 margin-top: 20px;
 background-color: #ffffff;
 color: #0052b4; /* 青系のコーポレートカラーに寄せています */
 border: 2px solid #ffffff;
 border-radius: 30px;
 font-weight: 600;
 text-decoration: none;
 font-size: 20px;
 transition: all 0.3s ease;
}
@media screen and (min-width: 768px) {
 .flow__btn-white {
  display: inline-block;
  padding: 12px 30px;
  margin-top: 20px;
  background-color: #ffffff;
  color: #0052b4; /* 青系のコーポレートカラーに寄せています */
  border: 2px solid #ffffff;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  font-size: 20px;
  transition: all 0.3s ease;
 }
}
.flow__btn-white:hover {
 background-color: transparent;
 color: #ffffff;
 border-color: #ffffff;
}
/* SNSリンクボタン */
.social-links {
 background: #fff;
 padding: 40px 0;
}

.social-links__list {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
}

@media screen and (min-width: 768px) {
 .social-links__list {
  grid-template-columns: repeat(4, 1fr);
 }
}

.social-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 12px;

 padding: 18px 20px;
 border: 1.5px solid #2f7ef2;
 border-radius: 6px;

 color: #2f7ef2;
 font-weight: bold;
 font-size: 1.6rem;
 text-decoration: none;

 transition: background 0.3s ease, color 0.3s ease;
}

.social-btn img {
 width: 22px;
 height: 22px;
}