@charset "UTF-8";
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
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%;
  font-weight: normal;
  font-style: normal;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1.8;
  word-wrap: break-word;
  color: #000;
  font: 15px/1.7 "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  background-color: #f5f5f5;
  text-align: left; }

/* Yu Gothic for Windows */
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100; }

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200; }

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300; }

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400; }

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold; }

@font-face {
  font-family: MyYuGothic;
  font-weight: normal;
  src: local(YuGothic-Medium), local("Yu Gothic Medium");
  /* for Chrome */ }

@font-face {
  font-family: MyYuGothic;
  font-weight: bold;
  src: local(YuGothic-Bold), local("Yu Gothic");
  /* for Chrome */ }

@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100; }

@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200; }

@media all and (-ms-high-contrast: none) {
  html {
    font-family: Verdana, Meiryo, sans-serif; } }

@media all and (-ms-high-contrast: active) {
  html {
    font-family: Verdana, Meiryo, sans-serif; } }

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

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

img {
  -ms-interpolation-mode: bicubic;
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  width: auto;
  /* for ie8 */ }

a {
  text-decoration: none;
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
  color: #1111cc;
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

ol, ul {
  list-style: none; }
  ol li, ul li {
    line-height: 1.8; }

blockquote,
q {
  quotes: none; }

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

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
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; }

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input,
select {
  vertical-align: middle; }

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  border: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  input[type="submit"]::-webkit-search-decoration,
  input[type="button"]::-webkit-search-decoration {
    display: none; }
  input[type="submit"]::focus,
  input[type="button"]::focus {
    outline-offset: -2px; }

input,
textarea {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-appearance: none;
  max-width: 100%; }

/* iOSでのスクロールの表示分をフィックス */
.scroll {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch; }

/* センタリングの設定 */
/* 各ブレークポイントの呼び出し */
/* 背景画像のポジションづけ */
/* clear bothをするための設定 */
/*  `map-get()`関数をネストして値を取得する。
/*  ネストしたvalueのデフォルトはbaseとする。 */
/*  文字が溢れた際の表示を … にする（複数行対応, Chrome/Safariのみ） */
/**
 * px→rem変換
 */
/**
 * 疑似要素の矢印の設定
 */
/**
 * ベンダープレフィックス
 */
/**
 * 傍点(圏点)設定
 */
/* 吹出しの矢印のやつ
 */
/* 3点リーダー */
/*----------------------------
共通箇所の設定
---------------------------- */
.wp-block-image {
  text-align: center;
  margin: 0 0 50px; }

section {
  /*おすすめ記事
---------------------------- */ }
  section.recentEntries .entry a {
    border-bottom: 1px dashed #aaa;
    display: block;
    padding: 20px 10px;
    overflow: hidden; }
    section.recentEntries .entry a figure, section.recentEntries .entry a .text {
      display: inline-block; }
    section.recentEntries .entry a figure {
      width: 30%; }
    section.recentEntries .entry a .text {
      margin: 0;
      float: right;
      padding: 0 0 0 10px;
      width: calc(70% - 10px); }
      section.recentEntries .entry a .text h2 {
        margin: 0;
        font-size: 14px;
        font-size: 0.875rem;
        font-weight: bold; }
      section.recentEntries .entry a .text time {
        color: #aaa;
        font-size: 12px;
        font-size: 0.75rem; }

/* センタリングの設定 */
/* 各ブレークポイントの呼び出し */
/* 背景画像のポジションづけ */
/* clear bothをするための設定 */
/*  `map-get()`関数をネストして値を取得する。
/*  ネストしたvalueのデフォルトはbaseとする。 */
/*  文字が溢れた際の表示を … にする（複数行対応, Chrome/Safariのみ） */
/**
 * px→rem変換
 */
/**
 * 疑似要素の矢印の設定
 */
/**
 * ベンダープレフィックス
 */
/**
 * 傍点(圏点)設定
 */
/* 吹出しの矢印のやつ
 */
/* 3点リーダー */
/*----------------------------
コンテンツ箇所
---------------------------- */
nav.pagination {
  clear: both;
  margin: 50px auto; }
  nav.pagination .current {
    background: #466C91;
    border: 1px solid #466C91;
    color: #fff; }

nav ul.page-numbers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  nav ul.page-numbers li {
    margin: 0 0 30px; }
    @media screen and (max-width: 1000px) {
      nav ul.page-numbers li {
        margin: 0 0 20px; } }
    nav ul.page-numbers li span,
    nav ul.page-numbers li a {
      padding: 10px;
      border: 1px solid #eee;
      vertical-align: middle;
      margin: 0 10px 0 0; }
      nav ul.page-numbers li span:hover,
      nav ul.page-numbers li a:hover {
        background: #466C91;
        border: 1px solid #466C91;
        color: #fff; }
    nav ul.page-numbers li span.dots {
      background: #eee;
      color: #555; }
      nav ul.page-numbers li span.dots:hover {
        border: 1px solid #eee;
        color: #555; }

/*----------------------------
共通項目
---------------------------- */
aside {
  display: block;
  float: right;
  margin: 0;
  /*----------------------------
バナー箇所
---------------------------- */
  /*右サイトバナーmobile
---------------------------- */
  /*検索ボタン
---------------------------- */
  /*facebook
---------------------------- */
  /*オススメの記事+人気のある記事
---------------------------- */ }
  @media screen and (max-width: 1000px) {
    aside {
      float: none;
      margin: 0;
      padding: 0;
      width: 100%; } }
  aside .side-bnr a {
    display: block;
    margin: 0 0 20px; }
  @media screen and (max-width: 1000px) {
    aside div {
      margin: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; } }
  aside div p.caption {
    margin: 20px 0;
    font-size: 14px;
    font-size: 0.875rem;
    text-align: center; }
    @media screen and (max-width: 1000px) {
      aside div p.caption {
        font-size: 12px;
        font-size: 0.75rem;
        margin: 20px; } }
  aside div.sidebar-inner {
    padding: 0; }
    @media screen and (min-width: 1001px) {
      aside div.sidebar-inner {
        max-width: 100%; } }
  aside h3 {
    font-size: 15px;
    font-size: 0.9375rem;
    color: #aaa;
    border-bottom: 3px solid #aaa;
    margin: 0 auto 20px;
    padding: 0 0 10px;
    text-align: center; }
    @media screen and (max-width: 1000px) {
      aside h3 {
        margin: 0 auto 20px; } }
  aside .search-form {
    border: none;
    padding: 0; }
  aside .search-box-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 0 20px; }
    @media screen and (max-width: 1000px) {
      aside .search-box-top {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; } }
    aside .search-box-top #search-input-box {
      padding: 10px;
      width: 80%; }
      @media screen and (max-width: 1000px) {
        aside .search-box-top #search-input-box {
          width: 100%; } }
    aside .search-box-top input[type="submit"] {
      cursor: pointer;
      padding: 10px;
      width: 20%; }
      @media screen and (max-width: 1000px) {
        aside .search-box-top input[type="submit"] {
          margin: 20px auto 0;
          width: 80%; } }
  aside .fb-page {
    display: inherit;
    position: initial;
    padding: 0 0 20px 0;
    width: 100%;
    margin: 0 auto; }
  aside .recommend-articles ul li,
  aside .recommend-articles ol li,
  aside .popular-articles ul li,
  aside .popular-articles ol li {
    overflow: hidden; }
    aside .recommend-articles ul li a,
    aside .recommend-articles ol li a,
    aside .popular-articles ul li a,
    aside .popular-articles ol li a {
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      border-bottom: 1px dashed #ededed;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 0 10px 20px 10px; }
      aside .recommend-articles ul li a:hover,
      aside .recommend-articles ol li a:hover,
      aside .popular-articles ul li a:hover,
      aside .popular-articles ol li a:hover {
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        opacity: .7; }
      aside .recommend-articles ul li a img,
      aside .recommend-articles ol li a img,
      aside .popular-articles ul li a img,
      aside .popular-articles ol li a img {
        width: 100px;
        height: auto; }
    aside .recommend-articles ul li:nth-child(n+2),
    aside .recommend-articles ol li:nth-child(n+2),
    aside .popular-articles ul li:nth-child(n+2),
    aside .popular-articles ol li:nth-child(n+2) {
      padding: 20px 0 0 0; }

/*----------------------------
検索窓
---------------------------- */
aside form#seach-form {
  height: 70px;
  position: relative; }
  @media screen and (max-width: 1000px) {
    aside form#seach-form {
      background: #eee;
      padding: 20px;
      height: auto; } }
  aside form#seach-form input.search-text {
    border: 1px solid #eee;
    border-radius: 25px;
    height: 40px;
    padding: 0 0 0 35px;
    width: 100%;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    font-size: 11px;
    font-size: 0.6875rem; }
    @media screen and (max-width: 1000px) {
      aside form#seach-form input.search-text {
        font-size: 12px;
        font-size: 0.75rem; } }
    aside form#seach-form input.search-text:focus {
      outline: none;
      border: 2px solid #9ee8ff;
      border-radius: 25px;
      -webkit-box-shadow: 0px 5px 10px 0px #eee;
      box-shadow: 0px 5px 10px 0px #eee; }
  aside form#seach-form input[type="image"] {
    top: 50%;
    margin: -23px 0 0;
    left: 10px;
    position: absolute;
    z-index: 10;
    width: 20px;
    height: auto; }
    @media screen and (max-width: 1000px) {
      aside form#seach-form input[type="image"] {
        left: 20px;
        margin: -15px 0 0; } }

#search-page h1 {
  color: #555;
  font-weight: bold;
  line-height: 1.4;
  margin: 0 0 20px; }
  #search-page h1 span {
    color: #aaa; }

@media screen and (max-width: 1000px) {
  #search-page {
    padding: 10px; } }

/*----------------------------
ヘッダーの中身の設定
---------------------------- */
header {
  border-bottom: 1px solid #eee; }
  header #top-contents {
    background: #fff;
    margin: 0 auto;
    padding: 10px 0;
    max-width: 1000px;
    width: 100%; }
    @media screen and (max-width: 1000px) {
      header #top-contents {
        padding: 20px; } }
    header #top-contents .inner-contents {
      -webkit-box-align: cener;
      -ms-flex-align: cener;
      align-items: cener;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      position: relative; }
      header #top-contents .inner-contents .top-logo img {
        display: block;
        margin: 0 auto 0 0;
        width: 64px; }
      header #top-contents .inner-contents h1, header #top-contents .inner-contents p {
        color: #aaa;
        text-align: left;
        position: absolute;
        top: 50%;
        margin: -7.5px 0 0 80px;
        font-weight: normal;
        width: calc(100% - 64px);
        font-size: 12px;
        font-size: 0.75rem; }
        @media screen and (max-width: 1000px) {
          header #top-contents .inner-contents h1, header #top-contents .inner-contents p {
            margin: 0 0 0 20px;
            position: initial;
            font-size: 10px;
            font-size: 0.625rem; } }

@-webkit-keyframes keyframes-bounce {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }

@keyframes keyframes-bounce {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }

@-webkit-keyframes typing {
  from {
    width: 0; } }

@keyframes typing {
  from {
    width: 0; } }

@-webkit-keyframes caret {
  50% {
    border-color: transparent; } }

@keyframes caret {
  50% {
    border-color: transparent; } }

/*----------------------------
フッターメニュー設定ここから
---------------------------- */
.test.blue {
  background: blue; }

.test.green {
  background: green; }

#footer-middlemenu {
  background: #fff;
  padding: 72px 0 48px;
  margin: 0 auto;
  width: 85%; }
  @media screen and (max-width: 1000px) {
    #footer-middlemenu {
      padding: 0;
      border: none;
      width: 100%; } }
  #footer-middlemenu a {
    display: block;
    font-size: 12px;
    font-size: 0.75rem;
    position: relative; }
    #footer-middlemenu a:before {
      border-bottom: 1px solid #aaa;
      content: '';
      position: absolute;
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
      display: block;
      width: 0;
      left: 0;
      bottom: 0; }
    #footer-middlemenu a:hover {
      background: #eee;
      -webkit-transition: background-color 1s;
      -o-transition: background-color 1s;
      transition: background-color 1s; }
      #footer-middlemenu a:hover:before {
        border-bottom: 1px solid #aaa;
        width: 100%; }
  #footer-middlemenu h4 {
    position: relative;
    padding: 0 0 0 20px;
    margin: 0 0 20px;
    color: #555;
    font-size: 13px;
    font-size: 0.8125rem; }
    @media screen and (max-width: 1000px) {
      #footer-middlemenu h4 {
        font-size: 12px;
        font-size: 0.75rem;
        cursor: pointer;
        margin: 0;
        padding: 20px; } }
    #footer-middlemenu h4:before {
      content: "";
      border-left: 4px solid #eee;
      position: absolute;
      left: 0;
      width: 4px;
      height: 1.5em; }
  #footer-middlemenu .inner-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    max-width: 1200px;
    margin: 0 auto; }
    @media screen and (max-width: 1000px) {
      #footer-middlemenu .inner-box {
        padding: 0;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; } }
    #footer-middlemenu .inner-box .footer-right-logo {
      margin: 0 0 20px;
      width: 97px;
      padding: 0; }
      @media screen and (max-width: 1000px) {
        #footer-middlemenu .inner-box .footer-right-logo {
          width: 80px;
          margin: 0 0 10px; } }
    #footer-middlemenu .inner-box .p-mark {
      margin: 10px 0 0 auto;
      height: auto;
      padding: 0;
      width: 50px; }
      @media screen and (max-width: 1000px) {
        #footer-middlemenu .inner-box .p-mark {
          margin: 20px auto 0 0; } }
    #footer-middlemenu .inner-box .left-inner-menu {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 80%; }
      @media screen and (max-width: 1000px) {
        #footer-middlemenu .inner-box .left-inner-menu {
          width: 100%;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap; } }
      #footer-middlemenu .inner-box .left-inner-menu .f-menu-list {
        padding: 0 10px;
        width: calc(100% / 3); }
        @media screen and (max-width: 1000px) {
          #footer-middlemenu .inner-box .left-inner-menu .f-menu-list {
            padding: 0; } }
        #footer-middlemenu .inner-box .left-inner-menu .f-menu-list ul {
          width: 90%;
          /*----------------------------
カテゴリー一覧
---------------------------- */ }
          @media screen and (max-width: 1000px) {
            #footer-middlemenu .inner-box .left-inner-menu .f-menu-list ul {
              width: 100%; }
              #footer-middlemenu .inner-box .left-inner-menu .f-menu-list ul.open {
                display: block; } }
          #footer-middlemenu .inner-box .left-inner-menu .f-menu-list ul li a {
            padding: 5px 0 0;
            position: relative;
            color: #6C6F77; }
            @media screen and (max-width: 1000px) {
              #footer-middlemenu .inner-box .left-inner-menu .f-menu-list ul li a {
                padding: 20px; } }
            #footer-middlemenu .inner-box .left-inner-menu .f-menu-list ul li a:hover {
              background: transparent; }
          #footer-middlemenu .inner-box .left-inner-menu .f-menu-list ul.categories {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin: 10px 0 0 -10px;
            padding: 0 10px;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start; }
            #footer-middlemenu .inner-box .left-inner-menu .f-menu-list ul.categories li {
              -webkit-box-align: baseline;
              -ms-flex-align: baseline;
              align-items: baseline;
              margin: 5px 5px 0 0;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -ms-flex-wrap: wrap;
              flex-wrap: wrap; }
              #footer-middlemenu .inner-box .left-inner-menu .f-menu-list ul.categories li a {
                border: 1px solid #eee;
                border-radius: 15px;
                color: #6C6F77;
                margin: 0 0 2px;
                padding: 0 10px;
                font-size: 10px;
                font-size: 0.625rem;
                position: relative; }
                #footer-middlemenu .inner-box .left-inner-menu .f-menu-list ul.categories li a:hover {
                  background: #eee; }
                #footer-middlemenu .inner-box .left-inner-menu .f-menu-list ul.categories li a:before {
                  border-bottom: 1px solid #aaa;
                  content: '';
                  position: absolute;
                  -webkit-transition: all 0.3s ease;
                  -o-transition: all 0.3s ease;
                  transition: all 0.3s ease;
                  display: block;
                  width: 0;
                  left: 0;
                  bottom: 0; }
        @media screen and (max-width: 1000px) {
          #footer-middlemenu .inner-box .left-inner-menu .f-menu-list {
            width: 100%; } }
    #footer-middlemenu .inner-box .right-address {
      width: 20%; }
      @media screen and (max-width: 1000px) {
        #footer-middlemenu .inner-box .right-address {
          width: 100%;
          padding: 30px 20px; } }
      #footer-middlemenu .inner-box .right-address p.company-name {
        padding: 0;
        text-align: left;
        font-size: 12px;
        font-size: 0.75rem; }
      #footer-middlemenu .inner-box .right-address address ul li {
        font-size: 12px;
        font-size: 0.75rem;
        color: #6C6F77; }
  #footer-middlemenu .bottom-menu-list {
    max-width: 1200px;
    margin: 30px auto 0; }
    @media screen and (max-width: 1000px) {
      #footer-middlemenu .bottom-menu-list {
        padding: 10px;
        margin: 0; } }
    #footer-middlemenu .bottom-menu-list ul {
      border-top: 1px solid #466C91;
      display: block;
      padding: 10px; }
      #footer-middlemenu .bottom-menu-list ul li {
        display: inline-block; }
        #footer-middlemenu .bottom-menu-list ul li a {
          padding: 10px 0;
          margin: 0 30px 0 0; }
          #footer-middlemenu .bottom-menu-list ul li a:after {
            border-style: solid;
            border-width: 0 1.66667px 1.66667px 0;
            content: "";
            display: inline-block;
            position: absolute;
            top: calc(100% / 2);
            margin: -2.5px 0 0;
            height: 5px;
            width: 5px;
            /**
 * 色
 */
            /**
 * 角度
 */
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            border-color: #34495E;
            margin: -2.5px 10px 0; }

/*----------------------------
フッターメニュー設定、スマホここから
---------------------------- */
#sp-footer-menu h4 {
  border-bottom: 1px solid white;
  background: #eee;
  color: #555;
  position: relative;
  padding: 15px;
  font-size: 12px;
  font-size: 0.75rem; }
  #sp-footer-menu h4:before {
    display: none; }
  #sp-footer-menu h4:after {
    background: url("../image/common/btn_icon_arrow_black.png");
    background-size: 100%;
    content: "";
    position: absolute;
    right: 20px;
    width: 15px;
    height: 15px;
    margin: -7.5px 0 0;
    top: 50%; }
  #sp-footer-menu h4.open-toggle:after {
    background: url("../image/common/btn_icon_arrow_black.png");
    background-size: 100%;
    content: "";
    position: absolute;
    right: 20px;
    width: 15px;
    height: 15px;
    margin: -7.5px 0 0;
    top: 50%;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg); }

#sp-footer-menu ul.accordion {
  width: 100%; }
  #sp-footer-menu ul.accordion ul.inner {
    display: none; }
    #sp-footer-menu ul.accordion ul.inner li a {
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      display: block;
      padding: 10px 10px 10px 35px;
      border-top: 1px solid #aaa;
      position: relative; }
      #sp-footer-menu ul.accordion ul.inner li a:after {
        background: url("../image/common/btn_icon_arrow_black.png");
        background-size: 100%;
        content: "";
        margin: 0 0 0 10px;
        left: 15px;
        top: 50%;
        width: 10px;
        height: 10px;
        margin: -5px 0 0;
        position: absolute; }
      #sp-footer-menu ul.accordion ul.inner li a:hover {
        border-bottom: none;
        background: #6380b1; }
        #sp-footer-menu ul.accordion ul.inner li a:hover:before {
          display: none; }
    #sp-footer-menu ul.accordion ul.inner li:first-child a {
      border-top: none; }

/*----------------------------
フッターの共通項目
---------------------------- */
#pc-footer-menu,
#sp-footer-menu {
  width: 100%; }

#pc-footer-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  @media screen and (max-width: 1000px) {
    #pc-footer-menu {
      display: none; } }

#sp-footer-menu {
  display: none; }
  @media screen and (max-width: 1000px) {
    #sp-footer-menu {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

footer {
  border-top: 1px solid #eee;
  background: #fff;
  clear: both;
  padding: 0;
  margin: 0;
  width: 100%; }
  @media screen and (min-width: 1001px) {
    footer {
      height: auto; } }
  @media screen and (max-width: 1000px) {
    footer {
      margin: 0 auto;
      padding: 0; } }
  footer .footer-copy {
    text-align: center;
    padding: 10px 0 5px; }
    footer .footer-copy small {
      color: #aaa;
      font-size: 12px;
      font-size: 0.75rem; }

/*----------------------------
ページトップへ戻る
---------------------------- */
#pagetop {
  position: relative; }
  #pagetop a {
    background: #eee;
    color: #555;
    display: block;
    text-align: center;
    text-decoration: none;
    width: 100%;
    height: 40px;
    zoom: 1; }
    #pagetop a:before {
      border-style: solid;
      border-width: 0 6.66667px 6.66667px 0;
      content: "";
      display: inline-block;
      position: absolute;
      top: calc(100% / 2);
      margin: -10px 0 0;
      height: 20px;
      width: 20px;
      /**
 * 色
 */
      /**
 * 角度
 */
      -webkit-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
      transform: rotate(225deg);
      color: #eee;
      top: 2px;
      right: calc(50% - 7.5px);
      background: #eee; }
    #pagetop a:after {
      content: "TOPに戻る";
      top: 50%;
      left: 50%;
      margin: calc(-15px / 2) 0 0 calc(-60px / 2);
      position: absolute;
      font-size: 12px;
      font-size: 0.75rem; }
    #pagetop a:hover {
      color: #6380b1; }

.sns-list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 15px 0; }
  .sns-list ul li {
    margin: 0 20px 0 0; }
    .sns-list ul li a {
      display: block;
      width: 30px;
      height: 30px; }
    .sns-list ul li:last-child {
      margin: 0; }
    .sns-list ul li.twitter-logo, .sns-list ul li.facebook-logo {
      width: 30px;
      height: 30px; }
    .sns-list ul li.twitter-logo {
      background: url("../image/common/Twitter_Logo_Blue.svg");
      background-size: 100%; }
    .sns-list ul li.facebook-logo {
      background: url("../image/common/f_logo_Blue.svg");
      background-size: 100%; }

.sns-list li.twitter-logo:before, .sns-list li.facebook-logo:before {
  content: ""; }

.sns-list li.twitter-logo {
  content: ""; }

.sns-list li.facebook-logo {
  content: ""; }

/*----------------------------
access-map
住所記載
---------------------------- */
.access-map {
  width: 100%; }
  .access-map address {
    border-radius: 17px;
    background: #fff;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: left;
    max-width: 900px;
    margin: 0 auto; }
    @media screen and (max-width: 1000px) {
      .access-map address {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; } }
  .access-map .address,
  .access-map .train {
    width: 50%; }
    @media screen and (min-width: 1001px) {
      .access-map .address ul,
      .access-map .train ul {
        text-indent: 40px; } }
    @media screen and (max-width: 1000px) {
      .access-map .address,
      .access-map .train {
        width: 100%; } }
    .access-map .address h3,
    .access-map .train h3 {
      font-weight: bold;
      padding: 0 0 20px 30px;
      position: relative; }
      @media screen and (min-width: 1001px) {
        .access-map .address h3,
        .access-map .train h3 {
          font-size: 20px;
          font-size: 1.25rem;
          padding: 0 0 20px 40px; } }
      .access-map .address h3:before,
      .access-map .train h3:before {
        content: "";
        width: 30px;
        height: 30px;
        position: absolute;
        left: 0; }
        @media screen and (max-width: 1000px) {
          .access-map .address h3:before,
          .access-map .train h3:before {
            width: 20px;
            height: 20px; } }
  @media screen and (max-width: 1000px) {
    .access-map .address {
      padding: 0 0 20px; } }
  .access-map .address h3:before {
    background: url("../image/map.png");
    background-size: 100%; }
  .access-map .train h3:before {
    background: url("../image/train.png");
    background-size: 100%; }

@media screen and (min-width: 1001px) {
  #footer-middlemenu .inner-box .left-inner-menu .category-list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 0 -10px;
    padding: 0 10px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; } }

@media screen and (max-width: 1000px) {
  #footer-middlemenu .inner-box .left-inner-menu .category-list ul.children li a {
    border-top: 1px solid #aaa; } }

@media screen and (min-width: 1001px) {
  #footer-middlemenu .inner-box .left-inner-menu .category-list ul li {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    margin: 5px 5px 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; } }

@media screen and (min-width: 1001px) {
  #footer-middlemenu .inner-box .left-inner-menu .category-list ul li a {
    border: 1px solid #eee;
    border-radius: 10px;
    margin: 0 0 2px;
    padding: 0 10px;
    font-size: 12px;
    font-size: 0.75rem; } }

/*----------------------------
共通箇所の設定
---------------------------- */
@media screen and (max-width: 1000px) {
  #main-contents .sideber.is-affixed .sidebar-inner {
    position: intial; } }

.dis-none {
  display: none; }

.dis-none-pc {
  display: none; }
  @media screen and (max-width: 1000px) {
    .dis-none-pc {
      display: inherit; } }

html,
body {
  background: #fff;
  line-height: 1;
  word-break: break-all;
  word-wrap: break-word;
  width: 100%;
  line-height: 1.8; }

.pc-hidden {
  display: none; }
  @media screen and (max-width: 1000px) {
    .pc-hidden {
      display: block; } }

.sp-hidden {
  display: block; }
  @media screen and (max-width: 1000px) {
    .sp-hidden {
      display: none; } }

#main-contents {
  max-width: 1000px;
  margin: 60px auto 0;
  display: block; }
  @media screen and (max-width: 1000px) {
    #main-contents {
      margin: 0; } }
  #main-contents .left-contents {
    display: inline-block;
    width: calc(100% - 33% - 20px);
    margin: 0 20px 0 0;
    /*top time デザイン
---------------------------- */ }
    @media screen and (max-width: 1000px) {
      #main-contents .left-contents {
        width: 100%;
        margin: 0; } }
    #main-contents .left-contents section {
      padding: 20px 0; }
      @media screen and (max-width: 1000px) {
        #main-contents .left-contents section {
          height: auto; } }
    #main-contents .left-contents time {
      color: #aaa;
      display: block;
      font-size: 12px;
      font-size: 0.75rem;
      text-align: right; }
      #main-contents .left-contents time:before {
        content: "投稿日："; }
      @media screen and (max-width: 1000px) {
        #main-contents .left-contents time {
          margin: 10px 0; } }
  #main-contents aside {
    width: 33%; }
    @media screen and (max-width: 1000px) {
      #main-contents aside {
        margin: 0;
        padding: 20px 20px 0px;
        width: 100%; } }

/*----------------------------
共通設定箇所
/*title
---------------------------- */
h1,
h2,
h3,
h4,
h5 {
  line-height: 1.8;
  font-weight: bold; }

h1 {
  font-size: 30px;
  font-size: 1.875rem; }
  @media screen and (max-width: 1000px) {
    h1 {
      font-size: 20px;
      font-size: 1.25rem; } }

h2 {
  font-size: 22px;
  font-size: 1.375rem;
  position: relative;
  margin: 0 0 60px;
  font-weight: normal; }
  @media screen and (max-width: 1000px) {
    h2 {
      font-size: 18px;
      font-size: 1.125rem; } }

h3 {
  font-size: 20px;
  font-size: 1.25rem;
  margin: 0 0 30px; }
  @media screen and (max-width: 1000px) {
    h3 {
      font-size: 17px;
      font-size: 1.0625rem; } }

h4 {
  margin: 0 0 20px;
  text-align: left;
  font-size: 18px;
  font-size: 1.125rem; }
  @media screen and (max-width: 1000px) {
    h4 {
      font-size: 16px;
      font-size: 1rem; } }

h5 {
  margin: 0 0 20px;
  text-align: left;
  font-size: 18px;
  font-size: 1.125rem; }
  @media screen and (max-width: 1000px) {
    h5 {
      font-size: 15px;
      font-size: 0.9375rem; } }

/*テキスト箇所
---------------------------- */
p {
  line-height: 1.8;
  text-align: left;
  font-size: 16px;
  font-size: 1rem; }
  @media screen and (max-width: 1000px) {
    p {
      font-size: 14px;
      font-size: 0.875rem; } }
  @media screen and (max-width: 414px) {
    p {
      font-size: 12px;
      font-size: 0.75rem; } }
  p.title {
    font-weight: bold; }
  p.company-name {
    font-weight: bold; }
  p.preface {
    font-weight: bold;
    margin: 0 auto 50px; }
  p.intro {
    margin: 0 0 50px; }
  p.caution {
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    text-align: right;
    margin: 20px 0 0; }
    @media screen and (max-width: 1000px) {
      p.caution {
        text-align: left;
        font-size: 12px;
        font-size: 0.75rem; } }
  p.continue-read {
    color: #337ab7;
    padding: 10px 0;
    text-align: right; }

/*リンク先ごとの共通設定
---------------------------- */
p.image a:hover {
  -webkit-filter: brightness(110%);
  filter: brightness(110%);
  -webkit-transition: .3 all ease-in-out;
  -o-transition: .3 all ease-in-out;
  transition: .3 all ease-in-out; }

a {
  text-decoration: none;
  color: #555;
  font-size: 16px;
  font-size: 1rem;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out; }
  @media screen and (max-width: 1000px) {
    a {
      font-size: 14px;
      font-size: 0.875rem; } }
  a.link {
    color: #337ab7;
    font-weight: normal;
    text-decoration: none; }
    a.link:hover {
      text-decoration: none;
      color: #466C91; }
  a:hover {
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out; }
  a.txt-link {
    display: inline-block;
    position: relative;
    font-weight: bold; }
    a.txt-link:before {
      border-bottom: 1px solid #eee;
      content: '';
      position: absolute;
      -webkit-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
      display: block;
      width: 0;
      left: 0;
      bottom: 0; }
    a.txt-link:hover {
      -webkit-transition: background-color 1s;
      -o-transition: background-color 1s;
      transition: background-color 1s; }
      a.txt-link:hover:before {
        border-bottom: 1px solid #eee;
        width: 100%; }

/*spanごとの共通設定
---------------------------- */
@media screen and (max-width: 414px) {
  span {
    font-size: 12px;
    font-size: 0.75rem; } }

span.font-bd {
  font-weight: bold; }

span.maker {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(80%, #FFE900));
  background: -webkit-linear-gradient(transparent 70%, #FFE900 80%);
  background: -o-linear-gradient(transparent 70%, #FFE900 80%);
  background: linear-gradient(transparent 70%, #FFE900 80%);
  display: inline;
  font-weight: bold; }

span.br {
  font-weight: bold;
  display: block; }
  @media screen and (max-width: 1000px) {
    span.br {
      display: inline;
      line-height: 1; } }

span.data {
  display: block; }

/*記事内で表示させる日付ボタンとカテゴリーボタン
---------------------------- */
ul.article-data {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 0 30px; }
  ul.article-data li a:hover {
    background: #eee; }

ul.post-categories {
  display: block;
  margin: 0 -5px 0 0;
  font-size: 0;
  padding: 0 20px 20px;
  width: 100%; }
  @media screen and (min-width: 1001px) {
    ul.post-categories {
      position: absolute;
      bottom: 0; } }
  @media screen and (max-width: 1000px) {
    ul.post-categories {
      clear: both;
      padding: 0; } }
  ul.post-categories li {
    display: inline-block;
    margin: 10px 5px 0 0; }
    ul.post-categories li a {
      border: 1px solid #eee;
      border-radius: 15px;
      padding: 2px 10px;
      font-size: 10px;
      font-size: 0.625rem; }
      ul.post-categories li a:hover {
        background: #eee; }
    ul.post-categories li:nth-child(n+5) {
      display: none; }

/*申し込みボタン
---------------------------- */
p.btn-cneter {
  position: relative; }

a.btn {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  display: block;
  position: relative;
  font-weight: bold;
  font-size: 14px;
  font-size: 0.875rem;
  text-align: center;
  margin: 0 auto 20px;
  padding: 14px 18px;
  width: 90%; }
  @media screen and (max-width: 1000px) {
    a.btn {
      padding: 15px; } }
  a.btn:before {
    background-image: url();
    content: ""; }
  a.btn:hover {
    background: #6380b1; }
    a.btn:hover:after {
      border-color: #555;
      right: 30px; }

/*----------------------------
共通項目
---------------------------- */
#breadcrumb ul {
  display: block;
  overflow: hidden;
  margin: 0 0 50px; }
  @media screen and (max-width: 1000px) {
    #breadcrumb ul {
      margin: 20px 10px;
      padding: 0 10px; } }
  #breadcrumb ul li {
    float: left; }
    #breadcrumb ul li:after {
      content: ">";
      color: #aaa;
      margin: 0 10px;
      font-size: 12px;
      font-size: 0.75rem; }
      @media screen and (max-width: 1000px) {
        #breadcrumb ul li:after {
          font-size: 11px;
          font-size: 0.6875rem; } }
    #breadcrumb ul li:last-child:after {
      display: none; }
    #breadcrumb ul li a, #breadcrumb ul li span {
      color: #aaa;
      font-size: 12px;
      font-size: 0.75rem; }
      @media screen and (max-width: 1000px) {
        #breadcrumb ul li a, #breadcrumb ul li span {
          font-size: 11px;
          font-size: 0.6875rem; } }
    #breadcrumb ul li a span {
      text-decoration: underline; }

/*----------------------------
共通項目
---------------------------- */
@media screen and (max-width: 414px) {
  #main-contents .left-contents section {
    padding: 0; } }

@media screen and (max-width: 1000px) {
  .side-bnr {
    display: none; } }

#main-contents aside {
  width: 272px; }
  @media screen and (max-width: 1000px) {
    #main-contents aside {
      width: 100%; } }

/*----------------------------
太字設定
---------------------------- */
b, strong {
  font-weight: bold !important; }

/*----------------------------
youtube設定
---------------------------- */
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%; }

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important; }

/*----------------------------
article内設定
---------------------------- */
article {
  overflow: hidden;
  /*----------------------------
テーブル箇所
---------------------------- */
  /*----------------------------
目次箇所
記事の目次箇所の調整
---------------------------- */ }
  article .youtube {
    max-width: 100%; }
    article .youtube iframe {
      border: 1px solid #aaa;
      -webkit-box-shadow: 0px 11px 17px -8px #aaa;
      box-shadow: 0px 11px 17px -8px #aaa; }
  article section .m-bottom10 {
    margin: 0 0 10px; }
  @media screen and (max-width: 1000px) {
    article section span {
      font-size: 14px;
      font-size: 0.875rem; } }
  article section .sanko {
    background: #ededed;
    color: #000;
    padding: 30px;
    margin: 50px 5px;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.8; }
    @media screen and (max-width: 1000px) {
      article section .sanko {
        font-size: 14px;
        font-size: 0.875rem; } }
    @media screen and (max-width: 414px) {
      article section .sanko {
        padding: 30px 20px;
        font-size: 14px;
        font-size: 0.875rem; } }
    article section .sanko b {
      font-weight: 700; }
    article section .sanko a {
      font-weight: bold;
      font-size: 16px;
      font-size: 1rem; }
      @media screen and (max-width: 1000px) {
        article section .sanko a {
          font-size: 14px;
          font-size: 0.875rem; } }
  article section .thumbnail {
    border: 1px solid #eee; }
  article section blockquote {
    background-color: #ecf0f1;
    color: #000;
    margin: 3rem 0;
    padding: 2.4rem 2.4rem 2.4rem 4.8rem;
    position: relative;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1; }
    article section blockquote.summary {
      background: #eee; }
      article section blockquote.summary:before, article section blockquote.summary:after {
        color: #fff; }
    @media screen and (max-width: 414px) {
      article section blockquote {
        padding: 40px 10px 40px 20px; } }
    article section blockquote p,
    article section blockquote div {
      font-size: 16px;
      font-size: 1rem;
      color: #000; }
      @media screen and (max-width: 1000px) {
        article section blockquote p,
        article section blockquote div {
          font-size: 14px;
          font-size: 0.875rem; } }
      @media screen and (max-width: 414px) {
        article section blockquote p,
        article section blockquote div {
          font-size: 14px;
          font-size: 0.875rem; } }
      article section blockquote p:last-child,
      article section blockquote div:last-child {
        margin: 0; }
    article section blockquote b {
      color: #000; }
    article section blockquote li {
      line-height: 1.8; }
    article section blockquote ul li {
      list-style-type: disc; }
    article section blockquote ul,
    article section blockquote ol {
      margin: 0 20px; }
      article section blockquote ul li,
      article section blockquote ol li {
        color: #000; }
    article section blockquote:before, article section blockquote:after {
      background-repeat: no-repeat;
      content: "";
      color: #ededed;
      font-size: 25px;
      font-size: 1.5625rem;
      height: auto;
      line-height: 1;
      height: 23px;
      position: absolute;
      width: 31px; }
    article section blockquote:before {
      font-family: 'FontAwesome';
      content: '\f10d';
      top: 20px;
      left: 20px; }
      @media screen and (max-width: 414px) {
        article section blockquote:before {
          top: 15px;
          left: 20px; } }
    article section blockquote:after {
      font-family: 'FontAwesome';
      content: '\f10e';
      right: 20px;
      bottom: 30px; }
      @media screen and (max-width: 414px) {
        article section blockquote:after {
          right: 10px;
          bottom: 15px; } }
  article section ol,
  article section ul {
    list-style: initial;
    margin: 30px 0; }
    article section ol li,
    article section ul li {
      padding-left: 1.3em;
      list-style-type: none; }
      article section ol li:last-child,
      article section ul li:last-child {
        margin: 0; }
  article section ol {
    counter-reset: item;
    list-style-type: none;
    padding-left: 0; }
    article section ol ol {
      padding-left: 1em; }
    article section ol li {
      font-size: 15px;
      font-size: 0.9375rem;
      position: relative;
      padding: 0 0 0 10px; }
      @media screen and (max-width: 1000px) {
        article section ol li {
          font-size: 14px;
          font-size: 0.875rem; } }
      @media screen and (max-width: 414px) {
        article section ol li {
          font-size: 13px;
          font-size: 0.8125rem; } }
      article section ol li:before {
        counter-increment: item;
        content: counter(item) ".";
        margin: 0 10px 0 -10px;
        font-weight: bold;
        color: #000;
        left: 0;
        position: absolute; }
  article section ul li {
    padding: 0;
    font-size: 15px;
    font-size: 0.9375rem; }
    @media screen and (max-width: 1000px) {
      article section ul li {
        font-size: 14px;
        font-size: 0.875rem; } }
    @media screen and (max-width: 414px) {
      article section ul li {
        font-size: 13px;
        font-size: 0.8125rem; } }
  article section img {
    display: block;
    margin: 0 auto 4.2rem;
    width: 100%; }
  article section a {
    font-weight: normal;
    color: #337ab7;
    text-decoration: none;
    font-size: 16px;
    font-size: 1rem; }
    @media screen and (max-width: 1000px) {
      article section a {
        font-size: 14px;
        font-size: 0.875rem; } }
    @media screen and (max-width: 414px) {
      article section a {
        font-size: 13px;
        font-size: 0.8125rem; } }
  article h1,
  article h2,
  article h3,
  article h4 {
    color: #000;
    font-weight: bold;
    font-family: YuGothic, MyYuGothic, Noto Sans Japanese, Helvetica;
    line-height: 1.2;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1; }
    article h1 i,
    article h1 b,
    article h1 span,
    article h2 i,
    article h2 b,
    article h2 span,
    article h3 i,
    article h3 b,
    article h3 span,
    article h4 i,
    article h4 b,
    article h4 span {
      font-weight: bold; }
  article h1 {
    margin: 0 0 10px;
    line-height: 1.2;
    font-size: 32px;
    font-size: 2rem; }
    @media screen and (max-width: 1000px) {
      article h1 {
        font-size: 22px;
        font-size: 1.375rem;
        margin: 20px 0 10px; } }
  article h2 {
    position: relative;
    padding: 0;
    margin: 130px 0 15px;
    font-size: 35px;
    font-size: 2.1875rem; }
    @media screen and (max-width: 1000px) {
      article h2 {
        font-size: 21px;
        font-size: 1.3125rem;
        margin: 60px 0 15px; } }
    @media screen and (max-width: 1000px) {
      article h2 span {
        font-size: 21px;
        font-size: 1.3125rem;
        font-weight: bold; } }
  article h3 {
    font-size: 25px;
    font-size: 1.5625rem;
    margin: 0 0 15px; }
    @media screen and (max-width: 1000px) {
      article h3 {
        font-size: 20px;
        font-size: 1.25rem; } }
    @media screen and (max-width: 1000px) {
      article h3 span {
        font-size: 18px;
        font-size: 1.125rem;
        font-weight: bold; } }
  article h4 {
    margin: 60px 0 15px;
    font-size: 20px;
    font-size: 1.25rem; }
    @media screen and (max-width: 1000px) {
      article h4 {
        font-size: 16px;
        font-size: 1rem; } }
  article p {
    color: #000;
    margin: 0 0 3rem;
    padding: 0;
    word-break: break-all;
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, Helvetica, sans-serif; }
    @media screen and (max-width: 1000px) {
      article p {
        padding: 0;
        font-size: 14px;
        font-size: 0.875rem; } }
    article p a {
      font-size: 16px;
      font-size: 1rem; }
      @media screen and (max-width: 1000px) {
        article p a {
          font-size: 14px;
          font-size: 0.875rem; } }
      @media screen and (max-width: 414px) {
        article p a {
          font-size: 14px;
          font-size: 0.875rem; } }
  article .article-img {
    margin: 0 auto 50px;
    height: auto;
    width: 100%; }
    @media screen and (max-width: 1000px) {
      article .article-img {
        width: 100%;
        height: auto; } }
    article .article-img img {
      display: block;
      max-width: 100%;
      height: auto; }
  article table {
    width: 100%;
    border-right: #ededed solid 1px;
    border-collapse: collapse;
    margin: 0 0 30px; }
  article table thead th {
    background: #F9F9F9;
    color: #000;
    font-weight: bold;
    padding: 8px;
    border-right: #ededed solid 1px;
    border-bottom: #ededed solid 1px; }
  article table thead th:last-child {
    border-right: #ededed solid 1px; }
  article table tbody th {
    background: #F9F9F9;
    color: #000;
    padding: 8px;
    border-bottom: #ededed solid 1px;
    vertical-align: top; }
  article table tbody tr:first-child {
    border-top: 1px solid #ededed;
    border-left: 1px solid #ededed; }
  article table tbody tr:nth-child(2n+1) {
    background: #F9F9F9; }
  article table tbody tr:last-child th {
    border-bottom: #ededed solid 1px; }
  article table tbody td {
    padding: 8px;
    border-left: #ededed solid 1px;
    border-bottom: #ededed solid 1px;
    vertical-align: top; }
    article table tbody td:first-child {
      width: 25%; }
  article #toc_container ul ul {
    margin-left: 1rem; }
  article #toc_container ul li ul {
    padding: 0 0 1rem 0; }
  article #toc_container p.toc_title {
    color: #000;
    font-size: 18px;
    font-size: 1.125rem; }
    @media screen and (max-width: 1000px) {
      article #toc_container p.toc_title {
        font-size: 15px;
        font-size: 0.9375rem; } }
  article #toc_container {
    border: none;
    background: #ededed;
    margin: 30px auto;
    padding: 20px 40px 30px;
    font-size: 100%;
    width: 100% !important; }
    @media screen and (max-width: 1000px) {
      article #toc_container {
        padding: 20px 20px 30px; } }
    article #toc_container a {
      color: #000; }
    article #toc_container ul.toc_list li a {
      background: none;
      color: #000;
      font-size: 13px;
      font-size: 0.8125rem;
      line-height: 2;
      font-weight: bold; }
      @media screen and (max-width: 1000px) {
        article #toc_container ul.toc_list li a {
          font-size: 13px;
          font-size: 0.8125rem; } }
    article #toc_container ul.toc_list li:before {
      content: ""; }
    article #toc_container ul.toc_list li > ul li {
      position: relative; }
      article #toc_container ul.toc_list li > ul li a {
        color: #000;
        font-size: 12px;
        font-size: 0.75rem;
        font-weight: normal; }
        @media screen and (max-width: 1000px) {
          article #toc_container ul.toc_list li > ul li a {
            font-size: 11px;
            font-size: 0.6875rem; } }

#main-contents .article-data-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0; }
  #main-contents .article-data-list ul.post-categories {
    position: inherit;
    width: auto;
    margin: 0;
    padding: 0; }
    #main-contents .article-data-list ul.post-categories li {
      margin: 0 0 0 10px;
      padding: 0; }
      #main-contents .article-data-list ul.post-categories li:first-child {
        margin: 0; }
      #main-contents .article-data-list ul.post-categories li a {
        background: #fff;
        border: 1px solid #000;
        border-radius: .25em;
        color: #000;
        display: block;
        font-weight: bold;
        padding: 2px 5px;
        font-size: 10px;
        font-size: 0.625rem; }
        #main-contents .article-data-list ul.post-categories li a:hover {
          border: 1px solid #6C6F77;
          background: #6C6F77;
          color: #fff; }
  #main-contents .article-data-list span.data {
    display: inline-block;
    margin: 0 10px 0 0; }

#main-contents .left-contents time {
  color: #6C6F77;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif, MotoyaLCedar, Droid Sans Mono, Meiryo;
  text-align: left;
  margin: 0 0 10px;
  font-size: 15px;
  font-size: 0.9375rem;
  font-weight: bold; }

/*----------------------------
left-contents
articlesの共通設定箇所
---------------------------- */
header .top-logo img {
  margin: 0 auto 0 20px; }

#main-contents .middle-contents .left-contents {
  max-width: 660px;
  width: calc(100% - 272px - 68px); }
  @media screen and (max-width: 1000px) {
    #main-contents .middle-contents .left-contents {
      display: block;
      padding: 0 35px;
      margin: 0 auto;
      width: 100%; } }
  @media screen and (max-width: 414px) {
    #main-contents .middle-contents .left-contents {
      padding: 0 25px; } }

#main-contents .left-contents {
  margin: 0 68px 0 0; }

.left-contents a {
  font-weight: bold;
  color: #337ab7; }

/*----------------------------
前記事と次記事のリンク箇所のcss設定はこちら
---------------------------- */
nav.post-navi {
  overflow: hidden;
  margin: 50px 0 20px;
  position: relative; }
  @media screen and (max-width: 1000px) {
    nav.post-navi {
      margin: 0 0 20px; } }
  nav.post-navi span.prev a, nav.post-navi span.next a {
    border: 1px solid #eee;
    width: 20%;
    position: relative;
    text-align: center;
    font-size: 14px;
    font-size: 0.875rem; }
    @media screen and (max-width: 1000px) {
      nav.post-navi span.prev a, nav.post-navi span.next a {
        font-size: 13px;
        font-size: 0.8125rem;
        width: 43%; } }
    nav.post-navi span.prev a:hover, nav.post-navi span.next a:hover {
      border: 1px solid #6380b1;
      background: #6380b1;
      color: #fff; }
  nav.post-navi span.prev a {
    float: left;
    padding: 20px 20px 20px 30px; }
    nav.post-navi span.prev a:before {
      content: "";
      left: 10px;
      width: 8px;
      height: 8px;
      border-top: 2px solid #6C6F77;
      border-right: 2px solid #6C6F77;
      -webkit-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
      transform: rotate(225deg);
      margin: -4px 10px 0 0;
      position: absolute;
      top: 50%; }
    nav.post-navi span.prev a:hover:before {
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
      text-decoration: none; }
  nav.post-navi span.next a {
    float: right;
    padding: 20px 30px 20px 20px; }
    nav.post-navi span.next a:after {
      content: "";
      right: 5px;
      width: 8px;
      height: 8px;
      border-top: 2px solid #6C6F77;
      border-right: 2px solid #6C6F77;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      margin: -4px 10px 0 0;
      position: absolute;
      top: 50%; }
    nav.post-navi span.next a:hover:after {
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
      text-decoration: none; }

/*----------------------------
footer パンくず箇所
---------------------------- */
footer {
  margin: 0; }

#breadcrumb {
  max-width: 1200px;
  margin: 0 auto; }
  #breadcrumb ul {
    margin: 74px 0 0;
    padding: 0 10px; }
    @media screen and (max-width: 1000px) {
      #breadcrumb ul {
        margin: 0 0 10px; } }
    @media screen and (max-width: 414px) {
      #breadcrumb ul {
        padding: 0 10px; } }
    #breadcrumb ul li a,
    #breadcrumb ul li span {
      color: #000;
      background: #fff; }
      #breadcrumb ul li a:hover,
      #breadcrumb ul li span:hover {
        text-decoration: none; }

/*----------------------------
関連記事ここから
---------------------------- */
#related-posts {
  margin: 0 0 50px; }
  #related-posts h2 {
    font-size: 16px;
    font-size: 1rem;
    border: none;
    margin: 0;
    background: #eee;
    padding: 10px 20px; }
    #related-posts h2:before {
      border: none; }
  #related-posts ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    #related-posts ul li {
      overflow: hidden;
      border-bottom: 1px dotted #aaa;
      width: 100%;
      /*----------------------------
関連記事内のカテゴリー表示ここから
---------------------------- */ }
      #related-posts ul li a {
        color: #ededed;
        display: block;
        overflow: hidden;
        padding: 20px 10px;
        -webkit-transition: all .3s linear;
        -o-transition: all .3s linear;
        transition: all .3s linear; }
        #related-posts ul li a:before {
          display: none; }
        #related-posts ul li a .related-thumb {
          display: inline-block;
          border: 1px solid #eee;
          margin: 0 10px 0 0;
          height: auto;
          max-height: 80px;
          float: left;
          overflow: hidden;
          width: 130px; }
          #related-posts ul li a .related-thumb img.object-fit-img {
            width: 100%;
            height: auto;
            -o-object-fit: cover;
            object-fit: cover;
            font-family: 'object-fit: cover;'; }
          @media screen and (max-width: 1000px) {
            #related-posts ul li a .related-thumb img.object-fit-img {
              font-family: 'object-fit: cover;'; } }
          @media screen and (max-width: 414px) {
            #related-posts ul li a .related-thumb img.object-fit-img {
              font-family: 'object-fit: cover;'; } }
        #related-posts ul li a p {
          display: inline-block;
          width: calc(100% - 130px - 10px);
          float: left; }
          #related-posts ul li a p.related-title {
            font-size: 14px;
            font-size: 0.875rem;
            margin: 0;
            vertical-align: top; }
        #related-posts ul li a:hover {
          background: #f6f9ff;
          -webkit-transition: all .3s linear;
          -o-transition: all .3s linear;
          transition: all .3s linear; }
          #related-posts ul li a:hover .related-thumb {
            -webkit-transition: all .3s linear;
            -o-transition: all .3s linear;
            transition: all .3s linear;
            -webkit-filter: drop-shadow(2px 4px 3px #888);
            filter: drop-shadow(2px 4px 3px #888); }
      #related-posts ul li ul {
        float: right;
        margin: 0 -5px; }
        #related-posts ul li ul.related-posts-cate li {
          display: inline-block;
          border-bottom: none;
          margin: 0 5px 20px 0; }
          #related-posts ul li ul.related-posts-cate li a {
            border-radius: 10px;
            color: #fff;
            display: block;
            padding: 5px 12px;
            font-size: 10px;
            font-size: 0.625rem; }

/*----------------------------
snsリストここから
---------------------------- */
#main-contents .left-contents .btn-sns-list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0; }
  @media screen and (max-width: 1000px) {
    #main-contents .left-contents .btn-sns-list ul {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin: 35px -10px calc(35px - 10px); } }
  @media screen and (max-width: 565px) {
    #main-contents .left-contents .btn-sns-list ul {
      margin: 35px -5px calc(35px - 10px) 0; } }

#main-contents .left-contents .p-button-twitter {
  margin: 0 10px;
  list-style-type: none;
  width: 100%;
  position: relative; }
  @media screen and (max-width: 1000px) {
    #main-contents .left-contents .p-button-twitter {
      margin: 0 10px 20px;
      width: calc(100% / 3 - 20px); } }
  @media screen and (max-width: 565px) {
    #main-contents .left-contents .p-button-twitter {
      margin: 0 10px 10px 0;
      width: calc(100% / 3 - 10px); } }
  #main-contents .left-contents .p-button-twitter a {
    background: #55acee;
    border: 2px solid #55acee;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    display: block;
    padding: 5px;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    font-size: 12px;
    font-size: 0.75rem;
    font-weight: normal; }
    @media screen and (max-width: 1000px) {
      #main-contents .left-contents .p-button-twitter a {
        font-size: 14px;
        font-size: 0.875rem;
        padding: 10px 10px 10px 30px; } }
    @media screen and (max-width: 565px) {
      #main-contents .left-contents .p-button-twitter a {
        text-indent: -999999999px;
        padding: 10px 5px 10px 30px; } }
    #main-contents .left-contents .p-button-twitter a:before {
      border-bottom: none;
      background: url("../image/single/btn_twitter.png");
      background-repeat: no-repeat;
      content: "";
      top: 50%;
      left: 10px;
      position: absolute;
      margin: calc(25px / -2) 0 0;
      height: 25px;
      width: 25px;
      background-size: 25px; }
      @media screen and (max-width: 1000px) {
        #main-contents .left-contents .p-button-twitter a:before {
          background-size: 20px;
          margin: calc(20px / -2) 0 0; } }
      @media screen and (max-width: 565px) {
        #main-contents .left-contents .p-button-twitter a:before {
          left: 50%;
          margin: calc(20px / -2) 0 0 calc(20px / -2); } }
    #main-contents .left-contents .p-button-twitter a:hover {
      background: #fff;
      color: #55acee;
      padding: 5px; }
      @media screen and (max-width: 1000px) {
        #main-contents .left-contents .p-button-twitter a:hover {
          padding: 10px 10px 10px 30px; } }
      #main-contents .left-contents .p-button-twitter a:hover:before {
        border-bottom: none;
        background: url("../image/single/btn_hover_twitter.png");
        background-repeat: no-repeat;
        top: 50%;
        left: 10px;
        margin: calc(25px / -2) 0 0;
        height: 25px;
        width: 25px;
        background-size: 25px; }
        @media screen and (max-width: 1000px) {
          #main-contents .left-contents .p-button-twitter a:hover:before {
            background-size: 20px;
            margin: calc(20px / -2) 0 0; } }
        @media screen and (max-width: 565px) {
          #main-contents .left-contents .p-button-twitter a:hover:before {
            left: 50%;
            margin: calc(20px / -2) 0 0 calc(20px / -2); } }

#main-contents .left-contents .p-button-facebook {
  margin: 0 10px;
  list-style-type: none;
  width: 100%;
  position: relative; }
  @media screen and (max-width: 1000px) {
    #main-contents .left-contents .p-button-facebook {
      margin: 0 10px 20px;
      width: calc(100% / 3 - 20px); } }
  @media screen and (max-width: 565px) {
    #main-contents .left-contents .p-button-facebook {
      margin: 0 10px 10px 0;
      width: calc(100% / 3 - 10px); } }
  #main-contents .left-contents .p-button-facebook a {
    background: #3b5998;
    border: 2px solid #3b5998;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    display: block;
    padding: 5px;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    font-size: 12px;
    font-size: 0.75rem;
    font-weight: normal; }
    @media screen and (max-width: 1000px) {
      #main-contents .left-contents .p-button-facebook a {
        font-size: 14px;
        font-size: 0.875rem;
        padding: 10px 10px 10px 30px; } }
    @media screen and (max-width: 565px) {
      #main-contents .left-contents .p-button-facebook a {
        text-indent: -999999999px;
        padding: 10px 5px 10px 30px; } }
    #main-contents .left-contents .p-button-facebook a:before {
      border-bottom: none;
      background: url("../image/single/btn_facebook.png");
      background-repeat: no-repeat;
      content: "";
      top: 50%;
      left: 10px;
      position: absolute;
      margin: calc(25px / -2) 0 0;
      height: 25px;
      width: 25px;
      background-size: 25px; }
      @media screen and (max-width: 1000px) {
        #main-contents .left-contents .p-button-facebook a:before {
          background-size: 20px;
          margin: calc(20px / -2) 0 0; } }
      @media screen and (max-width: 565px) {
        #main-contents .left-contents .p-button-facebook a:before {
          left: 50%;
          margin: calc(20px / -2) 0 0 calc(20px / -2); } }
    #main-contents .left-contents .p-button-facebook a:hover {
      background: #fff;
      color: #3b5998;
      padding: 5px; }
      @media screen and (max-width: 1000px) {
        #main-contents .left-contents .p-button-facebook a:hover {
          padding: 10px 10px 10px 30px; } }
      #main-contents .left-contents .p-button-facebook a:hover:before {
        border-bottom: none;
        background: url("../image/single/btn_hover_facebook.png");
        background-repeat: no-repeat;
        top: 50%;
        left: 10px;
        margin: calc(25px / -2) 0 0;
        height: 25px;
        width: 25px;
        background-size: 25px; }
        @media screen and (max-width: 1000px) {
          #main-contents .left-contents .p-button-facebook a:hover:before {
            background-size: 20px;
            margin: calc(20px / -2) 0 0; } }
        @media screen and (max-width: 565px) {
          #main-contents .left-contents .p-button-facebook a:hover:before {
            left: 50%;
            margin: calc(20px / -2) 0 0 calc(20px / -2); } }

#main-contents .left-contents .p-button-hatebu {
  margin: 0 10px;
  list-style-type: none;
  width: 100%;
  position: relative; }
  @media screen and (max-width: 1000px) {
    #main-contents .left-contents .p-button-hatebu {
      margin: 0 10px 20px;
      width: calc(100% / 3 - 20px); } }
  @media screen and (max-width: 565px) {
    #main-contents .left-contents .p-button-hatebu {
      margin: 0 10px 10px 0;
      width: calc(100% / 3 - 10px); } }
  #main-contents .left-contents .p-button-hatebu a {
    background: #00a4de;
    border: 2px solid #00a4de;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    display: block;
    padding: 5px;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    font-size: 12px;
    font-size: 0.75rem;
    font-weight: normal; }
    @media screen and (max-width: 1000px) {
      #main-contents .left-contents .p-button-hatebu a {
        font-size: 14px;
        font-size: 0.875rem;
        padding: 10px 10px 10px 30px; } }
    @media screen and (max-width: 565px) {
      #main-contents .left-contents .p-button-hatebu a {
        text-indent: -999999999px;
        padding: 10px 5px 10px 30px; } }
    #main-contents .left-contents .p-button-hatebu a:before {
      border-bottom: none;
      background: url("../image/single/btn_hatebu.png");
      background-repeat: no-repeat;
      content: "";
      top: 50%;
      left: 10px;
      position: absolute;
      margin: calc(25px / -2) 0 0;
      height: 25px;
      width: 25px;
      background-size: 25px; }
      @media screen and (max-width: 1000px) {
        #main-contents .left-contents .p-button-hatebu a:before {
          background-size: 20px;
          margin: calc(20px / -2) 0 0; } }
      @media screen and (max-width: 565px) {
        #main-contents .left-contents .p-button-hatebu a:before {
          left: 50%;
          margin: calc(20px / -2) 0 0 calc(20px / -2); } }
    #main-contents .left-contents .p-button-hatebu a:hover {
      background: #fff;
      color: #00a4de;
      padding: 5px; }
      @media screen and (max-width: 1000px) {
        #main-contents .left-contents .p-button-hatebu a:hover {
          padding: 10px 10px 10px 30px; } }
      #main-contents .left-contents .p-button-hatebu a:hover:before {
        border-bottom: none;
        background: url("../image/single/btn_hover_hatebu.png");
        background-repeat: no-repeat;
        top: 50%;
        left: 10px;
        margin: calc(25px / -2) 0 0;
        height: 25px;
        width: 25px;
        background-size: 25px; }
        @media screen and (max-width: 1000px) {
          #main-contents .left-contents .p-button-hatebu a:hover:before {
            background-size: 20px;
            margin: calc(20px / -2) 0 0; } }
        @media screen and (max-width: 565px) {
          #main-contents .left-contents .p-button-hatebu a:hover:before {
            left: 50%;
            margin: calc(20px / -2) 0 0 calc(20px / -2); } }