@charset "UTF-8";


body#top h2 {
  border-bottom: 1px solid #ccc;
  text-align: center;
  font-size: 30px;
  padding: 0 0 10px;
  margin: 0 0 30px;
}


.top_header {
  text-align: center;
  position: relative;
}
.top_header_inner {

}
.top_header .lead {
  position: absolute;
  width: 640px;
  left: 50%;
  top: 100px;
  margin-left: -320px;
  z-index: 5000;
}
.lead_top_lite {
  margin: 0 auto 10px; border: 1px solid #ccc; padding: 20px; max-width: 960px;
}
.top_header .list_sns_icon {
  position: absolute;
  width: 640px;
  left: 50%;
  top: 300px;
  margin-left: -320px;
  z-index: 5000;
}
.top_header .list_sns_icon li {
  display: inline-block;
  margin: 0 15px;
}

.lead_top_header {
  color: #b20051;
  text-align: center;
  margin: 40px 0 20px;
  font-size: 19px;
  line-height: 1.5;
}

.lead_top_header_caution {
  color: #333;
  text-align: center;
  margin: 0px 0 20px;
  font-size: 14px;
  line-height: 1.5;
}

.btn_top_header {
  position: absolute;
  width: 640px;
  left: 50%;
  top: 440px;
  margin-left: -320px;
  z-index: 5000;
}

.btn_top_header a {
  margin: 0;
  padding: 15px 50px;
  display: inline-block;
  border-radius: 3px;
  color: #fff;
  font-size: 110%;
  text-shadow: 2px 2px 1px #790036;
  -webkit-text-shadow: 2px 2px 1px #790036;
  -moz-text-shadow: 2px 2px 1px #790036;
  position: relative;
  background: #B20051;
  box-shadow: 0px 3px 0 #790036;
  font-size: 16px;
}
.btn_top_header a img {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}

.btn_top_header a:hover {
  background: #830081;
  text-decoration: none;
}

.list_social_in li {
background: #000;
}

.list_social_in .wrap {
  
  height: 618px;
  width: 1854px;
  margin: 0 auto;
  position: relative;
}

.list_social_in .wrap div {
  opacity: 0;
  width: 206px;
  height: 206px;
  float: left;
  -webkit-transform: translate(-100px, 0);
  -ms-transform: translate(-100px, 0);
  transform: translate(-100px, 0);
  position: relative;
  cursor: pointer;
}

.list_social_in .wrap img {
  position: absolute;
  top: 0;
  left: 0;
}

.list_social_in .wrap div.on {
  transition: all .4s;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: .70;
}
.list_social_in .wrap div.large {
  -webkit-transform: scale(2, 2) translate(-200px, 0);
  -ms-transform: scale(2, 2) translate(-200px, 0);
  transform: scale(2, 2) translate(-200px, 0);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}

.list_social_in .wrap div.large.on {
  -webkit-transform: scale(2, 2) translate(0, 0);
  -ms-transform: scale(2, 2) translate(0, 0);
  transform: scale(2, 2) translate(0, 0);
}

.list_social_in .wrap div.on:hover {
  opacity: 1;
}

.top_slider_nav_wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 565px;
  background: rgba(255,255,255,.5);
  text-align: center;
  z-index: 50;
}

.top_slider_nav {
  display: inline-block;
  background: rgba(0,0,0,.5);
  font-size: 16px;
}

.navWrap {
  display: inline-block;
  position: relative;
}

.cd-marker {
  display: block;
  width: 70px;
  height: 43px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transition: all .2s;
}
.cd-marker.item-1 {
  left: 0;
}
.cd-marker.item-2 {
  left: 70px;
}
.cd-marker.item-3 {
  left: 140px;
}

.top_slider_nav li {
  display: inline-block;
  position: relative;
  z-index: 100;
}


.top_slider_nav li a {
  display: block;
  height: 43px;
  line-height: 43px;
  width: 70px;
  color: #fff;
  text-align: center;
  font-size: 16px;
  text-decoration: none;

}
.top_slider_nav li.selected a {
  color: #b20051;
  color: #111;
}

.top_works {
  background: #F3F3F3;
  margin: 0 0 30px;
}

.top_works_inner {
  padding: 20px 0 40px;
  position: relative;
}

.top_works .img {
  float: left;
  width: 435px;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 20px;
}
.top_works .img a {
  background: none;
  padding-left: 0;
}
.top_works .detail {
  font-size: 15px;
  line-height: 1.5;
}

.top_works .title a {
  color: #b20051;
  font-size: 16px;
  background: none;
  padding-left: 0;
}
.top_works .title span {
  font-size: 24px;
  display: block;
  margin: 0 0 10px;
}

.top_works .link_works {
  text-align: right;
  margin-top: 20px;
}
.top_works .link_works a {
  margin: 0;
  padding: 10px 80px;
  display: inline-block;
  border-radius: 3px;
  color: #fff;
  font-size: 110%;
  text-shadow: 2px 2px 1px #790036;
  -webkit-text-shadow: 2px 2px 1px #790036;
  -moz-text-shadow: 2px 2px 1px #790036;
  position: relative;
  background: #B20051;
  box-shadow: 0px 3px 0 #790036;
  font-size: 16px;
}

.top_works .link_works a:hover {
  background: #830081;
  text-decoration: none;
}

.top_about {
  margin: 0 0 30px;
}

.top_about_inner {
  padding: 20px 0 0;
  position: relative;
  text-align: center;
}

.top_strength {
  background: #F3F3F3;
  margin: 0 0 30px;
}
.top_strength_inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0 40px;
  position: relative;
}

.top_strength .list_strength li {
  background: #fff;
  border: 1px solid #D9D9D9;
  width: 433px;
  float: left;
  margin: 0 30px 30px 0;
  position: relative;
}
.top_strength .list_strength h3 {
  background: #333;
  line-height: 56px;
  height: 56px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  position: relative;
  left: -1px;
  top: -1px;
  width: 435px;
  border-bottom: 4px solid #B20051;
}
.top_strength .list_strength h3.multiLine {
  line-height: 1.2;
  padding-top: 5px;
  height: 51px;
}
.top_strength .list_strength .img {
  padding: 20px;
  margin: 0;
  text-align: center;
}
.top_strength .list_strength .text {
  padding: 0 20px 20px;
  margin: 0;
}

.top_strength .list_strength .button {
  text-align: center;
  margin: 10px 0 0;
}

.top_strength .list_strength .button a {
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: 10px 60px;
  border-radius: 3px;
  color: #b20051;
  font-size: 110%;
  position: relative;
  background: #fff;
  box-shadow: 0px 3px 0 #ccc;
  font-size: 16px;
}
.top_strength .list_strength .button a:hover {
  background: rgba(255,255,255,.9);
  text-decoration: none;
}


.top_strength .list_strength li:nth-child(even){
  margin: 0 0 30px 0;
}
.top_media {
  margin: 0 0 30px;
}
.top_media_inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0 40px;
  position: relative;
}
.top_media .list_media {
  text-align: center;
}
.top_media .list_media li {
  display: inline-block;
  margin: 0 15px 0 0;
  width: 168px;
  text-align: center;
  vertical-align: top;
}
.top_media .list_media li:last-child {
  margin: 0;
}
.top_media .list_media li img {
  display: block;
  margin: 0 0 5px;
}
.top_media .list_media li .comingsoon {
  color: #b20051;
} 


/* modal */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(218, 213, 212, 0.9);
  z-index: 9000;
}

#modal {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  width: auto;
  margin: 0 auto;
  z-index: 9500;
}
#modal .userName {
  font-weight: bold;
  font-size: 16px;
  margin: 0 0 5px;
}
#modal .userName a {
  color: #111;
}
#modal a {
  background: none;
  padding: 0;
}
#modal .photo {
  margin: 0 0 5px;
  text-align: center;
}
#modal .photo img { max-width: 100%; height: auto;}
#modal .caption {
  border: 1px solid #ddd;
  padding: 10px;
}
#modal .like {
  position: relative;
  padding-left: 16px;
  margin: 0 0 5px;
}
#modal .like:before {
  content: "";
  display: block;
  width: 12px;
  height: 11px;
  background: url(data:image/png;base64,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) 0 0 no-repeat;
  background-size: 12px 22px;
  position: absolute;
  top: 50%;
  left: 0px;
  overflow: hidden;
  margin-top: -5px;
}
#modal .btnClose {
  z-index: 25000;
}
#modal .btnClose:before {
  position: fixed;
  top: 8px;
  right: 8px;
  display: block;
  content: "";
  width: 30px;
  height: 5px;
  background: #333;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  -ms-transform-origin: 0;
  transform-origin: 0;
}
#modal .btnClose:after {
  position: fixed;
  top: 30px;
  right: 8px;
  display: block;
  content: "";
  width: 30px;
  height: 5px;
  background: #333;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  -ms-transform-origin: 0;
  transform-origin: 0;
}

#modalInner {
  border: 1px solid #eee;
  padding: 10px;
  position: relative;
  background: #fff;
}


@media (min-width: 900px) {

.top_works_inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0 40px;
  position: relative;
}

  #modal {
    width: 600px;
  }

}
@media (min-width: 768px) and (max-width: 899px) {

.top_works .img {
  float: none;
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
}
.top_works .detail {
  font-size: 15px;
  line-height: 1.5;
  padding: 20px;
  text-align: center;
}
.top_works .detail .text {
  text-align: left;
  padding-top: 20px;
}
.top_works .link_works {
  text-align: center;
}
.top_works .link_works a {
  padding-left: 0;
  padding-right: 0;
  display: block; 
}



.top_strength .list_strength {
  padding: 0 10px;
}

.top_strength .list_strength li {
  width: auto;
  float: none;
  height: auto !important;
  margin: 0 0 10px;
}

.top_strength .list_strength h3 {
  line-height: 1.2;
  height: auto;
  width: auto;
  padding: 10px 10px;
  font-size: 15px;
}

.top_strength .list_strength li:nth-child(even) {
  margin: 0 0 10px;
}

.top_strength .list_strength h3.multiLine {
  height: auto;
  padding: 10px 10px;
}

}
@media (max-width: 767px) {

.lead_top_lite {
  margin: 0 10px 10px;
  padding: 15px 10px;
}

.top_header .lead {
  width: 300px;
  margin-left: -150px;
  top: 40px;
}
.top_header .list_sns_icon {
  width: 300px;
  margin-left: -150px;
  top: 175px;
}
.top_header .list_sns_icon  li {
  width: 50px;
  margin: 0 10px;
}

.btn_top_header {
  width: 320px;
  margin-left: -160px;
  font-size: 12px;
  top: 290px;
}

.btn_top_header a img {
  width: 20px;
}
.top_slider_nav_wrap {
  top: 437px;
}

.lead_top_header {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 12px;
}
.lead_top_header span {
  display: inline-block;
}

.top_works .img {
  float: none;
  width: auto;
  margin-bottom: 20px;
  text-align: center;
}

.top_works .detail {
  font-size: 15px;
  line-height: 1.5;
  padding: 20px;
  text-align: center;
}
.top_works .detail .text {
  text-align: left;
  padding-top: 20px;
}
.top_works .link {
  font-size: 12px;
}
.top_works .link_works {
  text-align: center;
}
.top_works .link_works a {
  padding-left: 0;
  padding-right: 0;
  display: block;
}

.top_about_inner {
  padding: 0 10px;
}

.top_strength {
  margin: 0;
}
.top_strength_inner {
  margin: 0;
}

.top_strength .list_strength {
  padding: 0 10px;
}

.top_strength .list_strength li {
  width: auto;
  float: none;
  height: auto !important;
  margin: 0 0 10px;
}

.top_strength .list_strength h3 {
  line-height: 1.2;
  height: auto;
  width: auto;
  padding: 10px 10px;
  font-size: 15px;
}

.top_strength .list_strength li:nth-child(even) {
  margin: 0 0 10px;
}

.top_strength .list_strength h3.multiLine {
  height: auto;
  padding: 10px 10px;
}

.top_media .list_media li {
  width: 80px;
  font-size: 12px;
  margin: 0 5px 10px;
}
.top_media .list_media li:last-child {
  margin: 0 5px 10px;
}

body#top {
  padding-left: 0;
  padding-right: 0;
}
body#top .header_area {
  padding-left: 20px;
  padding-right: 20px;
}

body#top .socialArea {
  margin: 0 20px;
}

}
@media (max-width: 480px) {
body#top #footer {
  margin: 0 0;
  padding: 10px 20px;
  box-sizing: border-box;
}
}

.top_contact_button {
  position: fixed;
  bottom: -120px;
  left: 0;
  right: 0;
  background: rgba(178,0,81,.8);
  padding: 20px;
  text-align: center;
  color: #fff;
  z-index: 5000;
  transition: all .2s;
}


.top_contact_button.active {
  bottom: 0;
}
.top_contact_button.static {
  position: static;
}
.top_contact_button_inner {
  width: 900px;
  margin: 0 auto;
}
.top_contact_button p {
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px;
  font-size: 20px;
}
.top_contact_button .button a {
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: 10px 30px;
  border-radius: 3px;
  color: #b20051;
  font-weight: bold;
  position: relative;
  background: #fff;
  box-shadow: 0px 3px 0 #ccc;
  font-size: 18px;
}
.top_contact_button .button img {
  display: inline-block;
  margin: 0 0 2px 10px;
  vertical-align: middle;
}

.top_contact_button .button a:hover {
  opacity: .85;
}

@media (max-width: 767px) {
  .top_contact_button {
    padding: 10px 5px;
  }
  .top_contact_button_inner {
    width: auto;
  }
  .top_contact_button .text { display: none;}
  .top_contact_button .button a {
    font-size: 14px;
  }

}