@charset "UTF-8";

/* アンカーリンク、ヘッダの差分 */
:target:before {
   content:"";
   display:block;
   height:80px !important;/* ヘッダの高さ = 50px */
   margin:-80px 0 0 !important;/* ヘッダの高さ = 50px */
}

/* 画像上にテキスト表示 */
.img_box {/*親div*/
  position: relative;/*相対配置*/
  }
.img_box p {
  position: absolute;/*絶対配置*/
  color: #666666;/*文字はグレーに*/
  background-color:rgba(255,255,255,0.87);/*帯は白・半透明に*/
  margin: 0;
  padding: 0.5em 1em;
  top: 0;
  left: 0;
  }
.img_box img {
  width: 100%;
  }

/* 資料請求ボタン常設用 */
.request_bottun {
  position: fixed;
  bottom: 0;
  right: 1em;
  z-index: 999;
  text-align: center;
}
.request_bottun .btn {
  display: inline-block;           /* 改行なしのブロック要素 */
  position: relative;              /* 相対位置指定 */
  width: 220px;                    /* 横幅 */
  height: 70px;                    /* 高さ */
  border-radius: 4px;              /* 角丸 */
  text-align: center;              /* 水平方向は中央揃え */
  line-height: 64px;               /* 行の高さ */
  box-shadow: 0 5px 3px rgba(0, 0, 0, 0.15);    /* 影 */
}
.request_bottun .btn span {
  display: block;                  /* ブロック要素 */
  position: absolute;              /* 親要素の左上を基準位置 */
  width: 100%;                     /* 横幅 */
  height: 100%;                    /* 高さ */
  border-radius: 4px;              /* 角丸 */
  transform-style: preserve-3d;    /* 重なりを3Dで表示 */
  transition: 0.2s;   /* 変化時間 */
}
.request_bottun .btn span strong {
  font-size: 20px;
}
.request_bottun .btn span:nth-child(1) {
  background-color: #f08c00;     /* Buttonボタンの色 */
  color: #ffffff;                /* Buttonの文字の色 */
  border: 2px solid #f08c00;     /* 罫線 */
  transform: rotateX(0deg);        /* 横軸の回転なし */
  transform-origin: 0 50%  -30px;  /* transformの起点 */
  font-size: 12px;                 /* 文字サイズ */
}
.request_bottun .btn span:nth-child(2) {
  background-color: #00a73c;     /* Clickボタンの色 */
  color: #ffffff;                /* Clickの文字の色 */
  border: 2px solid #00a73c;     /* 罫線 */
  transform: rotateX(90deg);       /* 横軸で90度回転 */
  transform-origin: 0 50%  -30px;  /* transformの起点 */
}
.request_bottun .btn:hover span:nth-child(1) {
  transform: rotateX(-90deg);      /* 横軸で前方に90度回転 */
}
.request_bottun .btn:hover span:nth-child(2) {
  transform: rotateX(0deg);        /* 横軸の回転なし */
}


/* 資料請求パーツ用 */
.request_box {
  display: inline-block;
}
.request_box p {
  float: left;
  margin-right: 20px;
}

@media screen and (max-width: 768px) {
  .request_box p {
    float: none;
    margin-bottom: 10px;
}
}


/* お知らせパーツ */
.note_box {
  margin: 2em 0 1.5em;
  padding: 1em;
  border: solid 1px #f08c00;
}


/* ロゴスライダー */
.logo_slide {
  -webkit-box-align: center;
          align-items: center;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-250px * 13)); /* ロゴ数 */
            transform: translateX(calc(-250px * 13)); /* ロゴ数 */
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-250px * 13)); /* ロゴ数 */
            transform: translateX(calc(-250px * 13)); /* ロゴ数 */
  }
}
.logo_slide .slider {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}



.logo_slide .slider .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: -webkit-box;
  display: flex;
  width: calc(250px * 26); /* ロゴ数 x 2 */
}
.logo_slide .slider .slide {
  height: 100px;
  width: 250px;
}

/* ====================================================================================================================
 * noindex 非表示
 * ====================================================================================================================*/
 .extensions {
   display: none;
 }