@charset "UTF-8";

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

/*
TITLE
================================================ */
.heading--2 {
  font-size: 20px;
}
@media (max-width: 820px) {
  .heading--2 {
    font-size: 4.8vw;
  }
}

/*
まずコースの違いを確認しましょう
================================================ */
.differences {
  padding: 60px 20px;
  background-color: var(--gray-bg);
}
.differences .section-inner {
  margin: 0 auto;
  max-width: 1000px;
}
.differences_text {
  text-align: center;
}
.differences_text .differencesU {
  color: var(--teal);
}
.differences_text .differencesT {
  color: var(--red);
}

.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;
}

@media (max-width: 820px) {
  .differences {
    padding: 10.667vw 5.333vw;
  }
  .differences_text {
    text-align: left;
  }
  .l-course {
    flex-direction: column;
    gap: 5.333vw;
    margin: 0 0 10.667vw;
  }
  .course {
    width: 100%;
  }
  .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;
  }
}

/*
コース詳細
================================================ */
.course-details {
  padding: 70px 20px;
}
.course-details .section-inner {
  margin: 0 auto;
  max-width: 1000px;
}
.course-details .heading--3 {
  margin: 0 0 25px;
  padding: 16px 20px;
  color: var(--white);
  line-height: 1;
  text-align: left;
}
.course-details .detail {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}
.detail-type {
  margin-bottom: 20px;
  padding: 12px 15px;
  line-height: 1;
  font-weight: 500;
  background: #e5e5e5;
}
.detail-section + .detail-type {
  margin-top: 40px;
}
.course-details .detail-section + .detail-section {
  margin-top: 20px;
}
.course-details .detail-section__heading {
  margin: 0 0 .5em;
  font-size: 16px;
  font-weight: 500;
}
.course-details .detail-section .detail-item {
  padding: 10px 15px;
  font-size: 14px;
  border: 1px solid #d1d1d1;
}
.course-details .detail-note {
  margin-top: 20px;
  font-size: 14px;
}
.course-details .detail-item__heading {
  margin: 0;
  font-weight: 500;
}
.course-details .detail-item__text + .detail-item__heading {
  margin-top: .5em;
}
.course-details .detailU .detail-item__heading {
  color: var(--teal);
}
.course-details .detailT .detail-item__heading {
  color: var(--red);
}
.point-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.point-item::before {
  content: "• ";
}
.headingU {
  background-color: var(--teal);
}
.headingT {
  background-color: var(--red);
}
.detail_payment {
  display: inline-block;
  margin-bottom: 10px;
  padding: 0 7px;
  background: #e5e5e5;
}
.detail_price {
  margin-bottom: 10px;
  font-size: 24px;
}
.detail_price span {
  font-size: 12px;
}
.detail_description {
  margin-bottom: 1em;
  font-size: 14px;
}
.detail-point {
  padding: 15px;
  font-size: 14px;
}
.detail-point .point-title {
  margin-bottom: .5em;
  font-size: 16px;
  line-height: 1;
}

/* Uコース */
.detailU {
  padding-bottom: 80px;
}
.detailU .point-title {
  color: var(--teal);
}
.detailU .detail-point {
  border: 1px solid var(--teal);
}

/* Tコース */
.detailT .point-title {
  color: var(--red);
}
.detailT .detail-point {
  border: 1px solid var(--red);
}

/* セット内容 */
.detail-set {
  margin-top: 30px;
}
.detail-set_title {
  margin-bottom: 10px;
}

/* アコーディオン */
.course-details summary {
  position: relative;
  padding: 16px 46px 16px 20px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}
.course-details .detailT summary {
  background: #f4dfdf;
}
.course-details summary::-webkit-details-marker {
  display: none;
}
.course-details summary::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 10px solid var(--brown);
  border-bottom: 0;
}

.course-details details {
  overflow: hidden;
  background: var(--white);
}
.course-details details:first-of-type {
  margin-top: 40px;
}
.course-details details + details {
  margin-top: 20px;
}
.course-details details[open] summary::after {
  border-top: 0;
  border-bottom: 10px solid var(--brown);
}
.course-details .details-content {
  position: relative;
  margin: 30px 0;
}
.course-details details .img_center {
  margin: 0 auto;
}

@media (max-width: 820px) {
  .course-details {
    padding: 10.667vw 5.333vw;
  }
  .course-details .heading--3 {
    margin: 0 0 5.333vw;
    padding: 3.2vw 4vw;
    font-size: 4vw;
  }
  .course-details .detail {
    flex-direction: column;
    gap: 8vw;
  }
  .detail-type {
    margin-bottom: 5.333vw;
    padding: 2.667vw;
  }
  .detail-section + .detail-type {
    margin-top: 8vw;
  }
  .course-details .detail-section + .detail-section {
    margin-top: 5.333vw;
  }
  .course-details .detail-section__heading {
    font-size: 3.733vw;
  }
  .course-details .detail-section .detail-item {
    padding: 2.133vw 2.667vw;
    font-size: 3.467vw;
  }
  .course-details .detail-note {
    margin-top: 5.333vw;
    font-size: 3.467vw;
  }
  .detail_payment {
    margin-bottom: 2.133vw;
    padding: 0 1.6vw;
  }
  .detail_price {
    margin-bottom: 1.6vw;
    font-size: 5.333vw;
  }
  .detail_price span {
    font-size: 2.933vw;
  }
  .detail_description {
    font-size: 3.467vw;
  }
  .detail-point {
    padding: 3.733vw 2.667vw;
    font-size: 3.467vw;
  }
  .detail-point .point-title {
    font-size: 4vw;
  }

  /* Uコース */
  .detailU {
    padding-bottom: 10.667vw;
  }

  /* セット内容 */
  .detail-set {
    margin-top: 5.333vw;
  }
  .detail-set_title {
    margin-bottom: 2.667vw;
  }

  /* アコーディオン */
  .course-details summary {
    padding: 2.667vw 9.067vw 2.667vw 4vw;
    font-size: 4vw;
  }
  .course-details summary::after {
    top: 5.867vw;
    right: 3.733vw;
    border-right: 1.067vw solid transparent;
    border-left: 1.067vw solid transparent;
    border-top: 1.6vw solid var(--brown);
  }
  .course-details details:first-of-type {
    margin-top: 8vw;
  }
  .course-details details + details {
    margin-top: 5.333vw;
  }
  .course-details details[open] summary::after {
    border-bottom: 1.6vw solid var(--brown);
  }
  .course-details .details-content {
    margin: 5.333vw 0;
  }
}

/*
Uコース・Tコース 詳細比較（葬祭）
================================================ */
.comparison {
  padding: 70px 20px;
  background-color: var(--gray-bg);
}
.comparison .section-inner {
  margin: 0 auto;
  max-width: 1000px;
  color: #000;
}
.l-comparison_table {
  padding: 16px 30px;
  background: var(--white);
} 
.comparison_table {
  width: 100%;
  background: var(--white);
  border-collapse: collapse;
}
.comparison_table thead th {
  padding: 2px 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--white);
}
.comparison_table .headServices {
  border-right: 4px solid var(--white);
  background: var(--brown);
}
.comparison_table .headU {
  width: 170px;
  border-right: 4px solid var(--white);
  background: var(--teal);
}
.comparison_table .headT {
  width: 170px;
  background: var(--red);
}
.comparison_table tbody th {
  padding: 14px 25px;
  width: 140px;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid #d1d1d1;
}
.comparison_table td {
  padding: 14px 30px;
  text-align: center;
  border-bottom: 1px solid #d1d1d1;
}
.comparison_table tbody th.other,
.comparison_table tr:last-of-type td {
  border-bottom: none;
}
.comparison_table td.service-item {
  text-align: left;
}
.comparison_note {
  margin: 10px;
  font-size: 13px;
  line-height: 1.7;
}


@media (max-width: 820px) {
  .comparison {
    padding: 10.667vw 5.333vw;
  }
  .l-comparison_table {
    padding: 2.667vw;
  }
  .comparison_table thead th {
    padding: 0.533vw 0;
    font-size: 3.2vw;
  }
  .comparison_table .headServices {
    border-right: 0.533vw solid var(--white);
  }
  .comparison_table .headU {
    width: 16vw;
    border-right: 0.533vw solid var(--white);
  }
  .comparison_table .headT {
    width: 16vw;
  }
  .comparison_table tbody th {
    padding: 2.667vw;
    width: 6em;
    font-size: 2.933vw;
  }
  .comparison_table td {
    padding: 2.667vw;
    font-size: 2.933vw;
  }
  .comparison_note {
    margin: 2.667vw;
    font-size: 2.933vw;
  }
}