﻿.nBoxList2 li:before {
  background: #00626b;
}

.nBoxList2 li > p:first-child {
  color: #00626b;
}

.button a {
  background: #00626b;
}

header h1 {
  color: #1a653a;
}

article h2 {
  background: #00626b;
}

article h3 {
  border-color: #00626b;
  color: #00626b;
}

article h4 {
  border-color: #00626b;
  background: #e8f1ed;
  color: #00626b;
}

article h5 {
  border-color: #00626b;
  color: #00626b;
}

article h6 {
  color: #00626b;
}

section [class*="widget"] {
  margin-top: 64px;
}
section [class*="widget"]:first-child {
  margin-top: 0;
}

@media print, screen and (min-width: 751px) {
  /* header */
  #header-menu2 {
    border-bottom-color: #00626b;
  }

  /* footer */
  #footer {
    background: #00626b;
  }

  #home-img {
    padding: 0;
    height: 560px;
  }

  #home-img.lazyloaded {
    background: url(hojin_main_img.jpg) no-repeat 50% 0;
  }

  #home-service {
    background: #00626b;
  }

  #home-service h2 {
    color: #d4e2d7;
  }

  #home-service h2:before {
    color: #fff;
  }

  .widget-service ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -8px;
    list-style-type: none;
  }

  .widget-service li {
    margin: 8px;
    width: calc(33.33% - 16px);
  }

  .widget-service a:before {
    content: "";
    display: block;
    width: 100%;
    height: 100px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }

  .widget-service a:after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 16px;
    height: 16px;
    background: #00546c;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  }

  .widget-service a {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border: solid 2px #00546c;
    padding: 40px 0;
    height: auto !important;
    background: #fff !important;
    color: #00626b;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
  }

  .widget-service .s7,
  .widget-service .s8 {
    width: calc(50% - 16px);
  }

  .widget-service .s7 a,
  .widget-service .s8 a {
    display: block;
    border: none;
    padding: 0;
    height: 128px !important;
    text-align: left;
  }

  .widget-service .s7 a:before,
  .widget-service .s7 a:after,
  .widget-service .s8 a:before,
  .widget-service .s8 a:after {
    content: none !important;
  }

  .widget-service .s1 a.lazyloaded:before {
    background-image: url(hojin_ic01.png);
  }

  .widget-service .s2 a.lazyloaded:before {
    background-image: url(hojin_ic02.png);
  }

  .widget-service .s3 a.lazyloaded:before {
    background-image: url(hojin_ic03.png);
  }

  .widget-service .s4 a.lazyloaded:before {
    background-image: url(hojin_ic04.png);
  }

  .widget-service .s5 a.lazyloaded:before {
    background-image: url(hojin_ic05.png);
  }

  .widget-service .s6 a.lazyloaded:before {
    background-image: url(hojin_ic06.png);
  }

  .widget-service .s7 a.lazyloaded {
    background: url(hojin_bn01.png) no-repeat !important;
  }

  .widget-service .s8 a.lazyloaded {
    background: url(hojin_bn02.png) no-repeat !important;
  }

  #hojin-thought {
    background: #d7e2e0;
    text-align: center;
  }

  #hojin-thought h2:before {
    color: #000;
  }

  #hojin-thought h2 {
    color: #00626b;
  }

  #hojin-merit h2:before {
    color: #000;
  }

  #hojin-merit h2 {
    color: #00626b;
  }

  #hojin-column {
    background: #d7e2e0;
  }

  #hojin-column h2:before {
    color: #00626b;
  }

  #hojin-column h2 {
    color: #00546c;
  }

  .widget-banner ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -8px;
    list-style-type: none;
  }
  .widget-banner li {
    margin: 8px;
  }
  .widget-banner a {
    display: block;
    text-indent: -9999px;
  }
  .widget-banner .voice a {
    width: 504px;
    height: 128px;
    background: url(hojin_voice.png) no-repeat;
  }

  /* content */
  header {
    background: url(hojin_h1_bg.jpg) no-repeat;
  }
}

@media screen and (min-width: 1601px) {
  #home-img {
    padding: 0;
    height: 700px;
  }
  #home-img.lazyloaded {
    background: url(hojin_main_img-large.jpg) no-repeat 50% 0;
  }
}
@media screen and (max-width: 750px) {
  /* header */
  #header {
    border-bottom-color: #00626b;
  }

  /* footer */
  #footer {
    background: #00626b;
    color: #fff;
  }

  #footer a {
    color: #fff;
  }

  #footer-name .img.lazyloaded {
    background: url(../sp_f_logo-w.png) no-repeat 50% 0/50% auto !important;
  }

  /* content */
  section [class*="widget"] {
    margin-top: 20px;
  }

  #home-img {
    padding: 0;
    height: 80vw;
  }

  #home-img.lazyloaded {
    background: url(sp_hojin_main_img.jpg) no-repeat;
  }

  #home-service {
    background: #00626b;
  }

  #home-service h2 {
    color: #d4e2d7;
  }

  #home-service h2:before {
    color: #fff;
  }

  .widget-service ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0 5px;
    list-style-type: none;
  }

  .widget-service li {
    margin: 5px;
    width: calc(50% - 10px);
  }

  .widget-service a:before {
    content: "";
    display: block;
    padding-top: 12vw;
    width: 100%;
    height: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .widget-service a:after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 16px;
    height: 16px;
    background: #00546c;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  }

  .widget-service a {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border: solid 2px #00546c;
    padding: 20px 0 !important;
    height: auto !important;
    background: #fff !important;
    color: #00626b;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
  }

  .widget-service .s7,
  .widget-service .s8 {
    width: calc(50% - 10px);
  }

  .widget-service .s7 a,
  .widget-service .s8 a {
    display: block;
    border: none;
    padding: 73.17% 0 0 !important;
    height: 0 !important;
    text-align: left;
  }

  .widget-service .s7 a:before,
  .widget-service .s7 a:after,
  .widget-service .s8 a:before,
  .widget-service .s8 a:after {
    content: none !important;
  }

  .widget-service .s1 a.lazyloaded:before {
    background-image: url(hojin_ic01.png);
  }

  .widget-service .s2 a.lazyloaded:before {
    background-image: url(hojin_ic02.png);
  }

  .widget-service .s3 a.lazyloaded:before {
    background-image: url(hojin_ic03.png);
  }

  .widget-service .s4 a.lazyloaded:before {
    background-image: url(hojin_ic04.png);
  }

  .widget-service .s5 a.lazyloaded:before {
    background-image: url(hojin_ic05.png);
  }

  .widget-service .s6 a.lazyloaded:before {
    background-image: url(hojin_ic06.png);
  }

  .widget-service .s7 a.lazyloaded {
    background: url(sp_hojin_bn01.png) no-repeat 0 0 / contain !important;
  }

  .widget-service .s8 a.lazyloaded {
    background: url(sp_hojin_bn02.png) no-repeat 0 0 / contain !important;
  }

  #hojin-thought {
    background: #d7e2e0;
    text-align: center;
  }

  #hojin-thought .wrapper {
    padding: 0 10px;
  }

  #hojin-thought h2:before {
    color: #000;
  }

  #hojin-thought h2 {
    color: #00626b;
  }

  #hojin-merit h2:before {
    color: #000;
  }

  #hojin-merit h2 {
    color: #00626b;
  }

  #hojin-merit .wrapper {
    padding: 0 10px;
  }

  #hojin-merit .nBoxList2 p:first-child {
    font-size: 20px;
  }

  #hojin-merit .nBoxList2 li::before {
    top: 2px;
  }

  #hojin-column {
    background: #d7e2e0;
  }

  #hojin-column h2:before {
    color: #00626b;
  }

  #hojin-column h2 {
    color: #00546c;
  }

  .widget-banner ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -5px;
    list-style-type: none;
  }
  .widget-banner li {
    margin: 5px auto;
    width: 85.33%;
  }
  .widget-banner a {
    display: block;
    text-indent: -9999px;
  }
  .widget-banner .voice a {
    padding-top: 25.31%;
    height: 0;
    background: url(sp_hojin_voice.png) no-repeat 0 0 / contain;
  }

  /* content */
  header {
    background: url(hojin_h1_bg.jpg) no-repeat;
  }
}
