/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.



/*!
 * index.css
 * modified : 2015.06.18
 */


/*--------------------------------------------------
  OVERRIDE SHARE 5
--------------------------------------------------*/
body {
 overflow-x: hidden !important;
}
.s5-container {
  max-width: 1970px;
  background: #000;
  padding-bottom: 50px;
  padding: 0 !important;
}
.s5-container img {
  vertical-align: top;
}

.s5-pageFooter {
 margin-top: 0 !important;
}




/*--------------------------------------------------
  .hover
--------------------------------------------------*/
a, a img {
 transition: opacity 0.2s;
 -webkit-transition: opacity 0.2s;
 -moz-transition: opacity 0.2s;
 -ms-transition: opacity 0.2s;
}
a:hover, a:hover img {
 opacity: 0.7;
 filter: alpha(opacity=70);
}



/*--------------------------------------------------
  .SNS
--------------------------------------------------*/
.c5-snsbtn {
 z-index: 200 !important;
 position: absolute;
 top: 0;
 right: 0;
}



/*--------------------------------------------------
  .mainvisual
--------------------------------------------------*/
.s5-container .c5-mainvisual {
  background: #000;
  max-width: 1260px;
  padding: 0 30px;
  margin: 0 auto;
}
@media(max-width:1140px) {
  .s5-container .c5-mainvisual {
    max-width: none;
  }
}
.s5-container .c5-mainvisual:after {
 clear: both;
 display: block;
 content: "";
}

.s5-container .c5-mainvisual .c5-inner {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
}
@media(max-width:1140px) {
  .s5-container .c5-mainvisual .c5-inner {
    max-width: none;
    overflow: hidden;
  }
}
.s5-container .c5-mainvisual h2 {
  position: absolute;
  left: 0;
  top: 0;
  margin: 5.75% 0 0;
  width: 49.666666%;
}
.s5-container .c5-mainvisual h2 img {
  width: 100%;
  height: auto;
  max-width: 596px;
}
.s5-container .c5-mainvisual .c5-inner img.c5-main {
  margin-left: -32.0833333%;
  width: 164.1666666%;
  height: auto;
  max-width: 1970px;
}
@media(max-width:1140px) {
  .s5-container .c5-mainvisual .c5-inner img.c5-main {
    max-width: none;
  }
}
@media(max-width:640px) {
  .s5-container .c5-mainvisual .c5-inner img.c5-main {
    padding-top: 15%;
  }
  .s5-container .c5-mainvisual h2 img {
   margin-top: 10%;
  }
}

.s5-container .c5-mainvisual .c5-inner .c-lead {
 position: absolute;
 left: 0;
 bottom: 6%;
 font-size: 93%;
 color: #fff;
 line-height: 1.8;
  width: 49.666666%;
}

@media(max-width:1140px) {
.s5-container .c5-mainvisual .c5-inner .c-lead {
 position: relative;
 top: 0;
 bottom: 0;
 width: 100%;
 font-size: 100%;
 margin-top: -16%;
 margin-bottom: 6%;
}
}
@media screen and (max-width: 500px) {
.s5-container .c5-mainvisual .c5-inner .c-lead {
 margin-top: 22%;
 margin-bottom: 8%;
}
}
@media screen and (max-width: 479px) {
  .s5-container .c5-mainvisual .c5-inner img.c5-main {
    margin-left: 15%;
    margin-top: 15%;
    width: 100%;
  }
  .s5-container .c5-mainvisual h2 {
    left: 5%;
    margin: 0;
    padding-top: 20%;
    width: 75%;
  }
  .s5-container .c5-mainvisual h2 img {
    position: relative;
    z-index: 0;
  }
}

@media(max-width:320px) {
  .s5-container .c5-mainvisual h2 img {
   margin-top: 30%;
  }
.s5-container .c5-mainvisual .c5-inner .c-lead {
   margin-top: 30%;
  }
}




/*--------------------------------------------------
  #Navi
--------------------------------------------------*/
.c5-wrap {
 clear: both;
 max-width: 1970px;
 height: 70px;
}
@media(max-width:1140px) {
  .c5-wrap {
    max-width: none;
    height: auto;
  }
}
#c5-Navi {
 background: #000;
 margin: 0 auto 5% !important;
 height: auto;
 border-top: 1px solid #fff;
}
.sp-navi{
  border-top: 1px solid #fff;
 display: none;
}
#c5-Navi .c5-inner {
 z-index: 100;
 width: 100%;
 background: #000;
 border-bottom: 1px solid #fff;
}
@media screen and (max-width: 500px) {
  #c5-Navi .c5-inner {
    border-bottom: none;
  }
}

#c5-Navi ul {
 margin: 0 auto;
 background: url("../images/navi.gif") no-repeat 0 -70px;
 *zoom: 1;
 padding: 0;
 height: 70px;
 width: 1200px;
 overflow: hidden;
}
.sp-navi ul{
 margin: 0 auto;
 padding: 0;
 overflow: hidden;
}
@media(max-width:1140px) {
  #c5-Navi ul {
    width: 100%;
    height: auto;
    background: none;
  }
}
#c5-Navi ul:after {
 clear: both;
 display: block;
 content: "";
}
#c5-Navi li {
 float: left;
 list-style: none;
 margin: 0;
 padding: 0;
  height: 70px;
}
.sp-navi li{
 float: left;
 list-style: none;
 margin: 0;
 padding: 0;
}

#c5-Navi li a {
  height: 70px;
 display: block;
 background: url("../images/navi.gif") no-repeat 0 0;
 text-indent: -9999em;
 transition: opacity 0.15s ease-in;
 -o-transition: opacity 0.15s ease-in;
 -ms-transition: opacity 0.15s ease-in;
 -moz-transition: opacity 0.15s ease-in;
 -webkit-transition: opacity 0.15s ease-in;
}
#c5-Navi li a:hover, #c5-Navi li.on a {
 opacity: 0;
}
html.no-opacity #c5-Navi li a:hover, html.no-opacity #c5-Navi li.on a {
 filter: alpha(opacity=0);
}
#c5-Navi li.c5-navi-00 a {
 width: 102px;
 background-position: 0 0;
}
#c5-Navi li.c5-navi-01 a {
 width: 365px;
 background-position: -102px 0;
}
#c5-Navi li.c5-navi-02 a {
 width: 366px;
 background-position: -467px 0;
}
#c5-Navi li.c5-navi-03 a {
 width: 367px;
 background-position: -833px 0;
}
@media(max-width:1140px) {
  #c5-Navi li{
    height: auto;
  }
  #c5-Navi li a{
    text-indent: 0;
    width: 100%;
    height: auto;
  }

  #c5-Navi li.c5-navi-00, #c5-Navi li.c5-navi-01, #c5-Navi li.c5-navi-02, #c5-Navi li.c5-navi-03{
    width: 25%;
  }
  #c5-Navi li.c5-navi-00 a, #c5-Navi li.c5-navi-01 a, #c5-Navi li.c5-navi-02 a, #c5-Navi li.c5-navi-03 a{
    width: auto;
    background: none;
  }
  #c5-Navi li a:hover, #c5-Navi li.on a {
    opacity: 1;
  }
  #c5-Navi li a img{
    width: 100%;
  }
}
@media screen and (max-width: 500px) {
  #c5-Navi{ display: none;}
  .sp-navi{ display: block; }
  .sp-navi li{
    height: auto;
    border-bottom: 1px solid #FFF;
  }
  .sp-navi li a{
    height: auto;
    background: none;
  }
  .sp-navi li a:hover, .sp-navi li.on a {
    opacity: 1;
    text-decoration: none;
  }
  .sp-navi li.c5-navi-00, .sp-navi li.c5-navi-01, .sp-navi li.c5-navi-02, .sp-navi li.c5-navi-03{
    width: 50%;
  }
  .sp-navi li a img{
    width: 100%;
  }
}







/*--------------------------------------------------
  section
--------------------------------------------------*/
.s5-container section {
 position: static;
  position: relative;
  z-index: 1;
  max-width: 1970px;
  background: #fff;
}
@media(max-width:1140px) {
  .s5-container section {
    max-width: none;
  }
}




/* .c5-heading
--------------------------------------------------*/
.s5-container section .c5-heading {
 position: static;
  margin: 0 auto 6%;
  background: #000;
}
@media screen and (max-width: 640px) {
  .s5-container section .c5-heading {
    margin: 0 auto 14%;
  }
}
.s5-container section .c5-heading h3 {
  position: relative;
  margin: 0 auto;
  max-width: 1260px;
  padding: 0 30px;
  font-size: 0;
  text-align: left;
  background: #000;
}
@media(max-width:1140px) {
  .s5-container section .c5-heading h3 {
    max-width: none;
  }
}
.s5-container section .c5-heading h3 {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
  font-size: 0;
  text-align: left;
  background: #000;
}
@media(max-width:1140px) {
  .s5-container section .c5-heading h3 {
    max-width: none;
  }
}

.s5-container section .c5-heading img.c5-ttl {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 47.5%;
  height: auto;
  max-width: 397px;
}
.s5-container section .c5-heading .c5-obi {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  max-width: 1970px;
  overflow: hidden;
  background: #000;
}
.s5-container section .c5-heading .c5-obi .c5-inner {
  margin: 0 auto 0;
  max-width: 1200px;
}
.s5-container section .c5-heading .c5-obi img {
  margin-left: -32.0833333%;
  width: 164.1666666%;
  height: auto;
  max-width: 1970px;
}
.s5-container section .c5-heading .c5-img {
  position: absolute;
  top: 1.95%;
  left: 0;
  width: 100%;
  background: #000;
}
.s5-container section .c5-heading .c5-img .c5-inner {
  margin: 0 auto;
  max-width: 1200px;
}
.s5-container section .c5-heading .c5-img img {
  position: relative;
  margin: 0;
  width: 27.0833333%;
  height: auto;
  max-width: 406px;
}
.s5-container section .c5-heading .c5-img .c5-inner.c5-right {
  text-align: right;
}
.s5-container section .c5-heading .c5-img .c5-inner.c5-right img {
  right: -0.3%;
}

@media screen and (max-width: 479px) {
  .s5-container section {
    background-repeat: repeat;
  }
  .s5-container section .c5-heading h3 {
    background: url("../images/sec_c5-heading_bg.gif");
  }
  .s5-container section .c5-heading img.c5-ttl {
    margin: 0;
    padding: 4.5% 0 6%;
    width: 88%;
  }
  .s5-container section .c5-heading .c5-obi {
    display: none;
  }
  .s5-container section .c5-heading .c5-img {
    position: static;
    text-align: center;
  }
  .s5-container section .c5-heading .c5-img .c5-inner.c5-right {
    text-align: center;
  }
  .s5-container section .c5-heading .c5-img img {
    margin-top: -4%;
    width: 75%;
  }
}




/*--------------------------------------------------
  .contents 
--------------------------------------------------*/
.s5-row {
position: relative;
  max-width: 1260px;
  padding: 0 30px;
 margin: 0 auto;
}

.c5-lft {
 float: left;
 width: 25%;
 font-size: 86%;
}
.c5-lft img {
 width: 100%;
}
.c5-rgt {
 float: right;
 width: 67.25%;
}
.c5-rgt h4 {
 padding-bottom: 3%;
}
.c5-rgt h4 img {
 width: 100%;
}
.c5-rgt h4 span {
 display: none;
}
@media(max-width:640px) {
.c5-rgt h4 span {
 display: block;
 font-size: 140%;
 font-weight: bold;
 padding-bottom: 3%;
}
.c5-rgt h4 img {
 display: none;
}
}
.c5-rgt p {
 line-height: 2;
 clear: both;
}
.c5-rgt .c5-endpg {
 margin-bottom: 10%;
}
.c5-rgt .c5-endpg2 {
 margin-bottom: 14%;
}
.c5-imgs li {
 list-style: none;
 float: left;
 margin: 4% 0;
}
.c5-imgs li.c5-migi {
 float: right;
}
.c5-mgn {
 margin: 4% 0;
}

@media(max-width:768px) {
.c5-imgs li.c5-migi {
 float: left !important;
}
}

 @media(max-width:640px) {
.c5-lft {
 clear: left;
 width: 100%;
 font-size: 86%;
}
.c5-lft img {
 width: 100%;
}
.c5-rgt {
 clear: right;
 width: 100%;
}
.c5-rgt h4 {
 padding-bottom: 3%;
}
.c5-rgt h4 img {
 width: 100%;
}
.c5-rgt p {
 line-height: 2;
 clear: both;
 background: #fff;
}
.c5-rgt .c5-endpg {
 margin-bottom: 10%;
}
.c5-rgt .c5-endpg2 {
 margin-bottom: 14%;
}
.c5-imgs li {
 list-style: none;
 clear: left;
 margin: 4% 0;
}
.c5-imgs li.c5-migi {
 float: left !important;
}
.c5-mgn {
 margin: 4% 0;
}
}






/*--------------------------------------------------
  Banner 
--------------------------------------------------*/
.s5-row .s5-row__col3 img {
 width: 100%;
 height: auto;
 margin-bottom: 1%;
}
.s5-row .s5-row__col3 dl {
 margin: 0;
}
.s5-row .s5-row__col3 dt {
 width: 100%;
 margin: 0;
}
.s5-row .s5-row__col3 dd {
 width: 100%;
 margin: 0;
 padding-bottom: 3%;
 font-size: 100%;
}
.c5-commBox {
 width: 100%;
 padding-bottom: 6%;
}
.c5-commBox .c5-mgnR {
 padding-left: 5%;
}
.s5-row .s5-row__col1 .c5-lft5 {
 padding-left: 5%;
}


@media(max-width:640px) {
.s5-row .s5-row__col3 dd.s5-p3 {
 font-size: 94%;
}
.c5-commBox {
 width: 100%;
 padding-bottom: 6%;
}
.s5-row .s5-row__col1 .c5-lft5,
.c5-commBox .c5-mgnR {
 padding-left: 0;
}
}
@media(max-width:375px) {
.s5-row .s5-row__col3 dd.s5-p3 {
 font-size: 98%;
}
}