@charset "UTF-8";

/*
PAGE TITLE
================================================ */
.page-title {
  background-image: image-set(
    url("../img/first/bg_pageTitle.jpg?ver2") 1x,
    url("../img/first/bg_pageTitle@2x.jpg?ver2") 2x
  )
}

/*
TITLE
================================================ */
.merit-small-title {
  margin: 0 0 20px;
  font-size: 20px;
  text-align: center;
}
.title-ceremonies {
  color: var(--red);
}
.title-funeral {
  color: var(--teal);
}

@media (max-width: 820px) {
  .merit-small-title {
    margin: 0 0 4vw;
    font-size: 4.267vw;
  }
}

/*
メリット
================================================ */
.merit {
  padding: 70px 20px;
  background-color: var(--gray-bg);
}
.merit .section-inner {
  margin: 0 auto;
  max-width: 1000px;
}

/* セレモニアの冠婚 */
.merit .button_link {
  font-size: 14px;
}
.merit_list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  list-style: none;
  margin: 0 auto 60px;
  padding: 0;
}
.merit_item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  width: 320px;
  background: var(--white);
  border-radius: 5px;
}
.merit_title {
  font-size: 20px;
  text-align: center;
}
.merit_text {
  font-size: 14px;
}
.merit_img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 181px;
}
.merit_img.img_wedding img {
  width: 227px;
}
.merit_img.img_comingOfAgeCeremony img {
  width: 115px;
}
.merit_img.img_shichiGoSan img {
  width: 150px;
}

/* セレモニアの葬儀 */
.funeral {
  padding: 50px 36px;
  background: var(--white);
  border-radius: 15px;
}
.funeral_description {
  text-align: center;
  line-height: 2;
}
.img_funeral {
  display: block;
  margin: 40px auto;
  width: 521px;
}
.point_list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: num;
}
.point_item {
  display: flex;
  align-items: center;
  gap: 25px;
  counter-increment: num;
}
.point_item .point_num {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  color: var(--white);
  background: var(--teal);
  border-radius: 50%;
  line-height: 1;
}
.point_item .point_num span::before {
  content: counter(num, decimal);
  font-size: 33px;
}
.point_item + .point_item {
  margin-top: 50px;
}
.point_title {
  font-size: 20px;
}
.point_text {
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .merit {
    padding: 10.667vw 5.333vw;
  }

  /* セレモニアの冠婚 */
  .merit .button_link {
    font-size: 3.733vw;
  }
  .merit_list {
    gap: 4vw;
    margin: 0 auto 10.667vw;
  }
  .merit_item {
    gap: 4vw;
    padding: 6.4vw 5.333vw;
    width: auto;
    border-radius: 1.333vw;
  }
  .merit_title {
    font-size: 4.8vw;
  }
  .merit_text {
    font-size: 3.733vw;
  }
  .merit_img {
    height: 33.6vw;
  }
  .merit_img.img_wedding img {
    width: 48vw;
  }
  .merit_img.img_comingOfAgeCeremony img {
    width: 21.333vw;
  }
  .merit_img.img_shichiGoSan img {
    width: 29.333vw;
  }

  /* セレモニアの葬儀 */
  .funeral {
    padding: 6.4vw 5.333vw;
    border-radius: 1.333vw;
  }
  .funeral_description {
    text-align: left;
  }
  .img_funeral {
    margin: 5.333vw auto 10.667vw;
    width: auto;
  }
  .point_item {
    flex-direction: column;
    gap: 2.667vw;
  }
  .point_item .point_num {
    width: 14.933vw;
    height: 14.933vw;
    font-size: 2.667vw;
  }
  .point_item .point_num span::before {
    font-size: 5.333vw;
  }
  .point_item + .point_item {
    margin-top: 8vw;
  }
  .point_title {
    font-size: 4.267vw;
    margin-bottom: .5em;
    line-height: 1.5;
  }
  .point_text {
    font-size: 3.733vw;
  }
}

/*
コース内容
================================================ */
.course-details {
  padding: 70px 20px;
}
.course-details .section-inner {
  margin: 0 auto;
  max-width: 1000px;
}

.l-course {
  display: flex;
  gap: 20px;
  margin: 0 0 40px;
}
.course {
  width: calc(50% - 10px);
  background: var(--white);
}
.courseU {
  border: 2px solid var(--teal);
  border-radius: 5px;
}
.courseT {
  border: 2px solid var(--red);
  border-radius: 5px;
}

.course .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  color: var(--white);
}
.courseU .title {
  background: var(--teal);
}
.courseT .title {
  background: var(--red);
}
.type {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 24px;
}
.type span {
  padding: 3px 10px;
  color: var(--brown);
  font-size: 16px;
  background: var(--white);
}
.price {
  font-size: 24px;
  line-height: 1;
  text-align: right;
}
.currency {
  font-size: 17px;
}
.numberOfTimes {
  font-size: 14px;
}
.course_text {
  padding: 13px 20px;
  font-size: 14px;
}
.courseU .scene {
  display: inline-block;
  margin-left: 20px;
  font-size: 20px;
  color: var(--teal);
}
.courseU .course_description {
  margin-top: 30px;
}
.courseT .scene {
  margin: 0.5em 0;
  color: var(--red);
  font-size: 16px;
}

/* 互助会の払い込みの割引特典 */
.discount {
  margin: 0 0 40px;
  padding: 40px 90px;
  background-color: #fffcf5;
  border-radius: 12px;
  border: 2px solid #a09065;
}
.discount-title {
  margin-bottom: 30px;
  color: #a09065;
  font-size: 20px;
  text-align: center;
}
.discount_list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.discount_item {
  padding: 20px 0;
  font-size: 14px;
  border-top: 1px solid #ddd;
}
.discount_label {
  display: inline-block;
  margin: 0 0 10px;
  padding: 0 5px;
  color: var(--white);
}
.discount_standard .discount_label {
  background: var(--brown);
}
.discount_split .discount_label {
  background: var(--teal);
}
.discount_inOneGo .discount_label {
  background: var(--red);
}
.discount_emphasis {
  margin-bottom: .5em;
  font-size: 18px;
}
.discount_split .discount_emphasis {
  color: var(--teal);
}
.discount_inOneGo .discount_emphasis {
  color: var(--red);
}
span.discount_emphasis {
  font-size: 22px;
}

@media (max-width: 820px) {
  .course-details {
    padding: 10.667vw 5.333vw;
  }
  .l-course {
    flex-direction: column;
    gap: 5.333vw;
    margin: 0 0 10.667vw;
  }
  .course {
    width: auto;
  }
  .courseU {
    border: 0.533vw solid var(--teal);
    border-radius: 1.333vw;
  }
  .courseT {
    border: 0.533vw solid var(--red);
    border-radius: 1.333vw;
  }
  .course .title {
    padding: 2.667vw 4vw;
  }
  .type {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6vw;
    font-size: 5.867vw;
    line-height: 1;
  }
  .type span {
    padding: 1.067vw 1.6vw;
    font-size: 3.2vw;
  }
  .price {
    font-size: 5.867vw;
  }
  .currency {
    font-size: 4vw;
  }
  .numberOfTimes {
    font-size: 3.467vw;
  }
  .course_text {
    padding: 2.667vw 4vw;
    font-size: 3.467vw;
  }
  .courseU .scene {
    margin-left: 2.667vw;
    font-size: 4.8vw;
  }
  .courseU .course_description {
    margin-top: 2.667vw;
  }
  .courseT .scene {
    font-size: 4vw;
  }

  /* 互助会の払い込みの割引特典 */
  .discount {
    margin: 0 0 8vw;
    padding: 5.333vw;
    border-radius: 1.333vw;
    border: 0.533vw solid #a09065;
  }
  .discount-title {
    margin-bottom: 4vw;
    font-size: 4.8vw;
  }
  .discount_item {
    padding: 4vw 0;
    font-size: 3.467vw;
  }
  .discount_label {
    margin: 0 0 2.133vw;
    padding: 0 1.333vw;
    font-size: 3.2vw;
  }
  .discount_emphasis {
    font-size: 4.267vw;
  }
  span.discount_emphasis {
    font-size: 5.333vw;
  }
}

/*
互助会の会員特典
================================================ */
.benefits {
  padding: 0 20px 70px;
}
.benefits .section-inner {
  margin: 0 auto;
  max-width: 1000px;
}
.benefits h2 {
  margin: 0 0 70px;
}
.benefits_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: numBenefits;
}
.benefits_item {
  position: relative;
  padding: 35px 10px 20px;
  width: 326px;
  text-align: center;
  border: 1px solid var(--brown);
  counter-increment: numBenefits;
}
.benefits_item::before {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  content: counter(numBenefits, decimal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 24px;
  width: 50px;
  height: 50px;
  background: var(--brown);
  border-radius: 50%;
}
.benefits_img {
  width: 100%;
}
.benefits_text {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.5;
}
.benefits_text span {
  font-size: 13px;
}

@media (max-width: 820px) {
  .benefits {
    padding: 0 5.333vw 10.667vw;
  }
  .benefits h2 {
    margin: 0 0 10.667vw;
  }
  .benefits_list {
    gap: 10.667vw 0;
  }
  .benefits_item {
    padding: 8vw 2.667vw 5.333vw;
    width: 100%;
  }
  .benefits_item::before {
    top: -5.333vw;
    font-size: 5.333vw;
    width: 10.667vw;
    height: 10.667vw;
  }
  .benefits_text {
    margin-top: 2.667vw;
    font-size: 4.267vw;
  }
  .benefits_text span {
    font-size: 3.2vw;
  }
}

/*
ご加入までの流れ
================================================ */
.flow {
  padding: 70px 20px;
}
.flow .section-inner {
  margin: 0 auto;
  max-width: 1000px;
}
.flow .heading--3 {
  padding: 0 10px 6px;
  font-size: 18px;
  text-align: left;
  border-bottom: 1px solid var(--brown);
}
.flow_item:not(:last-of-type) .heading--3 {
  margin: 0 0 40px;
}
.flow_item:last-of-type .heading--3 {
  margin: 0 0 20px;
}
.flow_list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow_item:not(:last-of-type) {
  padding: 0 0 60px;
}
.flow_heading {
  margin-bottom: 0.25em;
  font-size: 18px;
  font-weight: 700;
}
.flow_text {
  font-weight: 400;
}

/* 事前にご準備いただくもの */
.preparation_list {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 0;
}
.preparation_item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  gap: 10px;
  width: 232px;
  height: 232px;
  border-radius: 50%;
  background: #f4f0e9;
}
.preparation_text {
  line-height: 1.5;
}

/* お申し込みの手続き */
.application_list {
  position: relative;
  counter-reset: numStep;
  list-style: none;
  margin: 0;
  padding: 0;
}
.application_list::before {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  content: "";
  display: block;
  width: 3px;
  height: 94%;
  background: var(--brown);
  z-index: -1;
}
.application_item {
  display: flex;
  align-items: center;
  gap: 25px;
  counter-increment: numStep;
  padding: 0 10px;
}
.application_item + .application_item {
  margin-top: 40px;
}
.application_num {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  font-weight: 500;
  text-align: center;
  color: var(--white);
  background: var(--brown);
  border-radius: 50%;
  line-height: 1;
}
.application_num span::before {
  content: counter(numStep, decimal);
  font-size: 40px;
}
@media (max-width: 820px) {
  .flow {
    padding: 10.667vw 5.333vw;
  }
  .flow .heading--3 {
    padding: 0 0 1.067vw;
    font-size: 4.267vw;
  }
  .flow_item:not(:last-of-type) .heading--3 {
    margin: 0 0 5.333vw;
  }
  .flow_item:last-of-type .heading--3 {
    margin: 0 0 5.333vw;
  }
  .flow_item:not(:last-of-type) {
    padding: 0 0 10.667vw;
  }
  .flow_heading {
    font-size: 4.267vw;
    line-height: 1.5;
  }

  /* 事前にご準備いただくもの */
  .preparation_list {
    gap: 2.133vw;
  }
  .preparation_item {
    gap: 2.133vw;
    width: 28vw;
    height: 28vw;
  }
  .preparation_item img {
    width: 45%;
  }
  .preparation_text {
    font-size: 2.933vw;
    line-height: 1.3;
  }
  
  /* お申し込みの手続き */
  .application_list::before {
    left: 6.667vw;
    width: 0.533vw;
    height: 90%;
  }
  .application_item {
    gap: 2.667vw;
    padding: 0;
    align-items: flex-start;
  }
  .application_item + .application_item {
    margin-top: 5.333vw;
  }
  .application_num {
    width: 13.333vw;
    height: 13.333vw;
    font-size: 3.2vw;
  }
  .application_num span::before {
    font-size: 5.333vw;
  }
}