@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, 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;
}

footer,
header {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  vertical-align: baseline;
}

body {
  line-height: 1.8;
  word-wrap: break-word;
  color: #000;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Helvetica Neue", Arial, sans-serif;
  background-color: #f5f5f5;
  text-align: left;
}

@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 {
  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;
  transition: all 0.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;
  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点リーダー */
/* 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点リーダー */
/* 3点リーダー 高さが決まっているもの*/
/*----------------------------
コンテンツ箇所
---------------------------- */
nav.pagination {
  clear: both;
  margin: 50px auto;
}
nav.pagination .current {
  background: #375472;
  border: 1px solid #375472;
  color: #fff;
}
nav ul.page-numbers {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
@media screen and (max-width: 1000px) {
  nav ul.page-numbers {
    flex-wrap: wrap;
  }
}
@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 #ededed;
  vertical-align: middle;
  margin: 0 10px 0 0;
}
nav ul.page-numbers li span:hover,
nav ul.page-numbers li a:hover {
  background: #375472;
  border: 1px solid #375472;
  color: #fff;
}
nav ul.page-numbers li span.dots {
  background: #ededed;
  color: #555;
}
nav ul.page-numbers li span.dots:hover {
  border: 1px solid #ededed;
  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 .category-list {
  margin: 0 0 35px;
}
@media screen and (max-width: 1000px) {
  aside .category-list {
    display: none;
  }
}
aside .category-list h2 {
  background: #ededed;
  font-weight: bold;
  font-size: 14px;
  font-size: 0.875rem;
  margin: 0;
  padding: 5px;
  text-align: center;
}
@media screen and (max-width: 1000px) {
  aside .category-list {
    width: 100%;
  }
}
aside .category-list ul li a {
  border-bottom: 1px dotted #bfc0c0;
  display: block;
  font-weight: normal;
  position: relative;
  padding: 5px 10px;
  font-size: 12px;
  font-size: 0.75rem;
  transition: all 0.3s linear;
}
@media screen and (max-width: 1000px) {
  aside .category-list ul li a {
    padding: 10px;
  }
}
aside .category-list ul li a:after {
  border-style: solid;
  border-width: 0 1.33333px 1.33333px 0;
  content: "";
  color: #bfc0c0;
  display: inline-block;
  position: absolute;
  top: 50%;
  margin: -4px 0 0;
  height: 8px;
  width: 8px;
  transform: rotate(-45deg);
  right: 20px;
  transition: 0.3s all ease-in-out;
}
aside .category-list ul li a:hover {
  background: #fff;
  transition: 0.5s ease-in-out;
}
aside .category-list ul li a:hover:after {
  right: 10px;
}
aside .side-bnr a {
  display: block;
  margin: 0 0 20px;
}
@media screen and (max-width: 1000px) {
  aside .side-bnr a {
    text-align: center;
  }
}
@media screen and (max-width: 1000px) {
  aside .side-bnr a img {
    max-width: 80%;
  }
}
@media screen and (max-width: 1000px) {
  aside div {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    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: flex;
  padding: 0 0 20px;
}
@media screen and (max-width: 1000px) {
  aside .search-box-top {
    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 form#seach-form {
  height: 70px;
  position: relative;
}
@media screen and (max-width: 1000px) {
  aside form#seach-form {
    background: #ededed;
    padding: 20px;
    height: auto;
  }
}
aside form#seach-form input.search-text {
  border: 1px solid #ededed;
  border-radius: 25px;
  height: 40px;
  padding: 0 0 0 35px;
  width: 100%;
  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;
  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;
  }
}

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

.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: 200px auto 0;
  display: block;
}
@media screen and (max-width: 1000px) {
  #main-contents {
    margin: 80px auto 0;
  }
}
#main-contents .left-contents {
  display: inline-block;
  width: calc(100% - 272px - 68px);
  margin: 0 68px 0 0;
  /*----------------------------
  ページネーション箇所
  ---------------------------- */
  /*top time デザイン
  ---------------------------- */
  /*----------------------------
  1つ目の記事箇所
  ---------------------------- */
  /*----------------------------
  記事後ろ影
  ---------------------------- */
  /*----------------------------
  トップ画面より、記事画像
  ---------------------------- */
  /*----------------------------
  トップ画面より、記事並び箇所
  ---------------------------- */
  /*----------------------------
  カテゴリー箇所
  ---------------------------- */
  /*----------------------------
  文章箇所
  ---------------------------- */
}
@media screen and (max-width: 1000px) {
  #main-contents .left-contents {
    margin: 0;
    padding: 0 25px;
    width: 100%;
  }
}
#main-contents .left-contents section {
  padding: 0;
}
@media screen and (max-width: 1000px) {
  #main-contents .left-contents section {
    height: auto;
  }
}
#main-contents .left-contents time {
  color: #000;
  display: block;
  font-size: 12px;
  font-size: 0.75rem;
  text-align: left;
}
@media screen and (max-width: 1000px) {
  #main-contents .left-contents time {
    margin: 5px 0;
  }
}
#main-contents .left-contents .first-post_box {
  margin: 0;
  padding: 0 0 24px;
}
#main-contents .left-contents .first-post-thum_card {
  height: 480px;
  width: 660px;
  margin: 0 0 16px;
}
@media screen and (max-width: 1000px) {
  #main-contents .left-contents .first-post-thum_card {
    height: 360px;
    width: 100%;
  }
}
@media screen and (max-width: 414px) {
  #main-contents .left-contents .first-post-thum_card {
    height: 240px;
  }
}
#main-contents .left-contents .first-post_box {
  position: relative;
  z-index: 2;
}
#main-contents .left-contents .first-post_box:before {
  background: #e0bc86;
  content: "";
  position: absolute;
  top: 130px;
  left: 0;
  max-width: 820px;
  height: 450px;
  z-index: -1;
  margin-left: calc(50% - 50vw);
  padding-left: 50vw;
}
@media screen and (max-width: 1000px) {
  #main-contents .left-contents .first-post_box:before {
    height: 360px;
    top: 70px;
  }
}
@media screen and (max-width: 414px) {
  #main-contents .left-contents .first-post_box:before {
    height: 190px;
    top: 140px;
  }
}
#main-contents .left-contents .post_archive_list-item__thum {
  height: 240px;
  width: 320px;
  margin: 0 0 12px;
}
@media screen and (max-width: 1000px) {
  #main-contents .left-contents .post_archive_list-item__thum {
    height: 150px;
    width: 100%;
  }
}
@media screen and (max-width: 414px) {
  #main-contents .left-contents .post_archive_list-item__thum {
    height: 160px;
    width: 100%;
  }
}
#main-contents .left-contents .post-archive_list__box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
@media screen and (max-width: 414px) {
  #main-contents .left-contents .post-archive_list__box {
    display: block;
  }
}
#main-contents .left-contents .post_archive_list-item {
  padding: 24px 0;
  width: 48.5%;
}
@media screen and (max-width: 1000px) {
  #main-contents .left-contents .post_archive_list-item {
    width: 47%;
  }
}
@media screen and (max-width: 414px) {
  #main-contents .left-contents .post_archive_list-item {
    width: 100%;
  }
}
#main-contents .left-contents .post_archive_list-item .subhead {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 22px;
}
#main-contents .left-contents .label {
  display: inline;
  font-size: 75%;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
}
#main-contents .left-contents .label a {
  font-size: 10px;
  font-size: 0.625rem;
  font-weight: 700;
}
#main-contents .left-contents .label-success {
  padding: 2px 5px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
}
#main-contents .left-contents .desc {
  color: #000;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 28px;
  padding: 0.8rem 0;
}
#main-contents aside {
  width: 272px;
}
@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: 30px;
  font-size: 1.875rem;
  position: relative;
  margin: 0 0 12px;
  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: #0077B6;
  padding: 10px 0;
  text-align: right;
}

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

a {
  text-decoration: none;
  color: #555;
  font-size: 16px;
  font-size: 1rem;
  transition: 0.2s ease-in-out;
}
@media screen and (max-width: 1000px) {
  a {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
a.link {
  color: #0077B6;
  font-weight: normal;
  text-decoration: none;
}
a.link:hover {
  text-decoration: none;
  color: #375472;
}
a:hover {
  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 #ededed;
  content: "";
  position: absolute;
  transition: all 0.3s ease;
  display: block;
  width: 0;
  left: 0;
  bottom: 0;
}
a.txt-link:hover {
  transition: background-color 1s;
}
a.txt-link:hover:before {
  border-bottom: 1px solid #ededed;
  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: linear-gradient(transparent 70%, #fff100 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: flex;
  margin: 0 0 30px;
}
ul.article-data li a:hover {
  background: #ededed;
}
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 {
  background: #fff100;
  padding: 2px 15px;
  font-size: 14px;
  font-size: 0.875rem;
}
ul.post-categories li a:hover {
  background: #ededed;
}
ul.post-categories li:nth-child(n+5) {
  display: none;
}

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

a.btn {
  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: #375472;
}
a.btn:hover:after {
  border-color: #555;
  right: 30px;
}

/*pagination
---------------------------- */
#pagination {
  text-align: center;
  margin: 24px 0;
}
#pagination a,
#pagination span {
  background: #bfc0c0;
  border-color: #bfc0c0;
  color: #000;
}
#pagination a.current,
#pagination span.current {
  border-color: #000;
}

.wp-pagenavi {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/*----------------------------
共通項目
---------------------------- */
#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;
  }
}

/*----------------------------
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;
  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: 15px;
  font-size: 0.9375rem;
  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: normal;
  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 #ededed;
}
article section blockquote {
  background: #ededed;
  color: #000;
  margin: 3rem 0;
  padding: 40px;
  position: relative;
  order: 1;
}
article section blockquote.summary {
  background: #bfc0c0;
}
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: 15px;
  font-size: 0.9375rem;
  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: #d4d4d5;
  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: 4px 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: #0077B6;
  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: fot-tsukuardgothic-std, "Noto Sans JP", sans-serif;
  line-height: 1.2;
  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;
  }
}
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: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Helvetica Neue", Arial, 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: #d4d4d5 solid 1px;
  border-collapse: collapse;
  margin: 0 0 30px;
}
article table thead th {
  background: #F9F9F9;
  color: #000;
  font-weight: bold;
  padding: 8px;
  border-right: #d4d4d5 solid 1px;
  border-bottom: #d4d4d5 solid 1px;
}
article table thead th:last-child {
  border-right: #d4d4d5 solid 1px;
}
article table tbody th {
  background: #F9F9F9;
  color: #000;
  padding: 8px;
  border-bottom: #d4d4d5 solid 1px;
  vertical-align: top;
}
article table tbody tr:first-child {
  border-top: 1px solid #d4d4d5;
  border-left: 1px solid #d4d4d5;
}
article table tbody tr:nth-child(2n+1) {
  background: #F9F9F9;
}
article table tbody tr:last-child th {
  border-bottom: #d4d4d5 solid 1px;
}
article table tbody td {
  padding: 8px;
  border-left: #d4d4d5 solid 1px;
  border-bottom: #d4d4d5 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;
}
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 ul.toc_list li a {
  background: none;
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 2;
  font-weight: bold;
  color: #000;
  text-decoration: underline;
}
article #toc_container ul.toc_list li a:hover {
  text-decoration: none;
  color: #000;
}
article #toc_container ul.toc_list li a:visited {
  text-decoration: underline;
  color: #000;
}
@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 {
  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: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  margin: 0;
}
#main-contents .article-data-list ul.post-categories {
  position: inherit;
  width: auto;
  margin: 2px 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: 0.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 #bfc0c0;
  background: #bfc0c0;
  color: #fff;
}
#main-contents .article-data-list span.data {
  display: inline-block;
  margin: 0 10px 0 0;
}

#main-contents .left-contents time {
  color: #bfc0c0;
  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 0;
}

#main-contents .middle-contents .left-contents {
  max-width: 660px;
}
@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;
}
#main-contents .left-contents a {
  background: linear-gradient(transparent 94%, #0077B6 94%);
  color: #0077B6;
  font-weight: normal;
}
#main-contents .left-contents a:hover {
  background: linear-gradient(transparent 100%, #0077B6 100%);
  color: #375472;
}

/*----------------------------
前記事と次記事のリンク箇所の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 #ededed;
  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 #375472;
  background: #375472;
  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 #bfc0c0;
  border-right: 2px solid #bfc0c0;
  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 #bfc0c0;
  border-right: 2px solid #bfc0c0;
  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;
}

/*----------------------------
snsリストここから
---------------------------- */
#main-contents .left-contents .btn-sns-list ul {
  display: flex;
  margin: 0;
}
@media screen and (max-width: 1000px) {
  #main-contents .left-contents .btn-sns-list ul {
    flex-wrap: wrap;
    margin: 35px -10px 25px;
  }
}
@media screen and (max-width: 565px) {
  #main-contents .left-contents .btn-sns-list ul {
    margin: 35px -5px 25px 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(33.3333333333% - 20px);
  }
}
@media screen and (max-width: 565px) {
  #main-contents .left-contents .p-button-twitter {
    margin: 0 10px 10px 0;
    width: calc(33.3333333333% - 10px);
  }
}
#main-contents .left-contents .p-button-twitter a {
  background: #000;
  border: 2px solid #000;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  display: block;
  padding: 5px;
  transition: all 0.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: -12.5px 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: -10px 0 0;
  }
}
@media screen and (max-width: 565px) {
  #main-contents .left-contents .p-button-twitter a:before {
    left: 50%;
    margin: -10px 0 0 -10px;
  }
}
#main-contents .left-contents .p-button-twitter a:hover {
  background: #fff;
  color: #000;
  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: -12.5px 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: -10px 0 0;
  }
}
@media screen and (max-width: 565px) {
  #main-contents .left-contents .p-button-twitter a:hover:before {
    left: 50%;
    margin: -10px 0 0 -10px;
  }
}
#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(33.3333333333% - 20px);
  }
}
@media screen and (max-width: 565px) {
  #main-contents .left-contents .p-button-facebook {
    margin: 0 10px 10px 0;
    width: calc(33.3333333333% - 10px);
  }
}
#main-contents .left-contents .p-button-facebook a {
  background: #000;
  border: 2px solid #000;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  display: block;
  padding: 5px;
  transition: all 0.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: -12.5px 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: -10px 0 0;
  }
}
@media screen and (max-width: 565px) {
  #main-contents .left-contents .p-button-facebook a:before {
    left: 50%;
    margin: -10px 0 0 -10px;
  }
}
#main-contents .left-contents .p-button-facebook a:hover {
  background: #fff;
  color: #000;
  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: -12.5px 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: -10px 0 0;
  }
}
@media screen and (max-width: 565px) {
  #main-contents .left-contents .p-button-facebook a:hover:before {
    left: 50%;
    margin: -10px 0 0 -10px;
  }
}
#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(33.3333333333% - 20px);
  }
}
@media screen and (max-width: 565px) {
  #main-contents .left-contents .p-button-hatebu {
    margin: 0 10px 10px 0;
    width: calc(33.3333333333% - 10px);
  }
}
#main-contents .left-contents .p-button-hatebu a {
  background: #000;
  border: 2px solid #000;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  display: block;
  padding: 5px;
  transition: all 0.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: -12.5px 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: -10px 0 0;
  }
}
@media screen and (max-width: 565px) {
  #main-contents .left-contents .p-button-hatebu a:before {
    left: 50%;
    margin: -10px 0 0 -10px;
  }
}
#main-contents .left-contents .p-button-hatebu a:hover {
  background: #fff;
  color: #000;
  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: -12.5px 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: -10px 0 0;
  }
}
@media screen and (max-width: 565px) {
  #main-contents .left-contents .p-button-hatebu a:hover:before {
    left: 50%;
    margin: -10px 0 0 -10px;
  }
}/*# sourceMappingURL=single.css.map */