@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);
#content h3 {
  padding: 0;
  background: none;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 28px;
  font-weight: bold;
}

#content h3 span {
  color: #FC0;
}

#content .flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 100px;
}

#content .flexbox:nth-child(2n) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

#content .flexbox .img {
  width: 180px;
}

#content .flexbox:nth-child(2n) .img {
  text-align: right;
}

#content .flexbox .txt {
  width: 400px;
}


/*===============================================
  画面の横幅が680px以下に適用
===============================================*/

@media screen and (max-width: 680px) {
  #content .flexbox {
    display: block;
  }
  #content .flexbox .img {
    width: 100%;
    margin-bottom: 1em;
  }
  #content .flexbox .img,
  #content .flexbox:nth-child(2n) .img {
    text-align: center;
  }
  #content .flexbox .img img {
    width: 80%;
  }
  #content .flexbox .txt {
    width: 100%
  }
}