@charset "UTF-8";
/*-----------------------------------
    ブレイクポイント
-----------------------------------*/
/*-----------------------------------
    カラー
-----------------------------------*/
/*$point_color: #f8ff31;
$attention_color: #d80000;
$sum_color: #f29c9f;*/
/*-----------------------------------
    フォント
-----------------------------------*/
.inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  /*padding: 0 10px;*/ }
  @media only screen and (max-width: 599px) {
    .inner {
      width: auto;
      max-width: none; } }

.block {
  overflow: hidden; }

.spOnly {
  display: none; }
  @media only screen and (max-width: 599px) {
    .spOnly {
      display: block; } }

@media only screen and (max-width: 599px) {
  .spNone {
    display: none; } }

@media only screen and (max-width: 959px) {
  .pcOnly {
    display: none; } }

@media only screen and (min-width: 960px) {
  .pcNone {
    display: none; } }

br .spOnly {
  display: none; }
  @media only screen and (max-width: 599px) {
    br .spOnly {
      display: inline-block; } }

@media only screen and (max-width: 599px) {
  br .spNone {
    display: none; } }

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-style: normal; }

body {
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #000;
  -webkit-text-size-adjust: 100%;
  position: relative; }

/* IE10 */
@media all and (-ms-high-contrast: none) {
  body {
    font-family: "Roboto Slab","YuMincho","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ","ＭＳ Ｐゴシック","MS PGothic",sans-serif; } }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: underline;
  color: #000; }
  a:hover {
    text-decoration: none; }

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

:placeholder-shown {
  color: #ccc; }

/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
  color: #ccc; }

/* Firefox 18- */
:-moz-placeholder {
  color: #ccc;
  opacity: 1; }

/* Firefox 19+ */
::-moz-placeholder {
  color: #ccc;
  opacity: 1; }

/* IE 10+ */
:-ms-input-placeholder {
  color: #ccc; }

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/* For modern browsers */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table; }

.clearfix:after {
  clear: both; }

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
  zoom: 1; }

img {
  border: 0;
  outline: 0;
  max-width: 100%;
  height: auto;
  vertical-align: top; }

#main {
  width: 900px;
  background: #fff;
  margin: 20px auto; }
  @media only screen and (max-width: 599px) {
    #main {
      width: auto;
      margin: 10px; } }
  #main h1 {
    display: block;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    height: 4em;
    line-height: 4em;
    background: #01a9b4;
    color: #fff; }
    @media only screen and (max-width: 599px) {
      #main h1 {
        font-size: 18px; } }
  #main h2 {
    color: #086972;
    font-size: 24px;
    font-weight: bold;
    margin: 40px 0 0 0; }
    @media only screen and (max-width: 599px) {
      #main h2 {
        font-size: 18px;
        margin: 25px 0 0 0;
        line-height: 1.5em; } }
  #main h3 {
    color: #086972;
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 20px 0; }
    @media only screen and (max-width: 599px) {
      #main h3 {
        font-size: 18px;
        line-height: 1.5em;
        margin: 0 0 10px; } }
  #main p {
    font-size: 16px;
    line-height: 1.7em; }
    @media only screen and (max-width: 599px) {
      #main p {
        font-size: 14px;
        line-height: 1.5em; } }
  #main .list_test-wrap {
    border: 10px solid #cee1e3;
    padding: 15px 20px;
    list-style: none;
    /* デフォルトのアイコンを消す */
    margin: 0;
    /* デフォルト指定上書き */
    counter-reset: li_count;
    /* カウンタをセット */ }
    @media only screen and (max-width: 599px) {
      #main .list_test-wrap {
        border: 5px solid #cee1e3;
        padding: 10px; } }
    #main .list_test-wrap li {
      margin-bottom: 5px;
      /* 要素と要素の間指定 */
      font-size: 22px;
      /* 文字サイズ指定 */
      font-weight: bold; }
      @media only screen and (max-width: 599px) {
        #main .list_test-wrap li {
          font-size: 14px; } }
      #main .list_test-wrap li:last-child {
        margin-bottom: 0; }
      #main .list_test-wrap li:before {
        counter-increment: li_count;
        /* カウンタの値を計算していく */
        content: "point" counter(li_count) ".";
        /* 数字出力 */
        color: #87dfd6;
        /* 文字色指定 */
        margin-right: 5px;
        /* 余白指定 */ }
  #main a.btn {
    display: block;
    text-decoration: none;
    font-weight: bold;
    font-size: 22px;
    background: #01a9b4;
    color: #fff;
    border-bottom: 5px solid #008e97;
    width: 80%;
    height: 3em;
    line-height: 2.8em;
    margin: 30px auto;
    text-align: center; }
    @media only screen and (max-width: 599px) {
      #main a.btn {
        font-size: 18px; } }
    #main a.btn:hover {
      border-top: 3px solid #fff;
      border-bottom: 0;
      background: #fbfd8a;
      color: #008e97; }
  #main .info {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #000;
    text-align: center;
    font-size: 12px;
    line-height: 1.6em; }