@charset "UTF-8";
@import url("global.css");
.sectitle::before {
  content: "";
  width: 32px;
  height: 3px;
  display: block;
  border-radius: 10px;
  background-color: #F08300;
  margin: 0 auto;
  margin-bottom: 20px;
}
.sectitle span {
  display: block;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
}

.mainblock {
  display: flex;
  padding-top: 120px;
}
.mainblock .main {
  width: 50%;
  align-content: center;
}
.mainblock .main .lead {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 2;
  margin-bottom: 40px;
}
.mainblock .main .text p + p {
  margin-top: 20px;
}
.mainblock .image {
  order: 2;
  width: 50%;
  mix-blend-mode: initial;
  align-self: flex-start;
  flex-shrink: 0;
  margin-left: 5%;
}

.worries {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  padding: 40px 20px;
  text-align: center;
  margin-top: 120px;
}
.worries .sectitle {
  font-size: 28px;
  margin-bottom: 50px;
}
.worries ul {
  display: flex;
}
.worries ul li {
  width: 25%;
  margin: 0 10px;
  background-color: #fff;
  border-radius: 5px;
  position: relative;
  box-sizing: border-box;
  padding: 50px 10px 30px;
}
.worries ul li::before {
  content: "\f00c";
  font-size: 50px;
  font-weight: 900;
  font-family: "Font Awesome 6 free", "Font Awesome 6 Brands";
  line-height: 1;
  letter-spacing: 0;
  color: #ddd;
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  z-index: 0;
}
.worries ul li .h {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
}

.menu {
  padding-top: 120px;
}
.menu .sectitle {
  text-align: center;
  margin-bottom: 60px;
  line-height: 1;
}
.menu .list .first_menu {
  display: flex;
  margin-bottom: 40px;
  justify-content: space-between;
  align-items: center;
}
.menu .list .first_menu .image {
  width: 50%;
  position: relative;
  height: 0;
  padding-top: 25%;
  border-radius: 3px;
  overflow: hidden;
}
.menu .list .first_menu .image img {
  position: absolute;
  top: 0;
  left: 0;
}
.menu .list .first_menu .text {
  width: 50%;
  text-align: center;
}
.menu .list .first_menu .text .h {
  position: relative;
  text-align: center;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 20px;
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
}
.menu .list .first_menu .text .h span {
  display: block;
  font-size: 1.5em;
  letter-spacing: 0;
}
.menu .list .first_menu .text p:not([class]) {
  font-size: 17px;
  text-align: center;
}
.menu .list ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px 30px;
}
.menu .list ul li {
  width: 25%;
  box-sizing: border-box;
  padding: 0 20px;
  margin-bottom: 50px;
}
.menu .list ul li .image {
  position: relative;
  height: 0;
  padding-top: 67%;
  border-radius: 3px;
  overflow: hidden;
}
.menu .list ul li .image img {
  position: absolute;
  top: 0;
  left: 0;
}
.menu .list ul li .h {
  position: relative;
  text-align: center;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  margin: 20px 0;
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
}
.menu .list ul li .h span {
  display: block;
  font-size: 1.5em;
  letter-spacing: 0;
}
.menu .list ul li p:not([class]) {
  font-size: 15px;
  text-align: justify;
}

.works {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 120px;
}
.works .sectitle {
  text-align: center;
}
.works article {
  background-color: #fff;
  border-radius: 5px;
  padding: 45px 60px 50px;
  position: relative;
  margin-top: 60px;
}
.works article .h {
  text-align: center;
  font-size: 24px;
  margin-bottom: 40px;
}
.works article .h span {
  font-size: 14px;
  font-weight: 400;
  display: block;
}
.works article .text {
  margin-bottom: 60px;
}
.works article ul.carousel li .imagebox {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 20px;
}
.works article ul.carousel li .imagebox figure {
  margin: 0 2%;
}
.works article ul.carousel li .imagebox figure figcaption {
  font-size: 20px;
  text-align: center;
  padding: 2px 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.works article ul.carousel li .imagebox figure span {
  display: block;
}
.works article ul.carousel li .imagebox .before {
  width: 45%;
}
.works article ul.carousel li .imagebox .before figcaption {
  background: #ddd;
}
.works article ul.carousel li .imagebox .after {
  width: 55%;
}
.works article ul.carousel li .imagebox .after figcaption {
  color: #FFF;
  background: #826C53;
}
.works article ul.carousel li .imagebox.tate .before {
  width: 33%;
}
.works article ul.carousel li .imagebox.tate .after {
  width: 67%;
}
.works article ul.carousel li .caption {
  text-align: center;
  background-color: #F1F0ED;
  padding: 8px 20px;
  line-height: 1.5;
}
.works article ul.carousel .slick-prev,
.works article ul.carousel .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  margin-top: -22px;
  display: block;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: transparent;
  background-color: #fff;
  border: #c5c5c5 1px solid;
  border-radius: 100%;
  outline: none;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: none;
  z-index: 2;
}
.works article ul.carousel .slick-prev:hover::before,
.works article ul.carousel .slick-prev:focus::before,
.works article ul.carousel .slick-next:hover::before,
.works article ul.carousel .slick-next:focus::before {
  opacity: 1;
}
.works article ul.carousel .slick-prev::before,
.works article ul.carousel .slick-next::before {
  content: "\f105";
  font-size: 22px;
  font-weight: 900;
  font-family: "Font Awesome 6 free", "Font Awesome 6 Brands";
  color: #c5c5c5;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 1px 0 0 -6px;
}
.works article ul.carousel .slick-prev::before {
  transform: scaleX(-1);
}
.works article ul.carousel .slick-next {
  right: -20px;
  left: auto;
}
.works article ul.carousel .slick-prev {
  left: -20px;
  right: auto;
}

.contact {
  padding: 90px 0 120px;
}
.contact .text {
  text-align: center;
  line-height: 2;
}
.contact .text p {
  font-size: 1.5em;
  font-weight: 700;
}
.contact .text p + p {
  margin-top: 20px;
}
.contact .goform .button {
  margin-top: 40px;
}
.contact .goform .button a {
  margin: 0 auto;
  display: block;
  position: relative;
  max-width: 540px;
  border-radius: 3px;
  padding: 2px 60px 2px 30px;
  background-color: #fff;
  font-size: 16px;
}
.contact .goform .button a br {
  display: none;
}
.contact .goform .button a::before, .contact .goform .button a::after {
  font-size: 30px;
  font-family: "Font Awesome 6 free", "Font Awesome 6 Brands";
  font-weight: 900;
  color: #c5c5c5;
}
.contact .goform .button a::before {
  content: "\f0e0";
  display: inline-block;
  margin-right: 15px;
  vertical-align: -6px;
}
.contact .goform .button a::after {
  content: "\f107";
  position: absolute;
  line-height: 1;
  right: 20px;
  top: 50%;
  margin-top: -12px;
}

.slide {
  mix-blend-mode: multiply;
}
.slide .carousel {
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}
.slide .carousel .item {
  margin-right: 3px;
}
.slide .carousel .item img {
  height: 400px;
}
.slide .carousel.visible {
  opacity: 1;
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 (1300px)

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  .mainblock .main .lead br {
    display: none;
  }

  .worries ul li p br {
    display: none;
  }

  .menu .list ul {
    margin: 0 -1vw 30px;
  }
  .menu .list ul li {
    padding: 0 1vw;
  }

  .works article ul.carousel .slick-prev,
  .works article ul.carousel .slick-next {
    top: 20vw;
  }

  .slide .carousel .item img {
    height: 350px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .sectitle span {
    font-size: 24px;
  }

  .mainblock {
    display: block;
    padding-top: 90px;
  }
  .mainblock .image {
    width: 100%;
    margin: 0;
  }
  .mainblock .main {
    width: auto;
    padding-block: 50px 0;
  }
  .mainblock .main .lead {
    font-size: 1.3em;
    margin-bottom: 40px;
  }
  .mainblock .main .lead br {
    display: inline;
  }

  .worries {
    margin-top: 90px;
  }
  .worries .sectitle {
    font-size: 26px;
    margin-bottom: 30px;
  }
  .worries ul {
    display: block;
  }
  .worries ul li {
    width: auto;
    margin: 40px 0 20px;
  }
  .worries ul li .h {
    font-size: 18px;
  }

  .menu {
    padding-top: 90px;
  }
  .menu .sectitle {
    margin-bottom: 40px;
  }
  .menu .list .first_menu .image {
    padding-top: 35%;
  }
  .menu .list .first_menu .text .h {
    font-size: 21px;
  }
  .menu .list .first_menu .text p:not([class]) {
    font-size: 15px;
  }
  .menu .list ul {
    margin: 0 -2vw 30px;
  }
  .menu .list ul li {
    width: 50%;
    padding: 0 2vw;
  }

  .works {
    margin-top: 90px;
  }
  .works article {
    padding: 45px 40px 40px;
  }
  .works article .h {
    margin-bottom: 30px;
  }
  .works article .text {
    font-size: 15px;
    margin-bottom: 40px;
  }

  .contact {
    padding: 60px 0 90px;
  }
  .contact .text p {
    font-size: 1.3em;
  }

  .slide .carousel .item {
    margin-right: 2px;
  }
  .slide .carousel .item img {
    height: 300px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .sectitle::before {
    margin-bottom: 20px;
  }
  .sectitle span {
    font-size: 20px;
  }

  .mainblock {
    padding-top: 60px;
  }
  .mainblock .main {
    padding-block: 40px 0;
    margin-left: auto;
    line-height: 2;
    align-content: center;
  }
  .mainblock .main .lead {
    font-size: min(18px,3.5vw);
    margin: 0 -10px 30px 0;
  }
  .mainblock .main .text {
    line-height: 1.6;
  }
  .mainblock .main .text p + p {
    margin-top: 1em;
  }

  .worries {
    padding: 30px 20px 20px;
    margin-top: 60px;
  }
  .worries .sectitle {
    font-size: 21px;
    margin-bottom: 20px;
  }
  .worries ul {
    display: block;
  }
  .worries ul li {
    padding: 40px 10px 20px;
    margin: 20px 0;
  }
  .worries ul li .h {
    font-size: 16px;
  }
  .worries ul li br {
    display: inline;
  }
  .worries ul li::before {
    font-size: 42px;
    top: -12px;
  }

  .menu {
    padding-top: 60px;
  }
  .menu .sectitle {
    margin-bottom: 30px;
  }
  .menu .list .first_menu {
    display: block;
    margin-bottom: 35px;
  }
  .menu .list .first_menu .image {
    width: auto;
    padding-top: 60%;
  }
  .menu .list .first_menu .text {
    width: auto;
  }
  .menu .list .first_menu .text .h {
    font-size: 16px;
    margin: 10px 0;
  }
  .menu .list .first_menu .text p:not([class]) {
    font-size: inherit;
    margin: 0 10px;
  }
  .menu .list ul {
    display: block;
    margin: 0 0 50px;
  }
  .menu .list ul li {
    width: auto;
    padding: 0;
    margin-bottom: 35px;
  }
  .menu .list ul li .image {
    padding-top: 60%;
  }
  .menu .list ul li .h {
    font-size: 16px;
    margin: 10px 0;
  }
  .menu .list ul li p:not([class]) {
    font-size: inherit;
    margin: 0 10px;
  }

  .works {
    margin-top: 60px;
  }
  .works article {
    padding: 35px 20px 40px;
    margin-top: 60px;
  }
  .works article .h {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
  }
  .works article .h span {
    font-size: 14px;
    font-weight: 400;
  }
  .works article .text {
    margin-bottom: 20px;
    font-size: 13px;
  }
  .works article ul.carousel li .imagebox {
    margin: 0 -1.5%;
    margin-bottom: 10px;
  }
  .works article ul.carousel li .imagebox figure {
    margin: 0 1.5%;
  }
  .works article ul.carousel li .imagebox figure figcaption {
    font-size: 13px;
    padding: 0 2px;
    margin-bottom: 5px;
  }
  .works article ul.carousel li .caption {
    padding: 5px 10px;
    font-size: .9em;
  }
  .works article ul.carousel .slick-prev,
  .works article ul.carousel .slick-next {
    top: 20vw;
    width: 36px;
    height: 36px;
  }
  .works article ul.carousel .slick-prev,
  .works article ul.carousel .slick-next {
    margin-top: -20px;
    width: 40px;
    height: 40px;
  }
  .works article ul.carousel .slick-prev::before,
  .works article ul.carousel .slick-next::before {
    font-size: 20px;
    margin: 0 0 0 -6px;
  }
  .works article ul.carousel .slick-next {
    right: -40px;
  }
  .works article ul.carousel .slick-prev {
    left: -40px;
  }

  .contact {
    padding: 30px 0 60px;
  }
  .contact .text {
    line-height: 1.6;
  }
  .contact .text p {
    font-size: min(18px,3.5vw);
  }
  .contact .text p + p {
    margin-top: 1em;
  }
  .contact .goform .button a {
    max-width: none;
    padding: 12px 0;
    font-size: 14px;
    text-align: center;
    line-height: 1.5;
  }
  .contact .goform .button a br {
    display: inline;
  }
  .contact .goform .button a::before, .contact .goform .button a::after {
    display: block;
    font-size: 24px;
  }
  .contact .goform .button a::before {
    display: none;
  }
  .contact .goform .button a::after {
    position: static;
    margin-top: 5px;
  }

  .slide .carousel .item img {
    height: 25svh;
  }
}