html {
}

body {text-align: center;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  font-size: 0.8rem;
  margin: 0;
  letter-spacing: 0.1em;

}
h1 {
  text-align: center;
  margin-bottom: 16px;
  font-size: 48px;
  letter-spacing: 1rem;

}
h2 {
  margin: 0;
}
h2 img {
  margin: 0;
  width: 80%;

}
h3 {margin:0; margin-bottom: 24px; letter-spacing: 0.25em; font-size: 32px;}
a {color: violet; text-decoration: none; }
a:hover {opacity: 0.8;}

.outer {


}
.inner {

}

.for-mail {
  margin: 44px auto 56px;
}



/* ここから下がボタンのCSS　*/
.btn-animation-02 {
display: inline-block;
font-size: 16px;
text-align: center;
background-color: #000;
border: 2px solid #000;

letter-spacing: 0.08em;
color: #000;
text-decoration: none;
font-weight: bold;
padding: 10px 24px;
border-radius: 4px;
position: relative;
}

.btn-animation-02 span {
position: relative;
z-index: 1;
}

.btn-animation-02::before,
.btn-animation-02::after {
content: "";
display: block;
background-color: #FFF;
width: 50%;
height: 100%;
position: absolute;
top: 0;
transition: .2s;
}
.btn-animation-02::before {
left: 0;
}
.btn-animation-02::after {
right: 0;
}

.btn-animation-02:hover:before,
.btn-animation-02:hover:after {
width: 0;
background-color: #FFF;
}

.btn-animation-02:hover {
color: #FFF;
}

.kihongaiyou {
  width: 90%;
  text-align: left;
  margin: auto;
}

/*基本概要*/
.kihongaiyou {
  margin: 40px auto;
}
.kihongaiyou ul {
  padding-left: 0;
}
.kihongaiyou li {
  list-style: none;
}
.kihongaiyou p {
  text-align: justify;
}


.box {
  display: flex;
  flex-flow: row no-wrap; /*flex-direction + flex-wrapの記述が可能*/
  flex-flow: column wrap;
}

.bc {
  width: 100%;
  text-align: left;
}

.box hr {
  width: 40%;
  margin: 16px auto;

  border: 1px solid #f8f8f8;
}
.bc img {
  max-width: 100%;
  padding-top: 16px;
}

.bc_contents {
  width: 90%;
  margin: auto;
}

.bc h4 {
  margin-bottom: 8px;

}
.bc p {
  margin-bottom: 1.6em;
}

.tag ul{
  padding-left: 0;
  display: flex;
}
.tag li {
  list-style: none;
  display: flex;
  background: red;
  color: #ffffff;
  padding: 4px 8px;
  font-size: 0.56em;
  border-radius: 4px;
  margin-right: 4px;
}

.bc_end_paddin{
  padding-bottom: 8px;
}


@media (min-width: 768px) {
  h1 {
    padding: 16px;
    font-size: 72px;
  }

  h2 img {
    margin: 0;
    width: 40%;
  }
  .btn-animation-02 {
    font-size: 32px;
  }
  .kihongaiyou {
    margin: 56px auto;
  }

  .box hr {
    display: none;
    width: 40%;
    margin: 32px auto;

  }

  .box {
    display: flex;
    flex-flow: wrap; /*flex-direction + flex-wrapの記述が可能*/
    justify-content: space-between;
  }

  .bc {
    width: 49%;
    border-top: 4px solid #f8f8f8;
  }

  .border-right {
    border-right: 1px solid #f8f8f8;
  }
  .border-left {
    border-left: 1px solid #f8f8f8;
  }

  .kihongaiyou {
    width: 80%;
    text-align: left;
    margin: 40px auto;
  }

  .for-mail {
    margin: 40px auto 56px;
  }

  .bc_end_paddin{
    padding-bottom: 16px;
  }

}

@media (min-width: 1024px) {
  h1 {
    padding: 16px;
    font-size: 96px;
  }

  h2 img {
    margin: 0;
    width: 24%;
  }

  .bc img {
    max-width: 100%;
    padding-top: 40px;
  }

  .bc_end_paddin{
    padding-bottom: 32px;
  }

  .kihongaiyou {
    width: 80%;
    text-align: left;
    margin: 48px auto;
  }
}