@charset "UTF-8";
body {
  margin: 0; }

* {
  box-sizing: border-box; }

.inner {
  width: 100%;
  max-width: 980px;
  padding: 40px 20px;
  margin: 0 auto; }

h1 {
  font-size: 24px; }

h2 {
  font-size: 20px; }

h3 {
  font-size: 18px; }

p {
  font-size: 16px; }

img {
  max-width: 100%;
  vertical-align: bottom; }

a {
  transition: all 200ms; }

ol, ul {
  padding-left: 2em; }

/* ボタン */
.btn {
  text-align: center;
  margin: 3em 0; }
  .btn a {
    border-radius: 3px;
    background: #ccc;
    position: relative;
    padding: 1em 2em;
    color: #000;
    text-decoration: none; }
    .btn a:after {
      content: "";
      transform: rotate(45deg);
      border-top: solid 1px #000;
      border-right: solid 1px #000;
      position: absolute;
      right: 1em;
      top: 0;
      bottom: 0;
      margin: auto 0;
      width: 0.4em;
      height: 0.4em; }
    .btn a:hover {
      opacity: 0.7; }

/* 画像（上）＋テキスト１ */
@media screen and (min-width: 768px) {
  .i_t {
    display: flex; }
    .i_t > div {
      width: 50%; }
      .i_t > div:last-child {
        padding: 0 20px; } }

/* 画像（下）＋テキスト２*/
.t_i {
  display: flex;
  flex-flow: column-reverse; }
  @media screen and (min-width: 768px) {
    .t_i {
      flex-flow: unset; }
      .t_i > div {
        width: 50%; }
        .t_i > div:last-child {
          padding: 0 20px; } }

/* 画面の横幅100% */
.full_width {
  width: 100%;
  background: #c2deff; }

/* QA */
.qa dl {
  margin: 35px 0; }
  .qa dl dt {
    position: relative;
    padding-left: 2.5em; }
    .qa dl dt:before {
      position: absolute;
      content: "Q";
      font-weight: bold;
      font-size: 2em;
      top: -0.5em;
      left: 0;
      color: #999; }
  .qa dl dd {
    position: relative;
    padding-left: 2.5em;
    margin-left: 0; }
    .qa dl dd:before {
      position: absolute;
      content: "A";
      font-weight: bold;
      font-size: 2em;
      top: -0.5em;
      left: 0;
      color: #999; }

/* カード */
@media screen and (min-width: 768px) {
  .card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    .card > div {
      width: 30%; }
    .card:after {
      content: "";
      width: 30%; } }