@charset "UTF-8";
/*
  /rakurakucloud/asset/css/object/module/m-card.css
  カードモジュール用CSS

  ==========================================================================
  概要
  ==========================================================================
  ・ul.m-card-list の中に li.m-card-item を並べる、grid レイアウトのカード。
  ・デフォルトは 1 カラム。ul に modifier を付けると 2 / 3 カラムになる。
  ・同じ ul 内のカードは、見出し・アイコン・テキストの高さが自動で揃う（subgrid）。

  ==========================================================================
  クラス一覧（どこに何を付けるか）
  ==========================================================================
  【ul】 .m-card-list                必須。カードの親。
         .m-card-list--col2          任意。2カラム（600px以下は1カラム）。
         .m-card-list--col3          任意。3カラム（1024px以下は2カラム、600px以下は1カラム）。
                                     ※付けない場合は 1 カラム。

  【li】 .m-card-item                必須。カード1枚。
         .m-card-item--link          任意。カード全体をリンクにする（後述）。

  【li の中身】 ※必要なものだけ書けばOK。下記の並び順で書く。
         .m-card-item__title         見出し（h3 など）。中央揃え。
         .m-card-item__icon-wrap     アイコンの丸い枠（div）。
           └ .m-card-item__icon      アイコン画像（img）。
         .m-card-item-detail         テキストエリア（div）。
           └ .m-card-item-detail__text   本文（p）。複数並べると2個目以降に上余白が付く。
         .m-card-item__link          全体リンク版のみ。li の中身全体を囲む a に付ける。
                                     （見出し・アイコン・テキストは、この a の中に書く）

  【ul の外】 .m-card__note          カード一覧の下に置く注釈（p）用。上に20pxの余白。

  ==========================================================================
  HTML の例
  ==========================================================================
  ■ 通常（見出し + テキスト）
  <ul class="m-card-list m-card-list--col3">
    <li class="m-card-item">
      <h3 class="m-card-item__title">見出し</h3>
      <div class="m-card-item-detail">
        <p class="m-card-item-detail__text">テキスト</p>
      </div>
    </li>
  </ul>

  ■ アイコン付き（見出し + アイコン + テキスト）
  <li class="m-card-item">
    <h3 class="m-card-item__title">見出し</h3>
    <div class="m-card-item__icon-wrap u-color-rcloud-bg-sub-03">
      <img src="…" class="m-card-item__icon" alt="">
    </div>
    <div class="m-card-item-detail">
      <p class="m-card-item-detail__text">テキスト</p>
    </div>
  </li>

  ■ カード全体をリンクにする（li に --link を追加し、中身全体を a で囲む）
  <li class="m-card-item m-card-item--link">
    <a href="/xxx/" class="m-card-item__link">
      <h3 class="m-card-item__title">見出し</h3>
      <div class="m-card-item-detail">
        <p class="m-card-item-detail__text">テキスト</p>
      </div>
    </a>
  </li>

  ==========================================================================
  注意事項
  ==========================================================================
  ・高さ揃え：li 直下の子要素の数（全体リンク版は a 直下の子要素の数。最大5）を :has() で数え、subgrid で行を揃えている。
      → 同じ ul 内の li は、子要素の数と並び順を揃えること
        （例：アイコン付きとアイコンなしを同じ ul に混ぜない）。
      → 子要素が6個以上になる場合は、.m-card-list に :has() の指定を追加する。
  ・全体リンク版：li の中身全体を a で囲み、a を subgrid にして高さ揃えを維持している。
      → カードの余白(padding)は li ではなく a に付いている（余白部分もクリックできるように）。
      → a の中に別のリンク（a）は置けない（HTML上不正になるため）。
      → スクリーンリーダーは、見出し・本文を含めた全体をリンク名として読み上げる。
  ・ページ固有の調整（画像サイズ・項目名と内容の2列表示など）は、このファイルではなくページ用CSSに書く。
*/

/* ==========================================================================
   リスト（ul）
   ========================================================================== */
.m-card-list {
  /* li が使う行数。li直下の子要素数に応じて下の :has() で上書きされる */
  --m-card-rows: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px;
  @media screen and (max-width: 600px) {
    margin-top: 30px;
  }
  /* li直下の子要素数を判定して行数を決める（最大5）。全体リンク版は a の直下の子要素数を数える */
  &:has(> .m-card-item > :nth-child(2), > .m-card-item > .m-card-item__link > :nth-child(2)) {
    --m-card-rows: 2;
  }
  &:has(> .m-card-item > :nth-child(3), > .m-card-item > .m-card-item__link > :nth-child(3)) {
    --m-card-rows: 3;
  }
  &:has(> .m-card-item > :nth-child(4), > .m-card-item > .m-card-item__link > :nth-child(4)) {
    --m-card-rows: 4;
  }
  &:has(> .m-card-item > :nth-child(5), > .m-card-item > .m-card-item__link > :nth-child(5)) {
    --m-card-rows: 5;
  }
  /* 2カラム */
  &.m-card-list--col2 {
    grid-template-columns: repeat(2, 1fr);
    @media screen and (max-width: 600px) {
      grid-template-columns: 1fr;
    }
  }
  /* 3カラム */
  &.m-card-list--col3 {
    grid-template-columns: repeat(3, 1fr);
    @media screen and (max-width: 1024px) {
      grid-template-columns: repeat(2, 1fr);
    }
    @media screen and (max-width: 600px) {
      grid-template-columns: 1fr;
    }
  }
}

/* ==========================================================================
   カード1枚（li）
   ========================================================================== */
.m-card-item {
  /* subgrid：親(ul)の行を共有して、同じ行のカード同士の高さを揃える */
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span var(--m-card-rows);
  /* カード内の行間（親のgap 24px ではなくこちらが使われる） */
  row-gap: 10px;
  padding: 30px;
  background-color: var(--white);
  border-radius: 10px;
}

/* アイコンの丸い枠（背景色は u-color-rcloud-bg-sub-03 などで変更する） */
.m-card-item__icon-wrap {
  display: grid;
  place-items: center;
  width: 95px;
  height: 95px;
  border-radius: 50px;
  margin: 10px auto; /* 上下は余白を広めに（row-gap(10px)に加えて） */
  background: var(--white);
}
.m-card-item__icon {
  width: 70px;
}

/* 見出し */
.m-card-item__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--rcloud-primary);
  @media screen and (max-width: 600px) {
    font-size: 18px;
  }
}

/* テキストエリア（.m-card-item-detail）の本文 */
.m-card-item-detail__text {
  font-size: 15px;
  line-height: 1.8;
  @media screen and (max-width: 600px) {
    font-size: 14px;
  }
  /* 本文が続く場合、2個目以降に上余白 */
  & + .m-card-item-detail__text {
    margin-top: 10px;
  }
}

/* ==========================================================================
   全体リンク版（li に .m-card-item--link を追加し、中身を a.m-card-item__link で囲む）
   ========================================================================== */
.m-card-item--link {
  /* 余白は a 側に持たせる（余白部分もクリックできるようにするため） */
  padding: 0;
  transition: var(--transition);
  /* ホバー時：影をつける */
  &:hover {
    box-shadow: var(--card-shadow-hover);
  }
}
.m-card-item__link {
  /* subgrid：li の行を引き継いで、カード同士の高さ揃えを維持する（li の全行にまたがる） */
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
  row-gap: 10px;
  padding: 30px;
  border-radius: inherit;
  /* 見出し以外の文字色は本文色にする（リンク色にしない） */
  color: inherit;
  &:hover {
    text-decoration: none;
  }
  /* キーボードフォーカス時の枠 */
  &:focus-visible {
    outline: 2px solid var(--rcloud-primary);
    outline-offset: 2px;
  }
}

/* ==========================================================================
   カード一覧の下に置く注釈
   ========================================================================== */
.m-card__note {
  margin: 20px 0 0;
}