@charset "utf-8";
/* CSS Document */


@media only screen and (max-width: 450px) {/*SP*/
}
@media only screen and (min-width: 451px) {/*PC*/
}


/***ユーザー情報******************/
.article_meta,.article_meta p.date {display: block;background: none;text-align: right;}
@media only screen and (max-width: 450px) {/*SP*/
}
@media only screen and (min-width: 451px) {/*PC*/
}

/***ユーザー情報******************/
.user {display: flex;justify-content: space-between;margin-bottom: 10px}
.user .user_img .img {border-radius: 50%;overflow: hidden; background: #ff9900;}
.user .user_img .info {color: #666;font-weight: bold;font-size: 0.85rem; line-height: 1rem}
.user .user_text {align-self: center}
.user .user_text p {margin: 0}
.user .user_text .voice {
  position: relative;
  background: #FFD89F;
  border-radius: 10px;
  padding: 1rem;
}
.user .user_text .voice::after {
  content: "";
  display: block;
  height: 20px;width: 15px;
  background:#FFD89F;
  clip-path: polygon( 0 50%, 100% 0%,100% 100%);
  position: absolute;
  top: calc(50% - 10px);
  left: -14px;
}
.user .user_text .hyoka .stars {color: #FFbb00; font-weight: bold;line-height: 1em;font-size: 1.15rem;}
@media only screen and (max-width: 450px) {/*SP*/
  .user .user_img {width: 100px;}
  .user .user_text {width: calc(100% - 100px - 10px) }
  .user .user_img .img {width: 100px;height: 100px;}
  .user .user_text .hyoka {text-align: right; margin:0.5em 0.5em 0 -110px;}
}
@media only screen and (min-width: 451px) {/*PC*/
  .user .user_img {width: 150px;}
  .user .user_text {width: calc(100% - 150px - 20px) }
  .user .user_img .img {width: 150px;height: 150px;}
.user .user_text .hyoka {padding-left: 1rem}
}


/***状況・環境******************/
#work_meta dl {width: 100%; margin-top: 2px;border: solid 1px #ccc;}
#work_meta .data dl {display: flex;flex-direction: row;flex-wrap: wrap;border: none;margin: 0}
#work_meta dl dt.caption {background: #999;color: #FFF;font-size: 0.75rem;line-height: 1.5em;width: 100%}
#work_meta dl dd.data {width: 100%}
#work_meta dl dt,#work_meta dl dd {font-size: 0.85rem;text-align: center; padding: 0;margin: 0; line-height: 2em}
#work_meta dl dt {background: #efefef}
#work_meta dl dd a {display: inline-block;margin: 0 2px}
@media only screen and (max-width: 450px) {/*SP*/
  #work_meta .data_flex dl {display: flex;flex-wrap: wrap}
  #work_meta dl dt {width: 8em}
  #work_meta dl dd {width: calc(100% - 8em);}
  #work_meta .data dl dt,
  #work_meta .data dl dd {border-bottom: solid 1px #ccc;}
  #work_meta .pc_data dt.pc4 {border: none;}
  #work_meta .pc_data dd.pc4 {border: none;}
  #work_meta .data dl dt.d2 {border: none;}
  #work_meta .data dl dd.d2 {border: none;}
}
@media only screen and (min-width: 451px) {/*PC*/
  #work_meta dl {display: flex;flex-direction: column;}
  #work_meta dl dd {flex-grow: 1;display: flex;flex-wrap: wrap;justify-content: center; align-items: center;}
  #work_meta .data_flex {display: flex;justify-content: space-between}
  #work_meta .data_flex.set_2 > dl{width: calc((100% - 1px) / 2)}
  #work_meta .data_flex.set_3 > dl{width: calc((100% - 2px) / 3)}
  #work_meta .data dl {display: flex;flex-direction: row;flex-wrap: wrap;border: none}
  #work_meta .data dl dt,#work_meta .data dl dd {width: 50%;}
  #work_meta .data dl dt.d1 {order: 1;}
  #work_meta .data dl dd.d1 {order: 3;border-right: solid 1px #ccc;}
  #work_meta .data dl dt.d2 {order: 2;border-left: solid 1px #ccc;}
  #work_meta .data dl dd.d2 {order: 4;}
  #work_meta .pc_data dl dt,#work_meta .pc_data dl dd {width: 25%;border-right: solid 1px #ccc;}
  #work_meta .pc_data dl dt.pc1 {order: 1;}
  #work_meta .pc_data dl dd.pc1 {order: 5;}
  #work_meta .pc_data dl dt.pc2 {order: 2;}
  #work_meta .pc_data dl dd.pc2 {order: 6;}
  #work_meta .pc_data dl dt.pc3 {order: 3;}
  #work_meta .pc_data dl dd.pc3 {order: 7;}
  #work_meta .pc_data dl dt.pc4 {order: 4; border: none;}
  #work_meta .pc_data dl dd.pc4 {order: 8; border: none;}

}



/**************************************************
アーカイブ・一覧
**************************************************/
#work.archives article {border-bottom: solid 1px #ccc;padding-bottom: 10px; margin-bottom: 10px;}
#work.archives a {display: block;padding: 0 10px;text-decoration: none;color: #333}
#work.archives a:hover {background:#FFFCDF}
#work.archives h2 {
  color: var(--color_blue);
  line-height: 1.5;
  border-bottom: solid 2px var(--color_blue);
  text-indent: -1.2em;
  padding: 5px 0 0 1.2em;
}
#work.archives h2::before {content: "\f35d";
font:var(--fa-font-solid);
  margin-right: 0.3em;
}
#work.archives a:hover h2 {
  background: var(--color_blue);
  color: var(--color_white);
  margin: 0 -10px;
  padding: 5px 0.5em 0 1.8em;
}
#work.archives .date {font-size: 0.85rem;text-align: right;color: #666;}
#work.archives .user {margin: 0}
#work.archives .user .user_text .voice {line-height: 1.5;}
#work.archives ul,#work.archives li {margin: 0;padding: 0;list-style: none}
#work.archives .cate {  display: flex;flex-wrap: wrap;justify-content: flex-end; font-size: 0.85rem;padding:2px }
#work.archives .cate li{margin: 3px;}
#work.archives .cate li a{
  border: solid 1px var(--color_blue);
  color: var(--color_blue);
  border-radius: 5px;
}
#work.archives .cate li a:hover{  background: var(--color_blue);
  color: var(--color_white);
}


@media only screen and (max-width: 450px) {/*SP*/
  #work.archives .date {margin-bottom: 5px;}
}
@media only screen and (min-width: 451px) {/*PC*/
  #work.archives h2 {font-size: 1.3rem}
  #work.archives .user .user_img {width: 100px;}
  #work.archives .user .user_text {width: calc(100% - 100px - 20px) }
  #work.archives .user .user_img .img {width: 100px;height: 100px;}
}