@charset "UTF-8";
/*
Theme Name: new_theme
Description:name
Version: 1.0
*/
/*変数設定用*/ /***************************************************
 * Generated by SVG Artista on 10/31/2021, 9:40:24 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
/***************************************************
 * Generated by SVG Artista on 10/31/2021, 9:45:05 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 197.761932373px;
    stroke-dasharray: 197.761932373px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 197.761932373px;
  }
}
@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 197.761932373px;
    stroke-dasharray: 197.761932373px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 197.761932373px;
  }
}
.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 2s ease-in 0s both, animate-svg-fill-1 0.7s ease-out 0.8s both;
  animation: animate-svg-stroke-1 2s ease-in 0s both, animate-svg-fill-1 0.7s ease-out 0.8s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 96.6800003052px;
    stroke-dasharray: 96.6800003052px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 96.6800003052px;
  }
}
@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 96.6800003052px;
    stroke-dasharray: 96.6800003052px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 96.6800003052px;
  }
}
.svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 2s ease-in 0.12s both, animate-svg-fill-2 0.7s ease-out 0.9s both;
  animation: animate-svg-stroke-2 2s ease-in 0.12s both, animate-svg-fill-2 0.7s ease-out 0.9s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 138.5199890137px;
    stroke-dasharray: 138.5199890137px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 138.5199890137px;
  }
}
@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 138.5199890137px;
    stroke-dasharray: 138.5199890137px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 138.5199890137px;
  }
}
.svg-elem-3 {
  -webkit-animation: animate-svg-stroke-3 2s ease-in 0.24s both, animate-svg-fill-3 0.7s ease-out 1s both;
  animation: animate-svg-stroke-3 2s ease-in 0.24s both, animate-svg-fill-3 0.7s ease-out 1s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 194.7288818359px;
    stroke-dasharray: 194.7288818359px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 194.7288818359px;
  }
}
@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 194.7288818359px;
    stroke-dasharray: 194.7288818359px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 194.7288818359px;
  }
}
.svg-elem-4 {
  -webkit-animation: animate-svg-stroke-4 2s ease-in 0.36s both, animate-svg-fill-4 0.7s ease-out 1.1s both;
  animation: animate-svg-stroke-4 2s ease-in 0.36s both, animate-svg-fill-4 0.7s ease-out 1.1s both;
}

@-webkit-keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 117.802520752px;
    stroke-dasharray: 117.802520752px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 117.802520752px;
  }
}
@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 117.802520752px;
    stroke-dasharray: 117.802520752px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 117.802520752px;
  }
}
@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-5 {
  -webkit-animation: animate-svg-stroke-5 2s ease-in 0.48s both, animate-svg-fill-5 0.7s ease-out 1.2s both;
  animation: animate-svg-stroke-5 2s ease-in 0.48s both, animate-svg-fill-5 0.7s ease-out 1.2s both;
}

@-webkit-keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 117.8068466187px;
    stroke-dasharray: 117.8068466187px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 117.8068466187px;
  }
}
@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 117.8068466187px;
    stroke-dasharray: 117.8068466187px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 117.8068466187px;
  }
}
@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-6 {
  -webkit-animation: animate-svg-stroke-6 2s ease-in 0.6s both, animate-svg-fill-6 0.7s ease-out 1.3s both;
  animation: animate-svg-stroke-6 2s ease-in 0.6s both, animate-svg-fill-6 0.7s ease-out 1.3s both;
}

@-webkit-keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 117.806892395px;
    stroke-dasharray: 117.806892395px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 117.806892395px;
  }
}
@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 117.806892395px;
    stroke-dasharray: 117.806892395px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 117.806892395px;
  }
}
@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-7 {
  -webkit-animation: animate-svg-stroke-7 2s ease-in 0.72s both, animate-svg-fill-7 0.7s ease-out 1.4s both;
  animation: animate-svg-stroke-7 2s ease-in 0.72s both, animate-svg-fill-7 0.7s ease-out 1.4s both;
}

@-webkit-keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 117.8155059814px;
    stroke-dasharray: 117.8155059814px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 117.8155059814px;
  }
}
@keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 117.8155059814px;
    stroke-dasharray: 117.8155059814px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 117.8155059814px;
  }
}
@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-8 {
  -webkit-animation: animate-svg-stroke-8 2s ease-in 0.84s both, animate-svg-fill-8 0.7s ease-out 1.5s both;
  animation: animate-svg-stroke-8 2s ease-in 0.84s both, animate-svg-fill-8 0.7s ease-out 1.5s both;
}

@-webkit-keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 121.2941513062px;
    stroke-dasharray: 121.2941513062px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 121.2941513062px;
  }
}
@keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 121.2941513062px;
    stroke-dasharray: 121.2941513062px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 121.2941513062px;
  }
}
@-webkit-keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-9 {
  -webkit-animation: animate-svg-stroke-9 2s ease-in 0.96s both, animate-svg-fill-9 0.7s ease-out 1.6s both;
  animation: animate-svg-stroke-9 2s ease-in 0.96s both, animate-svg-fill-9 0.7s ease-out 1.6s both;
}

@-webkit-keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 121.0960769653px;
    stroke-dasharray: 121.0960769653px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 121.0960769653px;
  }
}
@keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 121.0960769653px;
    stroke-dasharray: 121.0960769653px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 121.0960769653px;
  }
}
@-webkit-keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-10 {
  -webkit-animation: animate-svg-stroke-10 2s ease-in 1.08s both, animate-svg-fill-10 0.7s ease-out 1.7s both;
  animation: animate-svg-stroke-10 2s ease-in 1.08s both, animate-svg-fill-10 0.7s ease-out 1.7s both;
}

@-webkit-keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 117.8067932129px;
    stroke-dasharray: 117.8067932129px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 117.8067932129px;
  }
}
@keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 117.8067932129px;
    stroke-dasharray: 117.8067932129px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 117.8067932129px;
  }
}
@-webkit-keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(236, 197, 47);
  }
}
@keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(236, 197, 47);
  }
}
.svg-elem-11 {
  -webkit-animation: animate-svg-stroke-11 2s ease-in 1.2s both, animate-svg-fill-11 0.7s ease-out 1.8s both;
  animation: animate-svg-stroke-11 2s ease-in 1.2s both, animate-svg-fill-11 0.7s ease-out 1.8s both;
}

@-webkit-keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 117.8112106323px;
    stroke-dasharray: 117.8112106323px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 117.8112106323px;
  }
}
@keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 117.8112106323px;
    stroke-dasharray: 117.8112106323px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 117.8112106323px;
  }
}
@-webkit-keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(236, 197, 47);
  }
}
@keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(236, 197, 47);
  }
}
.svg-elem-12 {
  -webkit-animation: animate-svg-stroke-12 2s ease-in 1.32s both, animate-svg-fill-12 0.7s ease-out 1.9s both;
  animation: animate-svg-stroke-12 2s ease-in 1.32s both, animate-svg-fill-12 0.7s ease-out 1.9s both;
}

@-webkit-keyframes animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 121.0356903076px;
    stroke-dasharray: 121.0356903076px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 121.0356903076px;
  }
}
@keyframes animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 121.0356903076px;
    stroke-dasharray: 121.0356903076px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 121.0356903076px;
  }
}
@-webkit-keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(236, 197, 47);
  }
}
@keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(236, 197, 47);
  }
}
.svg-elem-13 {
  -webkit-animation: animate-svg-stroke-13 2s ease-in 1.44s both, animate-svg-fill-13 0.7s ease-out 2s both;
  animation: animate-svg-stroke-13 2s ease-in 1.44s both, animate-svg-fill-13 0.7s ease-out 2s both;
}

@font-face {
  font-family: "acumin";
  src: url("./fonts/Acumin-BdPro.otf");
}
@font-face {
  font-family: "rock";
  src: url("./fonts/RockvilleSolid.otf");
}
.under_fv {
  background-size: cover;
  position: relative;
}
.under_fv .container {
  min-height: 365px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .under_fv .container {
    min-height: auto;
  }
}
.under_fv h2 {
  font-family: "acumin";
  font-size: 4vw;
  color: #fff;
  font-weight: bold;
  margin: 200px 0 50px;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .under_fv h2 {
    font-size: 3.6rem;
    margin: 150px 0 30px;
  }
}
.under_fv h2 span {
  font-size: 1.3vw;
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .under_fv h2 span {
    font-size: 1.8rem;
    margin-bottom: 10px;
  }
}
.under_fv.fv_works {
  background-image: url("./img/fv_works.png");
  background-position: center;
}

.breadcumb {
  background: #f7f7f7;
  padding: 45px 30px;
}
@media screen and (max-width: 767px) {
  .breadcumb {
    width: 100%;
    padding: 20px 10px;
  }
}
.breadcumb ul {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
}
.breadcumb ul li {
  color: #333;
  font-weight: 500;
  font-size: 1.3rem;
}
.breadcumb ul li a {
  color: #000;
  position: relative;
  padding: 0 2em;
  font-weight: 500;
  font-size: 1.3rem;
}
.breadcumb ul li a:before {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -5px;
  content: "";
  border: 5px solid transparent;
  border-left: 5px solid #000;
}
.breadcumb ul li a:after {
  position: absolute;
  right: 5px;
  top: 50%;
  margin-top: -7px;
  content: "＞";
  font-size: 1rem;
}

.works_wrap {
  padding: 120px 0 110px;
  background: #f2f5f7;
}
@media screen and (max-width: 767px) {
  .works_wrap {
    padding: 50px 0;
  }
}
.works_wrap .searchbox {
  margin-bottom: 75px;
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.15));
}
@media screen and (max-width: 767px) {
  .works_wrap .searchbox {
    margin-bottom: 30px;
  }
}
.works_wrap .searchbox dt {
  background: #fddf63;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  font-size: 1.6rem;
  color: #000;
  font-weight: bold;
  position: relative;
}
.works_wrap .searchbox dd {
  background: #fff;
  padding: 0 40px;
  border-radius: 0 0 15px 15px;
}
@media screen and (max-width: 767px) {
  .works_wrap .searchbox dd {
    padding: 0 20px;
  }
}
.works_wrap .searchbox dd .txt {
  font-size: 1.6rem;
  text-align: center;
  padding-top: 30px;
  color: #333;
}
@media screen and (max-width: 767px) {
  .works_wrap .searchbox dd .txt {
    font-size: 1.4rem;
    padding: 20px 0;
  }
}
.works_wrap .searchbox dd .searchandfilter {
  margin-bottom: 75px;
}
@media screen and (max-width: 767px) {
  .works_wrap .searchbox dd .searchandfilter {
    margin-bottom: 30px;
  }
}
.works_wrap .searchbox dd .searchandfilter > ul li {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #333;
}
@media screen and (max-width: 767px) {
  .works_wrap .searchbox dd .searchandfilter > ul li {
    padding: 0;
    margin-bottom: 10px;
    display: block;
  }
}
.works_wrap .searchbox dd .searchandfilter > ul li h4 {
  width: 170px;
  font-size: 1.6rem;
  color: #000;
  font-weight: bold;
}
.works_wrap .searchbox dd .searchandfilter > ul li > ul {
  display: flex;
  width: calc(100% - 170px);
}
@media screen and (max-width: 767px) {
  .works_wrap .searchbox dd .searchandfilter > ul li > ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }
}
.works_wrap .searchbox dd .searchandfilter > ul li > ul li {
  border: none;
}
.works_wrap .searchbox dd .searchandfilter > ul li > ul li input[type=checkbox] {
  display: none;
}
.works_wrap .searchbox dd .searchandfilter > ul li > ul li input[type=checkbox].sf-input-checkbox:checked + label {
  background: #fddf63;
  border: 1px solid #fddf63;
  color: #000;
}
.works_wrap .searchbox dd .searchandfilter > ul li > ul li .sf-label-checkbox {
  display: block;
  margin: 5px;
  text-align: center;
  padding: 3px 20px;
  cursor: pointer;
  color: #000;
  font-size: 1.2rem;
  border: 1px solid #000;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .works_wrap .searchbox dd .searchandfilter > ul li > ul li .sf-label-checkbox {
    padding: 3px 10px;
  }
}
.works_wrap .searchbox dd .searchandfilter > ul li > ul li .sf-label-checkbox:hover {
  background-color: #e2edf9;
}
.works_wrap .searchbox dd .searchandfilter > ul li:last-child {
  border: none;
}
.works_wrap .notfound {
  font-size: 1.6rem;
  color: #000;
  text-align: center;
}

.works_list {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .works_list {
    display: block;
  }
}
.works_list li {
  float: left;
  width: 32%;
  margin-bottom: 45px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.15));
  transition: 0.3s;
}
.works_list li:hover {
  -webkit-animation: poyopoyo 2s ease-out infinite;
          animation: poyopoyo 2s ease-out infinite;
}
@media screen and (max-width: 767px) {
  .works_list li {
    float: none;
    width: 100%;
    margin-bottom: 15px;
  }
}
.works_list li:nth-child(3n+2) {
  margin: 0 2% 45px;
}
@media screen and (max-width: 767px) {
  .works_list li:nth-child(3n+2) {
    margin: 0 auto 15px;
  }
}
.works_list li .thum {
  overflow: hidden;
  position: relative;
  height: 200px;
}
.works_list li .thum img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}
.works_list li .white {
  padding: 30px;
}
@media screen and (max-width: 767px) {
  .works_list li .white {
    padding: 15px;
  }
}
.works_list li .white .cate-wrap span {
  font-size: 1.2rem;
  color: #000;
  padding: 6px 12px;
  line-height: 1;
  background: #fddf63;
  display: inline-block;
  margin-right: 0.4rem;
}
.works_list li .white h3 {
  font-size: 1.4rem;
  color: #000;
  margin: 15px auto;
}
@media screen and (max-width: 767px) {
  .works_list li .white h3 {
    margin: 10px auto;
  }
}
.works_list li .white h3 a {
  font-size: 1.4rem;
  color: #000;
}
.works_list li .white .service_name {
  font-size: 1.8rem;
  font-weight: bold;
}/*# sourceMappingURL=style.css.map */