@charset "UTF-8";
/*
  /rakurakucloud/gwtg/asset/css/object/module/m-product-lineup.css
  楽楽クラウド 製品ラインナップ（9枚カード）
*/
.m-product-lineup {
  padding: 72px 0 88px;
  background-color: var(--white);
  @media screen and (max-width: 840px) {
    padding: 48px 0;
  }
}
.m-product-lineup__inner {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}
.m-product-lineup__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  @media screen and (max-width: 840px) {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
  }
}
.m-product-lineup__logo-wrap {
  width: 100%;
  max-width: 460px;
  padding: 32px;
}
.m-product-lineup__desc {
  font-size: 20px;
  line-height: 2;
  letter-spacing: 0.1em;
  margin: 0 0 40px;
    @media screen and (max-width: 840px) {
      font-size: 16px;
      line-height: 1.8;
      margin: 0 0 32px;
    
  }
}
.m-product-lineup__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 80px 0 0;
     @media screen and (max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media screen and (max-width: 840px) {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 40px 0 0;
  }
}

/* カード全体をFlexboxにして上下揃えの基準を作る */
.m-product-lineup__item {
  border-radius: 10px;
  padding: 24px 16px 28px;
  text-align: center;
  position: relative;
  text-decoration: none; /* リンクの下線を消去 */

  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  &.m-product-lineup__item--seisan {
    background-color: var(--rseisan-bg-sub-03);
  }
  &.m-product-lineup__item--meisai {
    background-color: var(--rmeisai-bg-sub-03);
  }
  &.m-product-lineup__item--seikyu {
    background-color: var(--rseikyu-bg-sub-03);
  }
  &.m-product-lineup__item--denshihozon {
    background-color: var(--rdenshihozon-bg-sub-03);
  }
  &.m-product-lineup__item--saiken {
    background-color: var(--rsaikenkanri-bg-sub-03);
  }
  &.m-product-lineup__item--hanbai {
    background-color: var(--rhanbai-bg-sub-03);
  }
  &.m-product-lineup__item--kintai {
    background-color: var(--rkintai-bg-sub-03);
  }
  &.m-product-lineup__item--jido {
    background-color: var(--rjidootai-bg-sub-03);
  }
  &.m-product-lineup__item--mail {
    background-color: var(--rmailmarketing-bg-sub-03);
  }
}

.m-product-lineup__category {
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
}

/* ロゴ表示領域の共通設定 */
.m-product-lineup__logo-image {
  width: 100%;
  max-width: 170px;      /* 基本ロゴの最大横幅 */
  height: 52px;          /* ロゴ表示エリアの高さを固定 */
  object-fit: contain;   /* アスペクト比を崩さずエリア内に収める */
  margin: 20px auto 0;
}

/* ★ロゴ個別サイズ調整：文字数が多く横長なロゴを拡大 */
.m-product-lineup__item--denshihozon .m-product-lineup__logo-image,
.m-product-lineup__item--saiken .m-product-lineup__logo-image,
.m-product-lineup__item--jido .m-product-lineup__logo-image {
  max-width: 195px; /* 少し大きめに調整 */
}

.m-product-lineup__item--mail .m-product-lineup__logo-image {
  max-width: 215px; /* メールマーケティングをさらに大きく調整 */
}

/* 各ボタンをカード右下に配置 */
.m-product-lineup__item .c-button {
  margin-top: auto;
  position: absolute;
  right: 24px;
  top: 84px;

   @media screen and (max-width: 840px) {
    right: 16px;
  top: 84px;
  }
}


/* --------------------------------------------------
  各商材の通常時アイコン背景色
-------------------------------------------------- */
.m-product-lineup__item--seisan .c-button .c-button__icon--small {
  background-color: var(--rseisan-primary);
}
.m-product-lineup__item--meisai .c-button .c-button__icon--small {
  background-color: var(--rmeisai-primary);
}
.m-product-lineup__item--seikyu .c-button .c-button__icon--small {
  background-color: var(--rseikyu-primary);
}
.m-product-lineup__item--denshihozon .c-button .c-button__icon--small {
  background-color: var(--rdenshihozon-primary);
}
.m-product-lineup__item--saiken .c-button .c-button__icon--small {
  background-color: var(--rsaikenkanri-primary);
}
.m-product-lineup__item--hanbai .c-button .c-button__icon--small {
  background-color: var(--rhanbai-primary);
}
.m-product-lineup__item--kintai .c-button .c-button__icon--small {
  background-color: var(--rkintai-primary);
}
.m-product-lineup__item--jido .c-button .c-button__icon--small {
  background-color: var(--rjidootai-primary);
}
.m-product-lineup__item--mail .c-button .c-button__icon--small {
  background-color: var(--rmailmarketing-primary);
}

/* --------------------------------------------------
  ★カードホバー時：アイコンの反転（背景白＋テーマカラーの矢印＆内枠）
-------------------------------------------------- */
.m-product-lineup__item--seisan:hover .c-button .c-button__icon--small {
  background-color: var(--white);
  color: var(--rseisan-primary);
  border-color: var(--rseisan-primary);
}
.m-product-lineup__item--meisai:hover .c-button .c-button__icon--small {
  background-color: var(--white);
  color: var(--rmeisai-primary);
  border-color: var(--rmeisai-primary);
}
.m-product-lineup__item--seikyu:hover .c-button .c-button__icon--small {
  background-color: var(--white);
  color: var(--rseikyu-primary);
  border-color: var(--rseikyu-primary);
}
.m-product-lineup__item--denshihozon:hover .c-button .c-button__icon--small {
  background-color: var(--white);
  color: var(--rdenshihozon-primary);
  border-color: var(--rdenshihozon-primary);
}
.m-product-lineup__item--saiken:hover .c-button .c-button__icon--small {
  background-color: var(--white);
  color: var(--rsaikenkanri-primary);
  border-color: var(--rsaikenkanri-primary);
}
.m-product-lineup__item--hanbai:hover .c-button .c-button__icon--small {
  background-color: var(--white);
  color: var(--rhanbai-primary);
  border-color: var(--rhanbai-primary);
}
.m-product-lineup__item--kintai:hover .c-button .c-button__icon--small {
  background-color: var(--white);
  color: var(--rkintai-primary);
  border-color: var(--rkintai-primary);
}
.m-product-lineup__item--jido:hover .c-button .c-button__icon--small {
  background-color: var(--white);
  color: var(--rjidootai-primary);
  border-color: var(--rjidootai-primary);
}
.m-product-lineup__item--mail:hover .c-button .c-button__icon--small {
  background-color: var(--white);
  color: var(--rmailmarketing-primary);
  border-color: var(--rmailmarketing-primary);
}