@charset "UTF-8";
/* btn設定
   =================================================================== */
.btn {
  width: 218px;
  height: 48px;
  border: #000 2px solid;
  border-radius: 30px;
  background: url(../img/common/btn.png) no-repeat 183px center #fff;
  background-size: 17px auto;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  margin: 0 auto; }
  .btn a {
    color: #000;
    text-align: center;
    line-height: 47px;
    letter-spacing: 0.2em;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  .btn:hover, .btn:active {
    background-color: #000; }
    .btn:hover a, .btn:active a {
      color: #fff; }

/* top設定
   =================================================================== */
.top .header {
  margin: 52px auto 30px; }

.top__image {
  width: 100%;
  height: 446px;
  position: relative;
  margin: 0 auto 80px;
  background: url(../img/top/main__bg.jpg) repeat-x center center;
  background-size: 1300px auto; }
  .top__image.loading span {
    background: url(../img/common/loading.gif) no-repeat center center #fff;
    background-size: 30px auto;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2; }
  .top__image .top__image--title {
    position: absolute;
    top: 74px;
    right: 50%;
    width: 218px;
    margin-right: -468px;
    z-index: 1; }
    .top__image .top__image--title p {
      width: 170px;
      height: 54px;
      text-indent: -9999px;
      background: url(../img/top/title.png) no-repeat center center;
      background-size: 100% auto;
      margin: 0 auto 10px; }
    .top__image .top__image--title .btn.black {
      width: 218px;
      height: 48px;
      border: #000 2px solid;
      border-radius: 30px;
      background: url(../img/common/btn.png) no-repeat 183px center #fff;
      background-size: 17px auto;
      transition-duration: 0.4s;
      transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
      margin: 0 auto;
      transition-duration: 0.4s;
      transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
      background: url(../img/common/btn__black.png) no-repeat 183px center #000;
      background-size: 17px auto; }
      .top__image .top__image--title .btn.black a {
        color: #000;
        text-align: center;
        line-height: 47px;
        letter-spacing: 0.2em;
        transition-duration: 0.4s;
        transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
      .top__image .top__image--title .btn.black a {
        color: #fff;
        transition-duration: 0.4s;
        transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
      .top__image .top__image--title .btn.black:hover, .top__image .top__image--title .btn.black:active {
        background-color: #fff; }
        .top__image .top__image--title .btn.black:hover a, .top__image .top__image--title .btn.black:active a {
          color: #000; }
  .top__image .top__image--main {
    width: 800px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -533px;
    z-index: 0; }
    .top__image .top__image--main img {
      width: 100%;
      height: auto; }

.top__about, .top__product, .top__news {
  width: 638px;
  margin: 0 auto 170px; }
  .top__about h2, .top__product h2, .top__news h2 {
    text-indent: -9999px;
    margin: 0 auto 40px;
    position: relative;
    z-index: 10; }

.top__about {
  text-align: center; }
  .top__about h2 {
    background: url(../img/common/title/about.png) no-repeat 250px center;
    background-size: auto 26px; }
  .top__about p {
    line-height: 2.4;
    margin-bottom: 34px; }

.top__product h2 {
  background: url(../img/common/title/product.png) no-repeat center center;
  background-size: auto 26px; }
.top__product dl {
  width: 343px;
  text-align: center;
  margin: -80px auto 20px;
  position: relative;
  z-index: 0; }
  .top__product dl dt {
    margin-bottom: 8px; }
    .top__product dl dt img {
      width: 100%;
      height: auto; }
.top__product p {
  width: 337px;
  margin: 0 auto 24px;
  font-size: 12px;
  text-align: center; }

.top__news h2 {
  background: url(../img/common/title/news.png) no-repeat center center;
  background-size: auto 26px; }
.top__news ul {
  margin-bottom: 30px; }
  .top__news ul li {
    background: #f3f5df;
    width: 100%;
    border-radius: 30px;
    line-height: 47px;
    margin-bottom: 19px;
    padding: 0 24px;
    position: relative;
    overflow: hidden;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
    .top__news ul li span {
      display: block;
      position: absolute;
      top: 0;
      left: 24px; }
    .top__news ul li.pdf a {
      padding-right: 40px; }
    .top__news ul li p {
      margin-left: 94px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; }
      .top__news ul li p a {
        text-decoration: underline;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden; }
        .top__news ul li p a:hover {
          text-decoration: none; }
    .top__news ul li .pdf__icon {
      position: absolute;
      width: 47px;
      height: 47px;
      top: 0;
      right: 18px; }
      .top__news ul li .pdf__icon a {
        text-indent: -9999px;
        background: url(../img/common/pdf.png) no-repeat center center;
        background-size: 23px auto; }
    .top__news ul li:hover {
      background: #e2e9b6; }
.top__news .btn--news {
  width: 100px;
  height: 28px;
  background: url(../img/common/btn.png) no-repeat right center;
  background-size: 17px auto;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  margin: 0 auto; }
  .top__news .btn--news a {
    padding: 0 20px;
    font-size: 12px;
    line-height: 30px;
    letter-spacing: 0.2em; }
  .top__news .btn--news:hover {
    opacity: 0.5; }