@charset 'utf-8';

img {max-width:100%;}

.clearfix {
  zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: "";
    display: table; }
  .clearfix:after {
    clear: both; }

.media {
  text-align: center;
    margin-left: -20px;
  margin-top: 30px; }
  .media .media-container {
    margin-left: -20px;
    text-align: center; }
  .media .media-list {
    width: 33.33%;
    float: left; }
    .media .media-list .media-link {
      display: block;
      margin-left: 20px;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden; }
    @media screen and (max-width: 955px) {
      .media .media-list {
        float: none;
        display: inline-block; } }
    .media .media-list .lower-box {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 90px;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 7px 10px 7px 10px;
      box-sizing: border-box;
      color: #FFFFFF;
      overflow: hidden;
      text-align: left; }
      .media .media-list .lower-box .tag {
        display: inline-block; }
      .media .media-list .lower-box .date {
        display: inline-block;
        font-size: 12px;
        position: relative;
        top: 1px; }
      .media .media-list .lower-box .title {
        margin-top: 5px;
        line-height: 1.2; }
    .media .media-list.media-hover-03 img {
      -webkit-transform: scale(1.2);
          -ms-transform: scale(1.2);
              transform: scale(1.2);
      -webkit-transition: all 0.3s;
              transition: all 0.3s; }
    .media .media-list.media-hover-03:hover img {
      -webkit-transform: scale(1);
          -ms-transform: scale(1);
              transform: scale(1);
      -webkit-transition: all 0.3s;
              transition: all 0.3s; }
    .media .media-list.media-hover-05 img {
      -webkit-transform: scale(1.2);
          -ms-transform: scale(1.2);
              transform: scale(1.2);
      -webkit-transition: all 1.2s;
              transition: all 1.2s; }
    .media .media-list.media-hover-05:hover img {
      -webkit-transform: scale(1);
          -ms-transform: scale(1);
              transform: scale(1);
      -webkit-transition: all 1.2s;
              transition: all 1.2s; }
.tag {
  display: inline-block;
  line-height: 20px;
  font-size: 1.1em;
  letter-spacing: 0.04em;
  padding: 0 5px;
  border-radius: 2px; }
  .tag.tag-media {
    background-color: #FF9C00; }

.media-counselingguide {
  text-align: center;
  margin-top: 50px; }
  .media-counselingguide .media-container {
    margin-left: -30px;
    margin-right: 30px;
    text-align: center; }
  .media-counselingguide .media-list {
    width: 50%;
    float: left; }
    .media-counselingguide .media-list .media-link {
      display: block;
      margin-left: 50px;
      margin-bottom: 50px;
      position: relative;
      overflow: hidden; }
    @media screen and (max-width: 955px) {
      .media-counselingguide .media-list {
        float: none;
        display: inline-block; } }
    .media-counselingguide .media-list .lower-box {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 90px;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 7px 10px 7px 10px;
      box-sizing: border-box;
      color: #FFFFFF;
      overflow: hidden;
      text-align: left; }
      .media-counselingguide .media-list .lower-box .tag {
        display: inline-block; }
      .media-counselingguide .media-list .lower-box .date {
        display: inline-block;
        font-size: 12px;
        position: relative;
        top: 1px; }
      .media-counselingguide .media-list .lower-box .title {
        margin-top: 5px;
        text-align: center;
	    font-size: 1.5em;
        line-height: 2.2; }
    .media-counselingguide .media-list.media-hover-03 img {
      -webkit-transform: scale(1.2);
          -ms-transform: scale(1.2);
              transform: scale(1.2);
      -webkit-transition: all 0.3s;
              transition: all 0.3s; }
    .media-counselingguide .media-list.media-hover-03:hover img {
      -webkit-transform: scale(1);
          -ms-transform: scale(1);
              transform: scale(1);
      -webkit-transition: all 0.3s;
              transition: all 0.3s; }
    .media-counselingguide .media-list.media-hover-05 img {
      -webkit-transform: scale(1.2);
          -ms-transform: scale(1.2);
              transform: scale(1.2);
      -webkit-transition: all 1.2s;
              transition: all 1.2s; }
    .media-counselingguide .media-list.media-hover-05:hover img {
      -webkit-transform: scale(1);
          -ms-transform: scale(1);
              transform: scale(1);
      -webkit-transition: all 1.2s;
              transition: all 1.2s; }

.tag {
  display: inline-block;
  line-height: 30px;
  font-size: 1.1em;
  letter-spacing: 0.04em;
  padding: 0 5px;
  border-radius: 2px; }
  .tag.tag-media {
    padding: 0 15px;
	color: #000000;
    background-color: #ffffff; }