@charset "utf-8";

/* GoogleIcon */

.material-icons {
  vertical-align: -0.3em;
  margin: 1%;
}

/* 色　color */
.pink {
  color: #d23b71;
}

.blue {
  color: #12335f;
}

.sky {
  color: #37a6d1;
}

.green {
  color: #a5c445;
}

.yellow {
  color: #ebd030;
}

.bluegreen {
  color: #00a99d;
}

/* アイコンのサイズを変更するためのルール */

.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-48 {
  font-size: 48px;
}

.contents p {
  text-align: center !important;
  font-size: 1.3em;
}

.contents img {
  width: 100%;
  text-align: right;
  display: inline-block;
}

.text_icon {
  font-size: 1.2em;
  margin: 0.5em;
  vertical-align: 1px;
}

.catch {
  position: relative;
  border: 3px solid #00a99d;
  padding: 0.8em;
}
.catch::before,
.catch::after {
  /*カギ括弧のサイズ*/
  position: absolute;
  content: "";
  width: 10px;
  height: 20px;
  border: solid #00a99d;
  border-width: 3px 0 0 3px;
}
.catch::before {
  /*左のカギ括弧の位置*/
  top: 3px;
  left: 3px;
}
.catch::after {
  /*右のカギ括弧の位置*/
  bottom: 3px;
  right: 3px;
  transform: rotate(180deg); /*180度回転*/
}

dl {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
}

.contents h3 {
  width: 100%;
  display: block;
  font-size: 1.4em;
  margin: 0.5em;
  padding: 0.5em;
  font-weight: bold;
  color: #ffffff;
  background-color: #00a99d;
  box-shadow: 0px 5px 3px -3px rgba(0, 0, 0, 0.4);
}

.text_block dl {
  width: 100%;
  float: left;
}
.text_block dt {
  margin-bottom: 0px;
  float: left;
  margin-left: 0px;
  width: 100%;
}
.text_block dd {
  margin-left: 0px;
  font-size: 1.1em !important;
  width: 100%;
  float: left;
  clear: left;
}

.contents dl img {
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 960px) {
  .material-icons.md-48 {
    font-size: 36px;
  }

  .contents h2 {
    font-size: 0.9em;
  }

  .contents h3 {
    margin: 0;
  }

  .contents p {
    font-size: 0.9em;
  }

  .text_icon {
    display: none;
  }

  .small {
    font-size: 0.5em !important;
  }

  dl {
    padding: 2%;
    width: 100%;
    font-size: 0.8em;
  }

  dl dt {
    margin: 2%;
    width: 100%;
    display: block;
  }

  dl dd {
    margin: 2%;
    width: 100%;
    display: block;
  }
}