@charset "utf-8";

/*NumberDo ランナースナップギャラリー 2017.3.27*/
.do-snap {
  background-color: #999;
  margin: -20px -80px 30px;
  padding-bottom: 40px;
}
.do-snap .lead {
  margin: -20px 0 0 0;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  padding: 35px 100px 30px 100px;
  text-align: center;
  background-color: #fff;
}
.do-snap .headline {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) inset;
  border-radius: 100px;
  text-align: center;
  background-color:#fff;
  color: #333;
  margin: 35px 100px -30px 100px;
  padding: 2px 0 1px 0;
}
.do-snap .headline h5 {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-top: 16px;
}
.do-snap .headline p {
  font-size: 15px;
  color: #333;
  margin: 15px 30px 20px 30px;
}
.do-snap .runner-left01, .do-snap .runner-left02 {
  background-color: #fff;
  clear: both;
  display: block;
  float: left;
  margin-left: 0px;
  margin-top: 30px;
  padding: 10px;
  width: 400px;
  transform: rotate(-4deg);
  box-shadow: -5px -5px 5px rgba(0, 0, 0, 0.3);
}
.do-snap .runner-left02 {
  margin-top: -55px;
  transform: rotate(-6deg);
}
.do-snap .runner-left01:hover {
  box-shadow: -7px -7px 7px rgba(0, 0, 0, 0.3);
  transform: rotate(-4deg) scale(1.1,1.1);
  position: relative;
  z-index: 10000;
}
.do-snap .runner-left02:hover {
  box-shadow: -7px -7px 7px rgba(0, 0, 0, 0.3);
  transform: rotate(-6deg) scale(1.1,1.1);
  position: relative;
  z-index: 10000;
}
.do-snap .runner-right01,
.do-snap .runner-right02 {
  background-color: #fff;
  display: block;
  float: right;
  margin-right: 30px;
  margin-top: 80px;
  padding: 10px;
  width: 400px;
  transform: rotate(3deg);
  box-shadow: -5px -5px 5px rgba(0, 0, 0, 0.3);
}
.do-snap .runner-right02 {
  margin-top: -5px;
  margin-right: 30px;
  transform: rotate(6deg);
}
.do-snap .runner-right01:hover {
  box-shadow: -7px -7px 7px rgba(0, 0, 0, 0.3);
  transform: rotate(3deg) scale(1.1,1.1);
  position: relative;
  z-index: 10000;
}
.do-snap .runner-right02:hover {
  box-shadow: -7px -7px 7px rgba(0, 0, 0, 0.3);
  transform: rotate(6deg) scale(1.1,1.1);
  position: relative;
  z-index: 10000;
}
.do-snap .runner-center01 {
  background-color: #fff;
  clear: both;
  display: block;
  float: left;
  margin-left: 200px;
  margin-top: -30px;
  padding: 10px;
  width: 400px;
  transform: rotate(3deg);
  box-shadow: -5px -5px 5px rgba(0, 0, 0, 0.3);
}
.do-snap .runner-center01:hover {
  box-shadow: -7px -7px 7px rgba(0, 0, 0, 0.3);
  transform: rotate(3deg) scale(1.1,1.1);
  position: relative;
  z-index: 10000;
}
.do-snap .runner-left01 img,
.do-snap .runner-left02 img,
.do-snap .runner-right01 img,
.do-snap .runner-right02 img,
.do-snap .runner-center01 img {
  width: 400px;
}
.do-snap .runner-left01 .person,
.do-snap .runner-left02 .person,
.do-snap .runner-right01 .person,
.do-snap .runner-right02 .person,
.do-snap .runner-center01 .person {
  font-size: 14px;
  margin: 10px;
  padding: 0;
}
.do-snap .runner-left01 .person span.job,
.do-snap .runner-left02 .person span.job,
.do-snap .runner-right01 .person span.job,
.do-snap .runner-right02 .person span.job,
.do-snap .runner-center01 .person span.job {
  font-size: 14px;
  font-weight: bold;
  display: block;
}
.do-snap .runner-left01 .person span.name,
.do-snap .runner-left02 .person span.name,
.do-snap .runner-right01 .person span.name,
.do-snap .runner-right02 .person span.name,
.do-snap .runner-center01 .person span.name {
  font-size: 22px;
  font-weight: bold;
}
.do-snap .runner-left01 .comment,
.do-snap .runner-left02 .comment,
.do-snap .runner-right01 .comment,
.do-snap .runner-right02 .comment,
.do-snap .runner-center01 .comment {
  font-size: 14px;
  margin: 10px 0 0 0;
  padding: 0 10px 10px 10px;
}
.do-snap-link-box {
  margin: 0 0 20px 20px;
}
.do-snap-link {
  text-align: center;
  margin: -10px 0 20px 0!important;
}
.do-snap-link a {
  color: #d64343!important;
  font-size: 25px;
  font-weight: bold;
  text-decoration: underline!important;
}
.do-snap-link a.blue {
  color: #1352c6!important;
}
.do-snap-link a:hover {
  opacity: 0.8;
  text-decoration: none!important;
}
.do-snap-link02 {
  margin: -10px 25px 10px 0!important;
  display: block;
  float: left;
  font-size: 20px;
  font-weight: bold;
}
.do-snap-link02 a {
  color: #369dd2!important;
  text-decoration: underline!important;
}
.do-snap-link02 a:hover {
  opacity: 0.8;
  text-decoration: none!important;
}

@media screen and (max-width:640px){
.do-snap {
  margin: 0 -13px 20px;
  padding-bottom: 20px;
}
.do-snap .lead {
  margin: 0 0px 0 0px;
  font-size: 15px;
  padding: 15px 20px 25px;
  text-align: left;
}
.do-snap .headline {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) inset;
  border-radius: 100px;
  margin: 20px 0 0px 0;
  padding: 2px 0 1px 0;
}
.do-snap .headline h5 {
  font-size: 19px;
  text-align: center;
  margin-top: 16px;
}
.do-snap .headline p {
  font-size: 13px;
  margin: 10px 20px 20px 20px;
}
.do-snap .runner-left01,
.do-snap .runner-left02 {
  display: block;
  float: none;
  margin-left: 13px;
  margin-top: 0px;
  padding: 5px;
  width: auto;
  max-width: 88%;
  transform: rotate(-3deg);
  box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.3);
  z-index: 11000;
}
.do-snap .runner-left02 {
  margin-top: 0px;
  transform: rotate(-3deg);
}
.do-snap .runner-left01:hover {
  box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.3);
  transform: rotate(-3deg) scale(1.0,1.0);
}
.do-snap .runner-left02:hover {
  box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.3);
  transform: rotate(-3deg) scale(1.0,1.0);
}
.do-snap .runner-right01,
.do-snap .runner-right02 {
  display: block;
  float: none;
  margin-left: 13px;
  margin-right: 0;
  margin-top: 0px;
  padding: 5px;
  width: auto;
  max-width: 88%;
  transform: rotate(1deg);
  box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.3);
  z-index: 12000;
}
.do-snap .runner-right02 {
  margin-top: -5px;
  margin-right: 0px;
  transform: rotate(1deg);
}
.do-snap .runner-right01:hover {
  box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.3);
  transform: rotate(1deg) scale(1.0,1.0);
}
.do-snap .runner-right02:hover {
  box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.3);
  transform: rotate(1deg) scale(1.0,1.0);
}
.do-snap .runner-center01 {
  display: block;
  float: none;
  margin-left: 13px;
  margin-top: 0px;
  padding: 5px;
  width: auto;
  max-width: 88%;
  transform: rotate(-3deg);
  box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.3);
  z-index: 11000;
}
.do-snap .runner-center01:hover {
  box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.3);
  transform: rotate(-3deg) scale(1.0,1.0);
}
.do-snap .runner-left01 img,
.do-snap .runner-left02 img,
.do-snap .runner-right01 img,
.do-snap .runner-right02 img,
.do-snap .runner-center01 img {
  width: auto;
  max-width: 100%!important;
}
.do-snap .runner-left01 .person,
.do-snap .runner-left02 .person,
.do-snap .runner-right01 .person,
.do-snap .runner-right02 .person,
.do-snap .runner-center01 .person {
  font-size: 13px;
  margin: 10px;
  padding: 0;
}
.do-snap .runner-left01 .person span.job,
.do-snap .runner-left02 .person span.job,
.do-snap .runner-right01 .person span.job,
.do-snap .runner-right02 .person span.job,
.do-snap .runner-center01 .person span.job {
  font-size: 13px;
}
.do-snap .runner-left01 .person span.name,
.do-snap .runner-left02 .person span.name,
.do-snap .runner-right01 .person span.name,
.do-snap .runner-right02 .person span.name,
.do-snap .runner-center01 .person span.name {
  font-size: 17px;
}
.do-snap .runner-left01 .comment,
.do-snap .runner-left02 .comment,
.do-snap .runner-right01 .comment,
.do-snap .runner-right02 .comment,
.do-snap .runner-center01 .comment {
  font-size: 13px;
  margin: 10px 0 0 0;
  padding: 0 10px 10px 10px;
}
.do-snap-link-box {
  margin: -7px 0 15px 0;
}
.do-snap-link {
  margin: -10px 0 20px 0!important;
}
.do-snap-link a {
  font-size: 17px;
}
.do-snap-link02 {
  margin: 0 0 3px 0!important;
  float: none;
  font-size: 15px;
}
}