/* =========================================================
   Flower Altar Index
   生花祭壇シリーズ一覧

   対象：
   /estimate/flower_altar/
   /estimate/flower_altar2/

   方針：
   - PCは3列
   - 祭壇画像を大きく見せる
   - シリーズ全体を俯瞰して印象から選ぶ
   - border / box-shadow は使用しない
   - シリーズブロック全体をリンク範囲とする
   - 旧CSS .type / .type_wrap は使用しない
========================================================= */


/* =========================================================
   ページ全体
========================================================= */

#flower-altar-page {
  max-width: none;
  width: 100%;

  color: var(--fa-text, #222);
}


/* =========================================================
   ページ見出し
========================================================= */

#flower-altar-page #c22_2 {
  max-width: 1146px;
  width: 100%;

  margin: 0 auto 44px;

  text-align: center;
}

#flower-altar-page #c22_2 .midashi_04c_min {
  margin-top: 0;
  margin-bottom: 0;
}


/* =========================================================
   シリーズ一覧

   style_pal.css の
   .contents .mar-style {
     max-width: 1146px;
   }
   に制限されても、一覧だけ最大1480pxまで拡張する。
========================================================= */

#flower-altar-page #c22_2_pr.flower-series-grid {
  display: grid;

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

  column-gap: 38px;
  row-gap: 64px;

  /*
   * 親要素が1146pxでも、
   * viewport基準で最大1480pxまで広げる。
   */
  width: min(1480px, calc(100vw - 64px));
  max-width: none;

  /*
   * 親コンテナ中央を基準に左右へブレイクアウト
   */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 50%;

  padding: 0;

  transform: translateX(-50%);
}


/* =========================================================
   シリーズブロック

   <a class="flower-series"> 全体をクリック可能にする。
========================================================= */

#flower-altar-page #c22_2_pr .flower-series {
  display: flex;
  flex-direction: column;

  min-width: 0;
  width: 100%;

  margin: 0;
  padding: 0;

  background: transparent;

  color: var(--fa-text, #222);
  text-decoration: none;

  border: 0;
  border-radius: 0;
  box-shadow: none;

  cursor: pointer;
}


/*
 * 旧テーマ側のリンク指定対策
 */
#flower-altar-page #c22_2_pr a.flower-series,
#flower-altar-page #c22_2_pr a.flower-series:link,
#flower-altar-page #c22_2_pr a.flower-series:visited {
  color: var(--fa-text, #222);
  text-decoration: none;
}


/* =========================================================
   祭壇画像
========================================================= */

#flower-altar-page #c22_2_pr .flower-series__figure {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  /*
   * 一覧時の視認性を揃える。
   * object-fit: contain なので祭壇自体は切らない。
   */
  aspect-ratio: 4 / 3;

  margin: 0 0 20px;
  padding: 0;

  overflow: hidden;

  background: #f7f7f5;

  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

#flower-altar-page #c22_2_pr .flower-series__image {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

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

  border: 0;
  box-shadow: none;

  transition:
    transform 0.35s ease,
    opacity 0.25s ease;
}


/* =========================================================
   テキスト領域
========================================================= */

#flower-altar-page #c22_2_pr .flower-series__body {
  display: flex;
  flex-direction: column;
  flex: 1;

  min-width: 0;

  padding: 0 4px;
}


/* =========================================================
   シリーズ名
========================================================= */

#flower-altar-page #c22_2_pr h3.flower-series__title {
  width: 100%;
  margin: 0 0 9px;
  padding: 0;

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

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

  text-align: center;

  transition: color 0.2s ease;
}


/* HBYは名称が長いため少し調整 */
#flower-altar-page #c22_2_pr .flower-series--hby
.flower-series__title {
  font-size: 19px;
}


/* =========================================================
   シリーズ説明
========================================================= */

#flower-altar-page #c22_2_pr .flower-series__description {
  margin: 0 0 14px;
  padding: 0;

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

  font-size: 13px;
  font-weight: 400;
  line-height: 1.75;

  text-align: left;
}


/* =========================================================
   「シリーズを見る」

   CTAボタンにはしない。
   ブロック全体がリンクであることを補助的に示す。
========================================================= */

#flower-altar-page #c22_2_pr span.flower-series__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  width: fit-content;

  /* 本文下部＋右寄せ */
  margin-top: auto;
  margin-right: 0;
  margin-left: auto;

  padding: 0;

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

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

  background: transparent;

  border: 0;
  border-radius: 0;
  box-shadow: none;
}


/* 矢印 */

#flower-altar-page #c22_2_pr .flower-series__more span {
  display: inline-block;

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

  transition: transform 0.2s ease;
}


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

@media (hover: hover) {

  #flower-altar-page #c22_2_pr .flower-series:hover
  .flower-series__image {
    transform: scale(1.025);
  }

  #flower-altar-page #c22_2_pr .flower-series:hover
  .flower-series__title {
    color: var(--fa-green, #007c3f);
  }

  #flower-altar-page #c22_2_pr .flower-series:hover
  .flower-series__more span {
    transform: translateX(4px);
  }

}


/* =========================================================
   Keyboard focus
========================================================= */

#flower-altar-page #c22_2_pr .flower-series:focus {
  outline: none;
}

#flower-altar-page #c22_2_pr .flower-series:focus-visible {
  outline: 2px solid var(--fa-green, #007c3f);
  outline-offset: 7px;
}


/* =========================================================
   喪主花・供花・その他

   生花祭壇シリーズとはカテゴリが異なるため、
   5シリーズの後に独立して表示。

   border / box-shadow は使用しない。
========================================================= */

#flower-altar-page #c22_2_pr .flower-series--kyoka {
  grid-column: 1 / -1;

  display: grid;

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

  gap: 38px;

  width: min(100%, 760px);

  margin-top: 16px;
  margin-right: auto;
  margin-left: auto;

  justify-self: center;
}


/* 喪主花画像 */

#flower-altar-page #c22_2_pr .flower-series--kyoka
.flower-series__figure {
  margin: 0;

  aspect-ratio: 4 / 3;
}


/* 喪主花本文 */

#flower-altar-page #c22_2_pr .flower-series--kyoka
.flower-series__body {
  padding: 0;
}

#flower-altar-page #c22_2_pr .flower-series--kyoka
.flower-series__title {
  margin-bottom: 10px;

  font-size: 19px;
}

#flower-altar-page #c22_2_pr .flower-series--kyoka
.flower-series__description {
  margin-bottom: 13px;
}


/* =========================================================
   PC Large

   1440px以上では最大1480px。
   画像1枚あたり約460px前後を確保。
========================================================= */

@media screen and (min-width: 1440px) {

  #flower-altar-page #c22_2_pr.flower-series-grid {
    column-gap: 42px;
  }

}


/* =========================================================
   Tablet / Small PC
   1100px以下：2列
========================================================= */

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

  #flower-altar-page #c22_2 {
    width: auto;

    margin-right: 24px;
    margin-left: 24px;
  }


  #flower-altar-page #c22_2_pr.flower-series-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 28px;
    row-gap: 52px;

    width: calc(100vw - 48px);
  }


  #flower-altar-page #c22_2_pr .flower-series__title {
    font-size: 19px;
  }


  #flower-altar-page #c22_2_pr .flower-series--hby
  .flower-series__title {
    font-size: 18px;
  }


  /*
   * 喪主花・供花
   */
  #flower-altar-page #c22_2_pr .flower-series--kyoka {
    grid-column: 1 / -1;

    width: min(100%, 700px);
  }

}


/* =========================================================
   Smartphone
   640px以下：1列
========================================================= */

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

  /* -----------------------------------------
     見出し
  ----------------------------------------- */

  #flower-altar-page #c22_2 {
    width: auto;

    margin: 0 18px 30px;

    text-align: left;
  }


  /* -----------------------------------------
     一覧
  ----------------------------------------- */

  #flower-altar-page #c22_2_pr.flower-series-grid {
    grid-template-columns: 1fr;

    row-gap: 46px;
    column-gap: 0;

    width: calc(100vw - 36px);
  }


  /* -----------------------------------------
     画像
  ----------------------------------------- */

  #flower-altar-page #c22_2_pr .flower-series__figure {
    margin-bottom: 17px;

    border-radius: 7px;
  }


  /* -----------------------------------------
     本文
  ----------------------------------------- */

  #flower-altar-page #c22_2_pr .flower-series__body {
    padding: 0;
  }


  /* -----------------------------------------
     シリーズ名
  ----------------------------------------- */

  #flower-altar-page #c22_2_pr .flower-series__title,
  #flower-altar-page #c22_2_pr .flower-series--hby
  .flower-series__title {
    margin-bottom: 7px;

    font-size: 19px;
  }

  

  /* -----------------------------------------
     説明
  ----------------------------------------- */

  #flower-altar-page #c22_2_pr .flower-series__description {
    margin-bottom: 11px;

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


  /* -----------------------------------------
     シリーズを見る
  ----------------------------------------- */

  #flower-altar-page #c22_2_pr .flower-series__more {
    font-size: 12px;
  }


  /* -----------------------------------------
     喪主花・供花・その他
  ----------------------------------------- */

  #flower-altar-page #c22_2_pr .flower-series--kyoka {
    grid-column: auto;

    display: flex;
    flex-direction: column;

    width: 100%;

    gap: 0;

    margin-top: 8px;
  }

  #flower-altar-page #c22_2_pr .flower-series--kyoka
  .flower-series__figure {
    width: 100%;

    margin-bottom: 17px;
  }

  #flower-altar-page #c22_2_pr .flower-series--kyoka
  .flower-series__title {
    font-size: 19px;
  }

}


/* =========================================================
   Very Small Smartphone
========================================================= */

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

  #flower-altar-page #c22_2 {
    margin-right: 15px;
    margin-left: 15px;
  }

  #flower-altar-page #c22_2_pr.flower-series-grid {
    width: calc(100vw - 30px);
  }

}