@charset "UTF-8";
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.clearfix {
  display: inline-table;
  min-height: 1%;
  overflow: hidden; }

html > body .clearfix {
  display: block\9; }

* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }

a {
  color: red;
  text-decoration: none; }

a:active, a:hover {
  outline: 0;
  color: red;
  opacity: 0.7;
  text-decoration: underline; }

img {
  vertical-align: middle;
  max-width: 100%;
  height: auto; }

@-webkit-viewport {
  width: device-width; }
@-moz-viewport {
  width: device-width; }
@-ms-viewport {
  width: device-width; }
@-o-viewport {
  width: device-width; }
@viewport {
  width: device-width; }
html {
  font-size: 62.5%;
  line-height: 2;
  letter-spacing: 0.15em; }

body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 500;
  text-align: center;
  color: #666;
  background-color: #333; }

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

strong {
  font-weight: bold;
  color: #CC0000;
  font-size: 1.1em;
  margin: 0 0.25em; }

.underline {
  border-bottom: 1px solid #CC0000;
  color: #CC0000;
  font-size: 1.1em;
  padding: 0 0 0.3em;
  margin: 0 0.25em; }

.underline strong {
  background: #CC0000;
  color: #FFF700;
  padding: 0.2em;
  border: none; }

ol, ul, li {
  list-style: none;
  padding: 0;
  margin: 0; }

figure {
  padding: 0;
  margin: 0; }

#wrapper {
  max-width: 980px;
  margin: auto;
  text-align: left;
  font-size: 1.6rem; }
  #wrapper #container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 2% 5%;
    background-color: #FFF;
    box-sizing: border-box;
    overflow: hidden; }
    #wrapper #container #head {
      text-align: center;
      margin-bottom: 8%; }
      #wrapper #container #head h1 {
        font-size: 3.2rem;
        line-height: 1.5;
        color: #369;
        margin-bottom: 4%;
        border: 1px solid #369;
        padding: 2%;
        background: #CCDDEE; }
      #wrapper #container #head p {
        margin-bottom: 4%; }
    #wrapper #container #lead {
      margin-bottom: 10%; }
      #wrapper #container #lead figure {
        text-align: center; }
      #wrapper #container #lead ul {
        padding: 3% 5%; }
        #wrapper #container #lead ul li {
          font-size: 1.6rem;
          margin-bottom: 0.5em; }
          #wrapper #container #lead ul li:before {
            content: "\f14a";
            font-family: FontAwesome;
            padding-right: 0.2em;
            color: #CC0000; }
          #wrapper #container #lead ul li:last-child {
            margin: 0; }
    #wrapper #container #mainmenu {
      margin-bottom: 10%; }
      #wrapper #container #mainmenu h2 {
        margin: 0 auto 2%;
        padding: 0;
        line-height: 1.5;
        font-size: 2rem; }
      #wrapper #container #mainmenu ul {
        padding: 4%;
        background: #EEEEEE;
        border: 1px solid #CCCCCC; }
        #wrapper #container #mainmenu ul li {
          line-height: 1.5;
          margin: 0 0 1%;
          font-size: 1.4rem; }
          #wrapper #container #mainmenu ul li:last-child {
            margin: 0; }
    #wrapper #container section h1 {
      position: relative;
      margin: 0 -1px 5%;
      padding: 0.5em;
      font: bold 2.4rem/1.6 Arial, Helvetica, sans-serif;
      text-align: center;
      color: #333;
      background: #f0e800;
      -webkit-transform: rotate(-3deg) skew(-3deg);
      -moz-transform: rotate(-3deg) skew(-3deg);
      -o-transform: rotate(-3deg) skew(-3deg);
      -ms-transform: rotate(-3deg) skew(-3deg);
      transform: rotate(-3deg) skew(-3deg);
      text-shadow: 1px 1px 0 white;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 30px 0 0 0 #f0e800, -30px 0 0 0 #f0e800; }
    #wrapper #container section figure {
      text-align: center;
      margin-bottom: 5%; }
    #wrapper #container section p {
      margin-bottom: 5%; }
      #wrapper #container section p .note {
        font-size: 1.4rem; }
    #wrapper #container section ul {
      padding: 3% 5%;
      margin-bottom: 5%; }
      #wrapper #container section ul li {
        font-size: 1.6rem;
        line-height: 1.35;
        margin-bottom: 0.8em;
        position: relative;
        padding-left: 1.2em; }
        #wrapper #container section ul li:before {
          content: "\f14a";
          font-family: FontAwesome;
          color: #CC0000;
          position: absolute;
          left: 0; }
        #wrapper #container section ul li:last-child {
          margin: 0; }
        #wrapper #container section ul li span {
          font-size: 1.3rem;
          padding-left: 1.6rem; }
    #wrapper #container section ol {
      padding: 3% 5%;
      margin-bottom: 5%; }
      #wrapper #container section ol li {
        font-size: 1.6rem;
        line-height: 1.35;
        margin-bottom: 0.8em;
        position: relative;
        padding-left: 1.2em; }
        #wrapper #container section ol li:before {
          content: "\f1e2";
          font-family: FontAwesome;
          color: #CC0000;
          position: absolute;
          left: 0; }
        #wrapper #container section ol li:last-child {
          margin: 0; }
        #wrapper #container section ol li span {
          font-size: 1.3rem;
          padding-left: 1.6rem; }
    #wrapper #container section blockquote {
      padding: 5%;
      margin: 0 5% 5%;
      background: #EEEEEE;
      border: 1px solid #CCCCCC;
      position: relative; }
      #wrapper #container section blockquote:before {
        content: "”";
        display: block;
        position: absolute;
        font-size: 6rem;
        color: #CCCCCC;
        padding: 0;
        top: -1%; }
      #wrapper #container section blockquote h3 {
        font-size: 1.8rem;
        line-height: 1.5; }
      #wrapper #container section blockquote p:last-child {
        margin: 0; }
    #wrapper #container section p.back a:before {
      content: "\f0aa";
      font-family: FontAwesome;
      padding-right: 0.1em;
      color: #CC0000; }
    #wrapper #container section div.linkBox {
      text-align: center; }
      #wrapper #container section div.linkBox figure {
        margin: auto; }
    #wrapper #container section section.innerBox {
      border: 1px solid #CCCCCC;
      padding: 3% 5%;
      margin: 0 10% 5%; }
      #wrapper #container section section.innerBox h1 {
        background: none;
        box-shadow: none;
        transform: none;
        font-size: 1.8rem;
        margin: 0 auto 2%;
        color: #666666; }
    #wrapper #container section section.contentBox {
      margin: 0 auto 8%; }
      #wrapper #container section section.contentBox h1 {
        text-align: left;
        color: #666666;
        background: none;
        box-shadow: none;
        transform: none;
        position: relative;
        padding: 5px 20px;
        font: bold 2rem/1.6 Arial, Helvetica, sans-serif;
        background: #fff;
        text-shadow: 1px 1px 0 #fff, 2px 2px 0 #999;
        border-top: #666 solid 3px;
        border-bottom: #666 solid 3px;
        background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(255, 255, 255, 0)), color-stop(0.4, rgba(255, 255, 255, 0)), color-stop(0.4, rgba(0, 0, 0, 0.1)), color-stop(0.6, rgba(0, 0, 0, 0.1)), color-stop(0.6, rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0)));
        background-image: -webkit-linear-gradient(top -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60%);
        background-image: -moz-linear-gradient(top -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60%);
        background-image: -o-linear-gradient(top -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60%);
        background-image: linear-gradient(to bottom -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60%);
        background-size: 4px 4px; }
        #wrapper #container section section.contentBox h1:before {
          content: "";
          position: absolute;
          top: 100%;
          left: 24px;
          width: 0;
          height: 0;
          border-width: 12px;
          border-style: solid;
          border-color: transparent;
          border-top-color: #666; }
        #wrapper #container section section.contentBox h1:after {
          content: "";
          position: absolute;
          top: 100%;
          left: 28px;
          width: 0;
          height: 0;
          border-width: 8px;
          border-style: solid;
          border-color: transparent;
          border-top-color: #f0f0f0;
          z-index: 1; }
      #wrapper #container section section.contentBox h2 {
        font-size: 2rem;
        line-height: 1.35;
        font-weight: bold;
        padding: 1% 2%;
        background: #EEEEEE;
        border-radius: 0.2em;
        margin: 0 auto 5%; }
      #wrapper #container section section.contentBox dl dt {
        margin: 0 auto 3%;
        padding: 0;
        line-height: 1.5; }
      #wrapper #container section section.contentBox dl dd {
        margin: 0;
        padding: 0; }
        #wrapper #container section section.contentBox dl dd figure {
          text-align: left; }
    #wrapper #container section#second h1 {
      position: relative;
      margin: 0 -1px 5%;
      padding: 0.5em;
      font: bold 2.4rem/1.6 Arial, Helvetica, sans-serif;
      text-align: center;
      color: #333;
      background: #f0e800;
      -webkit-transform: rotate(-3deg) skew(-3deg);
      -moz-transform: rotate(-3deg) skew(-3deg);
      -o-transform: rotate(-3deg) skew(-3deg);
      -ms-transform: rotate(-3deg) skew(-3deg);
      transform: rotate(-3deg) skew(-3deg);
      text-shadow: 1px 1px 0 white;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 30px 0 0 0 #f0e800, -30px 0 0 0 #f0e800; }
    #wrapper #container section#second h2 {
      font-size: 1.8rem; }
    #wrapper #container section#second p {
      font-size: 1.5rem; }

footer {
  text-align: left;
  background: #666666;
  font-size: 1.4rem;
  color: #FFFFFF; }
  footer .footer_inner nav {
    text-align: center;
    background: #CCCCCC;
    padding: 2%;
    margin-bottom: 5%; }
    footer .footer_inner nav ul {
      margin: auto;
      font-size: 0; }
      footer .footer_inner nav ul li {
        font-size: 1.4rem;
        display: inline-block;
        margin: 0 1em; }
  footer .footer_inner h1 {
    font-size: 1.6rem;
    margin: 0;
    padding: 2% 5%;
    line-height: 1; }
  footer .footer_inner p {
    padding: 0 5%; }
  footer .footer_inner small {
    display: block;
    text-align: center;
    padding: 5% 0; }

@media screen and (max-width: 640px) {
  footer {
    text-align: left;
    background: #666666;
    font-size: 1.4rem;
    color: #FFFFFF; }
    footer .footer_inner nav {
      text-align: left;
      background: #CCCCCC;
      padding: 2%; }
      footer .footer_inner nav ul {
        margin: auto;
        font-size: 0;
        padding: 2% 0; }
        footer .footer_inner nav ul li {
          font-size: 1.4rem;
          display: block;
          margin: 0 1em; }
    footer .footer_inner h1 {
      font-size: 1.6rem;
      margin: 0;
      padding: 2% 5%;
      line-height: 1; }
    footer .footer_inner p {
      padding: 0 5%; }
    footer .footer_inner small {
      display: block;
      text-align: center;
      padding: 5% 0; } }