@charset "utf-8";

/*item review page*/
#reviews_content{flex:auto;--spacing:2em;}
#reviews_content>.inner{max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;display:grid;grid:"review_title review_title" auto "review_stat review_comment" 1fr/clamp(30em,33%,35em) 1fr;gap:var(--spacing);align-items:start;}
#reviews_content>.inner>h1{grid-area:review_title;}
#review_stat{grid-area:review_stat;}
#review_comment{grid-area:review_comment;}

#reviews_content>.inner>h1{font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW);}
#reviews_content>.inner>h1 b{font-weight:var(--SiteFW-EB);}

#review_stat{display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L2,#fff);position:sticky;inset-block-start:calc(var(--main-nav-height) * 1px + var(--spacing));z-index:1;}
#review_stat .ItemLink{width:min(30em,100%);margin-inline:auto;--W:4.5em;}
#review_stat .overview{display:flex;justify-content:space-around;padding-block-start:var(--spacing);box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 1px 0 inset;width:min(30em,100%);margin-inline:auto;}
#review_stat .overview>div{text-align:center;display:flex;flex-direction:column-reverse;}
#review_stat .overview b{display:block;font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);}
#review_stat .overview span{color:var(--body-text-color-a50,rgba(0 0 0/50%));}

#review_stat .statistics{display:grid;grid-template-columns:auto 1fr auto;gap:.5em var(--spacing);width:min(30em,100%);margin-inline:auto;}
#review_stat .statistics .T{}
#review_stat .statistics .B{display:flex;align-items:center;position:relative;}
#review_stat .statistics .B::before{content:'';display:block;width:100%;height:.666667em;border-radius:1em;background:var(--SiteTHM-A10);position:absolute;inset:0;z-index:0;margin:auto;}
#review_stat .statistics .B::after{content:'';display:block;width:calc(.666667em - 4px);height:calc(.666667em - 4px);margin:calc((.666667em - 4px) / -2) 2px;background:var(--SiteTHM);border-radius:1em;animation:bar ease 3s 300ms forwards;}
#review_stat .statistics .C{font-weight:var(--SiteFW-EB);text-align:end;}
@keyframes bar{
	100%{width:clamp(calc(.666667em - 4px),calc(var(--Review) / var(--TotalReviews) * 100%),calc(100% - 4px));}
}

#review_comment{display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L2,#fff);overflow:hidden;}

#review_comment .filter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing);}
#review_comment .filter .rating{margin-inline-end:auto;}
#review_comment .filter .tab_wrp{display:flex;padding-inline:1px;padding-block-start:1px;box-shadow:var(--body-text-color-a10,rgba(0 0 0/10%)) 0 -1px 0 inset;overflow:hidden;background-color:var(--background-color-L2,#fff);}
#review_comment .filter .tab{display:flex;align-items:center;gap:1px;justify-content:center;text-align:center;min-width:var(--CPT-US);height:calc(var(--CPT-US) - 1px);padding-inline:var(--spacing);border-start-start-radius:var(--CPT-BDR);border-start-end-radius:var(--CPT-BDR);color:inherit;cursor:pointer;overflow:hidden;position:relative;transition:box-shadow 300ms;}
#review_comment .filter .tab::before{content:'';display:block;position:absolute;inset-inline:var(--spacing);inset-block-end:0;z-index:1;height:.25em;background-color:var(--SiteTHM);opacity:0;transition:opacity 300ms;}
#review_comment .filter .tab.on{box-shadow:var(--body-text-color-a10,rgba(0 0 0/10%)) 0 0 0 1px;background-color:inherit;}
#review_comment .filter .tab.on::before{opacity:1;}
#review_comment .filter .tab>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#review_comment .filter .cpt-checkbox{--font-weight:var(--CPT-FW);}

.review_list{display:grid;grid-template-columns:repeat(auto-fill,minmax(26em,1fr));gap:1em;}
.review_list .review{display:grid;grid:"avatar name name" auto "avatar rate time" auto "func comment comment" 1fr/auto auto 1fr;grid-template-rows:auto auto 1fr;align-items:center;column-gap:1em;padding:1.5em;border-radius:.5em;box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 0 0 1px inset;background-color:var(--background-color-L3,#fff);}
.review_list .avatar{grid-area:avatar;width:3em;height:3em;border-radius:100%;overflow:hidden;background:var(--body-text-color-a5,rgba(0 0 0/5%));box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 0 0 1px;}
.review_list .avatar img{display:block;width:100%;height:100%;object-fit:cover;}
.review_list .name{grid-area:name;font-weight:var(--SiteFW-B);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.review_list .rate{grid-area:rate;--RateStarSize:1em;}
.review_list .time{grid-area:time;font-size:var(--SiteFS-S);color:var(--body-text-color-a50,rgba(0 0 0/50%));line-height:1;}
.review_list .comment{grid-area:comment;margin-block-start:1em;align-self:start;max-height:6em;overflow:hidden;overflow-y:auto;text-overflow:ellipsis;}
.review_list .comment.nocomment{font-style:italic;color:var(--body-text-color-a50,rgba(0 0 0/50%));}
.review_list .func{grid-area:func;align-self:start;}
.review_list .report{--CPT-US:var(--icon-size);--color:var(--SiteTHM);display:block;width:var(--CPT-US);height:var(--CPT-US);margin-inline:auto;margin-block-start:1em;transition:color 300ms,visibility 300ms,opacity 300ms;}
.review_list .review:not(:hover) .report{visibility:hidden;opacity:0;}
.review_list .review .report:not(:hover){--color:var(--body-text-color-a50,rgba(0 0 0/50%));--icon:'outlined_flag';}

#review_comment .load{margin-inline:auto;}
#review_comment .load_more{display:block;margin-inline:auto;--icon-order:1;}
#review_comment .load_more.hide{display:none;}
@media only screen and (max-width:1000px){
	#reviews_content{--spacing:1.5em;}
}
@media only screen and (max-width:800px){
	#reviews_content>.inner{grid:"review_title" auto "review_stat" auto "review_comment" 1fr;width:min(40em,100%);}
	#review_stat{position:unset;}
	#review_comment .filter .tab_wrp{flex-wrap:wrap;gap:.5em;box-shadow:unset;}
	#review_comment .filter .tab{border-radius:var(--CPT-BDR);box-shadow:var(--body-text-color-a10,rgba(0 0 0/10%)) 0 0 0 1px inset;}
	#review_comment .filter .tab.on{background-color:var(--SiteTHM-A10);box-shadow:unset;}
}
@media only screen and (max-width:480px){
	#review_stat,
	#review_comment{margin-inline:calc(var(--spacing) * -1);}
}