@charset "UTF-8";
@import url("//fonts.googleapis.com/css?family=Oswald:400,500,600");
@import url("//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("//fonts.googleapis.com/css?family=Lato:400,700,900|Open+Sans:700,800");
@import url("modaal.css");
@import url("scrolltabs.css");
@import url("loading.css");
@keyframes bodyFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes bodyFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes SlideUp {
  0% {
    opacity: 0;
    /* 透明 */
    -webkit-transform: translateY(36px);
            transform: translateY(36px);
    /* Y軸方向に50px */
  }
  100% {
    opacity: 1;
    /* 不透明 */
    -webkit-transform: translateY(0);
            transform: translateY(0);
    /* Y軸方向に0px */
  }
}

@keyframes SlideUp {
  0% {
    opacity: 0;
    /* 透明 */
    -webkit-transform: translateY(36px);
            transform: translateY(36px);
    /* Y軸方向に50px */
  }
  100% {
    opacity: 1;
    /* 不透明 */
    -webkit-transform: translateY(0);
            transform: translateY(0);
    /* Y軸方向に0px */
  }
}

@-webkit-keyframes TopSlideUp {
  0% {
    opacity: 0;
    /* 透明 */
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    /* Y軸方向に50px */
  }
  100% {
    opacity: 1;
    /* 不透明 */
    -webkit-transform: translateY(0);
            transform: translateY(0);
    /* Y軸方向に0px */
  }
}

@keyframes TopSlideUp {
  0% {
    opacity: 0;
    /* 透明 */
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    /* Y軸方向に50px */
  }
  100% {
    opacity: 1;
    /* 不透明 */
    -webkit-transform: translateY(0);
            transform: translateY(0);
    /* Y軸方向に0px */
  }
}

@-webkit-keyframes zoom-in {
  0% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes zoom-in {
  0% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@-webkit-keyframes rotate-right {
  0% {
    -webkit-transform: translate(-100%) rotate(-100deg);
            transform: translate(-100%) rotate(-100deg);
  }
  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes rotate-right {
  0% {
    -webkit-transform: translate(-100%) rotate(-100deg);
            transform: translate(-100%) rotate(-100deg);
  }
  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 4%, 0);
    transform: translate3d(0, 4%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 4%, 0);
    transform: translate3d(0, 4%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@-ms-viewport {
  width: device-width;
}

article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  font-size: 100%;
  font-weight: normal;
  line-height: 1.6;
  color: #000;
  text-align: left;
  background-color: #fff;
}

[tabindex="-1"]:focus {
  outline: none !important;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 10px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: normal;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

dfn {
  font-style: italic;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

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

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color: #107c9c;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:hover {
  color: #107c9c;
  text-decoration: underline;
}

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

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
summary,
textarea {
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 10px;
  padding-bottom: 10px;
  color: #333;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: .5rem;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

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

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

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

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

/*
Zarigani Design Office Drawer Menu
Copyright 2018 Zarigani Design Office

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.zdo_drawer_menu {
  display: none;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .zdo_drawer_menu {
    display: block;
  }
  .zdo_drawer_menu * {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    font: inherit;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: left;
    text-decoration: none;
    list-style: none;
  }
  .zdo_drawer_menu a {
    color: inherit;
    text-decoration: none;
  }
  .zdo_drawer_menu a:visited {
    color: inherit;
  }
  .zdo_drawer_menu .zdo_drawer_bg {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    background-color: rgba(51, 51, 51, 0.5);
    display: none;
    top: 0;
    left: 0;
  }
  .zdo_drawer_menu .zdo_drawer_button {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0;
    width: 60px;
    height: 34px;
    cursor: pointer;
    position: fixed;
    top: 18px;
    right: 0px;
    z-index: 1001;
    outline: none;
    text-align: right;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 5px 0px 0px 5px / 5px 0px 0px 5px;
  }
  .zdo_drawer_menu .zdo_drawer_button .zdo_drawer_bar1 {
    width: 26.6px;
    top: 0;
    right: 2px;
  }
  .zdo_drawer_menu .zdo_drawer_button .zdo_drawer_bar2 {
    width: 21.7px;
    top: 8.4px;
    right: 2px;
  }
  .zdo_drawer_menu .zdo_drawer_button .zdo_drawer_bar3 {
    width: 16.8px;
    top: 16px;
    right: 2px;
  }
  .zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_bar1 {
    -webkit-transform: translate3d(0, 8px, 0) rotate(-45deg);
            transform: translate3d(0, 8px, 0) rotate(-45deg);
    width: 28px;
  }
  .zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_bar2 {
    opacity: 0;
  }
  .zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_bar3 {
    -webkit-transform: translate3d(0, -8px, 0) rotate(45deg);
            transform: translate3d(0, -8px, 0) rotate(45deg);
    width: 29px;
  }
  .zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_menu_text {
    display: none;
  }
  .zdo_drawer_menu .zdo_drawer_button.active .zdo_drawer_close {
    display: block;
  }
  .zdo_drawer_menu .zdo_drawer_bar {
    display: block;
    height: 2.8px;
    margin: 8px 0;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  .zdo_drawer_menu .zdo_drawer_text {
    text-align: center;
    font-size: 10px;
  }
  .zdo_drawer_menu .zdo_drawer_close {
    letter-spacing: 0.08em;
    display: none;
  }
  .zdo_drawer_menu .zdo_drawer_menu_text {
    display: block;
  }
  .zdo_drawer_menu .zdo_drawer_nav_wrapper {
    width: 312px;
    display: block;
    height: 100%;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform: translate(312px);
            transform: translate(312px);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    background-color: #FFF;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .zdo_drawer_menu .zdo_drawer_nav_wrapper.open {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  .zdo_drawer_menu .zdo_drawer_nav_wrapper p.nav_logo {
    margin: 20px 0 0 20px;
    width: 200px;
  }
  .zdo_drawer_menu .zdo_drawer_nav_wrapper p.nav_logo img {
    width: 100%;
  }
  .zdo_drawer_menu .zdo_drawer_nav_wrapper .search-form--SP {
    margin: 40px 0 35px 0px;
  }
  .zdo_drawer_menu .zdo_drawer_nav_wrapper .search-form--SP .header__tool {
    display: block !important;
  }
  .zdo_drawer_menu .zdo_drawer_nav_wrapper .search-form--SP .header__tool form {
    display: block;
    max-width: 280px;
    position: relative;
    background: url(../images/search_ico.png) no-repeat 99% 50%;
    background-size: 15px auto;
  }
  .zdo_drawer_menu .zdo_drawer_nav_wrapper .search-form--SP .header__tool form::before {
    content: "";
    width: 90%;
    height: 2px;
    position: absolute;
    background: #1b1b1b;
    background: -webkit-gradient(linear, left top, right top, from(#1b1b1b), color-stop(88%, #4e4e4e), color-stop(97%, white));
    background: linear-gradient(to right, #1b1b1b 0%, #4e4e4e 88%, white 97%);
    top: 100%;
    left: 25px;
  }
  .zdo_drawer_menu .zdo_drawer_nav_wrapper .search-form--SP .header__tool form input {
    background: transparent;
    border: none;
    width: 100%;
    line-height: 0.8rem;
    font-size: 0.9rem;
    margin-left: 30px;
    margin-bottom: 5px;
  }
  .zdo_drawer_menu.left .zdo_drawer_button {
    right: auto;
    left: 32px;
  }
  .zdo_drawer_menu.left .zdo_drawer_nav_wrapper {
    -webkit-transform: translate(-312px);
            transform: translate(-312px);
    right: auto;
    left: 0;
  }
  .zdo_drawer_menu.left .zdo_drawer_nav_wrapper.open {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  /*+++ Default Navigation CSS +++*/
  .zdo_drawer_menu p {
    margin: 0;
    padding: 0;
    line-height: 1.1;
    position: relative;
    z-index: 2;
  }
  .zdo_drawer_menu .zdo_drawer_nav {
    padding-bottom: 50px;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.open_menu {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    position: relative;
    text-indent: 1.8rem;
    margin-left: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    width: 100%;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.open_menu::before {
    content: "";
    width: 0.9rem;
    height: 1px;
    margin-right: 0px;
    position: absolute;
    background: #000;
    top: 1.5rem;
    left: 25px;
    z-index: 1;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.open_menu::after {
    font-weight: 400;
    font-size: 1.1rem;
    content: "＋";
    display: block;
    width: 1px;
    height: 1px;
    position: absolute;
    top: 0.6rem;
    right: 70px;
    cursor: pointer;
    z-index: 1;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.open_menu a {
    padding: 12px 0px 12px 20px;
    display: block;
    z-index: 111000;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.open_menu a span {
    font-family: "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
    font-size: 0.72rem;
    padding: 8px 0px 0 4px;
    font-weight: 400;
    margin: 0;
    color: #bbb;
    display: block;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.open_menu ul.sp_menu {
    margin: 0;
    padding: 15px 12px 15px 35px;
    display: none;
    background: #eee;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.open_menu ul.sp_menu li {
    text-indent: 0;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.open_menu ul.sp_menu li:last-child {
    margin-bottom: 0px;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.open_menu ul.sp_menu li a {
    display: block;
    cursor: pointer;
    font-size: 0.9rem;
    width: 100%;
    line-height: 1.3rem;
    padding: 14px 0;
    font-family: "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
    font-weight: 400;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.open_menu ul.sp_menu li ul {
    display: none;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.open_menu ul.sp_menu li ul li {
    position: relative;
    margin-left: 10px;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.open_menu ul.sp_menu li ul li a {
    font-size: 0.8rem;
    width: 100%;
    line-height: 1.3rem;
    display: block;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.open_menu ul.sp_menu li ul li a span {
    display: inline-block;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.open_menu ul.sp_menu li.yer {
    margin-left: 30px;
    position: relative;
    text-indent: 0;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.open_menu ul.sp_menu li.yer::after {
    font-weight: 400;
    font-size: 0.9rem;
    content: "\276f";
    display: block;
    width: 1px;
    height: 1px;
    position: absolute;
    top: 0.75rem;
    left: -1.2rem;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.active_menu::after {
    font-weight: 400;
    font-size: 1.1rem;
    content: "－";
    display: block;
    width: 1px;
    height: 1px;
    position: absolute;
    top: 0.6rem;
    right: 70px;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.active_menu ul.sp_menu li {
    position: relative;
  }
  .zdo_drawer_menu .zdo_drawer_nav li.active_menu ul.sp_menu li.active_menu::after {
    font-weight: 400;
    font-size: 0.9rem;
    content: "\276f";
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0.75rem;
    left: -0.6rem;
    -webkit-transform-origin: -5px 3px 0;
            transform-origin: -5px 3px 0;
    -webkit-transform: rotate(90deg) translateY(-90%);
            transform: rotate(90deg) translateY(-90%);
  }
  /*+++ Default Button Color +++*/
  .zdo_drawer_menu .zdo_drawer_button {
    color: #000;
  }
  .zdo_drawer_menu .zdo_drawer_button .zdo_drawer_bar {
    background-color: #000;
    position: absolute;
    right: 14px;
  }
}

.zdo_drawer_fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}

#pagenation {
  margin: 50px 0 0 0;
  padding-bottom: 0;
  text-align: center;
  width: 100%;
}

#pagenation #pagenation-list {
  display: inline-block;
  margin: 0;
  padding: 0;
}

#pagenation:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

#pagenation #pagenation-list li {
  float: left;
  background: none;
  list-style: none;
  margin: 0 0;
}

#pagenation #pagenation-list li:last-child {
  margin-left: 0;
}

#pagenation #pagenation-list a, #pagenation #pagenation-list span {
  background: none;
  display: block;
  margin: 0 10px;
  padding: 17px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

#pagenation #pagenation-list a:hover, #pagenation #pagenation-list span:hover {
  text-decoration: none;
}

#pagenation #pagenation-list a.next, #pagenation #pagenation-list a.prev {
  display: block;
  padding: 17px 80px;
  background: #474747;
  color: #fff;
  -webkit-transition: 0.8s;
  transition: 0.8s;
}

#pagenation #pagenation-list a.next:hover, #pagenation #pagenation-list a.prev:hover {
  text-decoration: none;
  background: #767676;
  color: #fff;
}

#pagenation #pagenation-list a.next {
  margin-left: 30px;
}

#pagenation #pagenation-list a.prev {
  margin-right: 30px;
}

#pagenation #pagenation-list .num, #pagenation-list .current {
  display: block;
  padding: 17px 10px;
}

#pagenation #pagenation-list .num:hover, #pagenation-list .current:hover {
  text-decoration: none;
}

#pagenation #pagenation-list .current {
  border-bottom: 1px solid #000;
  color: #696969;
  padding: 17px 10px 5px 10px;
  margin-bottom: 12px;
}

#pagenation #pagenation-list .omit {
  display: block;
  padding: 17px 0px;
  color: #777777;
}

#pagenation #pagenation-list li a {
  color: #333333;
  text-decoration: none;
}

#pagenation #pagenation-list a:hover {
  color: #000000;
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  #pagenation-list {
    margin: 0;
    padding: 0;
  }
  #pagenation #pagenation-list li {
    float: none;
  }
  #pagenation #pagenation-list li.num_li {
    float: left;
    background: none;
    list-style: none;
    margin: 0 0 20px 0;
  }
  #pagenation #pagenation-list a.next {
    clear: both;
    margin: 20px 30px 0px 30px;
  }
  #pagenation #pagenation-list a.prev {
    clear: both;
    margin: 0px 30px 20px 30px;
  }
}

#slider-area {
  margin-top: 20px;
  padding: 100px 0 55px 0;
  background: #F7F7F7;
}

#slider-area h2.slider-area__h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 2.1rem;
  line-height: 1.1rem;
  text-align: center;
  margin: 15px 0 -35px 0;
}

#slider-area h2.slider-area__h2 span {
  font-family: "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  padding: 25px 0 0 0;
  display: block;
  color: #107c9c;
  font-size: 0.95rem !important;
  font-weight: 400;
  line-height: 1.1rem;
}

#slider-area .swiper-container {
  padding-bottom: 0px !important;
}

#slider-area .swiper-container .swiper-wrapper {
  margin-bottom: -5px !important;
}

#slider-area .swiper-container .swiper-wrapper .swiper-slide {
  margin: 0 auto;
  padding: 60px 30px;
  display: block;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#slider-area .swiper-container .swiper-wrapper .swiper-slide:hover {
  opacity: 0.7;
}

#slider-area .swiper-container .swiper-wrapper .swiper-slide a {
  color: #000;
}

#slider-area .swiper-container .swiper-wrapper .swiper-slide a:hover {
  text-decoration: none;
}

#slider-area .swiper-container .swiper-wrapper .swiper-slide a article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 25px;
  cursor: pointer;
}

#slider-area .swiper-container .swiper-wrapper .swiper-slide a article .slide_img {
  -ms-flex-preferred-size: 650px;
      flex-basis: 650px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  margin-left: 50px;
  position: relative;
  max-width: 650px;
  height: 320px;
  overflow: hidden;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  #slider-area .swiper-container .swiper-wrapper .swiper-slide a article .slide_img {
    image-rendering: -webkit-optimize-contrast;
  }
}

#slider-area .swiper-container .swiper-wrapper .swiper-slide a article .slide_img img {
  display: none;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#slider-area .swiper-container .swiper-wrapper .swiper-slide a article .slide_content {
  padding-right: 50px;
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          flex-grow: 2;
  -ms-flex-preferred-size: 350px;
      flex-basis: 350px;
  margin-left: 40px;
}

#slider-area .swiper-container .swiper-wrapper .swiper-slide a article .slide_content h3 {
  font-size: 1.6rem;
  line-height: 2.15rem !important;
  margin-bottom: 20px;
}

#slider-area .swiper-container .swiper-wrapper .swiper-slide a article .slide_content p {
  color: #585858;
  font-size: 0.9rem;
  line-height: 1.72rem;
}

#slider-area .swiper-container .swiper-wrapper .swiper-slide a article .slide_content p.slide__date {
  text-align: right;
  font-size: 0.7rem;
  color: #107c9c;
}

#slider-area .swiper-container .swiper-wrapper .swiper-slide-active {
  background: url("../images/slider_bg.png") 50% 50% no-repeat;
  background-size: 100% auto;
}

#slider-area .swiper-container .swiper-button-prev {
  background-image: url("../images/button-prev.png") !important;
  background-size: 15px 15px;
  left: 14%;
}

#slider-area .swiper-container .swiper-button-next {
  background-image: url("../images/button-next.png") !important;
  background-size: 15px 15px;
  right: 14%;
}

#slider-area .swiper-container .swiper-pagination {
  padding: 0px 0 0 0;
}

#slider-area .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
  background: #D00034;
}

@media screen and (max-width: 767px) {
  #slider-area {
    margin-top: 20px;
    padding: 80px 0 30px 0;
  }
  #slider-area h2.slider-area__h2 {
    font-size: 2.2rem;
    line-height: 1.1rem;
    margin: 15px 0 20px 0;
  }
  #slider-area h2.slider-area__h2 span {
    padding: 25px 0 0 0;
    display: block;
    font-size: 0.9rem  !important;
  }
  #slider-area .swiper-container {
    padding-bottom: 20px;
  }
  #slider-area .swiper-container .swiper-wrapper {
    margin: 0;
  }
  #slider-area .swiper-container .swiper-wrapper .swiper-slide {
    -webkit-font-smoothing: antialiased;
    width: 100%;
    -webkit-transition: 1s;
    transition: 1s;
    margin: 0 auto;
    padding: 0 0px;
    display: block;
  }
  #slider-area .swiper-container .swiper-wrapper .swiper-slide a {
    color: #000;
  }
  #slider-area .swiper-container .swiper-wrapper .swiper-slide a:hover {
    text-decoration: none;
  }
  #slider-area .swiper-container .swiper-wrapper .swiper-slide a article {
    display: block;
    padding: 15px 0;
    max-width: none;
    cursor: pointer;
  }
  #slider-area .swiper-container .swiper-wrapper .swiper-slide a article .slide_img {
    text-align: center;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    max-width: none;
    max-height: none;
    min-width: none;
    min-height: none;
    width: 100%;
    height: 200px;
    margin: 0;
    padding-bottom: 0;
    position: static;
    overflow: visible;
    left: 0;
    border-radius: 7px;
  }
  #slider-area .swiper-container .swiper-wrapper .swiper-slide a article .slide_img img {
    display: none;
  }
  #slider-area .swiper-container .swiper-wrapper .swiper-slide a article .slide_content {
    padding: 0 0 20px 0;
    display: block;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    margin-left: 0px;
    margin-top: 20px;
  }
  #slider-area .swiper-container .swiper-wrapper .swiper-slide a article .slide_content h3 {
    font-size: 1.2rem;
    line-height: 1.8rem !important;
    -webkit-font-smoothing: antialiased;
    margin-bottom: 12px;
  }
  #slider-area .swiper-container .swiper-wrapper .swiper-slide a article .slide_content p {
    font-size: 0.85rem;
    line-height: 1.55rem;
  }
  #slider-area .swiper-container .swiper-wrapper .swiper-slide a article .slide_content p.slide__date {
    text-align: left;
    font-size: 0.7rem;
    color: #107c9c;
    margin-top: 0px;
  }
  #slider-area .swiper-container .swiper-wrapper .swiper-slide-next {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    width: 90%;
    height: 90%;
    -webkit-font-smoothing: antialiased;
  }
  #slider-area .swiper-container .swiper-wrapper .swiper-slide-next a article h3 {
    -webkit-font-smoothing: antialiased;
  }
  #slider-area .swiper-container .swiper-wrapper .swiper-slide-prev {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-font-smoothing: antialiased;
    width: 90%;
    height: 90%;
  }
  #slider-area .swiper-container .swiper-wrapper .swiper-slide-active {
    -webkit-transform: scale(1);
            transform: scale(1);
    background: none;
    background-size: auto auto;
  }
  #slider-area .swiper-container .swiper-button-prev {
    display: none;
    background-image: url("../images/button-prev.png") !important;
    background-size: 15px 15px;
    left: 14%;
  }
  #slider-area .swiper-container .swiper-button-next {
    display: none;
    background-image: url("../images/button-next.png") !important;
    background-size: 15px 15px;
    right: 14%;
  }
  #slider-area .swiper-container .swiper-pagination {
    margin: 0 !important;
    padding: 20px 0 0 0;
  }
}

.is-animated {
  -webkit-animation: 1.4s;
          animation: 1.4s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

#article-area .article-more {
  height: 130px;
  text-align: center;
  padding: 50px 0 30px 0;
  display: block;
}

#article-area .article-more a.more_btn {
  display: block;
  width: 225px;
  height: auto;
  margin: 0px auto 0px auto;
  background: url(../images/more_on.svg) no-repeat 0 0;
}

#article-area .article-more a.more_btn img {
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

#article-area .article-more a.more_btn:hover img {
  opacity: 0;
}

#article-area .article-more a.archive_btn {
  display: block;
  width: 225px;
  margin: 0px auto 0px auto;
  background: url(../images/archivesmore_on.svg) no-repeat 0 0;
}

#article-area .article-more a.archive_btn img {
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

#article-area .article-more a.archive_btn:hover img {
  opacity: 0;
}

#article-area .article-more #loading {
  display: block;
  margin: 30px auto 0px auto;
  height: 50px !important;
}

.article-list__cat .article-list__cat_inr ul.article-list__catlist {
  display: flax;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  list-style: none;
  text-align: center;
  padding: 0;
  margin-bottom: 40px;
}

.article-list__cat .article-list__cat_inr ul.article-list__catlist li {
  line-height: 1;
  font-size: 0.9rem;
  margin: 12px 7px 0 7px;
  color: #107c9c;
}

.article-list__cat .article-list__cat_inr ul.article-list__catlist li a, .article-list__cat .article-list__cat_inr ul.article-list__catlist li span {
  display: block;
  padding: 8px 20px;
  border: 1px solid #107c9c;
  color: #107c9c;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 2px;
}

.article-list__cat .article-list__cat_inr ul.article-list__catlist li a:hover, .article-list__cat .article-list__cat_inr ul.article-list__catlist li span:hover {
  background: #107c9c;
  color: #fff;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .article-list__cat {
    margin: 0;
    overflow-y: hidden;
    height: 47px;
    position: relative;
  }
  .article-list__cat::before {
    content: "";
    width: 32px;
    height: 45px;
    position: absolute;
    top: 0;
    left: 1px;
    background: white;
    background: -webkit-gradient(linear, left top, right top, color-stop(40%, white), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(90deg, white 40%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
  }
  .article-list__cat::after {
    content: "";
    width: 32px;
    height: 45px;
    position: absolute;
    top: 0;
    right: 1px;
    background: white;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(40%, white));
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 40%);
  }
  .article-list__cat .article-list__cat_inr {
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    margin: 0 1px;
  }
  .article-list__cat .article-list__cat_inr ul.article-list__catlist {
    display: table;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    margin: 0;
    margin-right: 0px !important;
    margin-left: 0px !important;
    padding: 0 0px 26px 0px;
    font-size: 0.9rem;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .article-list__cat .article-list__cat_inr ul.article-list__catlist li {
    display: table-cell;
    margin: 0 0 0 15px;
    padding: 0;
  }
  .article-list__cat .article-list__cat_inr ul.article-list__catlist li a, .article-list__cat .article-list__cat_inr ul.article-list__catlist li span {
    display: block;
    padding: 10px;
    white-space: nowrap;
  }
  .article-list__cat .article-list__cat_inr ul.article-list__catlist li .current-cat a {
    border-bottom: 3px solid #107c9c;
  }
  .article-list__cat .article-list__cat_inr ul.article-list__catlist li:first-child {
    padding-left: 12px !important;
  }
  .article-list__cat .article-list__cat_inr ul.article-list__catlist li:last-child {
    padding-right: 27px !important;
  }
}

_::-webkit-full-page-media, _:future, :root * {
  image-rendering: auto !important;
}

.l_recommende {
  background: #F7F7F7;
  padding: 90px 0 25px 0;
  margin-bottom: 0px;
}

.l_recommende .swiper-pagination {
  display: none;
}

.l_recommende .recommende_inr {
  width: 100%;
  max-width: 1420px;
  position: relative;
  margin: 0 auto;
  padding: 0 70px;
}

.l_recommende .recommende_inr .swiper-button-prev {
  background-image: url("../images/sircle_arw_left.svg") !important;
  background-size: 35px 35px;
  top: 50%;
  left: 15px;
  width: 35px;
}

.l_recommende .recommende_inr .swiper-button-next {
  background-image: url("../images/sircle_arw_right.svg") !important;
  background-size: 35px 35px;
  top: 50%;
  right: 15px;
  width: 35px;
}

.l_recommende h2.recommende_h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 2.1rem;
  line-height: 1.1rem;
  text-align: center;
  margin: 15px 0 50px 0;
}

.l_recommende h2.recommende_h2 span {
  font-family: "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  padding: 25px 0 0 0;
  display: block;
  color: #000;
  font-size: 0.95rem !important;
  font-weight: 400;
  line-height: 1.1rem;
}

.l_recommende .swiper-container {
  max-width: 1240px;
  margin: 0 auto;
}

.l_recommende .swiper-container .swiper-wrapper {
  padding-bottom: 5px;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.l_recommende .swiper-container .swiper-wrapper .swiper-slide {
  display: block;
  height: auto;
}

.l_recommende .swiper-container .swiper-wrapper .swiper-slide article {
  cursor: pointer;
  height: 100%;
}

.l_recommende .swiper-container .swiper-wrapper .swiper-slide article:hover {
  -webkit-box-shadow: 0px 0px 3px 1px #E9E9E9;
          box-shadow: 0px 0px 3px 1px #E9E9E9;
}

.l_recommende .swiper-container .swiper-wrapper .swiper-slide article:hover .article-card__img {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  opacity: 0.7;
}

.l_recommende .swiper-container .swiper-wrapper .swiper-slide article:hover h3 {
  color: #000;
}

.l_recommende .swiper-container .swiper-wrapper .swiper-slide article a {
  padding-bottom: 30px;
  display: block;
  background: #fff;
  height: 100%;
}

.l_recommende .swiper-container .swiper-wrapper .swiper-slide article a p.article-card__txt {
  margin: 0 24px 24px 24px;
}

.l_recommende .swiper-container .swiper-wrapper .article-card:hover, .l_recommende .swiper-container .swiper-wrapper .article-card:focus {
  -webkit-transform: none;
          transform: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.entry_foter_nav {
  width: 100%;
  background: #F7F7F7;
  text-align: center;
  margin-bottom: 20px;
  padding: 60px 0 60px 0;
}

.entry_foter_nav .post-navigation {
  max-width: 1500px;
  margin: 0 auto !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.entry_foter_nav .post-navigation div {
  -ms-flex-preferred-size: 33%;
      flex-basis: 33%;
  text-align: center;
}

.entry_foter_nav .post-navigation div a, .entry_foter_nav .post-navigation div a:link {
  color: #000;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3rem;
  display: block;
}

.entry_foter_nav .post-navigation .post-navigation-prev {
  text-align: left;
  margin-left: 20px;
  padding: 0 10px 0 115px;
  position: relative;
}

.entry_foter_nav .post-navigation .post-navigation-prev a {
  -webkit-transition: .3s;
  transition: .3s;
}

.entry_foter_nav .post-navigation .post-navigation-prev a:hover {
  color: #107c9c;
}

.entry_foter_nav .post-navigation .post-navigation-prev a::after {
  content: "";
  display: block;
  background: url(../images/arw_right.png) no-repeat 0 50%;
  position: absolute;
  top: 8px;
  left: 0;
  width: 100px;
  height: 5px;
}

.entry_foter_nav .post-navigation .post-navigation-next {
  text-align: right;
  margin-right: 20px;
  padding: 0 115px 0 10px;
  position: relative;
}

.entry_foter_nav .post-navigation .post-navigation-next a {
  -webkit-transition: .3s;
  transition: .3s;
}

.entry_foter_nav .post-navigation .post-navigation-next a:hover {
  color: #107c9c;
}

.entry_foter_nav .post-navigation .post-navigation-next a::after {
  content: "";
  display: block;
  background: url(../images/arw_lft.png) no-repeat 100% 50%;
  position: absolute;
  top: 8px;
  right: 0;
  width: 100px;
  height: 5px;
}

.entry_foter_nav .post-navigation .post-navigation-top a {
  display: block;
  width: 275px;
  height: auto;
  margin: 0 auto;
  background: url(../images/btn_IIJ_top_on.svg) no-repeat 0 0;
}

.entry_foter_nav .post-navigation .post-navigation-top a img {
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

.entry_foter_nav .post-navigation .post-navigation-top a:hover img {
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .l_recommende {
    padding: 30px 0 0px 0;
  }
  .l_recommende .swiper-pagination {
    display: block !important;
    padding: 0px 0 0 0;
  }
  .l_recommende .swiper-pagination .swiper-pagination-bullet-active {
    background: #D00034;
  }
  .l_recommende h2.recommende_h2 {
    font-size: 2.2rem;
    line-height: 1.1rem;
    margin: 60px 0 18px 0 !important;
  }
  .l_recommende h2.recommende_h2 span {
    padding: 20px 0 0 0;
    display: block;
    color: #000;
    font-size: 0.96rem  !important;
  }
  .l_recommende .recommende_inr {
    padding: 0;
    position: static;
  }
  .l_recommende .recommende_inr .swiper-button-prev {
    display: none !important;
  }
  .l_recommende .recommende_inr .swiper-button-next {
    display: none !important;
  }
  .l_recommende .swiper-container {
    max-width: none;
    padding: 0px;
  }
  .l_recommende .swiper-container .swiper-wrapper {
    margin: 0;
    padding: 0;
  }
  .l_recommende .swiper-container .swiper-wrapper .swiper-slide {
    -webkit-font-smoothing: antialiased;
    width: 100%;
    -webkit-transition: 1s;
    transition: 1s;
    margin: 0 auto;
    padding: 0 0px;
    display: block;
  }
  .l_recommende .swiper-container .swiper-wrapper .swiper-slide article {
    -webkit-box-shadow: none;
            box-shadow: none;
    display: block;
    padding: 15px 0;
    max-width: none;
    cursor: pointer;
  }
  .l_recommende .swiper-container .swiper-wrapper .swiper-slide article:hover {
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .l_recommende .swiper-container .swiper-wrapper .swiper-slide article a {
    background: none;
  }
  .l_recommende .swiper-container .swiper-wrapper .swiper-slide article .article-card__img {
    text-align: center;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    max-width: none;
    max-height: none;
    min-width: none;
    min-height: none;
    width: 100%;
    height: 200px;
    margin: 0;
    padding-bottom: 0;
    position: static;
    overflow: visible;
    left: 0;
    border-radius: 7px;
  }
  .l_recommende .swiper-container .swiper-wrapper .swiper-slide article .article-card__img img {
    display: none;
  }
  .l_recommende .swiper-container .swiper-wrapper .swiper-slide article h3 {
    font-size: 1.2rem;
    line-height: 1.8rem !important;
    -webkit-font-smoothing: antialiased;
    margin: 20px 0 12px 0;
  }
  .l_recommende .swiper-container .swiper-wrapper .swiper-slide article p {
    font-size: 0.85rem;
    line-height: 1.55rem;
  }
  .l_recommende .swiper-container .swiper-wrapper .swiper-slide article p.article-card__date {
    text-align: left !important;
    font-size: 0.7rem;
    color: #107c9c;
    margin: 0px 0 0 0 !important;
    position: static;
  }
  .l_recommende .swiper-container .swiper-wrapper .swiper-slide article p.article-card__txt {
    font-size: 0.85rem;
    line-height: 1.55rem;
    margin: 0px 0 10px 0 !important;
    padding: 0 0 20px 0 !important;
    display: block;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    margin: 0px 0 0 0 !important;
    padding: 0;
  }
  .l_recommende .swiper-container .swiper-wrapper .swiper-slide-next {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    width: 90%;
    height: 90%;
    -webkit-font-smoothing: antialiased;
  }
  .l_recommende .swiper-container .swiper-wrapper .swiper-slide-next a article h3 {
    -webkit-font-smoothing: antialiased;
  }
  .l_recommende .swiper-container .swiper-wrapper .swiper-slide-prev {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-font-smoothing: antialiased;
    width: 90%;
    height: 90%;
  }
  .l_recommende .swiper-container .swiper-wrapper .swiper-slide-active {
    -webkit-transform: scale(1);
            transform: scale(1);
    background: none;
    background-size: auto auto;
  }
  .post-navigation-prev, .post-navigation-next {
    display: none;
  }
  .post-navigation-top {
    width: 100%;
    background: #f7f7f7;
    padding: 40px 0 60px 0;
    margin: 0 auto 20px auto;
  }
  .post-navigation-top a {
    display: block;
    width: 275px;
    height: auto;
    margin: 0 auto;
    background: url(../images/btn_IIJ_top_on.svg) no-repeat 0 0;
  }
  .post-navigation-top a img {
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
  }
  .post-navigation-top a:hover img {
    opacity: 0;
  }
}

/*-----------------------------------------
Layout
-----------------------------------------*/
html {
  margin-top: 0;
}

body {
  margin: 0;
  padding: 0;
  animation: bodyFadeIn 2s ease 0s 1 normal;
  -webkit-animation: bodyFadeIn 2s ease 0s 1 normal;
}

img {
  -webkit-backface-visibility: hidden;
}

@media screen and (max-width: 767px) {
  body {
    width: 100%;
  }
}

/*header=====================================================*/
header {
  width: 100%;
  height: 80px;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-item-align: center;
      align-self: center;
}

header p.header__iijlogo {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-preferred-size: 33%;
      flex-basis: 33%;
  margin-top: 16px;
  padding-left: 20px;
}

header p.header__iijlogo img {
  width: 100%;
  max-width: 88px;
  min-width: 35.2px;
}

header p.header__bloglogo {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-preferred-size: 33%;
      flex-basis: 33%;
  text-align: center;
  padding-top: 16px;
}

header p.header__bloglogo img {
  width: 100%;
  margin: 0 auto 0 auto;
  max-width: 324px;
  min-width: 291.6px;
}

header .header__tool {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-preferred-size: 33%;
      flex-basis: 33%;
  text-align: right;
  margin: 0 0px 0 0;
  height: 100%;
  position: relative;
}

header .header__tool form {
  max-width: 260px;
  position: absolute;
  margin-left: 8px;
  top: 30px;
  right: 50px;
  background: url(../images/search_ico.png) no-repeat 0 50%;
}

header .header__tool form::before {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  background: #1b1b1b;
  background: -webkit-gradient(linear, left top, right top, from(#1b1b1b), color-stop(88%, #4e4e4e), color-stop(97%, white));
  background: linear-gradient(to right, #1b1b1b 0%, #4e4e4e 88%, white 97%);
  top: 100%;
  left: 30px;
}

header .header__tool form input {
  border: none;
  width: 100%;
  line-height: 0.8rem;
  font-size: 0.9rem;
  margin-left: 30px;
}

/*mobile header*/
@media screen and (max-width: 767px) {
  header {
    height: 70px;
  }
  header::after {
    content: "";
    display: block;
    height: 0;
    width: 33%;
  }
  header p.header__iijlogo {
    -ms-flex-item-align: center;
        align-self: center;
    margin: 0;
    padding: 0 0 0 8px;
  }
  header p.header__iijlogo img {
    width: 100%;
    max-width: 42.24px;
  }
  header p.header__bloglogo {
    -ms-flex-item-align: center;
        align-self: center;
    margin: 0;
    padding: 0 8px 0 0;
  }
  header p.header__bloglogo img {
    width: 100%;
    min-width: 194.4px;
  }
  header.l_header > div.header__tool {
    display: none !important;
  }
  .zdo_drawer_menu nav .search-form--SP .header__tool {
    display: block !important;
  }
  .zdo_drawer_menu nav .search-form--SP .header__tool form.sp_search {
    display: block !important;
  }
}

/*image-area*=====================================================*/
section.hero {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-height: 600px;
  height: 600px;
  background: url(../images/heroimage_sp.jpg) no-repeat center center;
  background-size: cover;
  margin: 0;
  padding: 0;
}

section.hero .image-area {
  max-width: 600px;
  text-align: center;
  min-height: 337.5px;
}

section.hero .image-area h1 {
  margin: 0px auto;
  width: 600px;
  min-width: 280px;
}

section.hero .image-area h1 img {
  width: 100%;
  max-width: 600px;
}

section.hero .image-area .image-area__title {
  margin: 0;
}

section.hero .image-area .image-area__subtitle {
  margin: 30px 0 25px 0;
  padding: 0 0 0px 0;
  font-size: 1rem;
  line-height: 1.85rem;
  color: #fff;
}

section.hero .image-area .image-area__subtitle br.sp {
  display: none;
}

/*mobile image-area*/
@media screen and (max-width: 767px) {
  section.hero {
    height: 600px;
    max-height: none;
    min-height: none;
  }
  section.hero .image-area {
    min-height: 0;
  }
  section.hero .image-area h1 {
    width: 100%;
    min-width: none;
  }
  section.hero .image-area h1 img {
    width: 90%;
    max-width: none;
    min-width: none;
  }
  section.hero .image-area .image-area__subtitle {
    font-size: 0.8rem;
    line-height: 1.7rem;
    margin: 20px 0 0px 0;
    padding: 0 20px 60px 20px;
  }
  section.hero .image-area .image-area__subtitle br.sp {
    display: block;
  }
}

/*404=====================================================*/
.p404 {
  width: 1280px;
  margin: 0 auto;
  padding: 80px 50px;
}

.p404 h2 {
  font-size: 1.8rem;
  line-height: 1.3em;
}

.p404 h2 span {
  color: #ccc;
  font-weight: bold;
  font-size: 1.2rem;
}

.p404 p.txt {
  font-size: 0.9rem;
  line-height: 2.2em;
}

/*footer=====================================================*/
aside.twitter-lnk_pc {
  z-index: 90;
  top: 430px;
  right: -396px;
  position: fixed;
  width: 456px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all 300ms 0s ease;
  transition: all 300ms 0s ease;
}

aside.twitter-lnk_pc div.twitter-lnk_pc_area {
  width: 396px;
  border-bottom-left-radius: 10px;
  background: #fff;
  -webkit-box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.2);
}

aside.twitter-lnk_pc div.twitter-lnk_button {
  z-index: -1;
  cursor: pointer;
  width: 60px;
  height: 180px;
  background: #1da1f2;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  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;
  -webkit-box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.2);
  -webkit-transition: .3s;
  transition: .3s;
}

aside.twitter-lnk_pc div.twitter-lnk_button:hover {
  opacity: 0.85;
}

aside.twitter-lnk_pc h3.twitter-lnk_h3 {
  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;
  height: 62px;
  width: 100%;
  background: #1da1f2;
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 0;
}

aside.twitter-lnk_pc .twitter-timeline {
  margin-left: 20px;
}

.twitter-lnk_pc.selected {
  right: 0px !important;
}

.twitter-lnk_pc.selected.h750 {
  right: 0px !important;
  top: 200px;
}

footer {
  background: #F7F7F7;
}

footer .pagetop {
  display: none;
  z-index: 998;
  width: 60px;
  height: 60px;
  position: fixed;
  right: 30px;
  bottom: 30px;
}

footer .pagetop img {
  width: 100%;
  height: 100%;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

footer .pagetop img:hover {
  opacity: 0.75;
}

footer div.copy {
  text-align: center;
  background: #000;
  height: 52px;
  border-top: 3px solid #D00034;
}

footer div.copy p {
  font-size: 0.75rem;
  color: #fff;
  margin-top: 14px;
}

footer aside.footer-lnk {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 38px 50px 38px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

footer aside.footer-lnk div {
  padding: 0 30px 0 0;
}

footer aside.footer-lnk div h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.8rem;
  line-height: 1.55rem;
  letter-spacing: 0.09rem;
}

footer aside.footer-lnk div ul {
  list-style: none;
  margin: 45px 0 0 0;
  padding: 0;
}

footer aside.footer-lnk div ul li {
  font-size: 1rem;
  font-weight: 500;
  margin: 0px 0 20px 0;
  padding: 0;
}

footer aside.footer-lnk div ul li a, footer aside.footer-lnk div ul li a:link {
  color: #555;
  text-decoration: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

footer aside.footer-lnk div ul li a:hover {
  color: #107c9c;
  text-decoration: none;
}

footer aside.footer-lnk div ul li span {
  font-weight: 200;
  display: block;
  font-size: 0.7rem;
  margin: 5px 0 0 0px;
  padding: 0;
}

footer aside.footer-lnk div.sites {
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          flex-grow: 2;
  -ms-flex-preferred-size: 245px;
      flex-basis: 245px;
}

footer aside.footer-lnk div.sites ul li {
  position: relative;
  padding-left: 1.5rem;
}

footer aside.footer-lnk div.sites ul li::after {
  text-indent: 0rem;
  color: #555;
  font-family: FontAwesome;
  font-size: 0.78rem;
  text-align: right;
  content: "\f08e";
  margin-left: 3px;
  display: inline-block;
  vertical-align: -1px;
  position: absolute;
  top: 5px;
  left: 2px;
}

footer aside.footer-lnk div.blogs {
  -webkit-box-flex: 3;
      -ms-flex-positive: 3;
          flex-grow: 3;
  -ms-flex-preferred-size: 240px;
      flex-basis: 240px;
}

footer aside.footer-lnk div.blogs ul li {
  padding-left: 1.5rem;
  position: relative;
}

footer aside.footer-lnk div.blogs ul li::after {
  color: #555;
  font-family: FontAwesome;
  font-size: 0.78rem;
  text-align: right;
  content: "\f08e";
  margin-left: 3px;
  display: inline-block;
  vertical-align: -1px;
  position: absolute;
  top: 5px;
  left: 2px;
}

footer aside.footer-lnk div.sitemap {
  -webkit-box-flex: 4;
      -ms-flex-positive: 4;
          flex-grow: 4;
  -ms-flex-preferred-size: 235px;
      flex-basis: 235px;
}

footer aside.footer-lnk div.sitemap ul.sitemap__list li p {
  position: relative;
  padding-bottom: 5px;
}

footer aside.footer-lnk div.sitemap ul.sitemap__list li p::before {
  content: "";
  width: 86%;
  height: 1px;
  position: absolute;
  background: #555555;
  background: -webkit-gradient(linear, left top, right top, from(#555555), color-stop(93%, #7d7d7d), to(#f3f4f6));
  background: linear-gradient(to right, #555555 0%, #7d7d7d 93%, #f3f4f6 100%);
  top: 100%;
  left: 0;
}

footer aside.footer-lnk div.sitemap ul.sitemap__list li p::after {
  color: #555;
  content: "＋";
  display: block;
  width: 1px;
  height: 1px;
  position: absolute;
  top: 0;
  right: 80px;
}

footer aside.footer-lnk div.sitemap ul.sitemap__list li ul {
  margin: 0;
  padding: 12px 10px 0 12px;
  width: 80%;
  display: none;
}

footer aside.footer-lnk div.sitemap ul.sitemap__list li ul li {
  font-size: 0.9rem;
  font-weight: 400;
  margin: 12px 0 0 0;
  padding: 0;
}

footer aside.footer-lnk div.sitemap ul.sitemap__list li ul li:first-child {
  margin: 0;
  padding: 0;
}

footer aside.footer-lnk div.sitemap ul.sitemap__list li ul li p::before {
  background: none;
}

footer aside.footer-lnk div.sitemap ul.sitemap__list li ul li ul {
  margin: 0;
  padding: 0;
}

footer aside.footer-lnk div.sitemap ul.sitemap__list li ul li.yer {
  margin-left: 0px;
}

footer aside.footer-lnk div.sitemap ul.sitemap__list li ul li.yer p {
  padding-left: 30px;
}

footer aside.footer-lnk div.sitemap ul.sitemap__list li ul li.yer p::after {
  color: #555;
  content: "\276f";
  display: block;
  width: 1px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0px;
}

footer aside.footer-lnk div.sitemap ul.sitemap__list li ul li.yer ul {
  margin-left: 45px;
}

footer aside.footer-lnk div.sitemap ul.sitemap__list li.active_menu p::after {
  color: #555;
  content: "－";
  display: block;
  width: 1px;
  height: 1px;
  position: absolute;
  top: 0;
  right: 80px;
}

footer aside.footer-lnk div.sitemap ul.sitemap__list li.active_menu ul li.active_menu p:after {
  color: #555;
  content: "\276f";
  display: block;
  width: 1px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0px;
  -webkit-transform-origin: 4px 12px 0;
          transform-origin: 4px 12px 0;
  -webkit-transform: rotate(90deg) translateY(-90%);
          transform: rotate(90deg) translateY(-90%);
}

footer aside.footer-lnk div.sitemap p.sitemap__rss {
  padding-top: 12px;
  line-height: 20px;
}

footer aside.footer-lnk div.sitemap p.sitemap__rss a {
  display: block;
  color: #555;
}

footer aside.footer-lnk div.sitemap p.sitemap__rss a img {
  margin-bottom: 2px;
  margin-left: 15px;
  max-width: 20px;
  height: auto;
}

footer aside.footer-lnk div.bnrs {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-preferred-size: 350px;
      flex-basis: 350px;
  padding-right: 0;
}

footer aside.footer-lnk div.bnrs ul {
  margin: 0;
}

footer aside.footer-lnk div.bnrs ul li {
  font-size: 0.6rem;
  color: #555;
}

footer aside.footer-lnk div.bnrs ul li a {
  display: block;
  max-width: 350px;
}

footer aside.footer-lnk div.bnrs ul li a img {
  width: 100%;
  height: auto;
  margin: 0 0 0px 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

footer aside.footer-lnk div.bnrs ul li a img:hover {
  opacity: 0.7;
}

footer aside.footer-lnk div.bnrs ul li p {
  margin-top: 10px;
  line-height: 1.5rem;
  font-size: 0.75rem;
}

footer aside.footer-lnk div.bnrs ul li p a {
  display: inline;
}

footer aside.footer-lnk div.bnrs ul li p a:hover {
  text-decoration: underline;
}

footer aside.footer-lnk div.bnrs ul li p a[target="_blank"]::after {
  font-family: FontAwesome;
  text-align: right;
  content: "\f08e";
  margin-left: 3px;
  margin-right: 3px;
  display: inline-block;
  vertical-align: -1px;
}

/*mobile image-area*/
@media screen and (max-width: 767px) {
  aside.twitter-lnk_sp {
    padding: 0 5px !important;
    margin-bottom: 10px;
  }
  aside.twitter-lnk_sp .twitter-lnk_img {
    width: 162px;
    margin: 0 auto 16px;
  }
  aside.twitter-lnk_sp .twitter-lnk_img img {
    width: 100%;
  }
  aside.twitter-lnk_sp h3.twitter-lnk_h3 {
    text-align: center;
    color: #1da1f2 !important;
    font-size: 0.85rem;
    font-weight: normal;
    margin-bottom: 20px;
  }
  aside.twitter-lnk_sp .twitter-timeline {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
  }
  footer .pagetop {
    max-width: 50px;
    max-height: 50px;
    right: 12px;
    bottom: 26px;
  }
  footer .pagetop img {
    width: 100%;
    height: 100%;
  }
  footer div.copy {
    height: auto;
    padding: 25px 0;
  }
  footer div.copy p {
    font-size: 0.7rem;
    line-height: 1rem;
    color: #fff;
    margin: 0;
  }
  footer aside.footer-lnk {
    padding: 40px 25px;
    max-width: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  footer aside.footer-lnk div {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: none;
    min-width: 0px;
  }
  footer aside.footer-lnk div h2 {
    font-size: 1.45rem;
    line-height: 1.3rem;
  }
  footer aside.footer-lnk div ul li {
    font-size: 0.9rem;
  }
  footer aside.footer-lnk div ul li br.site_br {
    display: none;
  }
  footer aside.footer-lnk div ul li span {
    display: none;
  }
  footer aside.footer-lnk div.sitemap {
    display: none;
  }
  footer aside.footer-lnk div.bnrs {
    width: 100%;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    margin-top: 20px;
  }
  footer aside.footer-lnk div.bnrs .widget_sp_image-image-link {
    margin: 0 auto;
    display: block;
  }
  footer aside.footer-lnk div.bnrs .widget_sp_image-description {
    padding-right: 0;
    max-width: 350px;
    margin: 0 auto;
  }
  footer aside.footer-lnk div.bnrs .widget_sp_image-description p {
    line-height: 1.5;
  }
  footer aside.footer-lnk div.blogs {
    width: calc(50% - 10px);
    padding-right: 0;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
  }
  footer aside.footer-lnk div.blogs ul li::after {
    top: 3px;
  }
  footer aside.footer-lnk div.sites {
    width: calc(50% - 10px);
    padding-right: 0;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
  }
  footer aside.footer-lnk div.sites ul li::after {
    top: 3px;
  }
  footer aside.footer-lnk div.sites p.sitemap__rss {
    line-height: 20px;
  }
  footer aside.footer-lnk div.sites p.sitemap__rss a {
    display: block;
    color: #555;
  }
  footer aside.footer-lnk div.sites p.sitemap__rss a img {
    margin-bottom: 2px;
    margin-left: 15px;
    max-width: 20px;
    height: auto;
  }
}

#article-area {
  max-width: 1320px;
  margin: 0 auto;
  padding-bottom: 80px;
}

#article-area h2 {
  margin-top: 60px;
  margin-bottom: 40px;
}

#article-area h2.top_title_area__h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 2.1rem;
  line-height: 1.1rem;
  text-align: center;
  margin: 90px 0 30px 0;
}

#article-area h2.top_title_area__h2 span {
  font-family: "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  padding: 25px 0 0 0;
  display: block;
  color: #107c9c;
  font-size: 0.9rem !important;
  font-weight: 400;
  line-height: 1.1rem;
  letter-spacing: 1;
}

#article-area .article-list__cat ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 25px;
  margin-right: 38px;
  margin-left: 38px;
}

.article-list {
  margin: 0 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.article-list::after {
  content: "";
  display: block;
  width: 31%;
  height: 0;
}

.article-list article {
  margin: 20px 0;
}

.article-card {
  -webkit-box-shadow: 0px 0px 3px 1px #E9E9E9;
          box-shadow: 0px 0px 3px 1px #E9E9E9;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -ms-flex-preferred-size: 31%;
      flex-basis: 31%;
  position: relative;
}

.article-card .article-card__img {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .article-card .article-card__img {
    image-rendering: -webkit-optimize-contrast;
  }
}

.article-card img {
  width: 100%;
  height: 200px;
  display: none;
}

.article-card h3 {
  font-weight: 600;
  line-height: 1.9rem;
  margin: 20px 24px 5px 24px;
  font-size: 1.2rem;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.article-card p.article-card__txt {
  font-weight: 400;
  margin: 0 14px 54px 24px;
  line-height: 1.62rem;
  text-align: left;
  font-size: 0.85rem;
  color: #585858;
}

.article-card p.black {
  color: #000 !important;
}

.article-card .tag-area {
  margin: 0 14px 54px 24px;
  color: #107c9c;
}

.article-card .tag-area ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -35px;
  margin-bottom: -10px;
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

.article-card .tag-area ul li {
  margin: 0px 9px 8px 0 !important;
  padding-left: 0;
  list-style: none;
  color: #107c9c;
}

.article-card .tag-area ul li a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  display: block;
  padding: 3px 10px;
  font-size: 0.6rem;
  color: #107c9c;
  line-height: 0.8rem;
  border: 1px solid #107c9c;
  border-radius: 0.8rem;
  text-decoration: none;
}

.article-card .tag-area ul li a::before {
  margin-right: 3px;
  content: "#";
}

.article-card .tag-area ul li a:hover {
  text-decoration: none;
  background: #107c9c;
  color: #fff;
}

.article-card p.article-card__date {
  font-size: 0.76rem;
  line-height: 1.25rem;
  color: #107c9c;
  position: absolute;
  bottom: 12px;
  right: 24px;
}

.article-card a, .article-card a:link, .article-card a:hover {
  color: #000;
  text-decoration: none;
}

.article-card:hover, .article-card:focus {
  -webkit-transform: translateY(-0.25em);
          transform: translateY(-0.25em);
  -webkit-box-shadow: 0px 8px 11px -1px #c5c5c5;
          box-shadow: 0px 8px 11px -1px #c5c5c5;
}

.article-card:hover h3, .article-card:focus h3 {
  color: #107c9c;
}

/*mobile article-card*/
@media screen and (max-width: 767px) {
  #article-area {
    padding-bottom: 50px;
    max-width: none;
  }
  .article-list {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0;
    margin: 0;
  }
  .article-list article {
    margin: 10px 0;
  }
  .article-list :nth-child(3n) {
    margin: 10px 0;
  }
  .article-card {
    -ms-flex-preferred-size: 90%;
        flex-basis: 90%;
  }
  div.archive_page article.article-card {
    opacity: 0;
    -webkit-transition: 1.2s;
    transition: 1.2s;
  }
  .article-list .inview {
    opacity: 1 !important;
  }
}

/*title_area*/
.title_area {
  text-align: center;
  margin: 0;
  padding: 0;
}

.title_area img {
  margin-top: 100px;
  margin-bottom: 65px;
  max-width: 430px;
}

.title_area h2.title_area__h2 {
  margin: 0 0 0px 0 !important;
  padding: 0;
  padding-bottom: 55px;
  font-size: 1.3rem;
}

.title_area h2.title_area__h2 span {
  margin-right: 10px;
  margin-top: -6px;
  font-size: 1rem !important;
  letter-spacing: 0.08rem;
  display: inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 767px) {
  .title_area.inview img {
    -webkit-animation-name: SlideUp;
            animation-name: SlideUp;
    /* アニメーション名 */
    -webkit-animation-duration: 1200ms;
            animation-duration: 1200ms;
    /* アニメーション時間 */
  }
  .title_area img {
    width: 100%;
    margin-top: 70px;
    margin-bottom: 25px;
  }
  .title_area h2.title_area__h2 {
    padding: 20px 20px 25px 20px;
    line-height: 1.75rem;
  }
  .title_area h2.title_area__h2 span {
    font-size: 0.9rem !important;
  }
}

nav.single_nav {
  margin: 0px;
  height: 50px;
}

nav.single_nav div.single_nav_inr {
  border-bottom: 1px solid #eee;
  overflow: auto;
}

nav.single_nav ul {
  list-style: none;
  font-size: 1rem;
  font-weight: 500;
  margin: 0 auto;
}

nav.single_nav ul li {
  background: none;
}

nav.single_nav ul li a {
  text-decoration: none;
  line-height: 50px;
  padding: 11px;
}

nav.single_nav ul li a:hover {
  border-bottom: 3px solid #107c9c;
  text-decoration: none;
}

nav.single_nav ul li.current-cat a {
  border-bottom: 3px solid #107c9c;
}

nav.single_nav #theme_menu {
  text-align: center;
}

nav.single_nav #theme_menu .scroll_tab_right_button,
nav.single_nav #theme_menu .scroll_tab_left_button {
  overflow: auto !important;
}

nav.single_nav #theme_menu .scroll_tab_left_button {
  text-align: left;
}

nav.single_nav #theme_menu .scroll_tab_inner {
  z-index: 8;
}

@media screen and (max-width: 767px) {
  nav.single_nav ::-webkit-scrollbar {
    display: none;
    -webkit-appearance: none;
  }
  nav.single_nav div {
    overflow: hidden;
    -webkit-appearance: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 10px;
  }
  nav.single_nav div ul {
    -webkit-appearance: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    margin: 0 auto;
    padding: 0 0 0px 0;
    font-size: 0.9rem;
  }
  nav.single_nav div ul li a {
    white-space: nowrap;
  }
  nav.single_nav div ul li.current-cat a {
    border-bottom: 3px solid #107c9c;
  }
}

#content {
  max-width: 820px;
  margin: 90px auto 0 auto;
}

#content .article-single {
  max-width: 820px;
  padding-bottom: 70px;
}

#content .article-single h1 {
  -webkit-animation-name: SlideUp;
          animation-name: SlideUp;
  -webkit-animation-duration: 1160ms;
          animation-duration: 1160ms;
  font-size: 1.98rem;
  line-height: 2.6rem;
}

#content .article-single p.article-single__dete {
  margin-top: 15px;
  margin-left: 3px;
  font-size: 0.94rem;
  color: #107c9c;
}

#content .article-single div#article-single__image {
  max-width: 820px;
  max-height: 475px;
  width: 100%;
  height: 0;
  padding-top: 57.92683%;
  margin: 60px auto 20px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  overflow: hidden;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  #content .article-single div#article-single__image {
    image-rendering: -webkit-optimize-contrast;
  }
}

#content .article-single div#article-single__image img {
  display: none;
  width: 820px;
  height: 475px;
}

#content .article-single__entry {
  margin: 0px 0px 40px 0px;
}

#content .article-single__entry a {
  -webkit-transition: 0.15s;
  transition: 0.15s;
}

#content .article-single__entry a:hover {
  opacity: 0.7;
  text-decoration: none;
}

#content .article-single__entry a[target="_blank"]::after {
  font-family: FontAwesome;
  text-align: right;
  content: "\f08e";
  margin-left: 3px;
  display: inline-block;
  vertical-align: -1px;
}

#content .article-single__entry img {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#content .article-single__entry a.twbtn[target="_blank"]::after {
  content: "";
  display: inline;
}

#content .article-single__entry a.twbtn img {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: inline;
}

#content .article-single__entry p {
  font-size: 0.95rem;
  line-height: 1.9rem;
  margin: 30px 0px;
}

#content .article-single__entry .center {
  text-align: center;
}

#content .article-single__entry .right {
  text-align: right;
}

#content .article-single__entry .notes {
  position: relative;
  margin-left: 100px;
  font-size: 0.9rem;
  line-height: 1.8rem;
}

#content .article-single__entry .notes::before {
  content: "";
  width: 2.8rem;
  height: 1px;
  margin: 2px;
  position: absolute;
  background: #000;
  top: 0.76rem;
  left: -50px;
}

#content .article-single__entry ins {
  text-decoration: none;
}

#content .article-single__entry ins::before {
  content: "<追記：";
  color: #FF1919;
}

#content .article-single__entry ins::after {
  content: ">";
  color: #FF1919;
  padding-left: 5px;
}

#content .article-single__entry ul {
  margin-left: 20px;
  padding-left: 0;
  list-style-type: circle;
}

#content .article-single__entry ul li {
  line-height: 1.8rem;
  margin-top: 8px;
  margin-bottom: 8px;
}

#content .article-single__entry ul li ul {
  list-style-type: disc;
}

#content .article-single__entry ol {
  margin-left: 20px;
  padding-left: 0;
}

#content .article-single__entry ol li {
  line-height: 1.8rem;
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 10px;
}

#content .article-single__entry table {
  width: 100%;
  border-collapse: separate;
  border: 2px solid #fff;
  font-size: 0.96rem;
}

#content .article-single__entry table tr {
  background: #EBEFF0;
}

#content .article-single__entry table tr th {
  text-align: center;
  background: #868A8A;
  color: #fff;
  padding: 13px 15px;
  line-height: 1.6rem;
}

#content .article-single__entry table tr th.dif {
  background: #A4AAAB;
}

#content .article-single__entry table tr td {
  text-align: center;
  padding: 15px 15px;
  color: #414141;
}

#content .article-single__entry table tr .left {
  text-align: left;
}

#content .article-single__entry table tr:nth-child(even) {
  background: #F5F7F7;
}

#content .article-single__entry .crayon-syntax table tr {
  background: none;
}

#content .article-single__entry .crayon-syntax .crayon-nums {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

#content .article-single__entry .crayon-syntax .crayon-code {
  padding: 8px 8px 8px 8px !important;
}

#content .article-single__entry blockquote {
  margin-left: 3px;
  border-left: 4px solid #B5C9CF;
  padding-left: 20px;
  line-height: 1.6rem;
}

#content .article-single__entry blockquote a {
  text-decoration: underline;
  color: #000;
}

#content .article-single__entry .twitter-tweet {
  margin-right: auto;
  margin-left: auto;
}

#content .article-single__entry h3 {
  position: relative;
  text-indent: 1rem;
  margin-left: 1.2em;
  font-size: 1.45rem;
  margin: 40px 0 10px 0;
}

#content .article-single__entry h3::before {
  content: "";
  width: 0.5rem;
  height: 2px;
  margin: 2px;
  position: absolute;
  background: #000;
  top: 1.1rem;
  left: 0;
}

#content .article-single__entry h2 {
  position: relative;
  padding-bottom: 13px;
  font-size: 1.65rem;
  line-height: 2.0rem;
  margin: 80px 0 20px 0;
}

#content .article-single__entry h2::before {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  background: #1b1b1b;
  background: -webkit-gradient(linear, left top, right top, from(#1b1b1b), color-stop(88%, #4e4e4e), color-stop(97%, white));
  background: linear-gradient(to right, #1b1b1b 0%, #4e4e4e 88%, white 97%);
  top: 100%;
  left: 0;
}

#content .article-single__entry h5 {
  color: #55646D;
  font-size: 1.1rem;
  line-height: 2.0rem;
  margin: 30px 0 0px;
}

#content .article-single__entry h4 {
  font-size: 1.2rem;
  line-height: 2.1rem;
  padding: 4px 0 2px 0;
  margin: 35px 0 20px 0;
  display: inline;
  border-bottom: 1px solid #000;
}

#content #ez-toc-container {
  position: relative;
  margin: 0 0 60px 0;
}

#content #ez-toc-container .ez-toc-title-container p.ez-toc-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 2.08rem;
  line-height: 1.1rem;
  letter-spacing: -0.02rem;
  margin: 0px 0 0 0;
  padding: 5px 0 0 0;
}

#content nav {
  padding-top: 30px;
  padding-bottom: 30px;
}

#content nav ul {
  margin: 0px;
  padding: 0 0 0 18px;
}

#content nav ul li {
  font-size: 0.98rem;
  font-weight: 600;
  list-style-type: decimal;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 1rem;
  color: #000;
}

#content nav ul li ul {
  margin-top: 12px;
}

#content nav ul li ul li {
  font-size: 0.9rem;
  font-weight: 400;
}

#content nav ul li a, #content nav ul li a:link {
  color: #000;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#content nav ul li a:hover {
  opacity: 0.7;
  text-decoration: none;
}

#content nav::before {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  background: #b8cbd1;
  background: -webkit-gradient(linear, left top, right top, from(#b8cbd1), color-stop(92%, #e2eaed), color-stop(98%, white));
  background: linear-gradient(to right, #b8cbd1 0%, #e2eaed 92%, white 98%);
  top: 100%;
  left: 0;
}

#content .sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-left: 8px;
  margin-bottom: 35px;
}

#content .sns div.hatena {
  height: 20px !important;
  margin-right: 5px;
}

#content .sns div.hatena div.btn-standard, #content .sns div.hatena a.hatena-bookmark-button {
  -webkit-transition: 0.5s !important;
  transition: 0.5s !important;
}

#content .sns div.facebook_like {
  margin-right: 5px;
}

#content .sns div.facebook_like .fb_iframe_widget > span {
  vertical-align: baseline !important;
}

#content .sns div.twitter {
  height: 20px !important;
}

#content .sns_bottom {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-bottom: 0px;
}

#content .tag-area {
  margin-top: 14px;
  margin-left: 8px;
  margin-bottom: 30px;
  color: #107c9c;
}

#content .tag-area ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

#content .tag-area ul li {
  margin-left: 0;
  margin-right: 5px;
  margin-bottom: 5px;
  padding-left: 0;
  list-style: none;
}

#content .tag-area ul li a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  display: block;
  padding: 5px 10px;
  font-size: 0.64rem;
  line-height: 0.9rem;
  border: 1px solid #107c9c;
  border-radius: 0.9rem;
  text-decoration: none;
}

#content .tag-area ul li a:hover {
  text-decoration: none;
  background: #107c9c;
  color: #fff;
}

#content .author-area {
  margin-left: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#content .author-area .author-area__thumb {
  -ms-flex-preferred-size: 80px;
      flex-basis: 80px;
  position: relative;
}

#content .author-area .author-area__thumb img {
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

#content .author-area .author-area__thumb span {
  position: absolute;
  top: 40px;
  left: 47px;
  font-size: 0.6rem;
  background: #D7063B;
  color: #fff;
  border-radius: 50%;
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
}

#content .author-area .author-area__data p.author-area__name {
  margin-top: 5px;
  margin-bottom: 0;
  font-size: 0.94rem;
  font-weight: 500;
}

#content .author-area .author-area__data p.author-area__date {
  margin-top: 0px;
  margin-bottom: 0;
  font-size: 0.82rem;
  color: #107c9c;
}

#content .author-Profile {
  display: block;
  margin: 20px 0 0px 5px;
}

#content .author-Profile p.Proftxt {
  font-size: 0.78rem;
  line-height: 1.4rem;
  color: #585858;
}

#content .author-Profile p.Proftxt a[target="_blank"]::after {
  font-family: FontAwesome;
  text-align: right;
  content: "\f08e";
  margin-left: 3px;
  margin-right: 3px;
  display: inline-block;
  vertical-align: -1px;
}

@media screen and (max-width: 767px) {
  #content {
    margin: 0 auto;
  }
  #content .article-single h1 {
    margin: 30px 20px 20px 20px;
  }
  #content .article-single p.article-single__dete {
    margin: 0px 20px 25px 20px;
  }
  #content img {
    width: 100%;
    height: 100%;
  }
  #content div#article-single__image {
    margin-top: 30px !important;
  }
  #content .article-single__entry {
    word-wrap: break-word;
    margin: 30px 20px 20px 20px;
  }
  #content .article-single__entry .v_youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    margin-bottom: 50px;
  }
  #content .article-single__entry .v_youtube iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  #content .article-single__entry .water_w {
    position: relative;
    margin-right: -10px;
  }
  #content .article-single__entry .water_w .curtain {
    top: 0;
    right: 0;
    height: 100%;
    width: 17px;
    position: absolute;
  }
  #content .article-single__entry .water_w .curtain::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0px;
    z-index: 10;
    background: white;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(40%, white));
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 40%);
    background-repeat: no-repeat;
    background-size: 22px;
  }
  #content .article-single__entry .sp_scroll {
    z-index: 13;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  #content .article-single__entry .sp_scroll::-webkit-scrollbar {
    height: 5px;
  }
  #content .article-single__entry .sp_scroll::-webkit-scrollbar-track {
    margin: 0 13px 0 2px;
    background: #ccc;
    border-radius: 5px;
  }
  #content .article-single__entry .sp_scroll::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #666;
  }
  #content .article-single__entry .sp_scroll .crayon-syntax {
    width: 100%;
  }
  #content .article-single__entry .sp_scroll table {
    width: 700px;
    padding-right: 10px;
  }
  #content .article-single__entry pre {
    overflow: scroll;
    word-wrap: normal;
  }
  #content .article-single__entry a, #content .article-single__entry a:link {
    -webkit-transition: 0.2s;
    transition: 0.2s;
  }
  #content .article-single__entry a:hover {
    opacity: 0.6;
  }
  #content .author-Profile {
    margin-left: 20px;
    margin-right: 20px;
  }
  #content .author-area {
    margin: 20px 20px 20px 20px;
  }
  #content .sns {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin: 20px 20px 50px 20px;
  }
  #content .sns_bottom {
    margin: 30px 20px 10px 20px;
  }
  #content .tag-area {
    margin: 20px 20px 10px 20px;
  }
}

@media print {
  .article-list {
    margin-left: 0 !important;
    margin-right: 0 !important;
    zoom: 70%;
  }
  .print_none {
    display: none !important;
  }
  aside {
    display: none;
  }
  #pagenation {
    display: none;
  }
  #article-single__image {
    padding: 0 !important;
    width: 820px !important;
    height: 475px !important;
  }
  #article-single__image img {
    display: block !important;
    width: 100%;
    height: 100%;
  }
  .card__img {
    display: block !important;
  }
  section.hero {
    max-height: none !important;
    height: 1px;
    background-image: none;
  }
  section.hero h1.image-area__title {
    display: none;
  }
  section.hero p.image-area__subtitle {
    color: #000;
    display: none;
    position: static;
  }
}