@charset "utf-8";
/* ========================================================
	blog.css => ページ用CSS
======================================================== */ :root {
      --font-color: #222222;
      /*	--font-size: 1rem;
	--font-size-sp: 0.8rem;*/
      --subt-color: #ffffff;
      --font-link-color: #12d8d3;
      --base-color1: #ffffff;
      --base-color2: #12d8d3;
      --bg-color1: #bcbcbc;
      --bg-color2: #cccccc;
      --bg-color3: #F8F5F3;
      --bg-color4: #fff;
      --line-color: #E5E5E5;
}
#container {
      /* color: #222222; */
}
.blog_contents {
      /*  margin-top: 4%;*/
      font-size: 80%;
}
.w1000 {
      position: relative;
      display: block;
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
}
@media screen and (max-width: 1200px) {
      .w1000 {
            width: auto;
            margin-right: 5vw;
            margin-left: 5vw;
      }
}
@media screen and (max-width: 768px) {
      .blog_contents {
            margin-top: 7%;
      }
}
/* blog_top_navi
============================================================================================================ */
.blog_top_navi {
      position: relative;
      display: flex;
}
.blog_top_navi:before {
      content: "";
      display: inline-block;
      width: 100vw;
      height: 100%;
      background: var(--base-color2);
      position: absolute;
      left: calc(-50vw + 50%);
      top: 0;
      z-index: -1;
}
.blog_top_navi.fix {
      position: fixed;
      /*top: 80px;*/
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
}
.blog_top_navi .new {
      padding: 1em 20px 1em 0;
}
.blog_top_navi .new a {
      color: #fff;
      font-size: 130%;
}
.blog_top_navi .category_list {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding: 1em 20px 1em 0;
}
.blog_top_navi .category_list li {
      position: relative;
}
.blog_top_navi .category_list li:first-child {
      display: none;
}
.blog_top_navi .category_list li:before {
      content: "";
      display: inline-block;
      width: 1px;
      height: 1em;
      background: var(--subt-color);
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
}
.blog_top_navi .category_list a {
      font-size: 130%;
      text-decoration: none;
      color: var(--subt-color);
      padding: 0 1em;
}
.blog_top_navi .search_box_icon {
      width: 19px;
      height: auto;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
}
.blog_top_navi .search_box_icon.open img {
      display: none;
}
.blog_top_navi .search_box_icon.open:before {
      content: "";
      display: inline-block;
      width: 2px;
      height: 20px;
      background: #fff;
      position: absolute;
      left: 7px;
      top: 50%;
      transform: translateY(-50%) rotate(-45deg);
}
.blog_top_navi .search_box_icon.open:after {
      content: "";
      display: inline-block;
      width: 2px;
      height: 20px;
      background: #fff;
      position: absolute;
      left: 7px;
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
}
.blog_top_navi .search_box_input {
      position: absolute;
      right: 0;
      background: var(--base-color2);
      border: none;
      margin: 0;
      top: 100%;
      z-index: 1000;
      padding: 20px 25px;
}
.blog_top_navi .search_box_input > div {
      display: block;
      width: 100%;
      white-space: nowrap;
}
.blog_top_navi input.search_box_field {
      /*font-size: 160%;*/
      font-size: 120%;
      margin: 0;
      vertical-align: middle;
      outline: none;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      border: none;
      width: 250px;
      padding: 0.4em 1em 0.3em;
      border-radius: 3em;
}
_:-ms-lang(x)::-ms-backdrop, .blog_top_navi input.search_box_field {
      padding-top: 0.6em;
      padding-bottom: 0.2em
}
.blog_top_navi input.search_box_btn {
      border: none;
      cursor: pointer;
      width: 20px;
      height: 20px;
      background: url("../images/blog/icon_search_white.svg") center center no-repeat;
      margin-left: 15px;
}
@media screen and (max-width: 768px) {
      .blog_top_navi {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
            background: var(--bg-color3);
            border-top: 1px solid var(--line-color);
            border-bottom: 1px solid var(--line-color);
            display: inline-block;
      }
      .blog_top_navi:before {
            content: none;
      }
      .blog_top_navi.fix {
            left: 0;
            transform: translateX(0);
      }
      .blog_top_navi .new {
            display: none;
      }
      .display_selectedItem {
            font-size: 140%;
            height: 40px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            padding-left: 5vw;
            position: relative;
      }
      .display_selectedItem:before {
            content: "";
            display: inline-block;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 12px 7px 0 7px;
            border-color: var(--base-color2) transparent transparent transparent;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            position: absolute;
            right: 75px;
            top: 50%;
      }
      .display_selectedItem.active:before {
            -webkit-transform: translateY(-50%) rotate(180deg);
            transform: translateY(-50%) rotate(180deg);
      }
      .blog_top_navi .category_list {
            display: block;
            width: auto;
            min-width: 70%;
            padding: 0;
            position: absolute;
            background: var(--bg-color3);
            border-top: 1px solid var(--line-color);
            z-index: 5;
      }
      .blog_top_navi .category_list li + li:before {
            content: none;
      }
      .blog_top_navi .category_list a {
            font-size: 130%;
            color: var(--link-color);
            padding: 0.5em 5vw;
            display: block;
            border-bottom: 1px solid var(--line-color);
      }
      .blog_top_navi .category_list li:nth-child(2) a {
            padding: 0.5em 5vw;
      }
      .blog_top_navi .search_box_icon {
            background: var(--base-color2);
            top: 0;
            transform: translateY(0);
            width: 60px;
            height: 40px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
      }
      .blog_top_navi .search_box_icon img {
            width: 19px;
            height: auto;
      }
      .blog_top_navi .search_box_icon.open:before, .blog_top_navi .search_box_icon.open:after {
            left: 50%;
      }
      .blog_top_navi .search_box_input {
            width: 100vw;
            right: calc(-50vw + 50%);
            padding: 10px 5vw;
      }
      .blog_top_navi input.search_box_field {
            width: -webkit-calc(100% - 20px - 5vw);
            width: calc(100% - 20px - 5vw);
            font-size: 130%;
            padding: 0.6em 1.2em;
      }
}
/* blog title
============================================================================================================ */
.title_blog_l {
      font-size: 300%;
      font-weight: bold;
      text-align: center;
      /*    margin: 1.75em 0 0.5em;*/
      margin: 0em 0 0.5em;
}
.title_blog_m {
      font-size: 220%;
      font-weight: bold;
      margin: 1.5em 0 1em;
      position: relative;
}
.title_blog_m:before {
      content: "";
      display: inline-block;
      width: 100%;
      height: 1px;
      background: var(--line-color);
      position: absolute;
      left: 0;
      top: 50%;
}
.title_blog_m span {
      position: relative;
      z-index: 2;
      background: var(--base-color1);
      padding-right: 0.5em;
}
.title_blog_s {
      font-size: 200%;
      font-weight: bold;
      margin-bottom: 0.5em;
      margin-top: 2em;
}
.blog_side > div:first-child .title_blog_s:nth-of-type(1) {
      margin-top: 0;
}
.blog_catch {
      font-size: 180%;
      text-align: center;
      margin-bottom: 3em;
}
@media screen and (max-width: 768px) {
      .title_blog_l {
            font-size: 240%;
            margin-top: 1em;
      }
      .blog_catch {
            font-size: 160%;
      }
      .title_blog_m {
            margin: 1em 0 0.5em;
      }
      .title_blog_m:before {
            content: none;
      }
      .title_blog_m.title_blog_m_sp_line:before {
            content: "";
            display: inline-block;
            width: 100%;
            height: 1px;
            background: #a9adac;
            position: absolute;
            left: 0;
            top: 50%;
      }
      .title_blog_s {
            font-size: 220%;
            margin-top: 1em;
      }
      .blog_side > div:first-child .title_blog_s:nth-of-type(1) {
            margin-top: 1em;
      }
}
/* blog col
============================================================================================================ */
.blog_3col, .blog_4col {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.blog_3col > li, .blog_3col > div, .blog_3col > article {
      width: 31%;
      margin-bottom: 3%;
}
.blog_3col:after {
      content: "";
      display: block;
      width: 31%;
}
.blog_4col > li, .blog_4col > div, .blog_4col > article {
      width: 22.3%;
      margin-bottom: 3%;
}
.blog_4col:before {
      content: "";
      display: block;
      width: 22.3%;
      order: 1;
}
.blog_4col:after {
      content: "";
      display: block;
      width: 22.3%;
}
@media screen and (max-width: 768px) {
      .blog_3col > li, .blog_3col > div, .blog_3col > article {
            width: 100%;
            margin-bottom: 7%;
      }
      .blog_3col:after {
            content: none;
      }
      .blog_4col > li, .blog_4col > div, .blog_4col > article {
            width: 47%;
            margin-bottom: 7%;
      }
      .blog_4col:before, .blog_4col:after {
            content: none;
      }
}
/* blog list
============================================================================================================ */
.blog_3col a, .blog_4col a {
      color: var(--font-color);
      text-decoration: none;
      display: block;
}
.blog_image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
}
.blog_cate {
      display: inline-block;
      font-size: 130%;
      line-height: 1.5;
      border: 1px solid var(--font-color);
      border-radius: 2em;
      padding: 0.2em 1em 0.1em;
      margin: 1.1em 0 1em;
}
_:-ms-lang(x)::-ms-backdrop, .blog_cate {
      padding-top: 0.4em;
      padding-bottom: 0
}
.blog_title {
      font-size: 160%;
      font-weight: bold;
      line-height: 1.5;
}
.blog_date {
      font-size: 130%;
      margin-top: 0.5em;
}
.blog_3col .blog_image {
      width: 100%;
      height: 233px;
}
.blog_3col .blog_title {
      font-size: 180%;
}
.blog_4col .blog_image {
      width: 100%;
      height: 167px;
}
@media screen and (max-width: 1200px) {
      .blog_3col .blog_image {
            width: 100%;
            height: 20vw;
      }
      .blog_4col .blog_image {
            width: 100%;
            height: 15vw;
      }
}
@media screen and (max-width: 768px) {
      .blog_3col .blog_image {
            width: 100%;
            height: 67vw;
      }
      .blog_4col .blog_image {
            width: 100%;
            height: 31vw;
      }
}
/* recommend_area
============================================================================================================ */
.recommend_area {
      position: relative;
      padding: 30px 0 10px;
}
.recommend_area:before {
      content: "";
      display: inline-block;
      width: 100vw;
      height: 100%;
      background: var(--bg-color4);
      position: absolute;
      left: calc(-50vw + 50%);
      top: 0;
      z-index: -1;
}
.recommend_area .title_blog_m {
      margin-top: 0;
}
.recommend_area .title_blog_m:before {
      content: none;
}
.recommend_area .title_blog_m span {
      background: none;
}
/* rank_area
============================================================================================================ */
.rank_area_top {
      margin-bottom: 7%;
}
.rank_area_top > div {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
}
.rank_area_top .tab-btn {
      cursor: default !important;
}
.rank_area_top > div > p, .rank_area_top > div > div {
      width: 47.6%;
}
.rank_area_top .rank_area_title span {
      display: inline-block;
      font-size: 160%;
      font-weight: bold;
      border-bottom: 2px solid var(--font-color);
      margin-bottom: 2em;
}
.rank_area .btn-area {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      border-bottom: 2px solid var(--base-color2);
}
.rank_area .rank_area_title {
      background: var(--bg-color2);
      width: 50%;
}
.rank_area .rank_area_title.active {
      background: var(--base-color2);
}
.rank_area .rank_area_title span {
      display: block;
      font-size: 160%;
      font-weight: bold;
      text-align: center;
      color: var(--subt-color);
      padding: 0.4em 0 0.2em;
}
_:-ms-lang(x)::-ms-backdrop, .rank_area .rank_area_title span {
      padding-top: 0.5em;
      padding-bottom: 0.1em
}
.rank_area .panel-area {
      background: var(--bg-color4);
      padding: 10% 7%;
      border-bottom: 2px solid var(--base-color2);
}
.rank_list {
      counter-reset: rankcount 0;
}
.rank_list > li {
      position: relative;
}
.rank_list > li:before {
      content: counter(rankcount);
      counter-increment: rankcount 1;
      position: absolute;
      left: 3px;
      top: 2px;
      color: #fff;
      /*    font-family: 'Poppins', sans-serif;*/
      font-size: 1.5rem;
      line-height: 1;
      z-index: 2;
}
.rank_list > li:first-child:before {
      left: 4px;
}
.rank_area_top .rank_list > li:before {
      left: 5px;
      top: 5px;
}
.rank_area_top .rank_list > li:first-child:before {
      left: 6px;
}
.rank_list li + li {
      margin-top: 10%;
}
.rank_area_top .rank_list li + li {
      margin-top: 6%;
}
.rank_list li a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      text-decoration: none;
      position: relative;
}
.rank_list li a .blog_image:before {
      content: "";
      display: inline-block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 30px 30px 0 0;
      border-color: #0E357F transparent transparent transparent;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
}
.rank_area_top .rank_list li a .blog_image:before {
      border-width: 40px 40px 0 0;
}
.rank_list li:first-child a .blog_image:before {
      border-color: #A9862A transparent transparent transparent;
}
.rank_list li:nth-child(2) a .blog_image:before {
      border-color: #8C99A7 transparent transparent transparent;
}
.rank_list li:nth-child(3) a .blog_image:before {
      border-color: #AB5C23 transparent transparent transparent;
}
.rank_area_top .rank_list li a .blog_image {
      width: 102px;
      height: 102px;
}
.rank_area_top .rank_list li a > div {
      width: -webkit-calc(100% - 102px - 6%);
      width: calc(100% - 102px - 6%);
}
.rank_list li a > div .blog_cate {
      margin-top: 0;
}
.rank_area .rank_list li a .blog_image {
      width: 61px;
      height: 61px;
}
.rank_area .rank_list li a > div {
      width: -webkit-calc(100% - 61px - 7%);
      width: calc(100% - 61px - 7%);
}
.rank_area .rank_list li a > div .blog_cate {
      display: none;
}
.rank_area .rank_list li a > div .blog_title {
      font-size: 140%;
      line-height: 1.45;
}
@media screen and (max-width: 768px) {
      .rank_area_top, .rank_area {
            width: 100vw;
            margin-left: calc(-50vw + 50%);
            margin-right: calc(-50vw + 50%);
      }
      .rank_area_top > div {
            border-bottom: 2px solid #222222;
      }
      .rank_area_top > div > p {
            width: 50%;
      }
      .rank_area_top > div > div {
            width: 100%;
      }
      .rank_area_top .rank_area_title {
            background: #D1D1D1;
      }
      .rank_area_top .rank_area_title.active {
            background: #222222;
      }
      .rank_area_top .rank_area_title span, .rank_area .rank_area_title span {
            display: block;
            font-size: 150%;
            border-bottom: none;
            margin-bottom: 0;
            text-align: center;
            color: var(--subt-color);
            padding: 0.6em 0 0.4em;
      }
      .rank_area_top .panel-area, .rank_area .panel-area {
            background: var(--bg-color3);
            padding: 7% 5vw;
      }
      .rank_area_top .rank_list li a .blog_image, .rank_area .rank_list li a .blog_image {
            width: 78px;
            height: 78px;
      }
      .rank_area_top .rank_list li a > div, .rank_area .rank_list li a > div {
            width: -webkit-calc(100% - 78px - 6%);
            width: calc(100% - 78px - 6%);
      }
      .rank_area_top .rank_list li a > div .blog_cate, .rank_area .rank_list li a > div .blog_cate {
            padding: 0.1em 1em 0em;
            margin-bottom: 0.75em;
      }
      .rank_area_top .rank_list li a > div .blog_title, .rank_area .rank_list li a > div .blog_title {
            font-size: 160%;
            line-height: 1.45;
      }
      .rank_area_top .rank_list li a .blog_image:before, .rank_area .rank_list li a .blog_image:before {
            border-width: 30px 30px 0 0;
      }
      .rank_area_top .rank_list > li:before, .rank_area .rank_list > li:before {
            left: 3px;
            top: 2px;
      }
      .rank_area_top .rank_list > li:first-child:before, .rank_area .rank_list > li:first-child:before {
            left: 4px;
      }
}
/* tab
============================================================================================================ */
.tab-box .tab-btn, .tab-box-sp .tab-btn {
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      transition: all 0.2s ease 0s;
}
.tab-box .tab-panel, .tab-box-sp .tab-panel {
      display: none;
}
.tab-box .tab-panel.active, .tab-box-sp .tab-panel.active {
      display: block;
}
@media screen and (min-width: 769px) {
      .tab-box-sp .tab-panel {
            display: block;
      }
}
/* blog_list_area
============================================================================================================ */
.blog_list_area {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
}
.blog_list_area .blog_main {
      width: 70.3%;
}
.blog_list_area .blog_side {
      width: 25%;
      font-size: 90%;
      margin-bottom: 5%;
}
.blog_list {
      margin-bottom: 5%;
}
.blog_list a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      text-decoration: none;
      padding: 5% 0;
      border-bottom: 1px solid var(--line-color);
      position: relative;
	gap:0 1em;
}
.blog_list article:first-child a {
      padding-top: 0;
}
.blog_list a .blog_image {
      width: 23.9%;
      position: relative;
}
.blog_3col a .blog_image, .blog_4col a .blog_image {
      position: relative;
}
.blog_list a div {
      width: 71.8%;
}
.blog_list a .blog_title {
      font-size: 220%;
}
.blog_list a .blog_cate {
      margin-top: 0;
}
.blog_list a .new, .blog_3col a .new, .blog_4col a .new {
      font-family: 'Roboto', sans-serif;
      font-size: 1.2rem;
      color: #fff;
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
}
.blog_list a .new span, .blog_3col a .new span, .blog_4col a .new span {
      display: inline-block;
      transform: rotate(-40deg);
      position: relative;
      left: 2px;
      top: 3px;
}
.blog_list a .new:before, .blog_3col a .new:before, .blog_4col a .new:before {
      content: "";
      display: inline-block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 40px 40px 0 0;
      border-color: #C1272D transparent transparent transparent;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
}
@media screen and (max-width: 768px) {
      .blog_list_area {
            display: block;
      }
      .blog_list_area .blog_main {
            width: 100%;
      }
      .blog_list_area .blog_side {
            width: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
            margin-bottom: 0;
      }
      .blog_list {
            margin-bottom: 10%;
      }
      .blog_list a .blog_image {
            width: 47.8%;
      }
      .blog_list a div {
            /*width: 47.8%;*/
      }
      .blog_list a .blog_title {
            font-size: 160%;
            line-height: 1.3;
      }
}
/* pagination
============================================================================================================ */
/*.pagination {
      margin: 5% 0 10%;
}
.wp-pagenavi {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
}
.wp-pagenavi span, .wp-pagenavi a {
      display: block;
      font-size: 140%;
      line-height: 1;
      font-weight: bold;
      text-align: center;
      text-decoration: none;
      padding: 7px 0;
      margin: 0 5px;
      min-height: 30px;
      position: relative;
}
.wp-pagenavi span:hover, .wp-pagenavi a:hover {
color: #fff!important;	
}
.pagination .wp-pagenavi a {
      color: inherit !important;
}
.wp-pagenavi a.first, .wp-pagenavi a.last {
      color: var(--base-color2) !important;
	border:none!important;
}
.wp-pagenavi a.first:hover, .wp-pagenavi a.last:hover {
      color: var(--base-color1) !important;
	border:none!important;
}
.extend {
      border: none !important;
}
.wp-pagenavi a {
      background: var(--bg-color3);
      border-radius: 2px;
      width: 30px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
      border-color: transparent!important;
	color: #fff;
}
.wp-pagenavi a:not(.page) {
      color: transparent;
}
.wp-pagenavi span.current, .wp-pagenavi a.current {
      display: block;
      color: var(--subt-color);
      background: var(--base-color2);
      border-radius: 2px;
      width: 30px;
}
.wp-pagenavi .nextpostslink::after, .wp-pagenavi .previouspostslink:after {
      border-bottom: none !important;
      border-right: none !important;
      border-left: none !important;
}
.wp-pagenavi .previouspostslink, .wp-pagenavi .nextpostslink {
      background: none;
}
.wp-pagenavi .previouspostslink:after, .wp-pagenavi .nextpostslink:after {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 50%;
}
.wp-pagenavi .previouspostslink:after {
      right: 1em;
      border-bottom: 2px solid var(--font-color);
      border-left: 2px solid var(--font-color);
      -webkit-transform: rotate(45deg) translateY(-50%);
      transform: rotate(45deg) translateY(-50%);
}
.wp-pagenavi .nextpostslink:after {
      left: 1em;
      border-bottom: 2px solid var(--font-color);
      border-right: 2px solid var(--font-color);
      -webkit-transform: rotate(-45deg) translateY(-50%);
      transform: rotate(-45deg) translateY(-50%);
}
@media screen and (max-width: 768px) {
      .pagination {
            margin: 10% 0 10%;
      }
}*/
/* new_list
============================================================================================================ */
.new_list li + li {
      margin-top: 10%;
}
.new_list li a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      text-decoration: none;
      position: relative;
}
.new_list li a .blog_image {
      width: 61px;
      height: 61px;
}
.new_list li a > div {
      width: -webkit-calc(100% - 61px - 7%);
      width: calc(100% - 61px - 7%);
}
.new_list li a .blog_title {
      font-size: 140%;
}
.side_text_link {
      font-size: 130%;
      text-align: right;
      margin-top: 1em;
}
.side_text_link a {
      text-decoration: underline;
      color: #0071BC;
}
@media screen and (max-width: 768px) {
      .new_list li a .blog_image {
            width: 78px;
            height: 78px;
      }
      .new_list li a div {
            width: -webkit-calc(100% - 78px - 6%);
            width: calc(100% - 78px - 6%);
      }
      .new_list li a .blog_title {
            font-size: 160%;
            line-height: 1.3;
      }
      .side_text_link {
            margin-bottom: 1em;
      }
}
/* side_search_box
============================================================================================================ */
.side_search_box {
      margin: 15% 0;
      position: relative;
}
.side_search_box > div {
      display: block;
      width: 100%;
      color: #000;
      white-space: nowrap;
}
.side_search_box input.search_box_btn {
      border: none;
      cursor: pointer;
      width: 17px;
      height: 17px;
      background: url(../images/blog/icon_search_black.svg) center center no-repeat;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
}
.side_search_box input.search_box_field {
      margin: 0;
      vertical-align: middle;
      outline: none;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      border: none;
      background: var(--bg-color3);
      width: 100%;
      padding: 0.85em 30px 0.75em 1em;
      border-radius: 4px;
      font-size: 130%;
}
_:-ms-lang(x)::-ms-backdrop, .side_search_box input.search_box_field {
      padding-top: 0.95em;
      padding-bottom: 0.65em
}
@media screen and (max-width: 768px) {
      .side_search_box {
            margin: 5% 0;
      }
}
/* side_category_list
============================================================================================================ */
.side_category_list {
      border-top: 1px solid var(--line-color);
}
.side_category_list li a {
      display: block;
      font-size: 140%;
      text-decoration: none;
      padding: 0.6em 0 0.5em;
      border-bottom: 1px solid var(--line-color);
}
@media screen and (max-width: 768px) {
      .side_category_list {
            margin-bottom: 5%;
      }
}
/* blog_page_top
============================================================================================================ */
.blog_page_top {
      position: relative;
}
.blog_page_top .blog_cate {
      margin-top: 0;
}
.blog_page_top .blog_date {
      font-size: 160%;
      margin-top: 0;
      position: absolute;
      right: 0;
      top: 0;
}
.blog_page_top h1 {
      font-size: 300%;
      font-weight: bold;
      line-height: 1.5;
      margin-bottom: 1em;
}
.sns {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end;
      margin: 2em 0;
}
.sns > p + p, .sns > li + li {
      margin-left: 20px;
}
.sns img {
      width: 100%;
      height: 35px;
}
@media screen and (max-width: 768px) {
      .blog_page_top .blog_date {
            font-size: 150%;
      }
      .blog_page_top h1 {
            font-size: 240%;
            line-height: 1.4;
      }
}
/* blog_text
============================================================================================================ */
.blog_text {
      font-size: 130%;
      margin-bottom: 60px;
}
.blog_text p {
      margin-bottom: 1em;
}
.blog_text h2 {
      font-size: 144%;
      font-weight: bold;
      line-height: 1.38;
      color: var(--subt-color);
      background: var(--base-color2);
      padding: 0.4em 0.5em 0.3em;
      margin-top: 2.5em;
      margin-bottom: 1em;
}
_:-ms-lang(x)::-ms-backdrop, .blog_text h2 {
      padding-top: 0.6em;
      padding-bottom: 0.2em
}
.blog_text h3 {
      font-size: 140%;
      font-weight: bold;
      line-height: 1.4;
      padding-bottom: 0.4em;
      border-bottom: 2px solid var(--base-color2);
      margin-top: 2em;
      margin-bottom: 1em;
}
.blog_text h4 {
      font-size: 120%;
      font-weight: bold;
      line-height: 1.45;
      padding-left: 1em;
      border-left: 2px solid var(--base-color2);
      margin-top: 2em;
      margin-bottom: 1em;
}
.blog_text h5 {
      font-size: 100%;
      font-weight: bold;
      line-height: 1.5;
      margin-top: 2em;
      margin-bottom: 1em;
}
.blog_text table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      line-height: 1.6;
      table-layout: fixed;
      border: 1px solid var(--line-color);
      margin: 1em 0;
}
.blog_text table th, .blog_text table td {
      padding: 0.3em 1em;
      word-wrap: break-word;
      border: 1px solid var(--line-color);
}
_:-ms-lang(x)::-ms-backdrop, .blog_text table th {
      padding-top: 0.5em;
      padding-bottom: 0.2em
}
_:-ms-lang(x)::-ms-backdrop, .blog_text table td {
      padding-top: 0.5em;
      padding-bottom: 0.2em
}
.blog_text ul {
      width: 93%;
      margin: 0 auto 1em;
}
.blog_text ul > li {
      position: relative;
      padding-left: 1em;
      margin: 0.3em 0;
}
.blog_text ul > li:before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      background: var(--base-color2);
      border-radius: 50%;
      position: absolute;
      top: 0.6em;
      left: 0;
}
.blog_text ol {
      width: 93%;
      margin: 0 auto 1em;
      counter-reset: count 0;
}
.blog_text ol > li {
      position: relative;
      padding-left: 1.5em;
      margin: 0.3em 0;
}
.blog_text ol > li:before {
      content: "";
      display: inline-block;
      width: 1.9rem;
      height: 1.9rem;
      background: var(--base-color2);
      border-radius: 50%;
      position: absolute;
      left: 0;
      top: 0.4em;
}
.blog_text ol > li:after {
      content: counter(count);
      counter-increment: count 1;
      font-size: 1.2rem;
      color: var(--subt-color);
      position: absolute;
      left: 6px;
      top: 5px;
}
_:-ms-lang(x)::-ms-backdrop, .blog_text ol > li:before {
      top: 0.2em
}
#toc_container {
      /* background: var(--bg-color4) !important; */
      padding: 4% 5% !important;
      margin: 3em 0 !important;
      border: none !important;
      display: block !important;
}
#toc_container .toc_title {
      font-size: 130%;
      font-weight: bold;
      text-align: left !important;
}
#toc_container .toc_list {
      font-size: 95%;
      width: 100%;
      margin: 0;
}
#toc_container .toc_list li {
      padding-left: 0;
      margin: 0;
}
#toc_container .toc_list li:before {
      content: none;
}
#toc_container .toc_list li + li {
      margin-top: 1em;
}
#toc_container a {
      text-decoration: underline !important;
}
#toc_container a:hover {
      text-decoration: none !important;
}
.blog_text blockquote {
      border: 1px solid var(--line-color);
      padding: 30px 65px;
      position: relative;
      margin-bottom: 1em;
}
.blog_text blockquote:before, .blog_text blockquote:after {
      content: "";
      display: inline-block;
      width: 25px;
      height: 20px;
      background: url("../images/blog/mark_blockquote.svg") no-repeat;
      background-size: 100% auto;
      position: absolute;
}
.blog_text blockquote:before {
      top: 22px;
      left: 22px;
}
.blog_text blockquote:after {
      bottom: 22px;
      right: 22px;
      transform: rotate(-180deg);
}
.blog_text blockquote p:last-child {
      margin-bottom: 0;
}
.blog_text .reference {
      border: 1px solid var(--line-color);
      padding: 25px;
      margin-bottom: 1em;
}
.blog_text .reference strong {
      font-size: 100%;
}
.blog_text .reference ul {
      width: 100%;
      margin: 0;
}
.blog_text .reference ul > li {
      position: relative;
      font-size: 90%;
      padding-left: 1em;
      margin: 0.3em 0;
}
.blog_text .reference ul > li a {
      color: var(--link-color);
      text-decoration: underline;
}
.blog_text .reference ul > li:before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      background: var(--base-color2);
      border-radius: 50%;
      position: absolute;
      top: 0.7em;
      left: 0;
}
.blog_text .banner {
      margin: 3em auto;
}
.floating_banner {
      max-width: 250px;
      position: fixed;
      bottom: 60px;
      right: 20px;
      z-index: 100;
      display: none;
}
.floating_banner img{
	border-radius: 1em;
	filter: drop-shadow(0 0 0.75rem rgba(000,000,000,0.2));
}
.floating_banner a {
      display: block;
}
.floating_banner p {
      margin-bottom: 0;
}
.floating_banner p.close {
      position: absolute;
      left: -16px;
      top: -16px;
}
.floating_banner p.close img {
      vertical-align: top;
}
.floating_banner p.close a {
      display: block;
      width: 45px;
      height: 45px;
      padding: 10px;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
}
@media screen and (max-width: 768px) {
      #toc_container .toc_title {
            margin-bottom: 0.5em;
      }
      .blog_text blockquote {
            padding: 15px 50px;
      }
      .blog_text blockquote:before {
            top: 10px;
            left: 15px;
      }
      .blog_text blockquote:after {
            bottom: 10px;
            right: 15px;
      }
      .blog_text .reference > p {
            margin-bottom: 0.5em;
      }
      .blog_text .reference {
            padding: 4% 5%;
      }
      .floating_banner {
            max-width: 90vw;
            bottom: 30px;
            right: inherit;
            left: 5vw;
      }
      .floating_banner p.close a {
            width: 43px;
            height: 43px;
      }
	.floating_banner img{
	border-radius: 2.7em;

}
}
@media screen and (max-width: 680px) {
		.floating_banner img{
	border-radius: 1.7em;

}
}
/* author_box
============================================================================================================ */
.author_box {
      padding: 25px;
      background: var(--bg-color4);
      margin: 2em 0;
}
.author_box > p {
      font-size: 220%;
      font-weight: bold;
      margin-bottom: 1em;
}
.author_box > div {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
}
.author_box .photo_icon {
      width: 130px;
}
.author_box .photo_icon img {
      width: 130px;
      height: 130px;
      border-radius: 50%;
	    object-position: top;
}
.author_box > div > div {
      width: -webkit-calc(100% - 160px);
      width: calc(100% - 160px);
      font-size: 140%;
}
.author_box .name {
      font-size: 140%;
      font-weight: bold;
      margin-bottom: 1em;
}
.author_box .name span {
      font-size: 75%;
      font-weight: normal;
      display: block;
}
@media screen and (max-width: 768px) {
      .author_box {
            padding: 4% 5%;
      }
      .author_box > div {
            display: block;
      }
      .author_box .photo_icon {
            margin: auto;
      }
      .author_box > div > div {
            width: 100%;
      }
      .author_box .name {
            text-align: center;
            margin-top: 0.5em;
            margin-bottom: 0.5em;
      }
}
/* bottom_blog_list
============================================================================================================ */
.blog_main article + aside {
      margin-top: 60px;
}
.bottom_blog_list {
      margin-bottom: 7%;
}
.bottom_blog_list li a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      text-decoration: none;
}
.bottom_blog_list li a .blog_image {
      width: 61px;
      height: 61px;
}
.bottom_blog_list .blog_title {
      width: -webkit-calc(100% - 61px - 7%);
      width: calc(100% - 61px - 7%);
      font-size: 140%;
      font-weight: bold;
}
@media screen and (max-width: 768px) {
      .bottom_blog_list li {
            margin-bottom: 6%;
      }
      .bottom_blog_list li a .blog_image {
            width: 78px;
            height: 78px;
      }
      .bottom_blog_list .blog_title {
            width: -webkit-calc(100% - 78px - 6%);
            width: calc(100% - 78px - 6%);
            font-size: 160%;
      }
}