@charset 'UTF-8';
/*
* 下部固定バナー表示
*/
.bottom_bar_js_type1 {
  display: block;
  width: 100%;
}


/*
* ファーストビュー
*/
.mypage_bl_fvWrapper {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

.mypage_bl_fv {
  background-color: var(--col_white);
  margin: 0 auto;
  width: 100%;
}

.mypage_bl_fv source,
.mypage_bl_fv img {
  height: auto;
  object-fit: cover;
  width: 100%;
}

/*
* 書籍紹介カード
*/
/* カードの並び */
.mypage_bl_cardUnit {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 60px 44px;
  justify-content: space-between;
}

.mypage_bl_cardUnit::after {
  content: '';
}

/* カード本体 */
.mypage_bl_card {
  align-items: center;
  background-color: var(--col_white);
  border-radius: 7px;
  box-shadow: 0 3px 6px var(--col_blackTransparent);
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: flex-start;
  padding: 15px;
  position: relative;
}

.mypage_bl_card cite,
.mypage_bl_card em {
  font-style: normal;
}

/* カードバッジ */
.mypage_bl_card_badge {
  align-items: center;
  display: flex;
  height: 48px;
  justify-content: center;
  left: 17px;
  position: absolute;
  top: 0;
  width: 48px;
}

.mypage_bl_card_badge__book {
  background-color: var(--col_lightGreen);
}

.mypage_bl_card_badge__dvd {
  background-color: var(--col_lightOrange);
}

.mypage_bl_card_badge_txt {
  color: var(--col_black);
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}

/* 書影 */
.mypage_bl_card_imgWrapper {
  align-items: center;
  display: flex;
  height: 14.5rem;
  justify-content: center;
  padding: 0;
  width: 100%;
}

.mypage_bl_card_imgWrapper img {
  filter: drop-shadow(0 3px 6px var(--col_blackTransparent));
  height: 100%;
  object-fit: contain;
}

/* カード本体 */
.mypage_bl_card_body {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: flex-start;
  width: 100%;
}

.mypage_bl_card_ttl {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.7222222;
}

.mypage_bl_card_txt {
  font-size: 1.6rem;
  line-height: 1.6875;
}

.mypage_bl_card_txt em {
  font-weight: bold;
}

.mypage_bl_card_txt ul,
.mypage_bl_card_txt ol {
  margin-bottom: 1rem;
  padding-left: 1.2em;
}

.mypage_bl_card_txt ul {
  list-style: disc;
}

.mypage_bl_card_txt ol {
  list-style: decimal;
}

.mypage_bl_card_txt small {
  font-size: 1.4rem;
}

/* 著者・発行年など書誌事項 */
.mypage_bl_card_ref {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.mypage_bl_card_ref dt,
.mypage_bl_card_ref dd {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 10px;
}

.mypage_bl_card_ref dt:last-of-type,
.mypage_bl_card_ref dd:last-of-type {
  margin-bottom: 0;
}

.mypage_bl_card_ref dt {
  font-weight: bold;
  text-align-last: justify;
  text-justify: inter-character;
  width: 17%;
}

/* 文字間調整 */
.mypage_bl_card_ref dt.mypage_hp_ls1::first-letter {
  letter-spacing: 1em;
}


.mypage_bl_card_ref dd {
  padding-left: 16px;
  width: 83%;
}

.mypage_bl_card_ref dd a {
  text-decoration: underline;
}

.mypage_bl_card_ref dd a:hover,
.mypage_bl_card_ref dd a:focus,
.mypage_bl_card_ref dd a:active {
  text-decoration: underline var(--col_gold);
}

/* 下線付きリンク */
.mypage_el_link_underline,
.mypage_el_link_underline:visited {
  text-decoration: underline;
}

.mypage_el_link_underline:hover,
.mypage_el_link_underline:focus,
.mypage_el_link_underline:active {
  text-decoration: underline var(--col_gold);
}



/*===============================================
●スマホ用（896px未満）
===============================================*/
@media screen and (max-width:896px) {
  /*
* ファーストビュー
*/
  .mypage_bl_fv {
    aspect-ratio: 15 / 7;
    height: calc(100vw * .4666667);
    width: 100vw;
  }

  /*
* 書籍紹介カード
*/
  /* カードの並び */
  .mypage_bl_cardUnit {
    align-items: center;
    flex-direction: column;
    gap: 48px;
    justify-content: flex-start;
  }

  .mypage_bl_cardUnit::after {
    content: '';
    width: min(100%, 33.5rem);
  }

  /* カード本体 */
  .mypage_bl_card {
    width: min(100%, 33.5rem);
  }
}

/*===============================================
●PC・タブレット用（897px以上）
===============================================*/
@media screen and (min-width:897px) {
  /*
* ファーストビュー
*/
  .mypage_bl_fv {
    aspect-ratio: 1366 / 395;
  }

  /*
* 書籍紹介カード
*/
  /* カードの並び */
  .mypage_bl_cardUnit::after {
    width: 33.5rem;
  }

  /* カード本体 */
  .mypage_bl_card {
    width: 33.5rem;
  }
}