@charset "utf-8";

/* adjust 
============================================================== */
.connect #contents .headSection .ttl h1 {
  padding-left: 0;
  background: none;
}

.connect #contents .mainSection {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

@media screen and (max-width: 767px) {
  .connect #contents .mainSection {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* visualSection 
============================================================== */
#contents .visualSection {
  margin-bottom: 18px;
  height: 257px;
  background: url(/connect/images/index_v2/ph_main.jpg) no-repeat center top;
  overflow: hidden;
}

#contents .visualSection p {
  padding-top: 257px;
}

@media print {
  #contents .visualSection p {
    display: none;
  }
}

/* connectIndexNav
============================================================== */
#connectIndexNav {
  margin: 0 auto;
  width: 940px;
  padding: 10px;
  background: #1daee3;
}

#connectIndexNav ul {
  overflow: hidden;
  *zoom: 1;
}

#connectIndexNav li {
  position: relative;
  float: left;
  width: 465px;
}

#connectIndexNav .office {
  margin-bottom: 10px;
}

#connectIndexNav .home {
  float: right;
  margin-bottom: 10px;
}

#connectIndexNav .shop {
  float: right;
}

#connectIndexNav li p {
  position: absolute;
  left: 20px;
  top: 66px;
  font-size: 14px;
  color: #505050;
}

#connectIndexNav li ul {
  position: absolute;
  left: 21px;
  bottom: 19px;
}

#connectIndexNav li ul li {
  position: static;
  width: auto;
  float: none;
}

#connectIndexNav li ul li a {
  display: block;
  width: 222px;
  height: 26px;
  text-indent: -9999px;
}

#connectIndexNav .office a {
  background: url(../images/index_v2/btn_office.png) no-repeat left bottom;
}

#connectIndexNav .home a {
  background: url(../images/index_v2/btn_home.png) no-repeat left bottom;
}

#connectIndexNav .school a {
  background: url(../images/index_v2/btn_school.png) no-repeat left bottom;
}

#connectIndexNav .shop a {
  background: url(../images/index_v2/btn_shop.png) no-repeat left bottom;
}

#connectIndexNav .office a:hover {
  background: url(../images/index_v2/btn_office.png) no-repeat left top;
}

#connectIndexNav .home a:hover {
  background: url(../images/index_v2/btn_home.png) no-repeat left top;
}

#connectIndexNav .school a:hover {
  background: url(../images/index_v2/btn_school.png) no-repeat left top;
}

#connectIndexNav .shop a:hover {
  background: url(../images/index_v2/btn_shop.png) no-repeat left top;
}

/* connectIndexBanners
============================================================== */
#connectIndexBanners {
  margin: 80px auto 80px auto;
  width: 960px;
}

#connectIndexBanners ul {
  overflow: hidden;
  *zoom: 1;
}

#connectIndexBanners li {
  float: left;
  width: 460px;
}

#connectIndexBanners li:last-child {
  float: right;
}

#connectIndexBanners a img {
  width: 100%;
}

#connectIndexBanners a:hover img {
  filter: alpha(opacity=75);
  opacity: 0.75;
}

@media screen and (max-width: 767px) {
  #connectIndexBanners {
    box-sizing: border-box;
    padding: 0 2%;
    margin: 40px auto 40px;
    width: 100%;
  }

  #connectIndexBanners ul {
    margin-left: -0px;
  }

  #connectIndexBanners li {
    float: none !important;
    display: block;
    width: 100%;
    max-width: 460px;
    margin: 0 auto 20px auto;
  }
}

/* connectIndexLinks
============================================================== */
#connectIndexLinks {
  margin: 0 auto;
  width: 960px;
}

#connectIndexLinks .inner {
  padding: 15px 0 15px 22px;
  border: solid 1px #ccc;
  overflow: hidden;
  *zoom: 1;
}

#connectIndexLinks h2 {
  margin-bottom: 20px;
}

#connectIndexLinks .download {
  overflow: hidden;
  *zoom: 1;
}

#connectIndexLinks .download li {
  float: left;
  width: 295px;
  padding: 0 0 0 10px;
  border-right: solid 1px #ccc;
  overflow: hidden;
}

#connectIndexLinks .download li.last {
  border-right: none;
}

#connectIndexLinks .download li li {
  float: none;
  width: auto;
  margin-top: 5px;
  padding: 0;
  border-right: none;
}

#connectIndexLinks .download li .icon {
  float: left;
  margin-right: 18px;
}

#connectIndexLinks .download li dl {
  overflow: hidden;
  *zoom: 1;
}

#connectIndexLinks .download li dt {
  margin-bottom: 0.2em;
  font-size: 17px;
  font-weight: normal;
  line-height: 1.3;
}

#connectIndexLinks .note {
  margin-top: 10px;
  font-size: 11px;
}

#connectIndexLinks a:hover img {
  filter: alpha(opacity=75);
  opacity: 0.75;
}

/* connectIndexApp
============================================================== */
#connectIndexApp,
#connectIndexRenkei {
  margin-bottom: 35px;
}

#connectIndexApp h2,
#connectIndexRenkei h2 {
  margin-bottom: 18px;
}

#connectIndexApp a:hover img,
#connectIndexRenkei a:hover img {
  filter: alpha(opacity=75);
  opacity: 0.75;
}

#connectIndexApp .inner,
#connectIndexRenkei .inner {
  padding: 0 15px;
  overflow: hidden;
}

#connectIndexApp ul,
#connectIndexRenkei ul {
  width: 425px;
}

#connectIndexApp .left,
#connectIndexRenkei .left {
  float: left;
}

#connectIndexApp .right,
#connectIndexRenkei .right {
  float: right;
}

#connectIndexApp li,
#connectIndexRenkei li {
  margin-bottom: 3px;
}

#connectIndexApp .iLink01,
#connectIndexRenkei .iLink01 {
  background-position: left center;
}