@charset 'UTF-8';
/*====================================================================================
1）基本 / フォントの設定
====================================================================================*/
/* フォントのバグを削除 */
body {
  -webkit-font-smoothing: antialiased;
}

/* 基本フォントサイズ */
html:root {
  font-size: 62.5%;
}

body {
  font-size: 1.0rem;
}

/* 基本フォント */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, dt, dd, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure {
  color: #412483;
  font-size: 1.6rem;
  font-weight: normal;
  font-family: 'ヒラギノ明朝 ProN W6', 'HiraMinProN-W6', 'HG明朝E', 'ＭＳ Ｐ明朝', 'MS PMincho', 'MS 明朝', serif;
  text-align: left;
  line-height: 160%;
  letter-spacing: 0;
}

/* リンク */
a {
  color: #412483;
}

li {
  list-style-type: none;
}

/*====================================================================================
2）基本 / エリアの設定
====================================================================================*/
/* サイトの背景カラー */
html:root {
  background: url(../img/bg_logo.png) #ffffff no-repeat;
  background-size: contain;
}

/* 横スクロール禁止 */
html, body {
  overflow-x: hidden;

  　position: relative;
}

/*====================================================================================
3）個別 / ヘッダーの設定
====================================================================================*/
header {
  overflow: hidden;
  border-bottom: 1px solid #412483;
}
header .left {
  margin: 20px 0;
}
header .left > * {
  margin-right: auto;
  margin-left: auto;
}

/*------------------------------------------
ロゴの設定
------------------------------------------*/
#tit-site {
  width: 162px;
  height: 40px;
}
#tit-site a {
  display: block;
  overflow: hidden;
  text-indent: 110%;
  white-space: nowrap;
  width: 162px;
  height: 40px;
  background-image: url('../img/logo.svg');
  background-size: 162px 40px;
  background-repeat: no-repeat;
}

/*------------------------------------------
ナビの設定
------------------------------------------*/
#navi {
  overflow: hidden;
  text-align: center;
  width: 100%;
  margin: 20px 0;
}
#navi li {
  display: inline-block;
  width: 40%;
}
#navi li a {
  display: block;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

/*====================================================================================
4）フッター
====================================================================================*/
footer {
  width: 100%;
  padding: 15px;
}
footer .copy {
  font-size: 1.2rem;
  text-align: center;

  opacity: 0.5;
}

/*------------------------------------------
bodyの高さが足りない時
------------------------------------------*/
footer.on {
  position: absolute;
  bottom: 0px;
}

/*====================================================================================
5）index
====================================================================================*/
#index {
  padding: 70px 20px;
}
#index p:not(:last-child) {
  margin-bottom: 30px;
}

/*====================================================================================
6）service
====================================================================================*/
#service {
  overflow: hidden;
  padding: 20px 0px;
}

/*------------------------------------------
カードリスト
------------------------------------------*/
.card-list {
  overflow: hidden;
  width: 320px;
  margin-right: auto;
  margin-left: auto;
}
.card-list li {
  float: left;
  padding: 0px 10px;
  margin-bottom: 15px;

  zoom: 0.5;
}

/*====================================================================================
7）about
====================================================================================*/
#about .col-item {
  padding: 15px;
}
#about .col-item figure {
  text-align: center;

  zoom: 0.5;
}

/*------------------------------------------
dl
------------------------------------------*/
dl {
  margin-bottom: 2em;
}
dl dt {
  font-size: 2.0rem;
  font-weight: bold;
  padding-left: 10px;
  border-left: 4px solid #412483;
  margin-bottom: 0.5em;
}
dl dd {
  font-weight: normal;
}
dl dd + dt {
  margin-top: 1.5em;
}

/* ブレイクポイントの設定 */
/* PCのコンテンツエリアの横幅 */
/*====================================================================================
PCの設定
====================================================================================*/
@media screen and (min-width: 992px) {
  html:root {
    background: url(../img/bg_logo.png) #ffffff no-repeat;
    background-size: auto;
    background-position: top center;
  }
  /*==================================================================================== ヘッダー ====================================================================================*/
  header {
    display: table;
    table-layout: fixed;
    width: 1110px;
    margin-right: auto;
    margin-left: auto;
  }
  header > * {
    display: table-cell;
  }
  header .left {
    padding: 26px 46px;
    margin: 0;
  }
  header .left > * {
    margin: 0;
  }
  header .right {
    vertical-align: bottom;
  }
  /*------------------------------------------ ナビ ------------------------------------------*/
  #navi {
    text-align: right;
    margin: 0;
  }
  #navi li {
    width: auto;
  }
  #navi li a {
    padding: 0px 30px;
  }
  /*==================================================================================== コンテントエリア ====================================================================================*/
  #cont {
    width: 1110px;
    margin-right: auto;
    margin-left: auto;
  }
  /*==================================================================================== index ====================================================================================*/
  #index {
    width: 672px;
    padding: 150px 0px;
    margin-right: auto;
    margin-left: auto;
  }
  #index p {
    font-size: 24px;
    line-height: 40px;
    letter-spacing: 0.14em;
  }
  /*==================================================================================== service ====================================================================================*/
  #service {
    overflow: hidden;
    padding: 50px 20px;
  }
  /*------------------------------------------ カード	 ------------------------------------------*/
  .card-list {
    overflow: hidden;
    width: auto;
  }
  .card-list li {
    float: left;
    padding: 0px 30px;
    margin-bottom: 30px;

    zoom: 1;
  }
  /*==================================================================================== about ====================================================================================*/
  #about {
    padding: 100px 30px; /* 2カラム */
  }
  #about .col-02 {
    overflow: hidden;
  }
  #about .col-02 * {
    font-size: 2.4rem;
  }
  #about .col-02 .col-item {
    float: left;
    width: 40%;
  }
  #about .col-02 .col-item:last-child {
    float: right;
    width: 60%;
  }
  #about .col-item figure {
    text-align: center;

    zoom: 1;
  }

  /*------------------------------------------ dl ------------------------------------------*/
  dl {
    margin-bottom: 2em;
  }
  dl dt, dl dd, dl dd * {
    font-size: 2.4rem;
  }
  dl dt {
    float: left;
    padding: 0;
    border: none;
    margin: 0;
  }
  dl dt:after {
    content: '：';
  }
  dl dd {
    font-weight: normal;
    padding-left: 4em;
    margin-bottom: 1em;
  }
  dl dd + dt {
    margin-top: 0em;
  }
}
#cont {
  opacity: 0;
          animation: cont 1.5s ease-out 0.5s 1 forwards;
     -moz-animation: cont 1.5s ease-out 0.5s 1 forwards;
  -webkit-animation: cont 1.5s ease-out 0.5s 1 forwards;
      -ms-animation: cont 1.5s ease-out 0.5s 1 forwards;
       -o-animation: cont 1.5s ease-out 0.5s 1 forwards;
}

@-webkit-keyframes cont {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes cont {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#index {
  opacity: 0;
          animation: index 7s ease-out 0.5s 1 forwards;
     -moz-animation: index 7s ease-out 0.5s 1 forwards;
  -webkit-animation: index 7s ease-out 0.5s 1 forwards;
      -ms-animation: index 7s ease-out 0.5s 1 forwards;
       -o-animation: index 7s ease-out 0.5s 1 forwards;
}

@-webkit-keyframes index {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes index {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}