@charset "utf-8";

/** about **/
main h1 {
  margin: 28px 0 60px 0;
  width: 100%;
  height: 40px;
  font-size: 18px;
  font-family: "游ゴシック体","Yu Gothic",YuGothic,HiraKakuProN-W6,HiraKakuPro-W6,'ヒラギノ角ゴ ProN W6','ヒラギノ角ゴ Pro W6','メイリオ',Meiryo,'ＭＳ ゴシック',Arial,HelveticaNeue,Helvetica,'Lucida Grande',sans-serif;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  background-color: rgb(255,153,153);
}
main h1 > span {
  display: block;
  margin: 0 auto;
  width: 960px;
  height: 40px;
  font-size: 22px;
  letter-spacing: 0.2em;
  color: rgb(25,25,25);
  background-color: rgb(255,102,102);
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}
main .inner.col1 {
  margin-bottom: 100px;
  text-align: center;
}
main .inner.col1 h2 {
  display: block;
  margin: 60px auto 46px auto;
  padding: 0;
  width: 648px;
  height: 34px;
  background: url("../img/about_head01.png") no-repeat 0 0;
  background-size: 724px 118px;
  text-indent: -9999px;
}
main .inner.col1 p {
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-family: "Roboto", "游ゴシック体","Yu Gothic",YuGothic,HiraKakuProN-W6,HiraKakuPro-W6,'ヒラギノ角ゴ ProN W6','ヒラギノ角ゴ Pro W6','メイリオ',Meiryo,'ＭＳ ゴシック',Arial,HelveticaNeue,Helvetica,'Lucida Grande',sans-serif;
  font-weight: bold;
  line-height: 2.2em;
  color: rgb(25,25,25);
}
main .inner.col1 p.update-info {
  margin-top: 26px;
  font-size: 26px;
  font-family: "游ゴシック体","Yu Gothic",YuGothic,HiraKakuProN-W6,HiraKakuPro-W6,'ヒラギノ角ゴ ProN W6','ヒラギノ角ゴ Pro W6','メイリオ',Meiryo,'ＭＳ ゴシック',Arial,HelveticaNeue,Helvetica,'Lucida Grande',sans-serif;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 0.9em;
}
main .inner.col1 p.update-info span {
  font-size: 13px;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic,HiraKakuProN-W3,HiraKakuPro-W3,"ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
  font-weight: normal;
  letter-spacing: 0;
}

.about-logo {
  display: block;
  width: 520px;
  margin: 70px auto 0 auto;
  padding: 0;
}

#comments {
  display: block;
  margin: 0 0 80px 0;
  padding: 20px 0;
  width: 100%;
  height: auto;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 8px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 8px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 8px;
  font-size: 0;
  text-align: center;
}
#comments .anno {
  margin: 0 70px 0 0;
  display: inline-block;
  width: 232px;
  height: 496px;
  background: url("../img/comment_anno.png") no-repeat 0 0;
  background-size: 232px 496px;
  text-indent: -9999px;
  vertical-align: top;
}
#comments .kawakami {
  display: inline-block;
  width: 260px;
  height: 496px;
  background: url("../img/comment_kawakami.png") no-repeat 0 0;
  background-size: 260px 496px;
  text-indent: -9999px;
  vertical-align: top;
}
main .inner.col2 {
  margin: 0 auto 40px auto;
  font-size: 0;
}
main .inner.col2 dl {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 360px;
  text-align: left;
  vertical-align: top;
}
main .inner.col2 dl.left-column {
  margin-right: 80px;
}

main .inner.col2 dl dt {
  display: inline-block;
  margin: 0;
  padding: 0 4px;
  font-size: 14px;
  font-family: "Roboto", "游ゴシック体","Yu Gothic",YuGothic,HiraKakuProN-W6,HiraKakuPro-W6,'ヒラギノ角ゴ ProN W6','ヒラギノ角ゴ Pro W6','メイリオ',Meiryo,'ＭＳ ゴシック',Arial,HelveticaNeue,Helvetica,'Lucida Grande',sans-serif;
  font-weight: bold;
  color: rgb(25,25,25);
  line-height: 1.4em;
  background: url("../img/pattern_line_red_50.png") repeat 0 0;
  background-size: 15px 15px;
}
main .inner.col2 dl dt.indent-text-ja { text-indent:-0.5em; }
main .inner.col2 dl dd {
  margin: 0 0 26px 0;
  padding: 0;
  font-size: 17px;
  font-family: "Roboto", "游ゴシック体","Yu Gothic",YuGothic,HiraKakuProN-W6,HiraKakuPro-W6,'ヒラギノ角ゴ ProN W6','ヒラギノ角ゴ Pro W6','メイリオ',Meiryo,'ＭＳ ゴシック',Arial,HelveticaNeue,Helvetica,'Lucida Grande',sans-serif;
  font-weight: bold;
  color: rgb(25,25,25);
  line-height: 1.5em;
}

/** responsible breakpoint **/
@media (min-width: 641px) and (max-width: 959px) {
  main h1 span { width: 100%; }
}

/** responsible breakpoint **/
@media (max-width: 640px) {
  main h1 {
    margin:0 0 24px 0;
    height: 32px;
    line-height: 32px;
  }
  main h1 span {
    height: 32px;
    width: 100%;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 32px;
  }
  main h1.sp-s span {
    font-size: 18px;
  }
  main .inner.col1 {
    margin-bottom: 40px;
    padding: 0;
    width: auto;
  }

  .about-logo {
    margin-top: 40px;
    width: 91%;
  }

  #comments {
    margin: 0 0 30px 0;
    padding: 0;
    height: auto;
  }
  #comments .anno { margin: 0; }

  main .inner.col1 h2 {
    margin: 30px auto !important;
    width: 320px !important;
    height: 56px;
    background-image: url("../img/about_head01_sp.png");
    background-size: 320px 137px;
  }
  main .inner.col1 p {
    padding: 0 14px;
    font-size: 15px !important;
    line-height: 1.6em !important;
  }
  main .inner.col1 p.next {
    font-size: 18px;
  }
  main .inner.col1 p.continue {
    font-size: 19px;
  }

  main .inner.col2 {
    padding: 0 14px;
    width: auto;
    background: none;
  }
  main .inner.col2 dl {
    width: 100%;
  }
  main .inner.col2 dl.left-column {
    margin-right: 0;
  }

  main .inner.col2 dl dt {
    font-size: 13px;
  }
  main .inner.col2 dl dd {
    margin: 0 0 15px 0;
    font-size: 15px;
  }


}