/* =========================================================
   Flower Altar Common
   生花祭壇 共通CSS

   対象：
   /estimate/flower_altar/
   /estimate/flower_altar/eta-series/
   /estimate/flower_altar/hby-series/
   /estimate/flower_altar/cf-series/
   /estimate/flower_altar/ef-series/
   /estimate/flower_altar/hf-series/
========================================================= */


/* =========================================================
   共通変数
========================================================= */

#flower-altar-page,
#flower-series-detail {
  --fa-text: #222;
  --fa-text-sub: #666;
  --fa-text-light: #777;

  --fa-green: #007c3f;
  --fa-green-dark: #006533;
  --fa-green-soft: #f1f7f3;

  --fa-bg-soft: #f7f7f5;
  --fa-bg-warm: #faf9f6;

  --fa-content-width: 1120px;

  color: var(--fa-text);
}


/* =========================================================
   シリーズ見出し
========================================================= */

#flower-series-detail .flower-series-detail__header {
  max-width: var(--fa-content-width);
  margin: 0 auto 56px;
  text-align: center;
}

#flower-series-detail .flower-series-detail__header .midashi_04c_min {
  margin-bottom: 18px;
}

#flower-series-detail .flower-series-detail__lead {
  max-width: 760px;
  margin: 0 auto;

  color: var(--fa-text-sub);
  font-size: 15px;
  line-height: 1.9;
}


/* =========================================================
   注意事項
========================================================= */

#flower-series-detail .flower-series-notes {
  max-width: var(--fa-content-width);
  margin: 64px auto 0;

  color: var(--fa-text-sub);
  font-size: 12px;
  line-height: 1.8;
}

#flower-series-detail .flower-series-notes p {
  margin: 3px 0;
}


/* =========================================================
   生花祭壇一覧へ戻る
========================================================= */

#flower-series-detail .flower-series-back {
  max-width: var(--fa-content-width);
  margin: 42px auto 0;
  text-align: center;
}

#flower-series-detail .flower-series-back__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-width: 200px;
  padding: 13px 24px;

  border-radius: 999px;
  background: var(--fa-green-soft);

  color: var(--fa-green);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

#flower-series-detail .flower-series-back__link::before {
  content: "←";
  font-size: 15px;
  line-height: 1;
}

#flower-series-detail .flower-series-back__link:hover {
  background: #e3f0e8;
  color: var(--fa-green-dark);
  transform: translateY(-1px);
}

#flower-series-detail .flower-series-back__link:focus-visible {
  outline: 2px solid var(--fa-green);
  outline-offset: 3px;
}


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

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

  #flower-series-detail .flower-series-detail__header,
  #flower-series-detail .flower-series-notes {
    padding-left: 24px;
    padding-right: 24px;
  }

}


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

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

  #flower-series-detail .flower-series-detail__header {
    margin-bottom: 36px;
    padding-left: 18px;
    padding-right: 18px;
    text-align: left;
  }

  #flower-series-detail .flower-series-detail__lead {
    font-size: 14px;
    line-height: 1.8;
  }

  #flower-series-detail .flower-series-notes {
    margin-top: 48px;
    padding-left: 18px;
    padding-right: 18px;

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

  #flower-series-detail .flower-series-back {
    margin-top: 32px;
    padding: 0 18px;
  }

  #flower-series-detail .flower-series-back__link {
    min-width: 180px;
    padding: 12px 20px;
    font-size: 13px;
  }

}