@charset "UTF-8";
article { box-sizing: border-box; line-height: 1.5; }
article img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;/* 画像下のスペースを消す */
}
article.collection {
    background-color: #fff;
    padding-bottom: 0.1rem;StarRating
    margin-bottom: 2rem;
    color : #1F1F1F;
}
/****************************/
/*  head-container
/***************************/StarRating
.head-container { margin-bottom: 2rem; }
.caption { padding: 0.5rem 1rem; }
.caption .title { font-size: 2rem; }
.headBanner { margin-bottom: 1rem; }
.headLead { width: 95%; margin: 0 auto; font-size: 1.2rem; }
.update { margin: 0.3rem 0.3rem 0; text-align: right; font-size: 0.8rem; color: #808080; }

/****************************/
/*  list-container
/***************************/
.list-container { width: 80%; margin: 0 auto 4rem; padding: 1rem; border: 1px solid #C7C7C7; font-size: 1.2rem; }
.listTitle { font-weight: bold; text-align: center; }
.listInner li { display: flex; align-items: center; gap: 0 10px; position: relative; padding: .3em .3em .3em 1.5em; overflow-wrap: anywhere; }
.listInner li a { text-decoration: underline; color: #0168b7; }
.listInner li::before,
.listInner li::after { position: absolute; content: ''; }
.listInner li::before { left: 0; width: 1.2em; height: 1.2em; border-radius: 50%; background-color: #0168b7; }
.listInner li::after { left: .6em; transform: translateX(-75%) rotate(-45deg); width: .3em; height: .3em; border-bottom: 2px solid #fff; border-right: 2px solid #fff; }
/****************************/
/*  contents-container
/***************************/
.contents-container { margin-bottom: 4rem; }
.contentsTitle { background: #0168b7; font-size: 1.5rem; font-weight: bold; color: #fff; text-align: center; padding: 0.5rem; margin-bottom: 1rem; }
.contentsLead { width: 95%; margin: 0 auto 2rem; font-size: 1.2rem; }
.contentsLead span { font-size: 0.8rem; }
/****************************/
/*  titleBox
/***************************/
.titleBox  { width: 95%; margin: 0 auto 3rem; }
.titleName { border-left: 5px solid #0168b7; border-bottom: 1px solid #0168b7; padding: 0.5rem 0.5rem 0.5rem 1rem; font-size: 1.3rem; font-weight: bold; margin-bottom: 1rem; }
.titleDetail { display: flex; margin-bottom: 2rem; }
.titlePic { width: 15rem; margin-right: 1rem; }
.titleInfo { flex: 1; }
.titleInfo .author, .titleInfo .genres { margin-bottom: 0.3rem; }
.titleInfo .author, .titleInfo .genres, .titleInfo .StarRating { display: flex; }
.titleInfo .author .itemName, .titleInfo .genres .itemName, .titleInfo .StarRating .itemName { width: 5rem; }
.titleInfo .author .itemName::after, .titleInfo .genres .itemName::after, .titleInfo .StarRating .itemName::after { color: #0168b7; content: ":"; }
.titleInfo .author .itemName span, .titleInfo .genres .itemName span, .titleInfo .StarRating .itemName span { display: inline-block; width: 4rem; color: #0168b7; }
.titleInfo .author .item, .titleInfo .genres .item, .titleInfo .StarRating .item { flex: 1;  }
.titleInfo .author a, .titleInfo .genres a { display: inline-block; text-decoration: underline; }
.titleInfo .genres a { margin-right: 0.5rem; }
.titleInfo .StarRating a { display: flex; }
.titleInfo .StarRating .star { margin-right: 0.2rem; line-height: 1.2; }
.titleInfo .StarRating .star img { width: 1.2rem; margin-right: 0.1rem; }
.titleInfo .StarRating .count { font-size: 1rem; }
.titleInfo .StarRating .count span { text-decoration: underline; }
 @media (max-width: 568px) {
     .titleDetail { display: block; }
     .titlePic { margin: 0 auto 1rem; }
 }
.titleInfo .btnBlock { margin-top: 1rem; text-align: center; }
.titleInfo .btnBlock a { display: inline-block; width: 13rem; padding: 0.6rem 1rem; margin: 1rem 0.5rem 0;
    border: 1px solid #C7C7C7; border-radius: 4px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
    font-weight: bold; text-align: center;}
.titleInfo .btnBlock a:hover { opacity: .6; } 
.titleInfo .btnBlock .purchaseBtn { background: #56D6FF; }
.titleBox .comment { padding: 1rem; background: #DAEEFD; font-size: 1.2rem; }
.titleBox .comment span { font-weight: bold; color: #0168b7; }
.titleBox .comment .writer { margin-top: 1rem; text-align: right; }
.titleBox .reviews { border: 1px solid #0168b7; padding: 1rem; font-size: 1.2rem; }
.titleBox .reviews span { font-weight: bold; color: #0168b7; font-size: 1.5rem; }
.titleBox .reviews .userReview { text-align: left; margin-top: 1rem; border-top: 1px solid #e5e5e5; padding-top: 1rem; }
.titleBox .reviews .userReview .reviewTitle { font-weight: bold;}
.titleBox .reviews .userInfo { display: flex; flex-wrap: wrap; align-items: center; }
.titleBox .reviews .userInfo p { max-width: 100%; margin-right: 0.5rem;  margin-bottom: 0.5rem; }
.titleBox .reviews .userInfo .star { line-height: 0; }
.titleBox .reviews .userInfo .star img { width: 1.2rem; margin-right: 0.1rem; }
.titleBox .reviews .userInfo .userName a { font-size: 1rem; line-height: 0; text-decoration: underline; }
.titleBox .reviews .userInfo .date { color: #707070; font-size: .9rem; }
.titleBox .reviews .seeAll { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e5e5e5; text-align: right; }
.titleBox .reviews .seeAll a { display: inline-block; position: relative; padding-right: 1.2rem; font-size: 1rem; text-decoration: underline; }
.titleBox .reviews .seeAll a::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: .5rem;
    height: .5rem;
    margin-top: -0.3rem;
    margin-right: 0.5rem;
    clear: both;
    transform: rotate(135deg);
    border-width: 2px 0 0 2px;
    border-style: solid;
    border-color: #1f1f1f transparent transparent #1f1f1f;
    content: "";
}
/****************************/
/*  titleListBox
/***************************/
.titleListBox { width: 95%; margin: 0 auto; border-top: 2px solid #E5E5E5; padding-top: 2rem;
    display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem; }
.li-titlePic { width: 80%; margin: 0 auto 0.5rem; }
.li-titleName, .li-authorName, .li-tag { word-break: break-word; }
.li-titleName { font-size: 1.2rem; text-decoration: underline; text-align: center; }
.li-authorName { color: #0168b7; text-decoration: underline; text-align: center; }
.li-tag { margin-top: 0.3rem; text-align: center; font-size: 0.8rem; }
.li-tag a { display: inline-block; text-decoration: underline; margin: 0 0.2rem; }
.li-StarRating { margin-top: 0.5rem; }
.li-StarRating a { display: flex; justify-content: center; }
.li-StarRating .star { margin-right: 0.2rem; line-height: 1.2; }
.li-StarRating .star img { width: 1.2rem; margin-right: 0.1rem; }
.li-StarRating .count { font-size: 1rem; }
.li-StarRating .count span { text-decoration: underline; }
.li-btnBlock { margin-top: 1rem; text-align: center; }
.li-btnBlock a { display: inline-block; width: 80%; padding: 0.6rem 1rem;
    border: 1px solid #C7C7C7; border-radius: 4px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
    font-weight: bold; text-align: center;}
.li-btnBlock a:hover { opacity: .6; } 
.li-btnBlock .purchaseBtn { background: #56D6FF; margin-top: 1rem; }
@media (max-width: 568px) {
     .titleListBox { grid-template-columns: repeat(2, 1fr); }
 }
/****************************/
/*  specialBannerArea
/***************************/
.specialBannerArea {
    width: 95%;
    margin: 0 auto 2rem;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
}
.specialName { margin-top: 0.3rem; font-weight: bold; }
@media (max-width: 568px) {
    .specialBannerArea {grid-template-columns: 1fr; }
}
.specialBannerArea.oneBanner { display: block; }
/****************************/
/*  linkBtnBox
/***************************/
.linkBtnBox { width: 95%; margin: 0 auto; border-top: 2px solid #E5E5E5; padding-top: 2rem; text-align: center; }
.linkBtnBox a { display: inline-block; width: 12rem; padding: 0.6rem 1rem; margin: 0 0.5rem 1rem;
    border: 1px solid #C7C7C7; border-radius: 3rem; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
    background: #0168b7; color: #fff; font-weight: bold; text-align: center;}
.linkBtnBox a:hover { opacity: .6; }