@charset "UTF-8";
/* mixin */
/* インデント調整 */
/* センター寄せのインデント調整 */
/* 動作の時間（1001px以上の時,1000px以下の時） */
/* 行数によるテキスト変換（501px以上の時,500px以下の時） */
/* フォルダ内の背景画像取得 */
/* 丸角(丸角のpx数,丸角を適用するカドの指定) */
/* container生成（要素の幅,余白,位置【center left right】） */
/* コンテンツの中央配置 */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700&display=swap");
/* flexのfit */
/* template color */
/* custom color */
/* font */
/* common */
.l-section + .l-section {
  margin-top: clamp(104px, 7.5vw, 120px);
}

.c-lead {
  font-size: clamp(1.8rem, 1.935483871vw, 2.4rem);
  color: #FF5F00;
  margin-bottom: clamp(24px, 2vw, 32px);
  line-height: 1.5;
}

/* community */
.p-top-features__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
@media screen and (min-width: 1001px) {
  .p-top-features__cards .p-top-features__item {
    flex-direction: column;
    gap: 24px;
    border-radius: 220px;
    width: calc(32% - 12px);
    padding: 40px 52px 72px;
  }
}
@media screen and (min-width: 1001px) and (max-width: 1200px) {
  .p-top-features__cards .p-top-features__item {
    padding: 40px 40px 56px;
  }
}
.p-top-features__cards .p-top-features__content {
  text-align: center;
}

.comm_columns {
  display: flex;
  gap: 40px 72px;
  overflow: hidden;
}
@media screen and (max-width: 1200px) {
  .comm_columns {
    gap: 40px 56px;
  }
}
@media screen and (max-width: 828px) {
  .comm_columns {
    flex-direction: column;
  }
}

@media screen and (min-width: 829px) {
  .comm_columns__img {
    margin-right: -2.3%;
  }
}
@media screen and (max-width: 828px) {
  .comm_columns__img {
    width: 75%;
    margin: auto;
  }
}
@media screen and (max-width: 500px) {
  .comm_columns__img {
    width: 100%;
  }
}
.comm_columns__img img {
  display: block;
}
@media screen and (min-width: 829px) {
  .comm_columns__img img {
    width: 45.5vw;
  }
}

.comm_columns__inner {
  flex: 1;
}

.comm_insta {
  position: relative;
  overflow: hidden;
  padding-top: clamp(104px, 18.75vw, 300px);
  padding-bottom: clamp(32px, 17.125vw, 274px);
  width: 100%;
  height: 100%;
  background-image: url("../images/community/bg_insta.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.comm_insta::before, .comm_insta::after {
  content: "";
  position: absolute;
  width: 100%;
  aspect-ratio: 1200/134;
  height: auto;
  background-image: url("../images/community/icon_wave.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  left: 0;
  z-index: 1;
}
.comm_insta::before {
  top: -2px;
  transform: rotate(180deg);
}
.comm_insta::after {
  bottom: -2px;
}
@media screen and (max-width: 1000px) {
  .comm_insta {
    padding-bottom: 0;
  }
}

.comm_insta__content {
  color: #fff;
}
@media screen and (min-width: 1001px) {
  .comm_insta__content {
    width: 60%;
    padding-right: clamp(48px, 9vw, 144px);
  }
}
@media screen and (max-width: 1000px) {
  .comm_insta__content {
    margin-bottom: 48px;
  }
}

.comm_insta__lead {
  font-size: clamp(1.8rem, 1.935483871vw, 2.4rem);
  line-height: 1.8;
  margin-bottom: clamp(24px, 2.5vw, 40px);
}

.comm_insta__wrap {
  position: absolute;
  right: 3%;
  top: 0;
  overflow: hidden;
}
@media screen and (max-width: 1000px) {
  .comm_insta__wrap {
    position: static;
    height: 360px;
  }
}

.comm_insta__scroll {
  display: flex;
  flex-direction: column;
  gap: 6.8px;
  animation: img-slide 60s linear infinite;
}

.comm_insta__down {
  animation-direction: reverse;
}

.comm_insta__imgs {
  display: flex;
  gap: 8px;
}

.comm_insta__pic {
  display: block;
  border-radius: 8.5px;
  overflow: hidden;
}
.comm_insta__pic img {
  display: block;
}
@media screen and (min-width: 1001px) {
  .comm_insta__pic img {
    width: 19.5vw;
  }
}

@keyframes img-slide {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-50% - 3.4px));
  }
}
.comm_insta__btn {
  margin-top: clamp(32px, 4vw, 64px);
}

.comm_faq__item {
  background-color: #fff;
  border-radius: 10px;
  padding: 40px;
}
.comm_faq__item + .comm_faq__item {
  margin-top: 16px;
}

.comm_faq__head {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(1.6rem, 1.4516129032vw, 1.8rem);
  font-weight: bold;
  margin-bottom: clamp(16px, 1.5vw, 24px);
}

.comm_faq__desc {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.comm_faq__icon {
  display: flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  aspect-ratio: 1/1;
  min-width: 51px;
  height: auto;
  border-radius: 10px;
  font-weight: bold;
  font-size: clamp(1.6rem, 1.4516129032vw, 1.8rem);
}
@media screen and (max-width: 500px) {
  .comm_faq__icon {
    min-width: 40px;
  }
}

.comm_faq__ques {
  color: #fff;
  background-color: #76C700;
}

.comm_faq__ans {
  color: #76C700;
  background-color: #F9F7F2;
}

.comm_banner {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
}
.comm_banner::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/community/bg_community_banner.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.comm_banner:hover {
  opacity: 1;
}
.comm_banner:hover .c-btn_line::before {
  transform: translateX(50%);
}
.comm_banner:hover .c-btn_line::after {
  transform: rotate(180deg) translateX(50%);
}

.comm_banner__columns {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding-left: 32px;
  padding-right: 32px;
  padding-top: clamp(48px, 5.5vw, 88px);
  padding-bottom: clamp(48px, 5.5vw, 88px);
}
@media screen and (max-width: 828px) {
  .comm_banner__columns {
    flex-direction: column;
    align-items: center;
  }
}

.comm_banner__head {
  font-size: clamp(1.8rem, 1.7741935484vw, 2.2rem);
  line-height: 1.6;
  margin-bottom: 24px;
}

@media screen and (min-width: 830px) {
  .comm_banner__img {
    width: 41.33%;
  }
}
@media screen and (max-width: 828px) {
  .comm_banner__img {
    width: 50%;
  }
}
@media screen and (max-width: 500px) {
  .comm_banner__img {
    width: 100%;
  }
}

@media screen and (min-width: 829px) {
  .comm_btn .c-btn {
    margin-inline: unset;
  }
}
.comm_btn .c-btn b {
  color: #333;
}
.comm_btn .c-btn::after {
  background-image: url("../images/common/icon-insta.svg");
  border-radius: 0;
  background-color: transparent;
}
@media screen and (max-width: 1000px) {
  .comm_btn .c-btn {
    width: 280px;
    aspect-ratio: 280/64;
  }
  .comm_btn .c-btn::before {
    width: 272px;
  }
}/*# sourceMappingURL=custom.css.map */