@charset "UTF-8";
/*手機版*/
/*非手機版*/
/*中間混合*/
/*某值(包含)以上*/
/*某值(不包含)以下*/
/*計算比例值*/
.main-title {
  margin-bottom: 10px; }
  @media screen and (min-width: 0px) {
    .main-title {
      font-size: 20px; } }
  @media screen and (min-width: 768px) {
    .main-title {
      font-size: 18px; } }
  @media screen and (min-width: 992px) {
    .main-title {
      font-size: 22px; } }
  @media screen and (min-width: 1200px) {
    .main-title {
      font-size: 22px; } }
  @media screen and (min-width: 1520px) {
    .main-title {
      font-size: 28px; } }

.msg {
  border-radius: 5px;
  border: 1px solid #006284;
  color: #006284;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  @media screen and (min-width: 0px) {
    .msg {
      font-size: 12px;
      padding: 2px 8px 3px 8px; } }
  @media screen and (min-width: 768px) {
    .msg {
      font-size: 12px;
      padding: 2px 8px 3px 8px; } }
  @media screen and (min-width: 992px) {
    .msg {
      font-size: 14px;
      padding: 3px 9px; } }
  @media screen and (min-width: 1200px) {
    .msg {
      font-size: 14px;
      padding: 3px 9px; } }
  @media screen and (min-width: 1520px) {
    .msg {
      font-size: 16px;
      padding: 4px 12px; } }
  @media screen and (min-width: 0px) {
    .msg.mr {
      margin-left: 17px; } }
  @media screen and (min-width: 768px) {
    .msg.mr {
      margin-left: 15px; } }
  @media screen and (min-width: 992px) {
    .msg.mr {
      margin-left: 17px; } }
  @media screen and (min-width: 1200px) {
    .msg.mr {
      margin-left: 17px; } }
  @media screen and (min-width: 1520px) {
    .msg.mr {
      margin-left: 20px; } }
  @media screen and (min-width: 0px) {
    .msg img {
      margin-right: 1px;
      width: 16px; } }
  @media screen and (min-width: 768px) {
    .msg img {
      margin-right: 1px;
      width: 16px; } }
  @media screen and (min-width: 992px) {
    .msg img {
      margin-right: 2px;
      width: 20px; } }
  @media screen and (min-width: 1200px) {
    .msg img {
      margin-right: 2px;
      width: 20px; } }
  @media screen and (min-width: 1520px) {
    .msg img {
      margin-right: 3px;
      width: 22px; } }
  .msg:hover {
    color: #006284; }

.card-frame {
  border-radius: 8px;
  background: #EBEBEB;
  margin-bottom: 20px; }
  @media screen and (min-width: 0px) {
    .card-frame {
      padding: 10px 14px; } }
  @media screen and (min-width: 768px) {
    .card-frame {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 8px 12px;
      height: 140px; } }
  @media screen and (min-width: 992px) {
    .card-frame {
      padding: 10px 14px;
      height: 164px; } }
  @media screen and (min-width: 1200px) {
    .card-frame {
      padding: 10px 14px;
      height: 164px; } }
  @media screen and (min-width: 1520px) {
    .card-frame {
      padding: 14px 18px;
      height: 188px; } }

.avatar-frame {
  height: inherit;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .avatar-frame {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto; } }
  @media screen and (min-width: 0px) {
    .avatar-frame img {
      max-width: 100%; } }
  @media screen and (min-width: 768px) {
    .avatar-frame img {
      height: calc(100% - 8px*2); } }
  @media screen and (min-width: 992px) {
    .avatar-frame img {
      height: calc(100% - 10px*2); } }
  @media screen and (min-width: 1200px) {
    .avatar-frame img {
      height: calc(100% - 10px*2); } }
  @media screen and (min-width: 1520px) {
    .avatar-frame img {
      height: calc(100% - 14px*2); } }

@media screen and (min-width: 0px) {
  .info-frame {
    font-size: 16px; } }

@media screen and (min-width: 768px) {
  .info-frame {
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;
    font-size: 14px;
    margin-left: 10px; } }

@media screen and (min-width: 992px) {
  .info-frame {
    font-size: 16px;
    margin-left: 15px; } }

@media screen and (min-width: 1200px) {
  .info-frame {
    font-size: 16px;
    margin-left: 15px; } }

@media screen and (min-width: 1520px) {
  .info-frame {
    font-size: 18px;
    margin-left: 20px; } }

@media screen and (min-width: 0px) {
  .socail-frame {
    width: 100%; } }

@media screen and (min-width: 768px) {
  .socail-frame {
    text-align: right;
    width: 150px; } }

@media screen and (min-width: 0px) {
  .socail-frame img {
    width: 35px; } }

@media screen and (min-width: 768px) {
  .socail-frame img {
    margin-left: 5px;
    width: 30px; } }

@media screen and (min-width: 992px) {
  .socail-frame img {
    width: 35px; } }

@media screen and (min-width: 1200px) {
  .socail-frame img {
    width: 35px; } }

@media screen and (min-width: 1520px) {
  .socail-frame img {
    width: 40px; } }

.about-frame {
  border-radius: 8px;
  border: 1px solid #1C1C1C; }
  @media screen and (min-width: 0px) {
    .about-frame {
      padding: 10px 14px; } }
  @media screen and (min-width: 768px) {
    .about-frame {
      padding: 8px 12px; } }
  @media screen and (min-width: 992px) {
    .about-frame {
      padding: 10px 14px; } }
  @media screen and (min-width: 1200px) {
    .about-frame {
      padding: 10px 14px; } }
  @media screen and (min-width: 1520px) {
    .about-frame {
      padding: 14px 18px; } }