/* ------------------------------------------------------------
 snap
------------------------------------------------------------ */
#snap #header .scope .personal {
  width: 0;
}
#snap #page-header .jp {
  top: -50px;
  left: 180px;
}
#snap #page-header .sub {
  top: 66px;
  left: 16px;
}
#snap #contents {
  background: url("../img/snap/main_bg.png") 0 3px;
}

/* ------------------------------------------------------------
 Index
------------------------------------------------------------ */
#snap.index #header {
  top: -120px;
}
#snap.index #page-header {
  background: none;
}
#snap.index #page-header > div {
  display: none;
  background: white;
  height: 360px;
}
#snap.index #contents {
  padding-bottom: 70px;
}
#snap.index .snaplist {
  position: relative;
  margin: 75px 5px 0;
  min-height: 620px;
}
#snap.index .snaplist ul {
  position: relative;
  height: 1260px;
}
#snap.index .snaplist ul.num1, #snap.index .snaplist ul.num2, #snap.index .snaplist ul.num3, #snap.index .snaplist ul.num4, #snap.index .snaplist ul.num5 {
  height: 620px;
}
#snap.index .snaplist ul.num6, #snap.index .snaplist ulnum7 {
  height: 940px;
}
#snap.index .snaplist li {
  opacity: 0;
  display: none;
  position: absolute;
  width: 180px;
  height: 266px;
}
#snap.index .snaplist li div.photo {
  position: relative;
  height: 240px;
  background: #CCC;
  cursor: pointer;
}
#snap.index .snaplist li div.photo > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 240px;
  z-index: 0;
}
#snap.index .snaplist li div.photo dl {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  position: absolute;
  padding-top: 75px;
  width: 100%;
  color: white;
  text-align: center;
  z-index: 2;
}
#snap.index .snaplist li div.photo dt {
  font-weight: bolder;
  font-size: 18px;
}
#snap.index .snaplist li div.photo dt, #snap.index .snaplist li div.photo dd {
  background-color: #000 \9;
}
#snap.index .snaplist li div.photo div {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 240px;
  z-index: 1;
}
#snap.index .snaplist li div.photo canvas {
  opacity: 0.6;
  width: 180px;
  height: 240px;
}
#snap.index .snaplist li p.point {
  padding-top: 2px;
  height: 20px;
}
#snap.index .snaplist li p.new {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 60px;
  height: 65px;
  background: url("../img/snap/new.png") no-repeat;
  zoom: 0.66;
}
#snap.index .snaplist li p.like {
  position: absolute;
  bottom: 0;
  right: -25px;
  z-index: 3;
  width: 90px;
  height: 90px;
}
#snap.index .snaplist li p.like > span {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  -moz-border-radius: 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #CCC;
  border: solid 3px #FFF;
  z-index: 0;
}
#snap.index .snaplist li p.like > img {
  position: absolute;
  top: 26px;
  left: 34px;
  width: 22px;
  height: 22px;
  z-index: 1;
  -moz-transform-origin: center bottom 50%;
  -ms-transform-origin: center bottom 50%;
  -webkit-transform-origin: center bottom 50%;
  transform-origin: center bottom 50%;
}
#snap.index .snaplist li p.like > a {
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  z-index: 2;
  background: url("../img/snap/like_btn.png");
}
#snap.index .snaplist li p.like > a.ok {
  cursor: default;
  background: url("../img/snap/like_btn_ok.png");
}
#snap.index .snaplist li p.like > a.ok + span {
  background-color: #ff80ab;
}
#snap.index .snaplist li.snap1, #snap.index .snaplist li.snap6, #snap.index .snaplist li.snap7 {
  width: 420px;
  height: 582px;
}
#snap.index .snaplist li.snap1 > div, #snap.index .snaplist li.snap6 > div, #snap.index .snaplist li.snap7 > div {
  height: 560px;
}
#snap.index .snaplist li.snap1 > div div, #snap.index .snaplist li.snap1 > div canvas, #snap.index .snaplist li.snap6 > div div, #snap.index .snaplist li.snap6 > div canvas, #snap.index .snaplist li.snap7 > div div, #snap.index .snaplist li.snap7 > div canvas {
  width: 420px;
  height: 560px;
}
#snap.index .snaplist li.snap1 div.photo > img, #snap.index .snaplist li.snap6 div.photo > img, #snap.index .snaplist li.snap7 div.photo > img {
  width: 420px;
  height: 560px;
}
#snap.index .snaplist li.snap1 div.photo dl, #snap.index .snaplist li.snap6 div.photo dl, #snap.index .snaplist li.snap7 div.photo dl {
  padding-top: 220px;
}
#snap.index .snaplist li.snap1 div.photo dt, #snap.index .snaplist li.snap6 div.photo dt, #snap.index .snaplist li.snap7 div.photo dt {
  font-size: 24px;
}
#snap.index .snaplist li.snap1 div.photo dd, #snap.index .snaplist li.snap6 div.photo dd, #snap.index .snaplist li.snap7 div.photo dd {
  font-size: 18px;
}
#snap.index .snaplist li.snap1 p.new, #snap.index .snaplist li.snap6 p.new, #snap.index .snaplist li.snap7 p.new {
  zoom: 1;
}
#snap.index .snaplist li.snap1 {
  top: 0;
  left: 0;
}
#snap.index .snaplist li.snap2 {
  top: 0;
  left: 480px;
}
#snap.index .snaplist li.snap3 {
  top: 0;
  left: 720px;
}
#snap.index .snaplist li.snap4 {
  top: 0;
  left: 960px;
}
#snap.index .snaplist li.snap5 {
  top: 320px;
  left: 480px;
}
#snap.index .snaplist li.snap6 {
  top: 320px;
  left: 720px;
}
#snap.index .snaplist li.snap7 {
  top: 640px;
  left: 240px;
}
#snap.index .snaplist li.snap8 {
  top: 640px;
  left: 0;
}
#snap.index .snaplist li.snap9 {
  top: 960px;
  left: 0;
}
#snap.index .snaplist li.snap10 {
  top: 960px;
  left: 720px;
}
#snap.index .snaplist li.snap11 {
  top: 960px;
  left: 960px;
}
#snap.index .paging {
  visibility: hidden;
  width: 500px;
  margin: 0 auto;
}
#snap.index .paging:after {
  content: "";
  display: block;
  clear: both;
}
#snap.index .paging > li {
  position: relative;
  float: left;
}
#snap.index .paging > li span {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 72px;
  -moz-border-radius: 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: white;
  border: solid 3px rgba(97, 182, 242, 0.3);
  z-index: 0;
}
#snap.index .paging > li.pages ul {
  padding-top: 14px;
}
#snap.index .paging > li.pages ul:after {
  content: "";
  display: block;
  clear: both;
}
#snap.index .paging > li.pages li {
  position: relative;
  float: left;
  width: 46px;
  margin: 0 7px;
  line-height: 1;
}
#snap.index .paging > li.pages li a {
  display: block;
  position: relative;
  width: 46px;
  height: 46px;
  padding-top: 15px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1;
  text-align: center;
  font-size: 16px;
  font-weight: bolder;
  color: black;
}
#snap.index .paging > li.pages li a:hover {
  text-decoration: none;
}
#snap.index .paging > li.pages li span {
  width: 46px;
  height: 46px;
}
#snap.index .paging > li.pages li.current a {
  color: white;
}
#snap.index .paging > li.pages li.current span {
  border: none;
  background: #61b6f2;
}
#snap.index .paging > li.next, #snap.index .paging > li.prev {
  width: 72px;
}
#snap.index .paging > li.next a, #snap.index .paging > li.prev a {
  position: relative;
  display: block;
  z-index: 1;
}
#snap.index .paging > li.prev {
  visibility: hidden;
  opacity: 0;
  margin-right: 28px;
}
#snap.index .paging > li.next {
  margin-left: 28px;
}

/* ------------------------------------------------------------
 Detail
------------------------------------------------------------ */
#snap.detail #loading {
  display: none;
}
#snap.detail #contents {
  height: 1140px;
  background-position: 0 6px;
}
#snap.detail #page-header {
  height: 275px;
}
#snap.detail #page-header .mynavi {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  position: absolute;
  top: 40px;
  right: -10px;
}
#snap.detail .snapdetail {
  width: 1000px;
  margin: 60px auto 0;
}
#snap.detail .snapdetail:after {
  content: "";
  display: block;
  clear: both;
}
#snap.detail .snapdetail .snap {
  float: left;
  position: relative;
  width: 420px;
  margin-left: 10px;
}
#snap.detail .snapdetail .snap div.photo {
  position: relative;
  height: 560px;
  background: #CCC;
}
#snap.detail .snapdetail .snap div.photo > img {
  width: 420px;
  height: 560px;
}
#snap.detail .snapdetail .snap p.point {
  padding-top: 2px;
  height: 20px;
}
#snap.detail .snapdetail .snap p.new {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 60px;
  height: 65px;
  background: url("../img/snap/new.png") no-repeat;
}
#snap.detail .snapdetail .snap p.like {
  position: absolute;
  bottom: 0;
  right: -25px;
  z-index: 3;
  width: 90px;
  height: 90px;
}
#snap.detail .snapdetail .snap p.like > span {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  -moz-border-radius: 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #CCC;
  border: solid 3px #FFF;
  z-index: 0;
}
#snap.detail .snapdetail .snap p.like > img {
  position: absolute;
  top: 26px;
  left: 34px;
  width: 22px;
  height: 22px;
  z-index: 1;
  -moz-transform-origin: center bottom 50%;
  -ms-transform-origin: center bottom 50%;
  -webkit-transform-origin: center bottom 50%;
  transform-origin: center bottom 50%;
}
#snap.detail .snapdetail .snap p.like > a {
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  z-index: 2;
  background: url("../img/snap/like_btn.png");
}
#snap.detail .snapdetail .snap p.like > a.ok {
  cursor: default;
  background: url("../img/snap/like_btn_ok.png");
}
#snap.detail .snapdetail .snap p.like > a.ok + span {
  background-color: #ff80ab;
}
#snap.detail .snapdetail .personal {
  position: relative;
  float: right;
  width: 525px;
}
#snap.detail .snapdetail .personal .name {
  height: 75px;
  line-height: 1;
  font-weight: bolder;
}
#snap.detail .snapdetail .personal .name strong {
  display: inline-block;
  margin-right: 3px;
  font-size: 30px;
}
#snap.detail .snapdetail .personal .name span {
  font-size: 18px;
}
#snap.detail .snapdetail .personal .name dt {
  padding-bottom: 13px;
}
#snap.detail .snapdetail .personal .answer {
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 80px;
  background-repeat: no-repeat;
  background-position: 0 0, 0 bottom;
  background-image: url("../img/snap/ans_bg.png"), url("../img/snap/ans_bg.png");
  background-color: #FFF;
}
#snap.detail .snapdetail .personal .answer:after {
  content: "";
  display: block;
  clear: both;
}
#snap.detail .snapdetail .personal .answer div.left, #snap.detail .snapdetail .personal .answer div.right {
  width: 240px;
  float: left;
  padding-top: 30px;
}
#snap.detail .snapdetail .personal .answer div.left {
  margin-left: 28px;
}
#snap.detail .snapdetail .personal .answer dl {
  font-size: 13px;
  line-height: 1.2;
  padding-left: 40px;
  background-repeat: no-repeat;
}
#snap.detail .snapdetail .personal .answer dl dt {
  font-weight: bolder;
  padding: 7px 0;
}
#snap.detail .snapdetail .personal .answer dl dd {
  min-height: 14px;
  padding-bottom: 25px;
}
#snap.detail .snapdetail .personal .answer dl.magazine {
  background: url("../img/snap/ico_magazine.png") 0 4px no-repeat;
}
#snap.detail .snapdetail .personal .answer dl.brand {
  background: url("../img/snap/ico_brand.png") 0 2px no-repeat;
}
#snap.detail .snapdetail .personal .answer dl.music {
  background: url("../img/snap/ico_music.png") 0 4px no-repeat;
}
#snap.detail .snapdetail .personal .answer dl.tv {
  background: url("../img/snap/ico_tv.png") 0 0 no-repeat;
}
#snap.detail .snapdetail .personal .answer dl.phone {
  background: url("../img/snap/ico_phone.png") 0 0 no-repeat;
}
#snap.detail .snapdetail .personal .answer dl.sns {
  background: url("../img/snap/ico_sns.png") 0 4px no-repeat;
}
#snap.detail .snapdetail .personal .answer dl.sns dd {
  width: 160px;
}
#snap.detail .snapdetail .personal .answer dl.house {
  background: url("../img/snap/ico_house.png") 0 4px no-repeat;
}
#snap.detail .snapdetail .personal .answer dl.sleep {
  background: url("../img/snap/ico_sleep.png") 0 4px no-repeat;
}
#snap.detail .snapdetail .personal .answer dl.move {
  background: url("../img/snap/ico_move.png") 0 4px no-repeat;
}
#snap.detail .snapdetail .personal .answer dl.job {
  background: url("../img/snap/ico_job.png") 0 0 no-repeat;
}
#snap.detail .snapdetail .personal .answer dl.club {
  background: url("../img/snap/ico_club.png") 0 0 no-repeat;
}
#snap.detail .snapdetail .personal .answer p.date {
  position: absolute;
  bottom: -24px;
  left: 2px;
  font-size: 0.9em;
}
#snap.detail .snapdetail .personal .data {
  position: relative;
  padding-top: 24px;
  z-index: 10;
}
#snap.detail .snapdetail .personal .data span.memo {
  display: block;
  position: absolute;
  top: -45px;
  left: 45px;
  z-index: 3;
}
#snap.detail .snapdetail .personal .data p {
  position: relative;
  width: 270px;
  margin: 0 auto;
}
#snap.detail .snapdetail .personal .data p span {
  position: absolute;
  top: 0;
  left: 0;
  width: 270px;
  height: 70px;
  -moz-border-radius: 35px 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px 35px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: white;
  border: solid 3px rgba(97, 182, 242, 0.3);
  z-index: 0;
}
#snap.detail .snapdetail .personal .data p a {
  position: relative;
  display: block;
  width: 270px;
  height: 70px;
  z-index: 1;
}
#snap.detail .snapdetail .prev, #snap.detail .snapdetail .next {
  position: absolute;
  top: 225px;
  width: 92px;
  height: 92px;
}
#snap.detail .snapdetail .prev span, #snap.detail .snapdetail .next span {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  -moz-border-radius: 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: black;
  border: solid 3px #61b6f2;
  z-index: 0;
}
#snap.detail .snapdetail .prev span.pic, #snap.detail .snapdetail .next span.pic {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  opacity: 0.6;
  border: solid 3px white;
  z-index: 1;
  background-position: center -15px;
  background-repeat: no-repeat;
  background-size: 240px;
}
#snap.detail .snapdetail .prev a, #snap.detail .snapdetail .next a {
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  z-index: 2;
  overflow: hidden;
}
#snap.detail .snapdetail .prev a img, #snap.detail .snapdetail .next a img {
  position: absolute;
  top: 0;
  left: 0;
}
#snap.detail .snapdetail .prev {
  left: -30px;
}
#snap.detail .snapdetail .next {
  right: -40px;
}
#snap.detail .back {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 60px auto 0;
}
#snap.detail .back span {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  -moz-border-radius: 50% 50%;
  -webkit-border-radius: 50%;
  border-radius: 50% 50%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: white;
  border: solid 3px rgba(97, 182, 242, 0.3);
  z-index: 0;
}
#snap.detail .back a {
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  z-index: 1;
}