/* =========================================================
   Set Course Detail
   セットコース詳細ページ
========================================================= */

#set-course-detail {
  --sc-text: #222;
  --sc-text-sub: #666;
  --sc-text-light: #888;

  --sc-green: #007c3f;
  --sc-green-dark: #006634;
  --sc-green-soft: #f1f7f3;

  --sc-bg: #fff;
  --sc-bg-soft: #f7f7f5;
  --sc-bg-warm: #faf9f6;

  --sc-content-width: 1180px;

  width: 100%;
  color: var(--sc-text);
}


/* =========================================================
   共通コンテナ
========================================================= */

#set-course-detail .set-course-content {
  width: min(var(--sc-content-width), calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
}


/* =========================================================
   Hero
========================================================= */

#set-course-detail .set-course-hero {
  padding: 46px 0 56px;
  position: relative;
  overflow: hidden;

  background-image:
    radial-gradient(
      circle at 12% 18%,
      rgba(0, 119, 0, 0.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 18%,
      rgba(255, 102, 0, 0.16),
      transparent 26%
    ),
    linear-gradient(
      135deg,
      rgba(246, 251, 246, 0.88) 0%,
      rgba(255, 255, 255, 0.80) 55%,
      rgba(255, 249, 241, 0.88) 100%
    ),
    url("https://ceremo.jp/wp/wp-content/themes/ceremony/images/set-course/top_slide_01_03_pc.webp");

  background-size:
    cover,
    cover,
    cover,
    cover;

  background-position:
    center,
    center,
    center,
    center;

  background-repeat: no-repeat;

  border-bottom: 1px solid var(--course-border);
}

#set-course-detail .set-course-hero__inner {
  width: min(920px, calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

#set-course-detail .set-course-hero__category {
  margin: 0 0 8px;
  color: var(--sc-green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

#set-course-detail .set-course-hero__title {
  margin: 0;
  padding: 0;

  color: var(--sc-text);

  font-size: clamp(32px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;

  text-align: center;
}

#set-course-detail .set-course-hero__lead {
  margin: 14px 0 0;

  color: var(--sc-text-sub);

  font-size: 14px;
  line-height: 1.8;
}


/* =========================================================
   Price
========================================================= */

#set-course-detail .set-course-price {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;

  max-width: 760px;
  margin: 36px auto 0;
}

#set-course-detail .set-course-price__item {
  padding: 25px 22px;

  background: var(--sc-bg-soft);

  border: 0;
  border-radius: 10px;
}

#set-course-detail .set-course-price__item--member {
  background: var(--sc-green-soft);
}

#set-course-detail .set-course-price__label {
  display: block;

  margin-bottom: 9px;

  color: var(--sc-text-sub);

  font-size: 13px;
  font-weight: 700;
}

#set-course-detail .set-course-price__item--member
.set-course-price__label {
  color: var(--sc-green);
}

#set-course-detail .set-course-price__label small {
  display: block;

  margin-top: 3px;

  font-size: 10px;
  font-weight: 400;
}

#set-course-detail .set-course-price__amount {
  margin: 0;

  line-height: 1;
  white-space: nowrap;
}

#set-course-detail .set-course-price__amount strong {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

#set-course-detail .set-course-price__item--member
.set-course-price__amount strong {
  color: var(--sc-green);
}

#set-course-detail .set-course-price__amount > span {
  margin-left: 3px;

  font-size: 16px;
  font-weight: 700;
}

#set-course-detail .set-course-price__amount small {
  margin-left: 3px;

  color: var(--sc-text-sub);

  font-size: 11px;
  font-weight: 400;
}

#set-course-detail .set-course-price__tax-excluded {
  margin: 9px 0 0;

  color: var(--sc-text-light);

  font-size: 11px;
}


/* =========================================================
   Course Hero
========================================================= */

#set-course-detail .set-course-hero {
  padding: 44px 0 62px;
}

#set-course-detail .set-course-hero__inner {
  width: min(920px, calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;

  text-align: center;
}


/* カテゴリ */

#set-course-detail .set-course-hero__category {
  margin: 0 0 10px;

  color: var(--sc-green, #007c3f);

  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;

  letter-spacing: 0.08em;
}


/* コース名 */

#set-course-detail .set-course-hero__title {
  margin: 0;
  padding: 0;

  color: var(--sc-text, #222);

  font-size: clamp(34px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.25;

  letter-spacing: 0.035em;
}


/* =========================================================
   コースの意味を伝える補足

   「Cコース」だけでは内容が分からないため、
   コース名の直下に最も重要な補足を配置する。
========================================================= */

#set-course-detail .set-course-hero__tagline {
  width: fit-content;

  margin: 17px auto 0;
  padding: 6px 15px;

  color: var(--sc-green, #007c3f);

  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;

  background: var(--sc-green-soft, #f1f7f3);

  border-radius: 999px;
}


/* 説明 */

#set-course-detail .set-course-hero__lead {
  max-width: 620px;

  margin: 18px auto 0;

  color: var(--sc-text-sub, #666);

  font-size: 14px;
  line-height: 1.85;

  text-align: center;
}


/* =========================================================
   主な内容

   ページを開いた時点で、
   コースのおおよその位置づけを理解できるようにする。
========================================================= */

#set-course-detail .set-course-summary {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1px;

  max-width: 650px;

  margin: 31px auto 0;
  padding: 0;

  overflow: hidden;

  background: #e8ece9;

  border-radius: 8px;

  list-style: none;
}

#set-course-detail .set-course-summary__item {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-height: 76px;

  margin: 0;
  padding: 13px 16px;

  background: #fff;

  text-align: center;
}

#set-course-detail .set-course-summary__label {
  display: block;

  margin-bottom: 3px;

  color: var(--sc-text-light, #888);

  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}

#set-course-detail .set-course-summary__item strong {
  color: var(--sc-text, #222);

  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}


/* =========================================================
   Price
========================================================= */

#set-course-detail .set-course-price {
  display: grid;

  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);

  gap: 12px;

  max-width: 760px;

  margin: 35px auto 0;
}


/* 各価格 */

#set-course-detail .set-course-price__item {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-height: 150px;

  padding: 25px 28px;

  background: var(--sc-bg-soft, #f7f7f5);

  border: 0;
  border-radius: 10px;

  text-align: left;
}


/* 会員価格を主役にする */

#set-course-detail .set-course-price__item--member {
  background: var(--sc-green-soft, #f1f7f3);
}


/* ラベル */

#set-course-detail .set-course-price__label {
  display: block;
  margin: 0 0 8px;
  color: var(--sc-text-sub, #666);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

#set-course-detail
.set-course-price__item--member
.set-course-price__label {
  color: var(--sc-green, #007c3f);
}


/* 金額 */

#set-course-detail .set-course-price__amount {
  display: flex;
  align-items: baseline;

  margin: 0;

  line-height: 1;

  white-space: nowrap;
}

#set-course-detail .set-course-price__amount strong {
  color: var(--sc-text, #222);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.025em;
}

#set-course-detail
.set-course-price__item--member
.set-course-price__amount strong {
  color: var(--sc-green, #007c3f);
}

#set-course-detail .set-course-price__amount > span {
  margin-left: 3px;
  font-size: 16px;
  font-weight: 700;
}

#set-course-detail .set-course-price__amount small {
  margin-left: 5px;
  color: var(--sc-text-sub, #666);
  font-size: 14px;
  font-weight: 500;
}


/* 税込 */

#set-course-detail .set-course-price__tax-included {
  margin: 8px 0 0;

  color: var(--sc-text-light, #888);

  font-size: 10px;
  line-height: 1.5;
}


/* =========================================================
   生花祭壇
========================================================= */

#set-course-detail .set-course-altar {
  padding: 44px 0;

  background: var(--sc-bg-warm, #faf9f6);
}

#set-course-detail .set-course-altar__content {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 50px;
}

#set-course-detail .set-course-altar__heading {
  flex: 1 1 auto;

  min-width: 0;
}

#set-course-detail .set-course-altar__text {
  margin: 10px 0 0;

  color: var(--sc-text-sub, #666);

  font-size: 13px;
  line-height: 1.75;
}

#set-course-detail .set-course-altar__price {
  flex: 0 0 auto;

  min-width: 200px;

  text-align: right;
}

#set-course-detail .set-course-altar__price-label {
  display: block;

  margin-bottom: 5px;

  color: var(--sc-text-sub, #666);

  font-size: 10px;
}

#set-course-detail .set-course-altar__price-value {
  color: var(--sc-green, #007c3f);

  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
}

#set-course-detail .set-course-altar__price-tax {
  margin-left: 3px;

  color: var(--sc-text-sub, #666);

  font-size: 10px;
}

#set-course-detail .set-course-altar__price-sub {
  display: block;

  margin-top: 3px;

  color: var(--sc-text-light, #888);

  font-size: 10px;
}

#set-course-detail .set-course-altar__link {
  display: flex;
  align-items: center;

  gap: 7px;

  width: fit-content;

  margin: 19px 0 0 auto;

  color: var(--sc-green, #007c3f);

  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;

  text-decoration: none;
}


/* =========================================================
   Smartphone
========================================================= */

@media screen and (max-width: 640px) {

  #set-course-detail .set-course-hero {
    padding: 28px 0 42px;
  }

  #set-course-detail .set-course-hero__inner {
    width: calc(100% - 36px);
  }

  #set-course-detail .set-course-hero__title {
    font-size: 32px;
  }

  #set-course-detail .set-course-hero__tagline {
    margin-top: 14px;

    padding: 5px 12px;

    font-size: 12px;
  }

  #set-course-detail .set-course-hero__lead {
    margin-top: 15px;

    font-size: 13px;

    text-align: left;
  }


  /* -------------------------
     主な内容
  ------------------------- */

  #set-course-detail .set-course-summary {
    gap: 0;

    margin-top: 25px;
  }

  #set-course-detail .set-course-summary__item {
    min-height: 68px;

    padding: 10px 7px;
  }

  #set-course-detail .set-course-summary__label {
    font-size: 9px;
  }

  #set-course-detail .set-course-summary__item strong {
    font-size: 11px;
  }


  /* -------------------------
     価格
  ------------------------- */

  #set-course-detail .set-course-price {
    grid-template-columns: 1fr;

    gap: 8px;

    margin-top: 24px;
  }

  #set-course-detail .set-course-price__item {
    min-height: auto;

    padding: 19px 18px;
  }

  #set-course-detail .set-course-price__amount strong {
    font-size: 36px;
  }


  /* -------------------------
     生花祭壇
  ------------------------- */

  #set-course-detail .set-course-altar {
    padding: 34px 0;
  }

  #set-course-detail .set-course-altar__content {
    display: block;
  }

  #set-course-detail .set-course-altar__price {
    min-width: 0;

    margin-top: 21px;

    text-align: left;
  }

  #set-course-detail .set-course-altar__link {
    margin-top: 15px;
    margin-right: 0;
    margin-left: 0;
  }

}


/* =========================================================
   Section heading
========================================================= */

#set-course-detail .set-course-section__header {
  margin-bottom: 42px;
}

#set-course-detail .set-course-section__eyebrow {
  margin: 0 0 7px;

  color: var(--sc-green);

  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
}

#set-course-detail .set-course-section__title {
  margin: 0;
  padding: 0;

  color: var(--sc-text);

  font-size: 26px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.025em;
}

#set-course-detail .set-course-section__lead {
  margin: 11px 0 0;

  color: var(--sc-text-sub);

  font-size: 13px;
  line-height: 1.8;
}


/* =========================================================
   生花祭壇
========================================================= */

#set-course-detail .set-course-altar {
  padding: 42px 0;

  background: var(--sc-bg-warm);
}

#set-course-detail .set-course-altar__content {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 40px;
}

#set-course-detail .set-course-altar__text {
  margin: 12px 0 0;

  color: var(--sc-text-sub);

  font-size: 14px;
  line-height: 1.7;
}

#set-course-detail .set-course-altar__price {
  flex: 0 0 auto;
  text-align: right;
}

#set-course-detail .set-course-altar__price-label {
  display: block;

  margin-bottom: 5px;

  color: var(--sc-text-sub);

  font-size: 11px;
}

#set-course-detail .set-course-altar__price-value {
  color: var(--sc-green);

  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
}

#set-course-detail .set-course-altar__price-tax {
  font-size: 11px;
}

#set-course-detail .set-course-altar__price-sub {
  display: block;

  margin-top: 3px;

  color: var(--sc-text-light);

  font-size: 10px;
}

#set-course-detail .set-course-altar__link {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 8px;

  width: fit-content;

  margin: 22px 0 0 auto;

  color: var(--sc-green);

  font-size: 13px;
  font-weight: 700;

  text-decoration: none;
}

#set-course-detail .set-course-altar__link span {
  transition: transform 0.2s ease;
}


/* =========================================================
   セット内容全体
========================================================= */

#set-course-detail .set-course-contents {
  padding: 76px 0 0;
}


/* =========================================================
   各工程
========================================================= */

#set-course-detail .set-course-group {
  margin-top: 70px;
}

#set-course-detail .set-course-group:first-of-type {
  margin-top: 0;
}

#set-course-detail .set-course-group__header {
  display: flex;
  align-items: baseline;

  gap: 13px;

  margin-bottom: 25px;
}

#set-course-detail .set-course-group__number {
  color: var(--sc-green);

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

#set-course-detail .set-course-group__title {
  margin: 0;
  padding: 0;

  color: var(--sc-text);

  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
}


/* =========================================================
   Item Grid

   PC：4列
========================================================= */

#set-course-detail .set-course-items {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 42px;
}


/* =========================================================
   Item
========================================================= */

#set-course-detail .set-course-item {
  min-width: 0;

  margin: 0;
  padding: 0;

  background: transparent;
}

#set-course-detail .set-course-item__media {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  aspect-ratio: 4 / 3;

  margin: 0 0 15px;
  padding: 12px;

  overflow: hidden;

  background: var(--sc-bg-soft);

  border: 0;
  border-radius: 8px;
}

#set-course-detail .set-course-item__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  border: 0;
}


/* =========================================================
   Item text
========================================================= */

#set-course-detail .set-course-item__body {
  padding: 0 2px;
}

#set-course-detail .set-course-item__name {
  margin: 0 0 7px;
  padding: 0;
  color: var(--sc-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

#set-course-detail .set-course-item__name small {
  display: block;
  margin-top: 2px;
  color: var(--sc-text-light);
  /* font-size: 10px; */
  font-weight: 400;
}

#set-course-detail .set-course-item__value {
  margin: 0;

  color: var(--sc-text);

  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
}


/* =========================================================
   Option / set外
========================================================= */

#set-course-detail .set-course-item__status {
  display: inline-block;

  margin: 0;

  color: var(--sc-text-sub);

  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

#set-course-detail .set-course-item--option
.set-course-item__status {
  color: var(--sc-green);
}

#set-course-detail .set-course-item__supplement {
  margin: 3px 0 0;

  color: var(--sc-text-sub);

  font-size: 11px;
  line-height: 1.55;
}

#set-course-detail .set-course-item--not-included
.set-course-item__media {
  background: #fafafa;
}

#set-course-detail .set-course-item--not-included
.set-course-item__image {
  opacity: 0.42;
  filter: grayscale(0.55);
}

#set-course-detail .set-course-item--not-included
.set-course-item__name {
  color: #777;
}

#set-course-detail .set-course-item--not-included
.set-course-item__status {
  color: #999;
}


/* =========================================================
   Notes
========================================================= */

#set-course-detail .set-course-notes {
  margin-top: 82px;
  padding: 42px 0;

  background: var(--sc-bg-soft);
}

#set-course-detail .set-course-notes__title {
  margin: 0 0 20px;

  color: var(--sc-text);

  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

#set-course-detail .set-course-notes__list {
  margin: 0;
  padding: 0;

  list-style: none;
}

#set-course-detail .set-course-notes__list li {
  position: relative;

  margin: 7px 0 0;
  padding-left: 1.5em;

  color: var(--sc-text-sub);

  font-size: 11px;
  line-height: 1.75;
}

#set-course-detail .set-course-notes__list li:first-child {
  margin-top: 0;
}

#set-course-detail .set-course-notes__list li::before {
  position: absolute;
  top: 0;
  left: 0;

  content: "※";
}


/* =========================================================
   Other course navigation
========================================================= */

#set-course-detail .set-course-nav {
  padding: 68px 0 30px;
}

#set-course-detail .set-course-nav__title {
  margin: 0 0 23px;

  color: var(--sc-text);

  font-size: 20px;
  font-weight: 700;

  text-align: center;
}

#set-course-detail .set-course-nav__links {
  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 10px;
}

#set-course-detail .set-course-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 54px;

  padding: 14px 16px;

  background: var(--sc-bg-soft);

  color: var(--sc-text);

  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;

  text-decoration: none;

  border: 0;
  border-radius: 7px;
}

#set-course-detail .set-course-nav__link.is-current {
  background: var(--sc-green-soft);
  color: var(--sc-green);
}

#set-course-detail .set-course-nav__link small {
  font-size: 9px;
  font-weight: 500;
}

#set-course-detail .set-course-nav__link > span {
  color: var(--sc-green);
}


/* =========================================================
   一覧へ戻る
========================================================= */

#set-course-detail .set-course-back {
  margin-top: 30px;

  text-align: center;
}

#set-course-detail .set-course-back__link {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  color: var(--sc-green);

  font-size: 13px;
  font-weight: 700;

  text-decoration: none;
}


/* =========================================================
   Hover
========================================================= */

@media (hover: hover) {

  #set-course-detail .set-course-altar__link:hover span {
    transform: translateX(4px);
  }

  #set-course-detail
  .set-course-nav__link:not(.is-current):hover {
    background: var(--sc-green-soft);
    color: var(--sc-green);
  }

}


/* =========================================================
   Tablet
========================================================= */

@media screen and (max-width: 1024px) {

  #set-course-detail .set-course-items {
    grid-template-columns: repeat(6, minmax(0, 1fr));

    column-gap: 26px;
  }

  #set-course-detail .set-course-nav__links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}


/* =========================================================
   Smartphone
========================================================= */

@media screen and (max-width: 640px) {

  #set-course-detail .set-course-content,
  #set-course-detail .set-course-hero__inner {
    width: calc(100% - 36px);
  }


  /* Hero */

  #set-course-detail .set-course-hero {
    padding: 30px 0 40px;
  }

  #set-course-detail .set-course-hero__title {
    font-size: 32px;
  }


  /* Price */

  #set-course-detail .set-course-price {
    grid-template-columns: 1fr;

    gap: 9px;

    margin-top: 28px;
  }

  #set-course-detail .set-course-price__item {
    padding: 20px 18px;
  }


  /* 生花祭壇 */

  #set-course-detail .set-course-altar {
    padding: 34px 0;
  }

  #set-course-detail .set-course-altar__content {
    display: block;
  }

  #set-course-detail .set-course-altar__price {
    margin-top: 22px;

    text-align: left;
  }

  #set-course-detail .set-course-altar__link {
    margin-top: 16px;
  }


  /* Set contents */

  #set-course-detail .set-course-contents {
    padding-top: 54px;
  }

  #set-course-detail .set-course-section__header {
    margin-bottom: 32px;
  }

  #set-course-detail .set-course-section__title {
    font-size: 22px;
  }

  #set-course-detail .set-course-group {
    margin-top: 54px;
  }

  #set-course-detail .set-course-group__title {
    font-size: 18px;
  }


  /* 2 columns */

  #set-course-detail .set-course-items {
    grid-template-columns: repeat(6, minmax(0, 1fr));

    column-gap: 14px;
    row-gap: 32px;
  }

  #set-course-detail .set-course-item__media {
    margin-bottom: 11px;
    padding: 8px;

    border-radius: 6px;
  }

  #set-course-detail .set-course-item__body {
    padding: 0;
  }

  #set-course-detail .set-course-item__name {
    /* font-size: 16px; */
  }

  #set-course-detail .set-course-item__value {
    font-size: 14px;
  }

  #set-course-detail .set-course-item__status {
    font-size: 12px;
  }

  #set-course-detail .set-course-item__supplement {
    font-size: 12px;
  }


  /* Notes */

  #set-course-detail .set-course-notes {
    margin-top: 60px;
    padding: 34px 0;
  }


  /* Course navigation */

  #set-course-detail .set-course-nav {
    padding-top: 50px;
  }

  #set-course-detail .set-course-nav__title {
    text-align: left;
    font-size: 18px;
  }

  #set-course-detail .set-course-nav__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 8px;
  }

  #set-course-detail .set-course-nav__link {
    min-height: 50px;

    padding: 12px 13px;

    font-size: 14px;
  }

}

/* =========================================================
   Set Course Detail
   追加料金・オプション表示

   区分：
   1. コースに含まれる
   2. 希望に応じて追加できる
   3. コースに含まれない
   4. 状況によって発生する追加料金
========================================================= */


/* =========================================================
   コース内訳
   「含まれています」
========================================================= */

#set-course-detail .set-course-item__included {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  width: fit-content;

  margin: 7px 0 0;
  padding: 4px 8px;

  background: var(--sc-green-soft, #f1f7f3);

  color: var(--sc-green, #007c3f);

  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;

  border-radius: 4px;
}

#set-course-detail .set-course-item__included::before {
  content: "✓";

  flex: 0 0 auto;

  font-size: 10px;
  font-weight: 700;
}


/* =========================================================
   オプション項目
========================================================= */

#set-course-detail .set-course-item--option
.set-course-item__status {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  margin: 5px 0 0;
  padding: 4px 8px;

  background: #fff7e8;

  color: #8a5a00;

  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;

  border-radius: 4px;
}


/* =========================================================
   オプション料金
========================================================= */

#set-course-detail .set-course-item__option-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;

  gap: 2px 4px;

  margin: 8px 0 0;

  color: var(--sc-text, #222);

  line-height: 1.4;
}

#set-course-detail .set-course-item__option-price strong {
  color: var(--sc-text, #222);

  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

#set-course-detail .set-course-item__option-price span {
  color: var(--sc-text-sub, #666);

  font-size: 10px;
  font-weight: 500;
}


/* 税抜価格 */

#set-course-detail .set-course-item__tax-excluded {
  margin: 3px 0 0;

  color: var(--sc-text-light, #888);

  font-size: 9px;
  line-height: 1.5;
}


/* =========================================================
   コース内サービスの追加分
   例：ドライアイス1日分は含まれるが、
       追加10kgは9,900円
========================================================= */

#set-course-detail .set-course-item__additional {
  margin-top: 10px;
  padding-top: 9px;

  border-top: 1px solid #e7e7e3;
}

#set-course-detail .set-course-item__additional-label {
  display: block;
  margin-bottom: 3px;
  color: var(--sc-text-sub, #666);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

#set-course-detail .set-course-item__additional-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;

  gap: 3px;

  margin: 0;

  line-height: 1.4;
}

#set-course-detail .set-course-item__additional-price strong {
  color: var(--sc-text, #222);

  font-size: 14px;
  font-weight: 700;
}

#set-course-detail .set-course-item__additional-price span {
  color: var(--sc-text-sub, #666);

  font-size: 9px;
}


/* =========================================================
   コースに含まれていない項目

   色を薄くするだけではなく、
   「コースには含まれていません」という文言で明示する。
========================================================= */

#set-course-detail .set-course-item--not-included
.set-course-item__media {
  background: #f8f8f7;
}

#set-course-detail .set-course-item--not-included
.set-course-item__image {
  opacity: 0.48;
  filter: grayscale(0.55);
}

#set-course-detail .set-course-item--not-included
.set-course-item__name {
  color: #666;
}

#set-course-detail .set-course-item--not-included
.set-course-item__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  width: fit-content;

  margin: 5px 0 0;
  padding: 4px 8px;

  background: #f2f2f0;

  color: #777;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;

  border-radius: 4px;
}




/* =========================================================
   必要に応じて追加できるサービス
========================================================= */

#set-course-detail .set-course-options {
  margin-top: 88px;
  padding: 68px 0;

  background: var(--sc-bg-warm, #faf9f6);
}


/* セクション見出し */

#set-course-detail .set-course-options
.set-course-section__header {
  max-width: 760px;
  margin-bottom: 34px;
}


/* =========================================================
   オプション一覧
========================================================= */

#set-course-detail .set-course-option-list {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: 18px;
  row-gap: 18px;
}


/* 1サービス */

#set-course-detail .set-course-option {
  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;

  gap: 30px;

  min-width: 0;

  padding: 24px 26px;

  background: #fff;

  border-radius: 8px;
}


/* 本文 */

#set-course-detail .set-course-option__content {
  min-width: 0;
}

#set-course-detail .set-course-option__name {
  margin: 0 0 6px;
  padding: 0;

  color: var(--sc-text, #222);

  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

#set-course-detail .set-course-option__description {
  margin: 0;
  color: var(--sc-text-sub, #666);
  /* font-size: 11px; */
  line-height: 1.7;
}


/* 料金 */

#set-course-detail .set-course-option__price {
  min-width: 126px;

  text-align: right;
}

#set-course-detail .set-course-option__price strong {
  display: block;
  color: var(--sc-green, #007c3f);
  /* font-size: 19px; */
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

#set-course-detail .set-course-option__price > span {
  display: block;

  margin-top: 2px;

  color: var(--sc-text-sub, #666);

  font-size: 9px;
  line-height: 1.4;
}

#set-course-detail .set-course-option__price small {
  display: block;

  margin-top: 4px;

  color: var(--sc-text-light, #888);

  font-size: 9px;
  line-height: 1.4;
}


/* =========================================================
   状況によって発生する追加料金
========================================================= */

#set-course-detail .set-course-extra-costs {
  padding: 72px 0;
}


/* 見出し */

#set-course-detail .set-course-extra-costs
.set-course-section__header {
  max-width: 800px;
  margin-bottom: 34px;
}


/* =========================================================
   条件付き追加料金一覧
========================================================= */

#set-course-detail .set-course-extra-costs__list {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;
}


/* 個別項目 */

#set-course-detail .set-course-extra-cost {
  position: relative;

  min-width: 0;

  padding: 26px 24px 24px;

  background: var(--sc-bg-soft, #f7f7f5);

  border-radius: 8px;
}


/*
 * 「条件による料金」であることを
 * 色だけでなくラベルでも明示
 */
#set-course-detail .set-course-extra-cost::before {
  display: inline-block;

  content: "条件により発生";

  margin-bottom: 13px;
  padding: 4px 8px;

  background: #fff3dd;

  color: #825400;

  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;

  border-radius: 4px;
}


/* 見出し */

#set-course-detail .set-course-extra-cost__title {
  margin: 0 0 9px;
  padding: 0;
  color: var(--sc-text, #222);
  /* font-size: 15px; */
  font-weight: 700;
  line-height: 1.55;
}


/* 説明 */

#set-course-detail .set-course-extra-cost__description {
  margin: 0;
  color: var(--sc-text-sub, #666);
  /* font-size: 11px; */
  line-height: 1.75;
}


/* 金額 */

#set-course-detail .set-course-extra-cost__price {
  margin: 17px 0 0;

  line-height: 1.4;
}

#set-course-detail .set-course-extra-cost__price strong {
  display: block;

  color: var(--sc-text, #222);

  font-size: 20px;
  font-weight: 700;
}

#set-course-detail .set-course-extra-cost__price span {
  display: block;
  margin-top: 2px;
  color: var(--sc-text-sub, #666);
  /* font-size: 9px; */
}

#set-course-detail .set-course-extra-cost__price small {
  display: block;

  margin-top: 3px;

  color: var(--sc-text-light, #888);

  font-size: 9px;
}


/* 金額未定・別途費用 */

#set-course-detail .set-course-extra-cost__notice {
  display: inline-flex;

  margin: 17px 0 0;
  padding: 5px 9px;

  background: #fff;

  color: var(--sc-text, #222);

  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;

  border-radius: 4px;
}


/* =========================================================
   コース料金のルール
========================================================= */

#set-course-detail .set-course-price-rule {
  padding: 0 0 74px;
}

#set-course-detail .set-course-price-rule__inner {
  display: grid;

  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;

  gap: 50px;

  padding: 31px 36px;

  background: var(--sc-green-soft, #f1f7f3);

  border-radius: 9px;
}


/* 見出し側 */

#set-course-detail .set-course-price-rule__heading {
  min-width: 0;
}

#set-course-detail .set-course-price-rule__label {
  margin: 0 0 6px;

  color: var(--sc-green, #007c3f);

  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

#set-course-detail .set-course-price-rule__title {
  margin: 0;
  padding: 0;

  color: var(--sc-text, #222);

  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}


/* 説明 */

#set-course-detail .set-course-price-rule__text {
  margin: 0;

  color: var(--sc-text-sub, #666);

  font-size: 12px;
  line-height: 1.85;
}


/* =========================================================
   Tablet
========================================================= */

@media screen and (max-width: 1024px) {

  /* オプション一覧 */

  #set-course-detail .set-course-option {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  #set-course-detail .set-course-option__price {
    min-width: 0;

    text-align: left;
  }


  /* 条件付き料金 */

  #set-course-detail .set-course-extra-costs__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  /* コース料金ルール */

  #set-course-detail .set-course-price-rule__inner {
    grid-template-columns: 1fr;

    gap: 14px;
  }

}


/* =========================================================
   Smartphone
========================================================= */

@media screen and (max-width: 640px) {

  /* =======================================================
     セット内容のステータス
  ======================================================== */

  #set-course-detail .set-course-item__included,
  #set-course-detail .set-course-item--option
  .set-course-item__status,
  #set-course-detail .set-course-item--not-included
  .set-course-item__status {
    padding: 3px 6px;
    /* font-size: 9px; */
  }


  #set-course-detail .set-course-item__option-price {
    margin-top: 6px;
  }

  #set-course-detail .set-course-item__option-price strong {
    font-size: 14px;
  }

  #set-course-detail .set-course-item__option-price span {
    width: 100%;

    font-size: 9px;
  }


  /* 追加分 */

  #set-course-detail .set-course-item__additional {
    margin-top: 8px;
    padding-top: 7px;
  }

  #set-course-detail .set-course-item__additional-price strong {
    font-size: 12px;
  }


  /* =======================================================
     オプション
  ======================================================== */

  #set-course-detail .set-course-options {
    margin-top: 62px;
    padding: 48px 0;
  }

  #set-course-detail .set-course-option-list {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  #set-course-detail .set-course-option {
    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    gap: 16px;

    padding: 18px;
  }

  #set-course-detail .set-course-option__name {
    margin-bottom: 4px;

    font-size: 14px;
  }

  #set-course-detail .set-course-option__description {
    /* font-size: 10px; */
    line-height: 1.65;
  }

  #set-course-detail .set-course-option__price {
    min-width: 100px;

    text-align: right;
  }

  #set-course-detail .set-course-option__price strong {
    /* font-size: 16px; */
  }


  /* =======================================================
     条件付き追加料金
  ======================================================== */

  #set-course-detail .set-course-extra-costs {
    padding: 50px 0;
  }

  #set-course-detail .set-course-extra-costs__list {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  #set-course-detail .set-course-extra-cost {
    padding: 20px 18px;
  }

  #set-course-detail .set-course-extra-cost__title {
    font-size: 14px;
  }

  #set-course-detail .set-course-extra-cost__description {
    /* font-size: 10px; */
  }


  /* =======================================================
     コース料金について
  ======================================================== */

  #set-course-detail .set-course-price-rule {
    padding-bottom: 54px;
  }

  #set-course-detail .set-course-price-rule__inner {
    padding: 24px 20px;

    gap: 13px;
  }

  #set-course-detail .set-course-price-rule__title {
    font-size: 15px;
  }

  #set-course-detail .set-course-price-rule__text {
    font-size: 11px;
    line-height: 1.75;
  }

}




/* ==========================================================
   白木祭壇コース
========================================================== */

#set-course-detail .set-course-shiraki {
  padding: 72px 0;
  background: var(--sc-bg-warm, #faf9f6);
}

#set-course-detail .set-course-shiraki__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  align-items: center;
  gap: clamp(44px, 6vw, 84px);
}

#set-course-detail .set-course-shiraki__media {
  margin: 0;
}

#set-course-detail .set-course-shiraki__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
}

#set-course-detail .set-course-shiraki__body {
  min-width: 0;
}

#set-course-detail .set-course-shiraki__lead {
  margin: 20px 0 0;
  color: var(--sc-text, #222);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.9;
}

#set-course-detail .set-course-shiraki__text {
  margin: 14px 0 0;
  color: var(--sc-text-sub, #666);
  /* font-size: 13px; */
  line-height: 2;
}

#set-course-detail .set-course-shiraki__included {
  margin-top: 28px;
  padding: 20px 22px;
  background: var(--sc-green-soft, #f1f7f3);
  border-radius: 8px;
}

#set-course-detail .set-course-shiraki__included-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sc-green, #007c3f);
  /* font-size: 12px; */
  font-weight: 700;
  line-height: 1.6;
}

#set-course-detail .set-course-shiraki__included-label::before {
  content: "✓";
  flex: 0 0 auto;
  font-size: 11px;
}

#set-course-detail .set-course-shiraki__included-text {
  margin: 9px 0 0;
  color: var(--sc-text-sub, #666);
  /* font-size: 11px; */
  line-height: 1.9;
}


/* 神道 */
#set-course-detail.set-course-detail--shinto
  .set-course-shiraki__included {
  background: #f7f5ef;
}

#set-course-detail.set-course-detail--shinto
  .set-course-shiraki__included-label {
  color: #625335;
}


/* ==========================================================
   Responsive
========================================================== */

@media (max-width: 1024px) {

  #set-course-detail .set-course-shiraki__layout {
    grid-template-columns: 1fr 1fr;
    gap: 38px;
  }

}


@media (max-width: 767px) {

  #set-course-detail .set-course-shiraki {
    padding: 48px 0;
  }

  #set-course-detail .set-course-shiraki__layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  #set-course-detail .set-course-shiraki__media {
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
  }

  #set-course-detail .set-course-shiraki__lead {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.8;
  }

  #set-course-detail .set-course-shiraki__text {
    margin-top: 10px;
    /* font-size: 12px; */
    line-height: 1.9;
  }

  #set-course-detail .set-course-shiraki__included {
    margin-top: 22px;
    padding: 18px;
  }

}

/* =========================================================
   PHP共通テンプレート対応・最終調整
   2026-08
   対象：
   - course-items.php
   - options.php
   - additional-costs.php
   - price-rule.php
   - navigation.php

   既存デザインを維持しながら、
   PHP化後の実際のHTMLクラス名に合わせる。
========================================================= */


/* =========================================================
   セット内容グリッド
   PC 4列 / Tablet・SP 2列
========================================================= */

#set-course-detail .set-course-items {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}


/* =========================================================
   「いずれか1つを選択」
========================================================= */

#set-course-detail .set-course-item--choice
.set-course-item__included {
  background: #f1f3f5;
  color: #4f5d66;
}

#set-course-detail .set-course-item--choice
.set-course-item__included::before {
  content: "選";
  font-size: 9px;
}


/* =========================================================
   必要に応じて追加できるサービス
   options.php のHTML構造に対応
========================================================= */

#set-course-detail .set-course-options__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

#set-course-detail .set-course-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title price"
    "description price";
  align-items: center;

  gap: 6px 30px;

  min-width: 0;
  padding: 24px 26px;

  background: #fff;
  border-radius: 8px;
}

#set-course-detail .set-course-option__title {
  grid-area: title;

  margin: 0;
  padding: 0;

  color: var(--sc-text, #222);

  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

#set-course-detail .set-course-option__description {
  grid-area: description;
  margin: 0;
  color: var(--sc-text-sub, #666);
  /* font-size: 11px; */
  line-height: 1.7;
}

#set-course-detail .set-course-option__price {
  grid-area: price;

  min-width: 126px;

  text-align: right;
}

#set-course-detail .set-course-option__price-main {
  margin: 0;
  line-height: 1.4;
  display: inline-flex;
}

#set-course-detail .set-course-option__price-main strong {
  display: block;
  color: var(--sc-green, #007c3f);
  /* font-size: 19px; */
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

#set-course-detail .set-course-option__price-main span {
  display: block;
  margin-top: 2px;
  color: var(--sc-text-sub, #666);
  /* font-size: 9px; */
  line-height: 1.4;
}

#set-course-detail .set-course-option__price-sub {
  margin: 4px 0 0;
  color: var(--sc-text-light, #888);
  /* font-size: 9px; */
  line-height: 1.4;
}


/* =========================================================
   状況によって追加料金がかかる場合
   additional-costs.php のHTML構造に対応
========================================================= */

#set-course-detail .set-course-extra-costs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

#set-course-detail .set-course-extra-cost__price-main {
  margin: 0;
  line-height: 1.4;
  display: inline-flex;
}

#set-course-detail .set-course-extra-cost__price-main strong {
  display: block;

  color: var(--sc-text, #222);

  font-size: 20px;
  font-weight: 700;
}

#set-course-detail .set-course-extra-cost__price-main span {
  display: block;
  margin-top: 2px;
  color: var(--sc-text-sub, #666);
  /* font-size: 9px; */
}

#set-course-detail .set-course-extra-cost__price-sub {
  margin: 3px 0 0;
  color: var(--sc-text-light, #888);
  /* font-size: 9px; */
  line-height: 1.4;
}


/* =========================================================
   コース料金のルール
   price-rule.php のHTML構造に対応
========================================================= */

#set-course-detail .set-course-price-rule__heading
.set-course-section__eyebrow {
  margin-bottom: 6px;
}

#set-course-detail .set-course-price-rule__body {
  min-width: 0;
}

#set-course-detail .set-course-price-rule__body p {
  margin: 0;
  color: var(--sc-text-sub, #666);
  /* font-size: 12px; */
  line-height: 1.85;
}


/* =========================================================
   コースナビゲーション
   5コース / 2コースのどちらでも自然に広がる
========================================================= */

#set-course-detail .set-course-nav__links {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(190px, 100%), 1fr)
  );
}

#set-course-detail .set-course-nav__link.is-current {
  cursor: default;
}


/* =========================================================
   Tablet
========================================================= */

@media screen and (max-width: 1024px) {

  #set-course-detail .set-course-items {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #set-course-detail .set-course-options__grid {
    grid-template-columns: 1fr;
  }

  #set-course-detail .set-course-extra-costs__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}


/* =========================================================
   Smartphone
========================================================= */

@media screen and (max-width: 640px) {

  #set-course-detail .set-course-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 32px;
  }

  #set-course-detail .set-course-options__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #set-course-detail .set-course-option {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title price"
      "description price";

    gap: 5px 16px;

    padding: 18px;
  }

  #set-course-detail .set-course-option__title {
    font-size: 14px;
  }

  #set-course-detail .set-course-option__description {
    /* font-size: 10px; */
    line-height: 1.65;
  }

  #set-course-detail .set-course-option__price {
    min-width: 100px;
  }

  #set-course-detail .set-course-option__price-main strong {
    /* font-size: 16px; */
  }

  #set-course-detail .set-course-extra-costs__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #set-course-detail .set-course-price-rule__body p {
    /* font-size: 11px; */
    line-height: 1.75;
  }

}


/* =========================================================
   Narrow Smartphone
========================================================= */

@media screen and (max-width: 390px) {

  #set-course-detail .set-course-option {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "description"
      "price";

    gap: 5px;
  }

  #set-course-detail .set-course-option__price {
    min-width: 0;
    margin-top: 8px;

    text-align: left;
  }

}

/* =========================================================
   無宗教コース
   生花祭壇セクション内イメージ
========================================================= */

#set-course-detail .set-course-altar--with-image
.set-course-altar__content {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr) auto;
  align-items: center;
  gap: 36px;
}

#set-course-detail .set-course-altar__media {
  margin: 0;

  overflow: hidden;

  background: #fff;

  border-radius: var(--ceremo-radius-md, 8px);
}

#set-course-detail .set-course-altar__image {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 4 / 3;

  object-fit: contain;
}


/* Tablet */

@media screen and (max-width: 900px) {

  #set-course-detail .set-course-altar--with-image
  .set-course-altar__content {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  #set-course-detail .set-course-altar--with-image
  .set-course-altar__price {
    grid-column: 2;

    text-align: left;
  }

}


/* Smartphone */

@media screen and (max-width: 640px) {

  #set-course-detail .set-course-altar--with-image
  .set-course-altar__content {
    display: grid;
    grid-template-columns: 1fr;

    gap: 22px;
  }

  #set-course-detail .set-course-altar__media {
    width: 100%;
    max-width: 420px;

    margin-right: auto;
    margin-left: auto;
  }

  #set-course-detail .set-course-altar--with-image
  .set-course-altar__price {
    grid-column: auto;

    margin-top: 0;
  }

}