@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

.cf:after {
  content: "";
  clear: both;
  display: block;
}

.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

body {
  background-color: #e2e2e2;
  font-size: 16px;
  line-height: 2;
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.art--in a {
  color: #ff9300;
}

.art--in a:hover {
  opacity: 0.7;
}

pre {
  white-space: -moz-pre-wrap;
  /* Mozilla */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  white-space: pre-wrap;
  /* CSS3 */
  word-wrap: break-word;
  /* IE 5.5+ */
  display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
}

h2,
h3,
h4,
h5,
h6 {
  font-size: 130%;
  margin-bottom: 25px;
  padding: 8px 10px;
}

strong,
b {
  font-size: 100%;
}

em,
address {
  font-style: normal;
}

del {
  text-decoration: line-through;
}

ins {
  display: inline-block;
}

.article ul,
.article ol,
.article table,
.article blockquote,
.article pre,
address {
  margin: 20px 0;
}

.article table {
  border-collapse: collapse;
}

.alignleft {
  text-align: left;
}

.aligncenter {
  text-align: center;
}

.alignright {
  text-align: right;
}

.article ul,
.article ol,
.article blockquote,
.article pre {
  padding: 20px;
}

/* top page */

/* header */
.head--area {
  width: 100%;
  padding: 30px 10px;
  background-color: #fff;
}

.head--area .site-ttl a {
  font-size: 21px;
  color: #000;
}

.site-ttl {
  font-weight: bold;
  line-height: 1.3;
}

.head--area .site-ttl a:hover {
  opacity: 0.7;
}

p.catch-copy {
  padding: 5px 20px;
  color: #fff;
  font-size: 10px;
  background: linear-gradient(to bottom,
      rgba(189, 189, 189, 1) 0%,
      rgba(165, 165, 165, 1) 100%);
}

.gnav {
  background: linear-gradient(to bottom,
      rgba(71, 71, 71, 1) 0%,
      rgba(38, 38, 38, 1) 100%);
  padding: 20px;
}

nav.gnav>ul {
  display: flex;
  justify-content: space-around;
}

nav.gnav ul#gnav--list>li {
  display: block;
  position: relative;
  /* width: 24%; */
  font-size: 14px;
  color: #a5e9e1;
}

ul#gnav--list li ul.sub--menu {
  display: none;
  position: absolute;
  padding: 0;
  z-index: 9999;
}

ul.sub--menu li a {
  display: block;
  width: 220px;
  background-color: #2e2b2b;
}

ul.sub--menu li a:hover {
  color: #f5f2e8;
  background-color: #388186;
}

.slicknav_menu {
  display: none;
}

#gnav--list li a {
  display: block;
  color: #dadada;
  line-height: 1.4;
}

#gnav--list li a:hover {
  color: #ff9300;
}

/* slider */
.bx-wrapper {
  margin: 0 auto 20px;
  border: none;
  box-shadow: none;
}

.bx-wrapper .bx-controls-direction a {
  width: 50px;
  height: 50px;
}

.bx-wrapper .bx-controls-direction a:hover {
  opacity: 0.7;
}

.bx-wrapper .bx-prev {
  background: url(../images/prev.png);
}

.bx-wrapper .bx-next {
  background: url(../images/next.png);
}

/* contents area */
.cont {
  max-width: 980px;
  margin: 0 auto;
}

.cont.flex {
  display: flex;
  flex-wrap: nowrap;
  /*wrap*/
}

.jcsb {
  justify-content: space-between;
}

.art--in {
  padding: 20px;
}

.more--btn {
  text-align: right;
}

.more--btn a {
  display: inline-block;
  width: 150px;
  padding: 5px 0;
  text-align: center;
  color: #dedede;
  font-size: 13px;
  background: linear-gradient(to bottom,
      rgba(71, 71, 71, 1) 0%,
      rgba(38, 38, 38, 1) 100%);
  border-radius: 20px;
}

.more--btn a:hover {
  background: linear-gradient(to bottom,
      rgba(51, 51, 51, 1) 0%,
      rgba(168, 168, 168, 1) 100%);
  opacity: 1;
}

/* section */
.cont main {
  background: #d2d2d2;
}

.cont section {
  max-width: 800px;
  /*730px*/
  padding: 20px;
}

.article img,
.art--in img {
  max-width: 100%;
}

.art--in img {
  float: left;
  width: 40%;
  margin: 0 20px 20px 0;
}

.art--in.sub-entry img {
  float: none;
  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0 auto 10px;
}

.article {
  background: #ededed;
  margin-bottom: 20px;
}

/* link */
.link-in {
  padding: 20px;
}

.link-in h3 {
  margin-bottom: 0;
}

.link-in p {
  margin-bottom: 20px;
}

.link--cont h2 {
  margin-bottom: 0;
}

.link--cont h3 {
  border: none;
  border-left: 5px solid #c80000;
  border-radius: 0;
}

.link--cont h3 a {
  display: block;
  font-size: 16px;
  color: #727272;
}

.link--cont h3 a:hover {
  opacity: 0.7;
}

.link--cont h3 a::after {
  content: ">";
  margin-left: 5px;
}

.link--cont a {
  text-align: left;
}

/* aside */
aside.side--menu {
  /* min-width: 340px; */
  width: 340px;
  background-color: #ededed;
  height: 100%;
  position: sticky;
  top: 0;
}

.side--cont a {
  display: block;
  color: #000;
}

.side--cont a:hover {
  color: #ff9300;
}

.side--cont li ul li a {
  line-height: 1.4;
}

.side-link img {
  float: left;
  max-width: 60px;
}

.side--menu>ul>li>p {
  margin-bottom: 10px;
  padding: 5px 3%;
  color: #505050;
  background: linear-gradient(to bottom,
      rgba(189, 189, 189, 1) 0%,
      rgba(165, 165, 165, 1) 100%);
}

.side--cont>li {
  font-size: 15px;
  color: #ed894a;
}

p.side-link img {
  vertical-align: middle;
}

.side--child--menu {
  padding: 0 3%;
}

.side-link p {
  padding: 10px 0;
}

.side--child--menu li {
  padding: 15px 0;
  border-bottom: 1px solid #d9d9d9;
  border-top: 1px solid #fff;
}

.side--child--menu li:first-child {
  border-top: none;
}

.side--child--menu li:last-child {
  border-bottom: none;
}

/* footer */
footer {
  margin-top: 150px;
  padding: 20px 0 0;
  background: #8d8d8d;
}

footer .cont {
  display: flex;
  align-items: flex-start;
}

footer .ft--menu--cont {
  display: flex;
  flex-wrap: wrap;
  /* max-width: 730px; */
  margin: 0 auto;
  width: -webkit-fill-available;
}

footer .ft--copy {
  float: left;
  font-size: 10px;
  text-align: right;
  /*min-*/
  width: 230px;
  color: #666;
  background: #fff;
  padding: 10px 20px;
}

footer a.top--btn {
  display: block;
  width: 100%;
  height: 30px;
  margin-top: 20px;
  line-height: 30px;
  text-align: center;
  font-size: 10px;
  color: #fff;
  background: #727272;
}

footer a.top--btn:hover {
  background: #5d5d5d;
}

footer .ft--menu--cont {
  float: right;
}

footer .ft--menu {
  /* width: 30%; */
  margin-right: 1%;
}

footer .ft--menu p {
  color: #dedede;
}

footer .ft--menu a {
  padding: 5px 10px;
  display: block;
  color: #dedede;
  line-height: 1.4;
}

footer .ft--menu a:hover {
  border-color: #8d8d8d;
  background-color: #ededed;
  color: #666;
}

/* under */

/* pan nav */
#panav {
  margin-top: 20px;
  padding: 0 20px;
}

#panav a {
  font-size: 14px;
  color: #727272;
}

#panav a:hover {
  color: #ff9300;
}

/* SNS */
.btn--cont {
  width: 100%;
  margin: 50px 0;
}

.btn--cont--ttl {
  color: #a8a8a8;
}

.sns--cont {
  display: flex;
  justify-content: center;
}

.btn--cont>div {
  text-align: center;
}

.btn--cont>div div {
  margin: 0 10px;
}

.btn--cont:after {
  content: "";
  clear: both;
  display: block;
}

.share--btn {
  box-sizing: border-box;
  margin: 0 0.1%;
}

.share--btn .fa {
  font-weight: bold;
}

.share--link {
  display: block;
  text-align: center;
  color: #fff !important;
  font-size: 14px !important;
  padding: 0 20px;
  box-sizing: border-box;
  text-decoration: none;
  border-radius: 2px;
}

.share--link:hover {
  text-decoration: none !important;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

/* SNSごとの背景色 */
#twitter {
  background-color: #00acee;
}

#hatena {
  background-color: #2d4c86;
}

#facebook {
  background-color: #3b5998;
}

#ggl-plus {
  background-color: #dd4b39;
}

/* +下層用 */
h2,
.under h1 {
  padding: 15px 10px;
  color: #fff;
  background: linear-gradient(to bottom,
      rgba(189, 189, 189, 1) 0%,
      rgba(165, 165, 165, 1) 100%);
}

.under h1 {
  font-size: 130%;
}

h3,
.under h2 {
  border: 1px solid #727272;
  border-radius: 3px;
}

h4,
.under h3 {
  border-left: 5px solid #d2d2d2;
}

h5 {
  background: #727272;
  color: #dedede;
}

h6 {
  border-bottom: 2px solid #d2d2d2;
}

strong {
  color: #c80000;
}

em {
  padding: 0 2px;
  background: #727272;
  color: #dedede;
}

.article ul,
.article ol {
  border: 2px solid #d2d2d2;
}

.article ol {
  counter-reset: number;
}

.article ol li {
  margin-bottom: 10px;
}

.article ol li::before {
  counter-increment: number;
  content: counter(number);
  display: inline-block;
  width: 2em;
  height: 2em;
  margin-right: 5px;
  background: #727272;
  color: #fff;
  text-align: center;
  border-radius: 50%;
}

.article blockquote {
  position: relative;
  padding-left: 40px;
  border: 2px solid #d2d2d2;
  border-left: 5px solid #d2d2d2;
}

blockquote::before {
  content: "\f10d";
  font-family: FontAwesome;
  color: #727272;
  position: absolute;
  top: 5px;
  left: 13px;
}

address {
  background: #d2d2d2;
  color: #727272;
  padding: 20px;
}

ins {
  padding: 0 2px;
  border: 1px solid #d2d2d2;
}

pre {
  border: 2px solid #d2d2d2;
  background: #fff;
}

table th {
  padding: 2px 15px;
  background: #d2d2d2;
  border: 1px solid #727272;
}

table td {
  padding: 2px 15px;
  border: 1px solid #727272;
}

.not--found b {
  font-size: 30px;
  color: #8d8d8d;
}