@charset "utf-8";

/* ****************************************************************************************************
   * 先輩たちからメッセージを聞いてみよう！
**************************************************************************************************** */

#voice .voice div.contents:after {
  content: ".";
  display: block;
  line-height: 0;
  clear: both;
  visibility: hidden;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 写真
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#voice .voice div.contents div.photo {
  width: 300px;
  float: left;
}

#voice .voice:nth-of-type(even) div.contents div.photo {
  float: right;
}

#voice .voice div.contents div.photo div.profile {
  margin-top: 10px;
  padding-left: 10px;
  border-left: 4px solid #9e77ba;
}

/* * ブレイクポイント ･････････････････ */

@media screen and (max-width:736px) {

#voice .voice div.contents div.photo {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  display: table;
  float: none !important;
}

#voice .voice div.contents div.photo img {
  width: 100%;
  height: auto;
}

}

/* ----------------------------------------------------------------------------------------------------
   * 氏名
/* ------------------------------------------------------------------------------------------------- */

#voice .voice div.contents div.photo div.profile .name {
  margin-bottom: 0;
  font-size: 17px;
}

#voice .voice div.contents div.photo div.profile .name + * {
  margin-top: 0;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 内容
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#voice .voice div.contents div.content {
  width: 400px;
  float: right;
}

#voice .voice:nth-of-type(even) div.contents div.content {
  float: left;
}

/* * ブレイクポイント ･････････････････ */

@media screen and (max-width:736px) {

#voice .voice div.contents div.content {
  width: 100%;
  float: none !important;
}

}

/* ----------------------------------------------------------------------------------------------------
   * キャッチコピー
/* ------------------------------------------------------------------------------------------------- */

#voice .voice div.contents div.content .catchcopy {
  color: #9e77ba;
  line-height: 1.3;
  font-size: 22px;
  font-weight: bold;
}

/* * ブレイクポイント ･････････････････ */

@media screen and (max-width:736px) {

#voice .voice div.contents div.content .catchcopy {
  font-size: 18px;
}

}