@charset "UTF-8";
/* mixin */
/** withPrefix **/
/** opacity **/
/* normalize.css v2.1.3 | MIT License | git.io/normalize */
/** HTML5 display definitions **/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

/** typography **/
abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

mark {
  background: #ff0;
  color: #000;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/** embedded content **/
svg:not(:root) {
  overflow: hidden;
}

/** figures **/
figure {
  margin: 0;
}

/** forms **/
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

/* font */
/** goma **/
@font-face {
  font-family: 'goma';
  src: url("/common/font/goma/goma.eot?v=1.0");
  src: url("/common/font/goma/goma.eot?v=1.0") format("embedded-opentype"), url("/common/font/goma/goma.woff?v=1.0") format("woff"), url("/common/font/goma/goma.ttf?v=1.0") format("truetype"), url("/common/font/goma/goma.svg?v=1.0") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* base */
/** html **/
html {
  font-family: Helvetica, "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴPro W3", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic ProN", "モリサワ 新ゴ R", "Droid Sans", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, sans-serif;
  overflow-y: scroll;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: #333333;
  background: #eceded;
  font-size: 87.5%;
  line-height: 1.3;
}

/** links **/
/*** a ***/
a {
  text-decoration: none;
  background: transparent;
  word-break: break-all;
  word-wrap: break-word;
}
a:focus {
  outline: thin dotted;
}
a:link, a:visited {
  color: #3390ff;
}
a:hover, a:active {
  color: #5abdff;
  outline: 0;
}
a::before, a::after {
  font-family: 'goma';
}

.blank::after {
  content: '\f08e';
  padding-left: 0.3em;
}

.blank.noIcon::after,
figure .blank::after {
  content: '';
  padding: 0;
}

/** embedded content **/
img {
  border: 0;
  vertical-align: bottom;
}

pre {
  border-left: 3px solid #6ce26c !important;
  padding: 10px 15px;
}
pre .xhtml {
  border-left: 3px solid #0072ff !important;
}
pre .css {
  border-left: 3px solid #ef857d !important;
}
pre .js {
  border-left: 3px solid #f6ac19 !important;
}

.previewArea {
  margin-bottom: 15px;
}
.previewArea .previewAreaIn {
  border: 3px solid #ccc;
  padding: 10px;
}
.previewArea .previewAreaIn p:last-child {
  margin-bottom: 0;
}

/** list **/
/*** ul ***/
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul li {
  line-height: 1.5;
}
ul li ul {
  margin: 0 0 0 15px;
}
ul.normal {
  list-style-type: disc;
  padding-left: 1em;
}
ul.mark li {
  text-indent: -1.3em;
  margin-left: 1.3em;
}
ul.mark li::before {
  content: '※';
  margin-right: .2em;
}

/*** ol ***/
ol {
  list-style: none;
  padding: 0;
  margin: 0 0.6em 0.6em;
}
ol.normal {
  list-style-type: decimal;
  padding-left: 1.5em;
}
ol.uprAlpha {
  list-style-type: upper-alpha;
  padding-left: 1.5em;
}
ol.lowAlpha {
  list-style-type: lower-alpha;
  padding-left: 1.5em;
}
ol.uprRoman {
  list-style-type: upper-roman;
  padding-left: 1.5em;
}
ol.lowRoman {
  list-style-type: lower-roman;
  padding-left: 1.5em;
}

/*** dl ***/
dl {
  margin: 0;
}
dl dd {
  margin: 0;
}
dl.head1 dt {
  margin: 0 0 10px;
  font-size: 112.5%;
  background: #fff;
  padding-left: 0.5em;
  border-left: 6px solid #3694cc;
  border-bottom: 1px solid #3694cc;
  font-weight: bold;
}
dl.head1 dd {
  margin: 0.5em 1em 1em 1.5em;
}
dl.head2 dt {
  font-size: 112.5%;
  font-weight: bold;
  border-bottom: solid 1px #ccc;
  padding-left: 0.5em;
}
dl.head2 dd {
  margin: 0.5em 1em;
}
dl.row {
  margin: 20px auto;
  border-bottom: 1px solid #999;
  letter-spacing: -0.31em;
  *letter-spacing: normal;
  word-spacing: -0.43em;
}
dl.row dt,
dl.row dd {
  display: inline-block;
  *display: inline;
  zoom: 1;
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  padding: 0.5em 2% 0.5em;
  margin: 0;
  border-top: 1px solid #999;
}
dl.row dt {
  font-weight: bold;
  margin-right: -1px;
  width: 36%;
}
dl.row dd {
  width: 56%;
}

/* typography */
/** heading **/
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
}

/** font/text **/
/*** color ***/
.fcRed {
  color: #ca2420 !important;
}

/*** font-weight ***/
.fwN {
  font-weight: normal !important;
}

.fwB {
  font-weight: bold !important;
}

/*** textl-align ***/
.txtAL {
  text-align: left !important;
}

.txtAC {
  text-align: center !important;
}

.txtAR {
  text-align: right !important;
}

/*** font-size ***/
.fontSS {
  font-size: 71.42% !important;
}

.fontS {
  font-size: 85.71% !important;
}

.fontL {
  font-size: 142.85% !important;
}

.fontLL {
  font-size: 157.14% !important;
}

.fontXL {
  font-size: 200% !important;
}

/*** vertical-align ***/
.vat {
  vertical-align: top !important;
}

.vam {
  vertical-align: middle !important;
}

.vab {
  vertical-align: bottom !important;
}

/* clearFix */
.clearFix::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

/* header */
#header {
  width: 100%;
  background: #191919;
}
#header header {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 27px 0;
}
#header header::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
#header header .logo {
  float: left;
  margin: 0;
}
#header header .logo img {
  width: 152px;
  height: 70px;
}
#header header nav {
  float: right;
}
#header header nav ul {
  padding-top: 27px;
}
#header header nav ul::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
#header header nav ul li {
  float: left;
  margin-left: 10px;
}
#header header nav ul li:first-child {
  margin-left: 0;
}
#header header nav ul li a.button {
  width: 140px;
  font-size: 128.57%;
  padding: 0;
  -webkit-transform: translate3d(3px, -3px, 0);
  transform: translate3d(3px, -3px, 0);
}
#header header nav ul li a.button:active {
  transition: .1s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#header header nav ul li.menu01 a.button {
  background: #f0efe7;
  color: #191919 !important;
  box-shadow: 0 0 0 #c6c4ba, -1px 1px 0 #c6c4ba, -2px 2px 0 #c6c4ba, -3px 3px 0 #c6c4ba;
}
#header header nav ul li.menu01 a.button:hover {
  background: #fbfaf2;
  box-shadow: 0 0 0 #d9d7cc, -1px 1px 0 #d9d7cc, -2px 2px 0 #d9d7cc, -3px 3px 0 #d9d7cc;
}
#header header nav ul li.menu01 a.button:active {
  box-shadow: 0 0 0 #d9d7cc;
}
#header header nav ul li.menu02 a.button {
  background: #e5e3d9;
  color: #191919 !important;
  box-shadow: 0 0 0 #b8b6af, -1px 1px 0 #b8b6af, -2px 2px 0 #b8b6af, -3px 3px 0 #b8b6af;
}
#header header nav ul li.menu02 a.button:hover {
  background: #f6f4ea;
  box-shadow: 0 0 0 #c9c7bf, -1px 1px 0 #c9c7bf, -2px 2px 0 #c9c7bf, -3px 3px 0 #c9c7bf;
}
#header header nav ul li.menu02 a.button:active {
  box-shadow: 0 0 0 #c9c7bf;
}
#header header nav ul li.menu03 a.button {
  background: #d7d4c4;
  color: #191919 !important;
  box-shadow: 0 0 0 #a3a29f, -1px 1px 0 #a3a29f, -2px 2px 0 #a3a29f, -3px 3px 0 #a3a29f;
}
#header header nav ul li.menu03 a.button:hover {
  background: #e5e3d9;
  box-shadow: 0 0 0 #a3a29f, -1px 1px 0 #a3a29f, -2px 2px 0 #a3a29f, -3px 3px 0 #a3a29f;
}
#header header nav ul li.menu03 a.button:active {
  box-shadow: 0 0 0 #a3a29f;
}
#header header nav ul li.menu04 a.button {
  background: #5e6162;
  color: #fff !important;
  box-shadow: 0 0 0 #4b4b4b, -1px 1px 0 #4b4b4b, -2px 2px 0 #4b4b4b, -3px 3px 0 #4b4b4b;
}
#header header nav ul li.menu04 a.button:hover {
  background: #717475;
  box-shadow: 0 0 0 #4b4b4b, -1px 1px 0 #4b4b4b, -2px 2px 0 #4b4b4b, -3px 3px 0 #4b4b4b;
}
#header header nav ul li.menu04 a.button:active {
  box-shadow: 0 0 0 #4b4b4b;
}

/* footer */
#footer {
  width: 100%;
  color: #fff;
  background: #191919;
}
#footer footer {
  width: 100%;
  max-width: 1024px;
  padding: 20px 0 0;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}
#footer footer .logo {
  margin-bottom: 1.5em;
}
#footer footer .logo img {
  width: 129px;
  height: 60px;
}
#footer footer nav ul {
  display: inline-block;
}
#footer footer nav ul::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
#footer footer nav ul li {
  float: left;
  margin-right: 20px;
}
#footer footer nav ul li:last-child {
  margin-right: 0;
}
#footer footer nav ul li a {
  width: 7.5em;
  font-size: 142.85%;
  display: inline-block;
  color: #fff;
}
#footer footer nav ul li a:hover {
  color: #8ea1a5;
}
#footer footer nav ul.sub li a {
  font-size: 114.28%;
}
#footer footer .socialArea {
  font-size: 142.85%;
}
#footer footer .socialArea dl {
  margin-top: .6em;
  display: inline-block;
}
#footer footer .socialArea dl::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
#footer footer .socialArea dl dt {
  float: left;
}
#footer footer .socialArea dl dd {
  float: left;
  margin-left: 10px;
}
#footer footer .socialArea dl dd img {
  width: 28px;
  height: 28px;
}
#footer footer .socialArea a::after {
  content: '';
  padding-left: 0;
}

/* form element */
input[type="text"] {
  border: 1px solid #cccccc;
  padding: 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  box-sizing: border-box;
}

label + input[type="text"] {
  margin-top: 10px;
}

.content .formArea .errTxt {
  margin: 1em 0;
  text-align: center;
}

.content .formArea input[type="text"] {
  width: 100%;
}

/* txtLink */
.txtLink a {
  display: inline-block;
  padding-left: 0.3em;
}

.txtLink a::before {
  content: '\f0da';
  padding-right: 0.3em;
}

.txtLink.active a,
.txtLink .active a {
  background: #ebf4ff;
}

.txtLink a[href^='#']::before {
  content: '\f01a';
}

/* content */
.content {
  margin: 15px 0 50px;
}

/* code */
.mainContent span.code {
  background: #f8f8f8;
  border: 1px solid #eceded;
  color: #003d5c;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-family: 'Consolas','Bitstream Vera Sans Mono','Courier New',Courier,monospace !important;
  margin: 0 2px;
  padding: 0 5px;
}

.mainContent span.title {
  background: #fff8e7;
  border: 1px solid #ffedc2;
  color: #886000;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-family: 'Consolas','Bitstream Vera Sans Mono','Courier New',Courier,monospace !important;
  margin: 0 2px;
  padding: 0 5px;
}

.mainContent a span.title::before {
  font-family: 'goma';
  content: '\f0f6';
  margin-right: 0.2em;
}

/* blockquote */
blockquote {
  position: relative;
  margin-right: 0;
  margin-left: 0;
  padding: 1em 2.5em;
  text-align: left;
  background: #eaf3fd;
  line-height: 1.7;
  -webkit-box-shadow: 0px 3px 3px -2px rgba(50, 50, 50, 0.5);
  -moz-box-shadow: 0px 3px 3px -2px rgba(50, 50, 50, 0.5);
  box-shadow: 0px 3px 3px -2px rgba(50, 50, 50, 0.5);
  -webkit-border-radius: 8px 8px 8px 8px;
  -moz-border-radius: 8px 8px 8px 8px;
  border-radius: 8px 8px 8px 8px;
}

blockquote::before,
blockquote::after {
  position: absolute;
  font-family: 'goma';
  color: #999;
  line-height: 1em;
}

blockquote::before {
  top: 0.5em;
  left: 10px;
  content: '\f10d';
}

blockquote::after {
  bottom: 0.5em;
  right: 10px;
  content: '\f10e';
}

/* keyvisual */
.keyvisual {
  max-width: 100%;
  margin: 25px 0;
}

.keyvisual .keyvisualIn {
  position: relative;
  height: auto !important;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  overflow: hidden;
}

.keyvisual.notready .keyvisualIn ul {
  position: relative;
}

.keyvisual .keyvisualIn ul::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.keyvisual.notready .keyvisualIn ul li {
  position: absolute;
}

.keyvisual.notready .keyvisualIn ul li:first-child {
  position: static;
}

.keyvisual .keyvisualIn ul li img {
  max-width: 100%;
  height: auto !important;
}

/* breadcrumb */
.breadcrumb {
  width: 100%;
  margin-bottom: 15px;
}

.breadcrumb ol {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}

.breadcrumb ol::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.breadcrumb ol li {
  float: left;
  margin-right: .5em;
}

.breadcrumb ol li::after {
  content: '>';
  margin-left: .5em;
}

.breadcrumb ol li:last-child {
  margin-right: 0;
}

.breadcrumb ol li:last-child::after {
  content: '';
  margin-left: 0;
}

/* anchorlinks */
.inner .mainContent section article .anchorlinks.close::after {
  display: block;
  content: ' ';
  width: auto;
  margin: 0 15px;
  height: 20px;
  background: #2e2e2e;
}

.inner .mainContent section article .anchorlinks .head {
  position: relative;
  margin: 0 !important;
  padding: 5px 10px;
  font-size: 128.57%;
  font-weight: bold;
  background: #3e3e3e;
  color: #fff;
}

.inner .mainContent section article .anchorlinks .head::before {
  content: ' ';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-width: 0 16px 20px 0;
  border-style: solid;
  border-color: transparent;
  border-right-color: #2e2e2e;
}

.inner .mainContent section article .anchorlinks .head::after {
  content: ' ';
  position: absolute;
  top: 100%;
  right: 0;
  width: 0;
  height: 0;
  border-width: 20px 16px 0 0;
  border-style: solid;
  border-color: transparent;
  border-top-color: #2e2e2e;
}

.inner .mainContent section article .anchorlinks .head span::after {
  position: absolute;
  top: 4px;
  right: 10px;
  font-family: 'goma';
  content: '\f147';
  cursor: pointer;
  font-size: 111%;
}

.inner .mainContent section article .anchorlinks.close .head span::after {
  content: '\f196';
}

.inner .mainContent section article .anchorlinks ul {
  border: 1px solid #ccc;
  border-top: none;
  overflow: hidden;
  margin: 0 15px;
}

.inner .mainContent section article .anchorlinks ul ul {
  margin: 0;
  font-size: 93.75% !important;
  border: none;
}

.inner .mainContent section article .anchorlinks ul li a {
  display: block;
  padding: 0.3em 2em 0.3em 2.5em;
  text-indent: -1.5em;
}

.inner .mainContent section article .anchorlinks ul ul li a {
  padding: 0.3em 2em 0.3em 4em;
}

.inner .mainContent section article .anchorlinks ul ul ul li a {
  padding: 0.3em 2em 0.3em 6em;
}

.inner .mainContent section article .anchorlinks ul ul ul ul li a {
  padding: 0.3em 2em 0.3em 8em;
}

.inner .mainContent section article .anchorlinks ul li a:hover {
  color: #fff;
  background: #3390ff;
}

.inner .mainContent section article .anchorlinks ul li a::before {
  content: '\f01a';
  margin-right: 5px;
}

/* tagClouds */
.indexPage .tagClouds {
  padding: 15px;
  margin-bottom: 25px;
  background: #fff;
  box-shadow: 0 2px 3px -2px rgba(50, 50, 50, 0.5);
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
}

.tagClouds ul {
  clear: both;
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: -10px;
}

.sideContent .tagClouds ul,
.staticSideContent .tagClouds ul {
  margin-bottom: -6px;
}

.col .tagClouds ul {
  margin-top: 0;
}

.tagClouds ul li {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

.sideContent .tagClouds ul li,
.staticSideContent .tagClouds ul li {
  margin-right: 8px;
}

.tagClouds ul li:last-child {
  margin-right: 0;
}

.tagClouds ul li a .tagColor {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
  font-weight: bold;
}

.tagClouds ul li a .num {
  display: none;
}

.indexPage .tagClouds ul li a .tagColor {
  font-size: 114.28%;
}

aside .tagClouds ul li a .tagColor {
  font-size: 85.71%;
}

.indexPage .tagClouds ul li a .num {
  display: inline;
}

/* reciprocalLink */
.reciprocalLink ul {
  margin-top: 10px;
  margin-bottom: -10px;
}

.reciprocalLink ul li {
  margin-bottom: 10px;
}

/* paging */
.paging {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 25px 0;
}

.paging ul {
  padding: 0;
  position: relative;
  left: 50%;
  float: left;
}

.paging ul li {
  position: relative;
  left: -50%;
  float: left;
  margin-left: 2px;
  font-weight: bold;
}

.paging ul li a,
.paging ul li span {
  display: block;
  padding: 8px 12px;
  color: #fff;
}

.paging ul li a {
  background: #9fa0a2;
}

.paging ul li a:hover {
  background: #c0c1c4;
}

.paging ul li span {
  background: #c1c2c4;
}

/* pageTop */
.pageTop {
  position: fixed;
  right: 40px;
  bottom: 40px;
  display: inline;
  margin: 0;
  z-index: 1;
}

.pageTop li {
  font-size: 571.42%;
  line-height: 1;
}

.pageTop li a {
  display: block;
  font-family: 'goma';
  color: #333;
  opacity: .5;
}

.pageTop a:hover {
  opacity: 1;
}

/* inner */
.inner {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}

.inner::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

/* page setting */
/** indexPage **/
.indexPage .inner section {
  margin-bottom: 25px;
}

.indexPage .inner section:last-child {
  margin-bottom: 0;
}

/*** heading ***/
.indexPage h1,
.indexPage h2 {
  position: relative;
  margin-bottom: 17px;
  padding: 0 12px 0 1.3em;
  font-size: 257.14%;
  background: #191919;
  font-weight: normal;
  line-height: 1.66;
  color: #fff;
}

.indexPage h1::before,
.indexPage h1::after,
.indexPage h2::before,
.indexPage h2::after {
  position: absolute;
  left: -.1em;
  top: -.1em;
  font-family: 'goma';
  font-size: 120%;
}

.indexPage .tit_01::before {
  color: #fdce21;
  content: '\eaa01';
}

.indexPage .tit_01::after {
  color: #3491d0;
  content: '\eaa02';
}

.indexPage .tit_02::before {
  color: #de5549;
  content: '\eaa01';
}

.indexPage .tit_02::after {
  color: #8ea1a5;
  content: '\eaa02';
}

.indexPage .tit_03::before {
  color: #ff541c;
  content: '\eaa01';
}

.indexPage .tit_03::after {
  color: #ffbb00;
  content: '\eaa02';
}

.indexPage .tit_04::before {
  color: #486d3d;
  content: '\eaa01';
}

.indexPage .tit_04::after {
  color: #ed9025;
  content: '\eaa02';
}

.indexPage header h3 {
  position: relative;
  margin: 0 -16px;
  color: #fff;
  font-size: 142.85%;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.3);
}

.indexPage header h3::before {
  content: ' ';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-width: 0 16px 20px 0;
  border-style: solid;
  border-color: transparent;
  border-right-color: #2e2e2e;
}

.indexPage header h3::after {
  content: ' ';
  position: absolute;
  top: 100%;
  right: 0;
  width: 0;
  height: 0;
  border-width: 20px 16px 0 0;
  border-style: solid;
  border-color: transparent;
  border-top-color: #2e2e2e;
}

.indexPage header h3 a {
  display: block;
  padding: 10px 16px;
  background: #3e3e3e;
  color: #fff;
}

.indexPage article {
  position: relative;
  overflow: hidden;
  margin-bottom: 25px;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 3px -2px rgba(50, 50, 50, 0.5);
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
}

.indexPage article .articleIn {
  padding: 0 16px 2em;
}

.indexPage article footer {
  position: absolute;
  left: 16px;
  bottom: 12px;
}

.indexPage .readMore {
  text-align: right;
  margin: 0 0 15px;
}

.indexPage .col .readMore {
  position: absolute;
  right: 16px;
  bottom: 32px;
  margin: 0;
}

.indexPage .readMore a {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
}

.indexPage footer p {
  margin-bottom: 0;
}

.indexPage .col .colIn {
  width: 32.1429%;
  margin-right: 1.78%;
}

.indexPage article figure {
  text-align: center;
  margin-bottom: 1em;
  overflow: hidden;
}

.indexPage article figure img {
  max-width: 100%;
  height: auto !important;
}

/** subPage **/
.subPage .inner .mainContent {
  width: auto;
  padding-right: 334px;
}

.subPage .inner .mainContent .step {
  margin-bottom: 20px;
}

.subPage .inner .mainContent .step::after {
  display: block;
  font-family: 'goma';
  content: '\f063';
  margin-top: 20px;
  text-align: center;
  font-size: 300%;
  color: #999;
}

.subPage .inner .mainContent .step:last-child {
  margin-bottom: 0;
}

.subPage .inner .mainContent .step:last-of-type::after {
  content: '';
  margin-top: 0;
}

.subPage .inner .staticSideContent {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
}

.subPage .inner .staticSideContent + .sideContent {
  position: absolute;
  top: 590px;
  right: 0;
  width: 320px;
}

.subPage .inner .sideContent {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
}

.subPage .inner .sideContent .fb-like-box {
  width: 300px;
  height: 300px;
  background: #fff;
}

.subPage .inner aside {
  overflow: hidden;
  margin-bottom: 25px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 2px 3px -2px rgba(50, 50, 50, 0.5);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.subPage .inner .mainContent section aside {
  overflow: hidden;
  padding: 0;
  background: transparent;
  box-shadow: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.subPage .inner .sideContent aside:last-child {
  margin-bottom: 0;
}

.subPage .inner aside .asideTitle {
  margin: 0 -10px;
  padding: 0 10px 6px;
  border-bottom: 1px dotted #000;
}

.subPage .inner section aside .asideTitle {
  border-bottom: none;
}

.subPage .inner aside .adArea ul::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.subPage .inner section aside .adArea ul li {
  float: none;
}

.subPage .inner aside .adArea ul li {
  float: left;
  margin: 10px 10px 0 0;
}

.subPage .inner aside .adArea ul li:last-of-type {
  margin-right: 0;
}

.subPage .inner aside h2 {
  font-size: 100%;
  font-weight: normal;
  margin: 0 -10px;
  padding: 0 10px 6px;
  border-bottom: 1px dotted #000;
}

.subPage .inner aside ul.relatedArticles li {
  padding: 16px 0;
  border-bottom: 1px dotted #333;
  text-align: left;
}

.subPage .inner aside ul.relatedArticles li:last-child {
  padding-bottom: 8px;
  border-bottom: none;
}

.subPage .inner aside ul.relatedArticles li a {
  color: #333;
}

.subPage .inner aside ul.relatedArticles li a:hover,
.subPage .inner aside ul.relatedArticles li a:active {
  color: #777;
}

.relatedArticles .withImgCol .imgL img,
.relatedArticles .withImgCol .imgR img {
  width: 80px;
  height: auto;
}

/** singlePage **/
.singlePage {
  margin-bottom: -25px;
}

.singlePage .inner aside {
  overflow: hidden;
  margin-bottom: 25px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 2px 3px -2px rgba(50, 50, 50, 0.5);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.singlePage .inner aside .asideTitle {
  margin: 0 -10px;
  padding: 0 10px 6px;
  border-bottom: 1px dotted #000;
}

.singlePage .inner section aside .asideTitle {
  border-bottom: none;
}

.singlePage .inner aside .adArea ul::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.singlePage .inner aside .adArea ul li {
  float: left;
  margin: 10px 10px 0 0;
}

.singlePage .inner aside .adArea ul li:last-of-type {
  margin-right: 0;
}

/** common **/
.inner .mainContent section {
  overflow: hidden;
  margin-bottom: 25px;
  padding: 15px 25px 20px;
  background: #fff;
  box-shadow: 0 2px 3px -2px rgba(50, 50, 50, 0.5);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.inner .mainContent section header {
  margin-bottom: 25px;
}

.inner .mainContent section article {
  margin-bottom: 20px;
}

.inner .mainContent section article .block {
  margin-top: 3em;
}

.inner .mainContent section figure {
  text-align: center;
}

.inner .mainContent section figure img {
  max-width: 100%;
  height: auto !important;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
}

.inner .mainContent section article figure {
  margin: 20px 0 25px;
}

.inner .mainContent section article figure img {
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
}

/** socialBtn **/
.socialBtn ul {
  margin-top: 10px;
  margin-bottom: -10px;
  overflow: hidden;
}

.socialBtn ul::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.socialBtn ul li {
  float: left;
  margin-right: 10px;
  margin-bottom: 15px;
  font-size: 85.71%;
}

.socialBtn ul li:last-child {
  margin-right: 0;
}

.socialBtn ul li span.icon {
  padding: 6px 5px 4px;
  min-width: 50px;
  display: block;
  line-height: 1;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  text-align: center;
}

.socialBtn ul li span.icon::before {
  font-family: 'goma';
  font-size: 200%;
}

.socialBtn ul li span.icon.facebook {
  background: #4561af;
  color: #fff;
}

.socialBtn ul li span.icon.facebook::before {
  content: '\ea8c';
}

.socialBtn ul li span.icon.twitter {
  background: #2eacf5;
  color: #fff;
}

.socialBtn ul li span.icon.twitter::before {
  content: '\ea91';
}

.socialBtn ul li span.icon.google {
  background: #dd4b38;
  color: #fff;
}

.socialBtn ul li span.icon.google::before {
  content: '\ea88';
}

.socialBtn ul li span.icon.hatena {
  background: #00a4de;
  color: #fff;
}

.socialBtn ul li span.icon.hatena::before {
  content: "\e600";
}

.socialBtn ul li span.icon.pocket {
  background: #ee4256;
  color: #fff;
}

.socialBtn ul li span.icon.pocket::before {
  content: '\e601';
}

.socialBtn ul li span.icon.feedly {
  background: #84c052;
  color: #fff;
}

.socialBtn ul li span.icon.feedly::before {
  content: '\e602';
}

.fi-arrow {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #ccc;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: 0;
  padding: 0;
  position: relative;
}

.fi-arrow::after,
.fi-arrow::before {
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.fi-arrow::after {
  border-color: rgba(255, 255, 255, 0);
  border-width: 4px;
}

.fi-arrow::before {
  border-color: rgba(204, 204, 204, 0);
  border-width: 5px;
}

.fi-arrow .fi-count {
  display: block;
  position: relative;
  text-align: center;
  color: #333;
}

.fi-vertical {
  margin: 0;
  padding: 0;
}

.fi-vertical .fi-arrow {
  height: 3em;
  line-height: 3em;
  margin-bottom: 0.5em;
}

.fi-vertical .fi-arrow::after,
.fi-vertical .fi-arrow::before {
  left: 50%;
  top: 100%;
}

.fi-vertical .fi-arrow::after {
  border-top-color: #fff;
  margin-left: -4px;
}

.fi-vertical .fi-arrow::before {
  border-top-color: #ccc;
  margin-left: -5px;
}

.fi-vertical .fi-arrow .fi-count {
  font-size: 1em;
  height: 3em;
  line-height: 3em;
}

.inner .mainContent section h2,
.inner .mainContent section h3,
.inner .mainContent section h4,
.inner .mainContent section h5,
.inner .mainContent section h6 {
  margin: 1em 0 .75em;
}

.inner .mainContent section h5 {
  font-size: 114.28%;
}

.inner .mainContent section h6 {
  font-size: 100%;
}

.inner .mainContent section article p,
.inner .mainContent section article ul,
.inner .mainContent section article ol,
.inner .mainContent section article dl {
  line-height: 1.65;
  margin: 0 .6em .6em;
  font-size: 114.28%;
}

.inner .mainContent section article sup {
  margin-right: 3px;
  margin-left: 2px;
}

.inner .mainContent section article iframe {
  margin: 0 auto !important;
}

/** heading **/
.mainContent header h1 {
  padding: 12px 0 20px 28px;
  font-size: 200%;
  min-height: 30px;
  margin-bottom: 0;
  position: relative;
}

.mainContent header h1::before,
.mainContent header h1::after {
  position: absolute;
  left: -.5em;
  top: .1em;
  font-family: 'goma';
  font-size: 160%;
}

.mainContent header h1::before {
  color: #304862;
  content: '\eaa01';
}

.mainContent header h1::after {
  color: #283e54;
  content: '\eaa02';
}

.mainContent header .tit_01,
.mainContent header .tit_02,
.mainContent header .tit_03 {
  word-break: break-all;
  word-wrap: break-word;
  padding: 14px 0 20px 1em;
}

.mainContent header .tit_01::before {
  color: #fdce21;
  content: '\eaa01';
}

.mainContent header .tit_01::after {
  color: #3491d0;
  content: '\eaa02';
}

.mainContent header .tit_02::before {
  color: #de5549;
  content: '\eaa01';
}

.mainContent header .tit_02::after {
  color: #8ea1a5;
  content: '\eaa02';
}

.mainContent header .tit_03::before {
  color: #ff541c;
  content: '\eaa01';
}

.mainContent header .tit_03::after {
  color: #ffbb00;
  content: '\eaa02';
}

.mainContent h2 {
  font-size: 185.71%;
  line-height: 1.63;
  border-bottom: 3px dotted #fdca2a;
}

.mainContent h3 {
  font-size: 142.85%;
  line-height: 1.63;
  border-bottom: 3px dotted #3694cc;
}

.mainContent .iconTit::before {
  font-family: 'goma';
  padding-right: 5px;
}

.mainContent .iconTit.html {
  border-color: #3390ff;
}

.mainContent .iconTit.html::before {
  color: #3390ff;
  content: '\f121';
}

.mainContent .iconTit.css {
  border-color: #e47f77;
}

.mainContent .iconTit.css::before {
  color: #e47f77;
  content: '\f121';
}

.mainContent .iconTit.js {
  border-color: #e08f24;
}

.mainContent .iconTit.js::before {
  color: #e08f24;
  content: '\f121';
}

.mainContent .iconTit.php {
  border-color: #5969a4;
}

.mainContent .iconTit.php::before {
  color: #5969a4;
  content: '\f121';
}

.mainContent .iconTit.otherCode {
  border-color: #6d797a;
}

.mainContent .iconTit.otherCode::before {
  color: #6d797a;
  content: '\f121';
}

.mainContent .iconTit.option {
  border-color: #26975a;
}

.mainContent .iconTit.option::before {
  color: #26975a;
  content: '\f013';
}

.mainContent .iconTit.info {
  border-color: #6d797a;
}

.mainContent .iconTit.info::before {
  color: #6d797a;
  content: '\f129';
}

.mainContent .iconTit.other {
  border-color: #6d797a;
}

.mainContent .iconTit.other::before {
  color: #6d797a;
  content: '\f108';
}

.mainContent .iconTit.attention::before {
  color: #f1c40f;
  content: '\f071';
}

.mainContent .iconTit.good::before {
  color: #1abc9c;
  content: '\f00c';
}

.mainContent .iconTit.bad::before {
  color: #f92f2d;
  content: '\f00d';
}

.mainContent .iconTit.graph::before {
  color: #fe8101;
  content: '\f080';
}

.mainContent .iconTit.sitemap::before {
  color: #6d797a;
  content: '\f0e8';
}

.mainContent .iconTit.stethoscope::before {
  color: #6d797a;
  content: '\f0f1';
}

.mainContent .iconTit.question::before {
  color: #f92f2d;
  content: '\f128';
}

.mainContent .iconTit.addon::before {
  color: #1d5dcd;
  content: '\f12e';
}

.mainContent .iconTit.bug::before {
  color: #9b59b6;
  content: '\f188';
}

.mainContent .iconTit.areaChart::before {
  color: #fe8101;
  content: '\f1fe';
}

.mainContent .iconTit.pieChart::before {
  color: #fe8101;
  content: '\f200';
}

.mainContent .iconTit.lineChart::before {
  color: #fe8101;
  content: '\f201';
}

.mainContent h4,
.mainContent h5,
.mainContent h6 {
  font-size: 114.28%;
  line-height: 1.63;
}

/* table */
table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 0 30px;
  padding: 0;
}

table.withCap {
  margin: 0 0 10px;
}

caption, th {
  text-align: left;
}

/** table style **/
/*** type1 ***/
table.type1 caption {
  font-weight: bold;
  padding-bottom: 10px;
}

table.type1 {
  width: 100%;
  border-bottom: 1px solid #dcdde0;
  border-right: 1px solid #dcdde0;
  line-height: 1.7;
  background: #fff;
}

table.type1 th {
  padding: 15px;
  border-left: 1px solid #dcdde0;
  border-top: 1px solid #dcdde0;
  font-weight: bold;
  vertical-align: top;
  background: #eee;
}

table.type1 td {
  padding: 15px;
  border-left: 1px solid #dcdde0;
  border-top: 1px solid #dcdde0;
  vertical-align: top;
}

/*** type2 ***/
table.type2 {
  width: 100% !important;
  border-collapse: collapse;
}

table.type2 tr th,
table.type2 tr td {
  padding: 15px;
  border-bottom: 1px solid #ddd;
}

table.type2 tr th {
  text-transform: uppercase;
  border-bottom-color: #ccc;
  text-align: left;
}

/** table width **/
table.wid10 {
  width: 10%;
}

table.wid15 {
  width: 15%;
}

table.wid20 {
  width: 20%;
}

table.wid25 {
  width: 25%;
}

table.wid30 {
  width: 30%;
}

table.wid35 {
  width: 35%;
}

table.wid40 {
  width: 40%;
}

table.wid45 {
  width: 45%;
}

table.wid50 {
  width: 50%;
}

table.wid55 {
  width: 55%;
}

table.wid60 {
  width: 60%;
}

table.wid65 {
  width: 65%;
}

table.wid70 {
  width: 70%;
}

table.wid75 {
  width: 75%;
}

table.wid80 {
  width: 80%;
}

table.wid85 {
  width: 85%;
}

table.wid90 {
  width: 90%;
}

table.wid95 {
  width: 95%;
}

table.wid98 {
  width: 98%;
}

/** cell width **/
.wid5 {
  width: 4.9% !important;
}

.wid10 {
  width: 9.9% !important;
}

.wid15 {
  width: 14.9% !important;
}

.wid20 {
  width: 19.9% !important;
}

.wid25 {
  width: 24.9% !important;
}

.wid30 {
  width: 29.9% !important;
}

.wid35 {
  width: 34.9% !important;
}

.wid40 {
  width: 39.9% !important;
}

.wid45 {
  width: 44.9% !important;
}

.wid50 {
  width: 49.9% !important;
}

.wid55 {
  width: 54.9% !important;
}

.wid60 {
  width: 59.9% !important;
}

.wid65 {
  width: 64.9% !important;
}

.wid70 {
  width: 69.9% !important;
}

.wid75 {
  width: 74.9% !important;
}

.wid80 {
  width: 79.9% !important;
}

.wid85 {
  width: 84.9% !important;
}

.wid90 {
  width: 89.9% !important;
}

.wid95 {
  width: 95.9% !important;
}

.wid98 {
  width: 98.9% !important;
}

.wid100 {
  width: 100% !important;
}

/* inlineLink */
.inner .mainContent section article .inlineLink {
  margin-top: 1em;
  margin-bottom: 1em;
}

.inlineLink ul::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.inlineLink ul li {
  float: left;
  margin-right: 8px;
  margin-bottom: 8px;
}

.inlineLink ul li:last-child {
  margin-right: 0;
  margin-bottom: 0;
}

.inlineLink.center {
  text-align: center;
}

.inlineLink.center ul {
  display: inline-block;
}

/* tag */
ul.tag {
  font-size: 71.42%;
  margin-bottom: -10px;
}

ul.tag::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

ul.tag li {
  float: left;
  margin-right: 6px;
  margin-bottom: 10px;
}

ul.tag li:last-child {
  margin-right: 0;
}

ul.tag li span {
  display: block;
  min-width: 20px;
  padding: 4px 8px;
  text-align: center;
  font-size: 120%;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
  font-weight: bold;
}

/* msgArea */
.msgArea {
  width: 96%;
  padding: 10px 2%;
  margin-bottom: 15px;
  border: 1px solid #e0e0e0;
  background: #ecf0f1;
  color: #333;
}

.msgArea.success {
  border: 1px solid #d7f3ec;
  background: #eefcf8;
  color: #187860;
}

.msgArea.notice {
  border: 1px solid #d9ecf8;
  background: #f2faff;
  color: #246e9d;
}

.msgArea.alert {
  border: 1px solid #f7eac9;
  background: #fffbf1;
  color: #a0760c;
}

.msgArea.attention {
  border: 1px solid #ffe4e3;
  background: #fff6f6;
  color: #ca2420;
}

.msgArea p,
.msgArea ul {
  margin: 0 !important;
}

/* button */
/** default **/
.button {
  position: relative;
  display: inline-block;
  padding: 8px 15px 5px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #d6d6d6;
  color: #333 !important;
  vertical-align: top;
  text-align: center;
  font-size: 100%;
  cursor: pointer;
  box-shadow: 0 3px 0 #aaa;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.button.large {
  font-size: 128.57%;
  padding: 8px 15px 5px;
}

.button.active,
.button:hover {
  color: #666;
  background: #ebebeb;
  box-shadow: 0 3px 0 #bbb;
}

.button.active,
.button:active {
  top: 2px;
  box-shadow: 0 1px 0 #bbb;
}

.sideContent .button,
.staticSideContent .button {
  padding: 2px 8px;
}

/** bgBlue **/
.bgBlue {
  background: #0173bc;
  color: #fff !important;
}

.button.bgBlue {
  box-shadow: 0 3px 0 #025a92;
}

.bgBlue.active,
.bgBlue:hover {
  background: #469ed6;
}

a.bgBlue:hover {
  box-shadow: 0 3px 0 #167dbf;
}

.button.bgBlue.active,
.button.bgBlue:active {
  box-shadow: 0 1px 0 #167dbf;
}

/** bgLightBlue **/
.bgLightBlue {
  background: #00b4e7;
  color: #fff !important;
}

.button.bgLightBlue {
  box-shadow: 0 3px 0 #0191ba;
}

.bgLightBlue.active,
.bgLightBlue:hover {
  background: #29ccfb;
}

a.bgLightBlue:hover {
  box-shadow: 0 3px 0 #17aed9;
}

.button.bgLightBlue.active,
.button.bgLightBlue:active {
  box-shadow: 0 1px 0 #17aed9;
}

/** bgWpBlue **/
.bgWpBlue {
  background: #21759a;
  color: #fff !important;
}

.button.bgWpBlue {
  box-shadow: 0 3px 0 #156588;
}

.bgWpBlue.active,
.bgWpBlue:hover {
  background: #3b90b5;
}

a.bgWpBlue:hover {
  box-shadow: 0 3px 0 #217498;
}

.button.bgWpBlue.active,
.button.bgWpBlue:active {
  box-shadow: 0 1px 0 #156487;
}

/** bgRed **/
.bgRed {
  background: #c00000;
  color: #fff !important;
}

.button.bgRed {
  box-shadow: 0 3px 0 #a70000;
}

.bgRed.active,
.bgRed:hover {
  background: #dd1b1b;
}

a.bgRed:hover {
  box-shadow: 0 3px 0 #c31414;
}

.button.bgRed.active,
.button.bgRed:active {
  box-shadow: 0 1px 0 #c31414;
}

/** bgBerry **/
.bgBerry {
  background: #c9003b;
  color: #fff !important;
}

.button.bgBerry {
  box-shadow: 0 3px 0 #96052f;
}

.bgBerry.active,
.bgBerry:hover {
  background: #dc1b54;
}

a.bgBerry:hover {
  box-shadow: 0 3px 0 #c21d4d;
}

.button.bgBerry.active,
.button.bgBerry:active {
  box-shadow: 0 1px 0 #c21d4d;
}

/** bgJRed **/
.bgJRed {
  background: #ff541c;
  color: #fff !important;
}

.button.bgJRed {
  box-shadow: 0 3px 0 #d13d0c;
}

.bgJRed.active,
.bgJRed:hover {
  background: #fe6b3b;
}

a.bgJRed:hover {
  box-shadow: 0 3px 0 #e14d1c;
}

.button.bgJRed.active,
.button.bgJRed:active {
  box-shadow: 0 1px 0 #e14d1c;
}

/** bgYellow **/
.bgYellow {
  background: #ffbb00;
  color: #fff !important;
}

.button.bgYellow {
  box-shadow: 0 3px 0 #dba100;
}

.bgYellow.active,
.bgYellow:hover {
  background: #ffc524;
}

a.bgYellow:hover {
  box-shadow: 0 3px 0 #eab00e;
}

.button.bgYellow.active,
.button.bgYellow:active {
  box-shadow: 0 1px 0 #eab00e;
}

/** bgDarkYellow **/
.bgDarkYellow {
  background: #ffa800;
  color: #fff !important;
}

.button.bgDarkYellow {
  box-shadow: 0 3px 0 #ec9b00;
}

.bgDarkYellow.active,
.bgDarkYellow:hover {
  background: #febc3c;
}

a.bgDarkYellow:hover {
  box-shadow: 0 3px 0 #f5a50a;
}

.button.bgDarkYellow.active,
.button.bgDarkYellow:active {
  box-shadow: 0 1px 0 #f5a50a;
}

/** bgOrange **/
.bgOrange {
  background: #e87912;
  color: #fff !important;
}

.button.bgOrange {
  box-shadow: 0 3px 0 #c46207;
}

.bgOrange.active,
.bgOrange:hover {
  background: #f9902f;
}

a.bgOrange:hover {
  box-shadow: 0 3px 0 #ee821e;
}

.button.bgOrange.active,
.button.bgOrange:active {
  box-shadow: 0 1px 0 #ee821e;
}

/** bgRorenge **/
.bgRorenge {
  background: #e86032;
  color: #fff !important;
}

.button.bgRorenge {
  box-shadow: 0 3px 0 #d54d1e;
}

a.bgRorenge:hover,
.bgRorenge:hover {
  background: #f77d53;
}

a.bgRorenge:hover {
  box-shadow: 0 3px 0 #e15c2e;
}

.button.bgRorenge.active,
.button.bgRorenge:active {
  box-shadow: 0 1px 0 #e15c2e;
}

/** bgDarkGreen **/
.bgDarkGreen {
  background: #16666f;
  color: #fff !important;
}

.button.bgDarkGreen {
  box-shadow: 0 3px 0 #0f5860;
}

.bgDarkGreen.active,
.bgDarkGreen:hover {
  background: #277f89;
}

a.bgDarkGreen:hover {
  box-shadow: 0 3px 0 #1c717b;
}

.button.bgDarkGreen.active,
.button.bgDarkGreen:active {
  box-shadow: 0 1px 0 #105961;
}

/** bgGreen **/
.bgGreen {
  background: #2ba864;
  color: #fff !important;
}

.button.bgGreen {
  box-shadow: 0 3px 0 #1b8a4e;
}

.bgGreen.active,
.bgGreen:hover {
  background: #3bbe77;
}

a.bgGreen:hover {
  box-shadow: 0 3px 0 #1fb162;
}

.button.bgGreen.active,
.button.bgGreen:active {
  box-shadow: 0 1px 0 #1fb162;
}

/** bgGGreen **/
.bgGGreen {
  background: #21a465;
  color: #fff !important;
}

.button.bgGGreen {
  box-shadow: 0 3px 0 #1b8854;
}

.bgGGreen.active,
.bgGGreen:hover {
  background: #3bbe77;
}

a.bgGGreen:hover {
  box-shadow: 0 3px 0 #27be76;
}

.button.bgGGreen.active,
.button.bgGGreen:active {
  box-shadow: 0 1px 0 #27be76;
}

/** bgLightGreen **/
.bgLightGreen {
  background: #2ed379;
  color: #fff !important;
}

.button.bgLightGreen {
  box-shadow: 0 3px 0 #20c069;
}

.bgLightGreen.active,
.bgLightGreen:hover {
  background: #3ddf87;
}

a.bgLightGreen:hover {
  box-shadow: 0 3px 0 #22d674;
}

.button.bgLightGreen.active,
.button.bgLightGreen:active {
  box-shadow: 0 1px 0 #22d674;
}

/** bgPurple **/
.bgPurple {
  background: #5969a4;
  color: #fff !important;
}

.button.bgPurple {
  box-shadow: 0 3px 0 #43538e;
}

.bgPurple.active,
.bgPurple:hover {
  background: #6c7cb6;
}

a.bgPurple:hover {
  box-shadow: 0 3px 0 #5366ac;
}

.button.bgPurple.active,
.button.bgPurple:active {
  box-shadow: 0 1px 0 #5366ac;
}

/** bgNavy **/
.bgNavy {
  background: #354c60;
  color: #fff !important;
}

.button.bgNavy {
  box-shadow: 0 3px 0 #2c3f50;
}

.bgNavy.active,
.bgNavy:hover {
  background: #455f75;
}

a.bgNavy:hover {
  box-shadow: 0 3px 0 #334e66;
}

.button.bgNavy.active,
.button.bgNavy:active {
  box-shadow: 0 1px 0 #334e66;
}

/** bgDarkGray **/
.bgDarkGray {
  background: #808d8e;
  color: #fff !important;
}

.button.bgDarkGray {
  box-shadow: 0 3px 0 #6d797a;
}

.bgDarkGray.active,
.bgDarkGray:hover {
  background: #8e9697;
}

a.bgDarkGray:hover {
  box-shadow: 0 3px 0 #758a8c;
}

.button.bgDarkGray.active,
.button.bgDarkGray:active {
  box-shadow: 0 1px 0 #758a8c;
}

/** bgPink **/
.bgPink {
  background: #fc6b6e;
  color: #fff !important;
}

.button.bgPink {
  box-shadow: 0 3px 0 #e24e51;
}

.bgPink.active,
.bgPink:hover {
  background: #ff7e81;
}

a.bgPink:hover {
  box-shadow: 0 3px 0 #ed6467;
}

.button.bgPink.active,
.button.bgPink:active {
  box-shadow: 0 1px 0 #ed6467;
}

/** bgBlack **/
.bgBlack {
  background: #313131;
  color: #fff !important;
}

.button.bgBlack {
  box-shadow: 0 3px 0 #000;
}

.bgBlack.active,
.bgBlack:hover {
  background: #454444;
}

a.bgBlack:hover {
  box-shadow: 0 3px 0 #373737;
}

.button.bgBlack.active,
.button.bgBlack:active {
  box-shadow: 0 1px 0 #373737;
}

/** bgGold **/
.bgGold {
  background: #edd758;
  background: -moz-linear-gradient(top, #edd758 0%, #dda600 80%, #dda600 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #edd758), color-stop(80%, #dda600), color-stop(100%, #dda600));
  background: -webkit-linear-gradient(top, #edd758 0%, #dda600 80%, #dda600 100%);
  background: -o-linear-gradient(top, #edd758 0%, #dda600 80%, #dda600 100%);
  background: -ms-linear-gradient(top, #edd758 0%, #dda600 80%, #dda600 100%);
  background: linear-gradient(to bottom, #edd758 0%, #dda600 80%, #dda600 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#edd758', endColorstr='#dda600',GradientType=0);
  color: #fff !important;
}

.button.bgGold {
  box-shadow: 0 3px 0 #cc9900;
}

.bgGold.active,
.bgGold:hover {
  background: #f5e06a;
  background: -moz-linear-gradient(top, #f5e06a 0%, #ebb30b 80%, #ebb30b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5e06a), color-stop(80%, #ebb30b), color-stop(100%, #ebb30b));
  background: -webkit-linear-gradient(top, #f5e06a 0%, #ebb30b 80%, #ebb30b 100%);
  background: -o-linear-gradient(top, #f5e06a 0%, #ebb30b 80%, #ebb30b 100%);
  background: -ms-linear-gradient(top, #f5e06a 0%, #ebb30b 80%, #ebb30b 100%);
  background: linear-gradient(to bottom, #f5e06a 0%, #ebb30b 80%, #ebb30b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5e06a', endColorstr='#ebb30b',GradientType=0);
}

a.bgGold:hover {
  box-shadow: 0 3px 0 #daa70d;
}

.button.bgGold.active,
.button.bgGold:active {
  box-shadow: 0 1px 0 #daa70d;
}

/* col */
.col::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.col .colIn {
  float: left;
}

/*** withImgCol ***/
.withImgCol::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.withImgCol .txtR,
.withImgCol .txtL {
  overflow: hidden;
}

.withImgCol .imgL {
  float: left;
  margin: 0 10px 0 0;
}

.withImgCol .imgR {
  float: right;
  margin: 0 0 0 10px;
}

aside .withImgCol,
aside .withImgCol .txtR,
aside .withImgCol .txtL,
aside .withImgCol .imgL,
aside .withImgCol .imgR {
  display: block;
}

/* col3 */
.col3::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.col3 .colIn {
  float: left;
  width: 30%;
  margin-right: 5%;
}

.col3 .colIn:nth-child(3n) {
  margin-right: 0;
}

/* col4 */
.col4::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.col4 .colIn {
  float: left;
  width: 22%;
  margin-right: 4%;
}

.col4 .colIn:nth-child(4n) {
  margin-right: 0;
}

/* fileTree */
.fileTree {
  margin-bottom: 15px;
}

.fileTree ul {
  font-size: 100% !important;
  margin: 0 !important;
}

.fileTree ul li > ul li {
  margin-left: 1.3em !important;
}

.fileTree ul li span::before {
  font-family: 'goma';
  line-height: 1em;
}

.fileTree ul li .set {
  display: inline-block;
  padding: 0.1em 0.3em;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.fileTree ul li .set:hover {
  background: #e7f8ff;
}

.fileTree ul li.active > .set {
  background: #c6eeff;
}

.fileTree ul li .set .btn {
  cursor: pointer;
}

.fileTree ul li > .set > .btn::before {
  content: '\f147';
  color: #333;
}

.fileTree ul li.close > .set > .btn::before {
  content: '\f196';
}

.fileTree ul li > .set > .icon::before {
  content: '\f07c';
  color: #eed401;
  margin: 0 0.5em 0 0;
}

.fileTree ul li > .set > .btn + .icon::before {
  margin: 0 0.5em;
}

.fileTree ul li.close > .set > .icon::before {
  content: '\f07b';
}

.fileTree ul li.noChild > .set {
  margin-left: 1.3em;
}

.fileTree ul li.noChild > .set > .icon::before {
  content: '\f07b';
  color: #ccc;
}

.fileTree ul li.file > .set {
  margin-left: 1.4em;
}

.fileTree ul li.file > .set > .icon::before {
  content: '\f0f6';
  color: #333;
}

/* fileIcon */
.fileIcon {
  line-height: 1;
}

.fileIcon::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.fileIcon li {
  position: relative;
  float: left;
  margin: 0 10px 10px 0;
  font-size: 80px;
  font-family: 'goma';
}

.fileIcon li .fileIconSpan,
.fileIcon li a {
  display: block;
  padding: 0 0 0 15px;
}

.fileIcon li .fileExt {
  position: absolute;
  top: 58px;
  left: 0;
  z-index: 1;
  display: block;
  padding: 5px;
  line-height: 1;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #fff;
  background: #333;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.fileIcon li a .fileExt {
  background: #3390ff;
}

.fileIcon li a:hover .fileExt {
  background: #5abdff;
}

/* noscript */
.noscript {
  width: 100%;
  background: #ff4646;
  overflow: hidden;
}

.content .noscript {
  margin-bottom: 20px;
}

.noscript .noscriptIn {
  width: 90%;
  padding: 0 5%;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 128.57%;
  overflow: hidden;
}

.noscript .noscriptIn::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.noscript .noscriptIn p {
  margin: 1em 0 !important;
  -webkit-animation: blink 1.5s ease-in-out infinite alternate;
  -moz-animation: blink 1.5s ease-in-out infinite alternate;
  animation: blink 1.5s ease-in-out infinite alternate;
}

/* siteMsg */
.siteMsg {
  width: 100%;
  background: #4ba3e3;
  overflow: hidden;
}

.content .siteMsg {
  margin-bottom: 20px;
}

.siteMsg .siteMsgIn {
  width: 90%;
  padding: 0 5%;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 128.57%;
  overflow: hidden;
}

.siteMsg .siteMsgIn::after {
  content: '.';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.siteMsg .siteMsgIn p {
  margin: 1em 0;
}

.siteMsg .siteMsgIn p.close {
  display: inline-block;
  margin-top: 0;
  padding: 5px 7px;
  background: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #4ba3e3;
  cursor: pointer;
}

.siteMsg .siteMsgIn p.close::after {
  font-family: 'goma';
  content: '\f00d';
}

@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* media query */
.row1 {
  display: none;
}

.row2 {
  display: none;
}

/** min-width:769px **/
@media screen and (min-width: 769px) {
  .indexPage .col .colIn:nth-child(3n) {
    margin-right: 0;
  }
}
/** max-width:1024px **/
@media screen and (max-width: 1024px) {
  #header header,
  .breadcrumb ul,
  .inner {
    width: 96%;
    margin-right: 2%;
    margin-left: 2%;
  }
}
/** max-width:768px **/
@media screen and (max-width: 768px) {
  #header header {
    padding: 15px 0;
  }

  #header header .logo,
  #header header nav {
    float: none;
    text-align: center;
  }

  #header header nav ul li,
  #header header nav ul li:first-child {
    float: none;
    margin-bottom: 12px;
    margin-left: 3px;
  }

  .mainContent h1,
  .mainContent .tit_01 {
    font-size: 157.14%;
    background-size: 13px 36px;
    padding: 12px 0 20px 20px;
  }

  .mainContent h2 {
    font-size: 142.85%;
  }

  .mainContent h3 {
    font-size: 114.28%;
  }

  .mainContent h4,
  .mainContent h5,
  .mainContent h6 {
    font-size: 114.28%;
  }

  .inner .mainContent section article p {
    font-size: 100%;
    margin: 0 0 0.6em;
  }

  .inner .mainContent section article ul,
  .inner .mainContent section article ol,
  .inner .mainContent section article dl {
    font-size: 100%;
  }

  .subPage .inner aside {
    text-align: center;
  }

  .subPage .inner aside .adArea ul {
    display: block;
  }

  .subPage .inner aside .adArea ul li {
    float: none;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .inner .mainContent section {
    padding: 10px 15px 20px;
  }

  .indexPage .tagClouds ul li a .tagColor {
    font-size: 85.71%;
  }

  .subPage .inner {
    height: auto !important;
  }

  .subPage .inner .mainContent {
    padding-right: 0;
  }

  .subPage .inner .staticSideContent {
    position: static !important;
  }

  .subPage .inner .sideContent {
    position: static !important;
  }

  .subPage .inner .mainContent,
  .subPage .inner .staticSideContent,
  .subPage .inner .sideContent {
    float: none !important;
    width: 100% !important;
  }

  .subPage .inner .mainContent .inlineLink ul li {
    float: none;
    margin-right: 0;
  }

  .socialBtn ul li {
    min-height: 70px;
  }

  .pageTop li {
    font-size: 285.71%;
  }

  .row2 {
    display: block;
  }

  .indexPage .col .colIn {
    width: 49.02%;
    margin-right: 1.95%;
  }

  .indexPage .col .colIn .readMore {
    position: static;
    margin: 0 0 15px;
  }

  .indexPage .col .colIn:nth-child(2n) {
    margin-right: 0;
  }

  .col3 .colIn {
    float: none;
    width: 100%;
    margin-right: 0;
  }

  .col4 .colIn {
    float: none;
    width: 100%;
    margin-right: 0;
  }

  #footer {
    padding-bottom: 3.8571em;
  }

  #footer footer nav ul li a {
    width: 6.5em;
    font-size: 114.28%;
  }

  .pageTop {
    bottom: 0;
    right: 0;
    width: 94%;
    padding: .5em 3%;
    background: #fff;
  }
}
/** max-width:540px **/
@media screen and (max-width: 540px) {
  .indexPage .col .colIn {
    width: 100%;
  }

  #footer footer nav ul {
    display: block;
    width: 96%;
    padding-right: 2%;
    padding-left: 2%;
    text-align: center;
  }

  #footer footer nav ul li {
    float: none;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .indexPage article {
    height: auto !important;
  }

  #footer footer .socialArea dl dt {
    float: none;
    margin-bottom: 10px;
  }

  .row1 {
    display: block;
  }
}