@charset "UTF-8";
* {
  list-style: none;
  margin: 0px;
  padding: 0px;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif; }

body {
  margin: 0px;
  padding: 0px; }

a.noborder,
a.noborder:link,
a.noborder:hover,
a.noborder:active,
a.noborder:visited,
img {
  border: 0;
  vertical-align: bottom; }

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

p {
  color: #444;
  line-height: 1.6;
  font-size: 15px; }

#wrapper {
  overflow: hidden; }
  #wrapper .right {
    float: right; }
  #wrapper .left {
    float: left; }

#jb_head {
  background-color: #000;
  padding: 5px; }

/* ---------------------------
ヘッダーここから
--------------------------- */
#header_area {
  position: relative;
  background: #d9dde0;
  padding-bottom: 8%;
  /* h1 */
  /* 人物紹介 */
  /* companyArea */
  /* people */ }
  #header_area > span {
    position: absolute;
    z-index: 99;
    font-size: 15px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    left: 10px;
    top: 5px; }
    #header_area > span.black {
      color: #000;
      left: 90%;
      text-shadow: none; }
    #header_area > span.white_r {
      left: 90%; }
  #header_area > a {
    position: absolute;
    z-index: 99;
    width: 40%;
    right: 0;
    top: 5px; }
    #header_area > a img {
      width: 100%; }
  #header_area > div img {
    width: 100%; }
  #header_area h1 {
    position: absolute;
    top: 30%;
    /* p2 */ }
    #header_area h1 img {
      width: 80%;
      margin: 0 10%; }
    #header_area h1.p2 {
      top: 5%;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 90%; }
      #header_area h1.p2 img {
        width: 100%;
        margin: 0; }
      #header_area h1.p2 span {
        display: block; }
    #header_area h1.p3 {
      top: 40%; }
      #header_area h1.p3 img {
        width: 100%;
        margin: 0 auto; }
  #header_area .companyArea {
    position: relative;
    z-index: 99; }
    #header_area .companyArea h2 {
      position: absolute;
      top: 0;
      left: 0;
      padding-top: 45%;
      width: 100%;
      text-align: center;
      font-weight: bold;
      font-size: 15px; }
      #header_area .companyArea h2 span {
        display: block;
        width: 100%;
        padding: 4px 0;
        color: #fff; }
  #header_area .top, #header_area .bottom {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto; }
  #header_area .top h2 span {
    background-color: #E20113; }
  #header_area .bottom h2 span {
    background-color: #6482BE; }
  #header_area .people {
    width: 50%;
    background-color: #fff; }
    #header_area .people p {
      padding: 32px 8px 12px 8px;
      font-size: 10px; }
      #header_area .people p span {
        font-weight: 600; }
      #header_area .people p strong {
        margin: 0 8px 0 0;
        font-size: 14px; }
  #header_area .gradation {
    display: block;
    position: absolute;
    bottom: 0%;
    height: 80px;
    width: 100%;
    background: -moz-linear-gradient(top, rgba(217, 221, 224, 0) 0%, #d9dde0 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(217, 221, 224, 0) 0%, #d9dde0 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(217, 221, 224, 0) 0%, #d9dde0 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d9dde0', endColorstr='#d9dde0',GradientType=0 );
    /* IE6-9 */ }
  #header_area.p4header {
    background: #bfd5da; }

/* header_area */
/* ---------------------------
バナーエリア
--------------------------- */
.bannerArea {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 99;
  opacity: 0;
  transition: 0.3s;
  pointer-events: none; }
  .bannerArea.show {
    opacity: 1;
    pointer-events: auto; }
  .bannerArea .top_btn {
    display: block;
    width: 46px;
    margin: 0 10px 20px auto;
    filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.6)); }
  .bannerArea .bar {
    display: block;
    padding: 2% 0;
    box-sizing: border-box;
    width: 100%;
    /* box-shadow */
    box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
    background-color: #6483BF; }
  .bannerArea .bar_l {
    display: block;
    padding: 2% 0;
    box-sizing: border-box;
    width: 50%;
    /* box-shadow */
    box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
    background-color: #654e9e;
    float: left; }
  .bannerArea .bar_r {
    display: block;
    padding: 2% 0;
    box-sizing: border-box;
    width: 50%;
    /* box-shadow */
    box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
    background-color: #6483BF;
    float: right; }
  .bannerArea .bar_r_v {
    display: block;
    padding: 2% 0;
    box-sizing: border-box;
    width: 50%;
    /* box-shadow */
    box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
    background-color: #654e9e;
    float: right; }
  .bannerArea img {
    width: 100%; }

/* bannerArea */
#linkarea {
  background-color: #d9dde0;
  padding: 50px 0; }
  #linkarea .linkarea-button {
    display: inline-block;
    text-align: center;
    margin: 0 10% 30px 10%;
    background-color: #654ea3;
    color: #fff;
    font-weight: bold;
    width: 80%;
    padding: 20px 0;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
  #linkarea .textLink {
    display: table;
    position: relative;
    margin: 0 auto;
    padding: 0;
    background: 0;
    box-shadow: 0 0 0 0;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #333333;
    text-decoration: none; }
  #linkarea p {
    font-size: 12px;
    font-weight: 600;
    padding: 2em 5%; }

#footer {
  width: 100%;
  box-sizing: border-box;
  background-color: #000;
  text-align: center;
  padding: 20px 0 80px 0; }
  #footer a {
    display: block;
    margin: 0 auto 10px; }
    #footer a img {
      width: auto; }
  #footer p {
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
    color: #fff; }

.fade {
  opacity: 0;
  transform: translateY(20px);
  transition: 1s ease; }
  .fade.fadein {
    opacity: 1;
    transform: translateY(0); }

.fade-top {
  opacity: 0;
  transform: translateY(20px);
  transition: 1s ease; }
  .fade-top.fadein {
    opacity: 1;
    transform: translateY(0); }

/* --------------------------------------
インデックス ヘッダーここから
--------------------------------------*/
.headerArea {
  position: relative;
  /* h1 */ }
  .headerArea img {
    display: block;
    width: 100%; }
  .headerArea h1 {
    position: absolute;
    bottom: -10vw;
    z-index: 1000; }

/* headerArea */
/* --------------------------------------
インデックス メインコンテンツここから
--------------------------------------*/
#mainArea {
  padding: 16% 0 60px 0;
  background-image: url(../images/index_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center; }

/* mainArea */
.readArea {
  margin: 0 auto 70px auto;
  width: 90%; }
  .readArea p {
    font-size: 16.1px;
    color: #333; }

/* readArea */
/* --------------------------------------
インデックス セクションここから
--------------------------------------*/
.sectionArea {
  display: block;
  position: relative;
  margin: 0 auto 60px auto;
  box-sizing: border-box;
  box-shadow: 0px 0px 19px -4px rgba(0, 0, 0, 0.8);
  width: 90%;
  background-color: #FFF;
  text-decoration: none; }
  .sectionArea > span {
    display: block;
    position: absolute;
    top: -40px;
    left: -15px;
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.6)); }
    .sectionArea > span > img {
      width: 72px; }
  .sectionArea > img {
    display: block;
    margin: 0 0 12px 0;
    width: 100%; }
  .sectionArea h2 {
    margin: 0 20px 0.5em;
    text-align: left;
    line-height: 1.3;
    font-size: 20px;
    color: #3a449a; }
    .sectionArea h2 > span {
      display: block;
      margin: 0 0 4px 0;
      font-size: 15px; }
  .sectionArea h3 {
    font-size: 15px;
    margin: 0 20px 0.5em;
    color: #333; }
  .sectionArea > p {
    font-size: 14px; }
  .sectionArea .small {
    font-size: 24px; }
  .sectionArea > p {
    padding: 0 20px 15px; }
  .sectionArea .mb0 {
    margin: 0 0 0 0; }

/* sectionArea */
.CSbox {
  padding: 80px 0; }

.linkArea > img {
  display: block;
  margin: 0 auto 32px auto;
  width: 90%;
  box-shadow: 0px 2px 22px 3px rgba(0, 0, 0, 0.6); }

.linkArea .video-frame {
  width: 90%;
  height: 50.6vw;
  margin: 0 auto 32px auto; }

.linkArea a {
  display: block;
  box-shadow: 0px 2px 22px 3px rgba(0, 0, 0, 0.6);
  margin: 0 auto 30px;
  width: 80%; }
  .linkArea a > img {
    width: 100%; }
  .linkArea a.banner {
    padding: 30px 0;
    border-radius: 20px;
    width: 90%;
    background-color: #fff; }
    .linkArea a.banner img {
      display: block;
      margin: 0 auto;
      width: 170px; }

/* linkArea */
/* ---------------------------
スライダー
--------------------------- */
.slick-dotted.slick-slider {
  margin-bottom: 0 !important; }

/*# sourceMappingURL=style-smp.css.map */