@charset "utf-8";

/*アプリーチ (アプリ紹介)*/
.appreach {
  position: relative;
  max-width: 600px;
  margin: 21px 0 0;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #7c7c7c;
  overflow: hidden;
  text-align: left;

  /* ★ Gridコンテナとして設定 ★ */
  display: grid;
  /* 領域の名前を定義: iconが左、detailが右上の大部分、linksが右下の大部分 */
  grid-template-areas:
    "icon detail"
    "icon links";
  /* 2列の幅を定義: アイコン幅(120px+10px)と残りの幅(1fr) */
  grid-template-columns: 130px 1fr;
  /* 行の隙間（アイコンと詳細/リンクの間）を定義 */
  grid-gap: 10px;

  & p {
    margin: 0;
    padding: 0;
  }

  .appreach__bgimage {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 100%;
    height: 100%;
    background: url("/image/smartphone-icon.svg") no-repeat right bottom;
    background-size: auto 60%;
    opacity: 0.15;
    pointer-events: none;
    /* 画像の上でも他の要素の操作を可能にする */
  }

  .appreach__icon {
    /* iconエリアに配置し、2行分を占有する */
    grid-area: icon;
    overflow: hidden;
    width: 100%;
    /* grid-template-columnsで幅を指定しているため */
    height: auto;
    padding: 5px;

    & img {
      border-radius: 10%;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }
  }

  .appreach__detail {
    /* detailエリアに配置 */
    grid-area: detail;
    font-size: 1.25rem;

    & p.appreach__name {
      max-height: 3em;
      font-size: 1.0625rem;
      font-weight: bold;
      line-height: 1.2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      /*要素をはみ出したテキストを表示しない*/
      /*  text-overflow: ellipsis; /*テキストがはみ出た時に … を表示する*/
      /*  white-space: nowrap; /*テキストを改行させず、はみ出させる*/
    }

    & p.appreach__info {
      padding-top: 10px;
      font-size: 0.75rem;
      line-height: 1.3;
    }

    .appreach__developper,
    .appreach__price {
      margin-right: 0.5em;
    }

    .appreach__posted {
      font-size: 0.6875rem;

      & a {
        margin-left: 0.5em;
      }
    }
  }

  .appreach__links {
    /* linksエリアに配置 */
    grid-area: links;
    align-self: end;
    white-space: nowrap;
    font-size: 0;

    /* リンクバッジ自体を Flexbox で制御し、中央寄せと折り返しを可能にする */
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    /* 狭くなったら折り返す */
    gap: 10px;
    /* ボタン間の隙間 */

    & img {
      width: auto;
      height: auto;
      max-width: 135px;
      min-height: 40px;
    }
  }

  @media screen and (max-width: 450px) {
    .appreach__links {
      gap: 5px;
      /* ボタン間の隙間 */
    }

    .appreach__detail p.appreach__name {
      -webkit-line-clamp: 1;
      line-clamp: 1;
    }
  }
}