@charset "UTF-8";
/* mixin
------------------------------*/
html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-weight: normal;
  font-style: normal;
}

body {
  padding: 0;
  font-size: 22px;
  line-height: 1.5em;
  font-family: "M PLUS 1p", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ";
  color: #464547;
  font-weight: 500;
}

/*\*/
* html div {
  height: 1em;
}

div {
  display: block;
}

/**/
/* clearfix
------------------------------*/
.clearfix:after {
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
  content: ".";
}

.clearfix {
  display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%;
}

/* End hide from IE-mac */
.clearfix {
  display: block;
}

/* clear */
.clear {
  clear: both;
}

p, ul {
  display: block;
}

p {
  margin-bottom: 20px;
  font-weight: 500;
}

img {
  line-height: 0;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

.R {
  text-align: right;
}

.L {
  text-align: left;
}

.C {
  text-align: center !important;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

p.read {
  margin-bottom: 40px;
}

@media (max-width: 760px) {
  body {
    font-size: 14px;
    line-height: 1.5em;
    -webkit-text-size-adjust: 100%;
  }
  img {
    width: 100%;
  }
}
li {
  list-style: none;
}

h1, h2, h3 {
  font-weight: bold;
}

h2 {
  font-size: 32px;
  color: #fe8402;
  font-weight: bold;
  line-height: 1.8em;
}

.smp {
  display: none;
}

.pc {
  display: block;
}

@media screen and (max-width: 1024px) {
  .smp {
    display: block;
  }
  .pc {
    display: none;
  }
}
a {
  color: #464547;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

b {
  color: #fe8402;
}

header, footer {
  width: 1200px;
  margin: 0 auto;
}

.point p, .ex p, .area p, .area table {
  transform: rotate(0.001deg);
}

/*header*/
header {
  position: relative;
}
header p {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: flex-end;
  width: 590px;
  justify-content: space-between;
}
header .cta {
  position: absolute;
  bottom: 90px;
  left: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#form header {
  position: static;
}

/* headerスマホ */
@media screen and (max-width: 1024px) {
  header, article, footer {
    width: 100%;
  }
  header .cta {
    bottom: 9vw;
    left: 15px;
    right: 15px;
    justify-content: space-between;
  }
  header .cta .bt01 {
    width: 47%;
    margin: 2.85vw 0 0 0;
  }
  header .cta .bt02 {
    width: 47%;
  }
  header .cta img {
    width: 100%;
  }
}
/*コンテンツ*/
h2 {
  font-size: 80px;
  color: #02ac4d;
  font-weight: bold;
  margin-bottom: 60px;
  border-bottom: 10px #f9d902 dashed;
  line-height: 1.4em;
  display: inline-block;
}
h2 img {
  vertical-align: sub;
}

article {
  width: 1200px;
  text-align: center;
  margin: -65px auto 0 auto;
}

.in {
  width: 1200px;
  margin: 0 auto;
}

i {
  font-size: 80%;
}

b {
  color: #fe8402;
  font-weight: bold;
}

em {
  font-style: normal;
}

section {
  width: 100%;
  margin: 0 auto;
}

.caution {
  position: relative;
  text-align: left;
  font-size: 38px;
  line-height: 1.6em;
  width: 84%;
  margin: 20px auto 30px auto;
  height: 120px;
}
.caution:before {
  content: "";
  display: inline-block;
  background-image: url(../images/mark_caution.png);
  background-size: contain;
  vertical-align: middle;
  position: absolute;
  top: 0;
  width: 134px;
  height: 120px;
}
.caution span {
  display: block;
  position: absolute;
  left: 150px;
  font-weight: bold;
}
.caution span em {
  background-color: #fdfe9c;
  font-weight: bold;
}

.entry {
  background: url(../images/entry_bg.png) no-repeat top;
  position: relative;
  height: 720px;
  margin-bottom: 60px;
}
.entry a {
  position: absolute;
  bottom: 115px;
  right: 33px;
}
.entry.msp {
  margin: -60px 0 60px 0;
}

.imgbx {
  margin: -60px auto 110px auto;
  text-align: center;
}
.imgbx img {
  margin: 0 auto;
}

.imgbx.nosp {
  margin: -120px auto 20px auto;
}

/*4つの強み*/
.point .box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.point .box h3 {
  font-size: 44px;
  color: #02ac4d;
  margin-bottom: 30px;
  display: flex;
  align-items: flex-end;
}
.point .box h3 span {
  font-weight: bold;
  line-height: 1.2em;
}
.point .box h3 span.ssp {
  line-height: 2em;
}
.point .box h3 img {
  vertical-align: sub;
  margin-right: 15px;
}
.point .box .tx {
  width: 46%;
  text-align: left;
  padding: 30px 0 0 0;
}
.point .box:nth-child(odd) {
  flex-flow: row-reverse nowrap;
}
.point .imgbx {
  margin: 0 auto 0 auto;
}

/*施工事例*/
.ex {
  margin: -100px 0 0 0;
  padding: 70px 0 100px 0;
}
.ex .in {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ex .in .box {
  width: 510px;
  margin-bottom: 50px;
}
.ex .in .box .imbx {
  height: 309px;
  text-align: center;
  overflow: hidden;
}
.ex .in .box .imbx h3 {
  font-size: 60px;
  color: #FFFFFF;
  line-height: 1.1em;
  text-shadow: 0px 0px 20px #000000;
  margin: -210px auto 0 auto;
}
.ex .in .box .imbx h3.ssp {
  margin: -190px auto 0 auto;
}
.ex .in .box .imbx h3.sssp {
  margin: -190px auto 0 auto;
}
.ex .in .box .tx {
  background-color: #02b757;
  color: #FFFFFF;
  padding: 30px 35px;
  text-align: left;
  height: 300px;
}
.ex .in .box .tx b {
  font-size: 120%;
  position: relative;
  color: #FFFFFF;
  margin: 0 0 10px 45px;
  display: block;
}
.ex .in .box .tx b:before {
  position: absolute;
  content: url("../images/ex_mark.png");
  top: 2px;
  left: -43px;
  width: 41px;
  height: 36px;
}

/*よくある質問*/
.faq {
  width: 90%;
  margin-bottom: 80px;
}
.faq dl {
  margin-bottom: 40px;
  text-align: left;
}
.faq dl dt {
  border: 5px solid #d6d7d7;
  padding: 30px 30px 20px 30px;
  font-size: 120%;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
}
.faq dl dt p {
  margin-left: 85px;
  position: relative;
  padding-top: 10px;
}
.faq dl dt p:before {
  content: url("../images/faq_mark.png");
  position: absolute;
  top: -5px;
  left: -80px;
  width: 65px;
  height: 65px;
}
.faq dl dt p span {
  display: block;
  position: absolute;
  cursor: pointer;
  right: 0;
  top: -5px;
  width: 61px;
  height: 61px;
  margin-right: 5px;
  background: url(../images/bt_plus.png) no-repeat;
}
.faq dl dt p.active span {
  background: url(../images/bt_minus.png) no-repeat;
}
.faq dl dt.ssp p:before {
  top: 10px;
}
.faq dl dt.ssp span {
  top: 10px;
}
.faq dl dd {
  display: none;
  padding: 20px 0;
  padding: 20px 40px;
}

/*対応エリア*/
.area {
  width: 90%;
  margin: 0 auto 80px auto;
}
.area h2 {
  margin-bottom: 20px;
}
.area p {
  margin-bottom: 50px;
}
.area table {
  margin: 50px auto 0 auto;
}
.area table th, .area table td {
  padding: 20px;
}
.area table th {
  background-color: #efefef;
  border-bottom: 2px solid #FFFFFF;
}
.area table td {
  text-align: left;
}

/* コンテンツスマホ */
@media (max-width: 760px) {
  h2 {
    font-size: 30px;
    margin-bottom: 30px;
    border-bottom: 5px #f9d902 dashed;
  }
  h2 img {
    width: 30px;
  }
  article {
    margin: -40px auto 50px auto;
    width: 100%;
  }
  .in {
    width: 100%;
  }
  section {
    width: 100%;
    padding: 0;
    margin: 0 auto 0 auto;
  }
  section p.ttl {
    font-size: 95%;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
  }
  .imgbx {
    margin: -40px auto 60px auto;
  }
  .imgbx.nosp {
    margin: -80px auto 60px auto;
  }
  .caution {
    font-size: 15px;
    height: 60px;
    margin: 10px auto 30px auto;
    width: 94%;
  }
  .caution:before {
    width: 67px;
    height: 60px;
    top: 5px;
  }
  .caution span {
    left: 80px;
  }
  .entry {
    background: url(../images/entry_bg_sp.png) no-repeat top;
    background-size: contain;
    position: relative;
    height: 290px;
    margin-bottom: 60px;
  }
  .entry a {
    position: absolute;
  }
  .entry a.bt01 {
    width: 45%;
    bottom: 50px;
    left: 15px;
  }
  .entry a.bt02 {
    width: 45%;
    bottom: 50px;
    right: 10px;
  }
  .entry.msp {
    margin: -30px 0 30px 0;
  }
  .entry.ssp {
    margin: -15px 0 80px 0;
  }
  .point .box {
    display: block;
  }
  .point .box img {
    width: 80%;
    margin: 0 auto;
  }
  .point .box h3 {
    font-size: 22px;
    margin-bottom: 15px;
  }
  .point .box h3 img {
    width: 10%;
    margin: 0 10px 0 0;
  }
  .point .box h3 img.s {
    width: 6.5%;
  }
  .point .box .tx {
    width: 90%;
    margin: 0 auto;
    padding: 0 0 0 0;
  }
  .point .box:nth-child(odd) h3 img {
    margin: 0 10px 0 0;
  }
  .point .box:nth-child(even) h3 {
    flex-flow: row-reverse nowrap;
    align-items: flex-end;
  }
  .point .box:nth-child(even) h3 img {
    margin: 0 0 0 10px;
  }
  .point .box:nth-child(even) .tx span {
    text-align: right;
  }
  .ex {
    padding: 45px 0 60px 0;
  }
  .ex .in {
    width: 90%;
  }
  .ex .in .box {
    margin: 0 auto 20px auto;
  }
  .ex .in .box .imbx {
    height: 170px;
  }
  .ex .in .box .imbx h3 {
    font-size: 26px;
    margin: -110px auto 0 auto;
    font-weight: bold;
  }
  .ex .in .box .imbx h3.ssp {
    margin: -110px auto 0 auto;
  }
  .ex .in .box .imbx h3.sssp {
    margin: -110px auto 0 auto;
  }
  .ex .in .box .tx {
    height: auto;
    padding: 20px;
    padding: 15px 15px 5px 15px;
  }
  .ex .in .box .tx b {
    margin-bottom: 15px;
    font-size: 120%;
    line-height: 1.5em;
  }
  .ex .in .box .tx b span.active {
    background: url(../images/bt_minus_sp.png) no-repeat;
    background-size: 31px 31px;
  }
  .ex .in .box .tx p {
    display: none;
  }
  .ex .in .box .tx span {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 31px;
    height: 31px;
    margin-right: 5px;
    background: url(../images/bt_plus.png) no-repeat;
    background-size: 31px 31px;
  }
  .area {
    margin: 0 auto 40px auto;
  }
  .area img {
    width: 90%;
  }
  .area p {
    margin-bottom: 20px;
  }
  .area table {
    margin: 20px auto 0 auto;
  }
  .area table th, .area table td {
    width: 90%;
    padding: 5%;
  }
  .faq {
    margin-bottom: 40px;
  }
  .faq dl {
    margin-bottom: 14px;
  }
  .faq dl dt {
    padding: 15px 25px 0px 25px;
    font-size: 110%;
    border: 3px solid #d6d7d7;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
  }
  .faq dl dt p {
    margin-left: 30px;
    padding: 0 20px 0 0;
  }
  .faq dl dt p span {
    right: -20px;
    top: 16%;
    width: 31px;
    height: 31px;
    margin-right: 5px;
    background-size: 31px 31px;
  }
  .faq dl dt p:before {
    content: "";
    display: inline-block;
    background-image: url(../images/faq_mark.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: -40px;
    width: 32px;
    height: 32px;
  }
  .faq dl dt p.active span {
    background-size: 31px 31px;
  }
  .faq dl dt.ssp p:before {
    top: 0;
  }
  .faq dl dt.ssp span {
    top: 0;
  }
  .faq dl dd {
    padding: 15px 15px 5px 15px;
  }
  .faq dl:nth-child(4) dt p span {
    top: 37%;
  }
  /**/
  /* tableスマホ */
  table {
    border-left: none;
    width: 100%;
  }
  table td, table th {
    width: 100%;
    border-right: none;
    display: block;
  }
  table th {
    background-color: #f7f7f7;
    border-bottom: none;
    padding: 15px 0;
  }
  table td {
    background-color: #ffffff;
    padding: 20px 0;
    text-align: center;
  }
  .bt_contact {
    width: 80%;
    margin: 0 auto 40px auto;
  }
  .bt_contact img {
    margin-bottom: 10px;
  }
  .option img {
    margin: 0 auto;
  }
  .worry {
    padding: 30px 0 0 0;
    margin-bottom: 70px;
  }
  .info {
    margin-bottom: 40px;
    background: url(../images/bg01_sp.png) no-repeat top center;
    background-size: cover;
    padding: 10px 0 20px 0;
  }
  .info h1 {
    margin: -60px 0 70px 0;
  }
  .info h1 b {
    font-size: 36px;
  }
  .info img.s {
    width: 250px;
  }
  .info p {
    font-size: 16px;
    padding: 0 20px;
    line-height: 1.7em;
  }
  .info p b {
    font-size: 18px;
    text-align: center;
  }
  .info b {
    font-size: 20px;
  }
  .info i {
    margin-left: 20px;
  }
  .info .read {
    text-align: left;
    padding: 0 16px 0 24px;
  }
}
/*footer*/
footer {
  background: url(../images/grid_green.png) repeat;
}
footer .in {
  background: url(../images/footline.png) no-repeat top;
}
footer .in p {
  color: #FFFFFF;
  padding: 100px 0 70px 0;
  text-align: center;
  font-size: 14px;
  margin-bottom: 0;
}

#pagetop {
  position: fixed;
  right: 60px;
  bottom: 30px;
  background: url(../images/pagetop.png) no-repeat top;
  background-size: 90px 169px;
  width: 90px;
  height: 169px;
  cursor: pointer;
}

/* footerスマホ */
@media (max-width: 760px) {
  #pagetop {
    right: 10px;
    bottom: 96px;
    background-size: 58px 109px;
    width: 58px;
    height: 109px;
  }
  footer {
    background: url(../images/grid_green_sp.png) repeat;
  }
  footer .in {
    background: url(../images/footline_sp.png) no-repeat top;
    background-size: contain;
  }
  footer .in p {
    padding: 50px 0 35px 0;
  }
  .footnav {
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    display: block;
    padding: 15px 0;
    z-index: 9999999;
    overflow: hidden;
    background-color: rgba(25, 163, 75, 0.8);
  }
  .footnav a {
    display: inline-block;
    width: 48%;
    margin-left: 5px;
  }
  .footnav a:first-child {
    width: 46%;
  }
}
@media screen and (min-width: 376px) and (max-width: 429px) {
  article {
    margin-top: -48px;
  }
  .entry {
    background: url(../images/entry_bg_sp.png) no-repeat top;
    background-size: cover;
    height: 320px;
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 430px) and (max-width: 620px) {
  .entry {
    background: url(../images/entry_bg_sp.png) no-repeat top;
    background-size: cover;
    height: 490px;
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 621px) and (max-width: 760px) {
  .entry {
    background: url(../images/entry_bg_sp.png) no-repeat top;
    background-size: cover;
    height: 540px;
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 761px) and (max-width: 1024px) {
  body {
    font-size: 18px;
  }
  h2 img {
    width: 50px;
  }
  .imgbx {
    margin: -60px auto 90px auto;
  }
  header img, .imgbx img, img.tab {
    width: 100%;
  }
  header p {
    width: 390px;
  }
  header p a {
    text-align: right;
  }
  header p a img {
    width: 85%;
  }
  header p img {
    width: 50%;
  }
  header, article, footer, .in {
    width: 100% !important;
  }
  article {
    margin-top: -70px;
  }
  .point .box {
    width: 98%;
    margin: 0 auto 40px auto;
  }
  .entry {
    background: url(../images/entry_bg.png) no-repeat top;
    background-size: contain;
    height: 490px;
  }
  .entry a {
    bottom: 105px;
  }
  .entry a img {
    width: 330px;
  }
  .entry.msp {
    margin: -40px 0 20px 0;
  }
  .footnav {
    display: none !important;
  }
  h2 {
    font-size: 60px;
  }
  .caution {
    font-size: 26px;
  }
  .point .box {
    align-items: flex-start;
  }
  .point .box img {
    width: 53%;
  }
  .point .box h3 {
    font-size: 26px;
    margin-bottom: 20px;
  }
  .point .box h3 img {
    width: 40px;
  }
  .point .box h3 img.s {
    width: 25px;
  }
  .point .box .tx {
    padding: 10px 0 0 0;
  }
  .ex {
    padding: 70px 0 60px 0;
  }
  .ex .in .box {
    width: 48%;
  }
  .ex .in .box img {
    max-width: 100%;
  }
  .ex .in .box .imbx {
    height: 201px;
  }
  .ex .in .box .imbx h3 {
    font-size: 40px;
    margin: -140px auto 0 auto;
  }
  .ex .in .box .imbx h3.ssp, .ex .in .box .imbx h3.sssp {
    margin: -120px auto 0 auto;
  }
  .faq dl {
    margin-bottom: 30px;
  }
  .faq dl dt {
    padding: 20px 30px 15px 30px;
  }
  .faq dl dt p {
    padding-right: 60px;
    font-size: 20px;
  }
  .faq dl dt.ssp {
    top: 20px;
  }
}
.line label {
  display: inline-block;
  margin-left: 18px;
  font-size: 20px;
}
.line label input[type=checkbox] {
  width: 20px;
  height: 20px;
  vertical-align: top;
}

@media screen and (min-width: 1024px) {
  .footnav {
    display: none !important;
  }
}
/*こだわりのネット工法施工事例*/
.commitment {
  /*slider*/
  /*btbox*/
}
.commitment h2 {
  margin: 0;
}
.commitment .in {
  text-align: left;
}
.commitment .box {
  position: relative;
  margin: 30px auto 70px auto;
}
.commitment .box h3 {
  position: absolute;
  top: -50px;
  left: 20px;
  width: 394px;
}
.commitment .box h3 img {
  width: 100%;
}
.commitment .box p {
  padding: 0;
  line-height: 1.3em;
  font-size: 30px;
}
.commitment .box p b {
  color: #02ac4d;
  font-size: 30px;
}
.commitment .box p:nth-of-type(2) {
  padding: 0 0 10px;
  margin: 0;
  border-bottom: 2px solid #02ac4d;
  font-size: 20px;
}
.commitment .box p:nth-of-type(2) img {
  width: 10%;
  margin: 10px 0 10px 32px;
}
.commitment .box p:nth-of-type(2) span {
  font-size: 22px;
}
.commitment .box p:nth-of-type(2) span:nth-of-type(2) {
  font-size: 100%;
  color: #fe8402;
}
.commitment .box p:last-child {
  border: none;
}
.commitment .box p img {
  width: 25%;
}
.commitment .box .illust {
  position: absolute;
  bottom: 0;
  right: 30px;
  width: 223px;
}
.commitment .box .illust2 {
  position: absolute;
  bottom: 0;
  right: 30px;
  width: 271px;
}
.commitment .box2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 990px;
  margin: 0 auto 55px auto;
}
.commitment .box2 .bx {
  width: 45%;
  font-size: 30px;
}
.commitment .box2 .bx img {
  width: 100%;
}
.commitment .box2 .bx b {
  color: #3e3f3f;
}
.commitment .box2 .bx em {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  text-align: center;
  color: #FFFFFF;
  background-color: #3e3f3f;
  margin: -20px 20px 0 0;
}
.commitment .box2 .bx em:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top: 15px solid #3e3f3f;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
.commitment .box2 .bx.after b {
  color: #02ac4d;
}
.commitment .box2 .bx.after em {
  background-color: #02ac4d;
}
.commitment .box2 .bx.after em:before {
  border-top: 15px solid #02ac4d;
}
.commitment ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.commitment ul:nth-child(2) li:first-child em {
  padding: 15px 20px 5px;
}
.commitment ul li {
  width: 540px;
  padding: 30px 0 0 0;
  position: relative;
  margin: 0 15px 30px;
}
.commitment ul li img {
  width: 100%;
}
.commitment ul li .btbox {
  width: 540px;
}
.commitment ul li .btbox .bt {
  padding: 20px 30px 25px 0;
  line-height: 55px;
  font-size: 36px;
}
.commitment ul li .btbox label:after {
  content: "";
  position: absolute;
  top: 53px;
  right: 30px;
}
.commitment ul li:nth-child(4) .btbox .bt {
  font-size: 24px;
  line-height: 40px;
  padding: 15px 30px 20px 0;
}
.commitment ul li:nth-child(5) .btbox .bt {
  font-size: 30px;
  line-height: 50px;
  padding: 25px 30px 30px 0;
}
.commitment ul em {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 10px 20px;
  font-size: 22px;
  background-color: #02ac4d;
  color: #FFFFFF;
}
.commitment ul em ruby {
  margin: 2px 0;
}
.commitment ul.slick-slider .slick-track, .commitment ul .slick-slider .slick-list {
  background: #fff;
}
.commitment ul.slick-initialized .slick-slide {
  opacity: 0.6; /* 両サイドの画像を透過 */
}
.commitment ul.slick-initialized .slick-slide.slick-active {
  opacity: 1; /* センター画像を非透過 */
}
.commitment ul .slick-prev::before {
  content: "";
  display: inline-block;
  width: 45px;
  height: 44px;
  background: url(../images/arrow.png) no-repeat top;
  background-size: 45px 44px;
  transform: scale(-1, 1);
}
.commitment ul .slick-next::before {
  content: "";
  display: inline-block;
  width: 45px;
  height: 44px;
  background: url(../images/arrow.png) no-repeat top;
  background-size: 45px 44px;
}
.commitment ul .slick-prev {
  left: 85px;
  z-index: 999;
}
.commitment ul .slick-next {
  right: 110px;
  z-index: 999;
}
.commitment .btbox {
  margin-bottom: 70px;
  width: 990px;
  margin: 0 auto 30px;
}
.commitment .btbox b {
  color: #02ac4d;
}
.commitment .btbox .col, .commitment .btbox i {
  color: #fe8402;
}
.commitment .btbox i {
  font-size: 120%;
}
.commitment .btbox p {
  margin-bottom: 10px;
}
.commitment .btbox ul {
  margin-bottom: 5px;
}
.commitment .btbox p.c {
  text-align: center;
}
.commitment .btbox p.c img {
  width: 389px;
}
.commitment .btbox .bt {
  display: block;
  text-align: center;
  padding: 30px 0 40px 0;
  color: #02ac4d;
  font-size: 40px;
  background: #fbda03;
  font-weight: bold;
  cursor: pointer;
  border-radius: 14px;
  -webkit-border-radius: 0 0 14px 14px;
  -moz-border-radius: 14px;
  text-shadow: 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff;
}
.commitment .btbox .bt:hover {
  text-decoration: none;
}
.commitment .btbox .bx {
  border-bottom: 10px solid #fbda03;
  border-right: 10px solid #fbda03;
  border-left: 10px solid #fbda03;
  padding: 44px;
  background: url("../images/bg_grid.png") repeat;
  margin-top: -10px;
}
.commitment .btbox ul li {
  list-style: disc;
  margin-left: 1em;
}
.commitment .btbox label {
  position: relative;
}
.commitment .btbox label:after {
  content: "";
  position: absolute;
  top: 26px;
  right: 60px;
  display: block;
  width: 45px;
  height: 44px;
  background: url(../images/arrow.png) no-repeat top;
  background-size: 45px 44px;
  transform: rotate(90deg);
}
.commitment .btbox input:checked ~ label:after {
  content: "";
  transform: rotate(-90deg);
}
.commitment .btbox input {
  display: none;
}
.commitment .btbox .bx {
  display: none;
}
.commitment .btbox input:checked ~ .bx {
  display: block;
}

/*こだわりのネット工法施工事例*/
/*新施工事例*/
.soudan {
  /*slider*/
  /*btbox*/
}
.soudan .in {
  text-align: left;
}
.soudan .box {
  position: relative;
  min-height: 200px;
  width: 990px;
  margin: 30px auto 70px auto;
  box-sizing: border-box;
  border: 20px solid #fbda03;
  border-radius: 14px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
}
.soudan .box h3 {
  position: absolute;
  top: -50px;
  left: 20px;
  width: 394px;
}
.soudan .box h3 img {
  width: 100%;
}
.soudan .box p {
  font-size: 40px;
  padding: 50px 0 20px 108px;
  line-height: 1.3em;
}
.soudan .box p b {
  color: #02ac4d;
  display: block;
}
.soudan .box .illust {
  position: absolute;
  bottom: 0;
  right: 30px;
  width: 223px;
}
.soudan .box .illust2 {
  position: absolute;
  bottom: 0;
  right: 30px;
  width: 271px;
}
.soudan .box2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 990px;
  margin: 0 auto 55px auto;
}
.soudan .box2 .bx {
  width: 45%;
  font-size: 30px;
}
.soudan .box2 .bx img {
  width: 100%;
}
.soudan .box2 .bx b {
  color: #3e3f3f;
}
.soudan .box2 .bx em {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  text-align: center;
  color: #FFFFFF;
  background-color: #3e3f3f;
  margin: -20px 20px 0 0;
}
.soudan .box2 .bx em:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top: 15px solid #3e3f3f;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
.soudan .box2 .bx.after b {
  color: #02ac4d;
}
.soudan .box2 .bx.after em {
  background-color: #02ac4d;
}
.soudan .box2 .bx.after em:before {
  border-top: 15px solid #02ac4d;
}
.soudan .slider {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.soudan .slider li {
  width: 306px;
  padding: 30px 0 0 0;
  position: relative;
  margin: 0 15px;
}
.soudan .slider li img {
  width: 100%;
}
.soudan .slider em {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 10px 20px;
  font-size: 22px;
  background-color: #02ac4d;
  color: #FFFFFF;
}
.soudan .slider.slick-slider .slick-track, .soudan .slider .slick-slider .slick-list {
  background: #fff;
}
.soudan .slider.slick-initialized .slick-slide {
  opacity: 0.6; /* 両サイドの画像を透過 */
}
.soudan .slider.slick-initialized .slick-slide.slick-active {
  opacity: 1; /* センター画像を非透過 */
}
.soudan .slider .slick-prev::before {
  content: "";
  display: inline-block;
  width: 45px;
  height: 44px;
  background: url(../images/arrow.png) no-repeat top;
  background-size: 45px 44px;
  transform: scale(-1, 1);
}
.soudan .slider .slick-next::before {
  content: "";
  display: inline-block;
  width: 45px;
  height: 44px;
  background: url(../images/arrow.png) no-repeat top;
  background-size: 45px 44px;
}
.soudan .slider .slick-prev {
  left: 85px;
  z-index: 999;
}
.soudan .slider .slick-next {
  right: 110px;
  z-index: 999;
}
.soudan .btbox {
  margin-bottom: 70px;
  width: 990px;
  margin: 0 auto 140px auto;
}
.soudan .btbox b {
  color: #02ac4d;
}
.soudan .btbox .col, .soudan .btbox i {
  color: #fe8402;
}
.soudan .btbox i {
  font-size: 120%;
}
.soudan .btbox p, .soudan .btbox ul {
  margin-bottom: 30px;
}
.soudan .btbox p.c {
  text-align: center;
}
.soudan .btbox p.c img {
  width: 389px;
}
.soudan .btbox .bt {
  display: block;
  text-align: center;
  padding: 30px 0 40px 0;
  color: #02ac4d;
  font-size: 40px;
  background: #fbda03;
  font-weight: bold;
  cursor: pointer;
  border-radius: 14px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  text-shadow: 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff;
}
.soudan .btbox .bt:hover {
  text-decoration: none;
}
.soudan .btbox .bx {
  border-bottom: 10px solid #fbda03;
  border-right: 10px solid #fbda03;
  border-left: 10px solid #fbda03;
  padding: 44px;
  background: url("../images/bg_grid.png") repeat;
  margin-top: -10px;
}
.soudan .btbox ul li {
  list-style: disc;
  margin-left: 1em;
}
.soudan .btbox label {
  position: relative;
}
.soudan .btbox label:after {
  content: "";
  position: absolute;
  top: 26px;
  right: 60px;
  display: block;
  width: 45px;
  height: 44px;
  background: url(../images/arrow.png) no-repeat top;
  background-size: 45px 44px;
  transform: rotate(90deg);
}
.soudan .btbox input:checked ~ label:after {
  content: "";
  transform: rotate(-90deg);
}
.soudan .btbox input {
  display: none;
}
.soudan .btbox .bx {
  display: none;
}
.soudan .btbox input:checked ~ .bx {
  display: block;
}

/*soudan*/
@media screen and (max-width: 1024px) {
  /*こだわりのネット工法施工事例*/
  .commitment h2 {
    padding: 0 0 1.5vw;
    line-height: 9vw;
    margin-bottom: 30px;
  }
  .commitment .box, .commitment .box2, .commitment .btbox {
    width: 90%;
  }
  .commitment .box {
    min-height: 26.316vw;
    margin: 1vw auto 7vw auto;
  }
  .commitment .box h3 {
    top: -5vw;
    left: 2.632vw;
    width: 40vw;
  }
  .commitment .box p {
    font-size: 4.2vw;
    padding: 6.579vw 0 2.632vw 5vw;
    line-height: 1.3em;
  }
  .commitment .box p b {
    font-size: 110%;
  }
  .commitment .box p img {
    width: 25vw;
  }
  .commitment .box p:nth-of-type(2n) img {
    margin: 0;
  }
  .commitment .box p:nth-of-type(2) {
    padding: 0 0 7vw !important;
    border-bottom: 2px solid #02ac4d;
    font-size: 4.2vw;
  }
  .commitment .box p:nth-of-type(2) img {
    width: 7vw;
    margin: 1vw 2vw 1vw 9vw;
  }
  .commitment .box p:nth-of-type(2) span {
    font-size: 105%;
  }
  .commitment .box p:nth-of-type(2) span:nth-of-type(2) {
    font-size: 100%;
    color: #fe8402;
  }
  .commitment .box p:last-child {
    border: none;
  }
  .commitment .box .illust {
    position: absolute;
    bottom: 0;
    right: 3.947vw;
    width: 28vw;
  }
  .commitment .box .illust2 {
    position: absolute;
    bottom: 0;
    right: 2.5vw;
    width: 33vw;
  }
  .commitment .box ul:nth-child(2) li:first-child em {
    padding: 20px 20px 10px;
    font-size: 4.5vw;
  }
  .commitment .box {
    margin: 0 auto 7vw auto;
  }
  .commitment .box .bx {
    font-size: 3.5vw;
  }
  .commitment .box .bx em {
    display: block;
    padding: 1.974vw 3.947vw;
    margin: 0 0 3vw 0;
  }
  .commitment .box .bx em:before {
    content: "";
    position: absolute;
    top: 98%;
    left: 50%;
    transform: translateX(-50%);
    border-top: 10px solid #3e3f3f;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
  }
  .commitment .box ul {
    padding: 0;
  }
  .commitment .box ul li {
    width: 100%;
    text-indent: 0;
    margin: 0 auto 9vw auto;
    padding: 0;
    /*btbox*/
  }
  .commitment .box ul li .btbox {
    width: 100%;
    margin-bottom: 9.211vw;
    margin: 0 auto 20vw auto;
  }
  .commitment .box ul li .btbox.short {
    margin: 0 auto;
  }
  .commitment .box ul li .btbox i {
    font-size: 110%;
  }
  .commitment .box ul li .btbox b {
    font-size: 110%;
  }
  .commitment .box ul li .btbox p {
    margin-bottom: 1.5vw;
    padding: 0;
  }
  .commitment .box ul li .btbox p.c img {
    width: 45vw;
  }
  .commitment .box ul li .btbox .bt {
    padding: 3.947vw 0 5.263vw 0;
    font-size: 4.5vw;
    line-height: 7vw;
    border-radius: 1.842vw;
    -webkit-border-radius: 0 0 1.842vw 1.842vw;
    -moz-border-radius: 1.842vw;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  }
  .commitment .box ul li .btbox .bt:hover {
    text-decoration: none;
  }
  .commitment .box ul li .btbox .bx {
    border-bottom: 6px solid #fbda03;
    border-right: 6px solid #fbda03;
    border-left: 6px solid #fbda03;
    padding: 8vw 5.789vw 2vw;
    margin-top: -1.316vw;
  }
  .commitment .box ul li .btbox label:after {
    content: "";
    top: 8vw;
    right: 7vw;
    width: 5.921vw;
    height: 5.789vw;
    background-size: 5.921vw 5.789vw;
  }
  .commitment .box ul li:nth-child(4) .btbox label:after {
    top: 11vw;
  }
  /*こだわりのネット工法施工事例*/
  .soudan {
    /*slider*/
    /*btbox*/
  }
  .soudan .box, .soudan .box2, .soudan .btbox {
    width: 90%;
  }
  .soudan .box {
    min-height: 26.316vw;
    margin: 1vw auto 7vw auto;
    border: 10px solid #fbda03;
  }
  .soudan .box h3 {
    top: -5vw;
    left: 2.632vw;
    width: 40vw;
  }
  .soudan .box p {
    font-size: 4.2vw;
    padding: 6.579vw 0 2.632vw 5vw;
    line-height: 1.3em;
  }
  .soudan .box .illust {
    position: absolute;
    bottom: 0;
    right: 3.947vw;
    width: 28vw;
  }
  .soudan .box .illust2 {
    position: absolute;
    bottom: 0;
    right: 2.5vw;
    width: 33vw;
  }
  .soudan .box2 {
    margin: 0 auto 7vw auto;
  }
  .soudan .box2 .bx {
    width: 47%;
    font-size: 3.5vw;
  }
  .soudan .box2 .bx em {
    display: block;
    padding: 1.974vw 3.947vw;
    margin: 0 0 3vw 0;
  }
  .soudan .box2 .bx em:before {
    content: "";
    position: absolute;
    top: 98%;
    left: 50%;
    transform: translateX(-50%);
    border-top: 10px solid #3e3f3f;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
  }
  .soudan .box2 .bx.after em:before {
    border-top: 10px solid #02ac4d;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
  }
  .soudan .slick-dotted.slick-slider {
    margin-bottom: 7vw;
  }
  .soudan .slider li {
    width: 40.263vw;
    padding: 3.947vw 0 0 0;
    margin: 0 3vw;
  }
  .soudan .slider em {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    padding: 1.316vw 2.632vw;
    font-size: 2.895vw;
    background-color: #02ac4d;
    color: #FFFFFF;
  }
  .soudan .slider.slick-slider .slick-track, .soudan .slider .slick-slider .slick-list {
    background: #fff;
  }
  .soudan .slider.slick-initialized .slick-slide {
    opacity: 0.6; /* 両サイドの画像を透過 */
  }
  .soudan .slider.slick-initialized .slick-slide.slick-active {
    opacity: 1; /* センター画像を非透過 */
  }
  .soudan .slider .slick-prev::before {
    content: "";
    width: 8.921vw;
    height: 8.789vw;
    background-size: 8.921vw 8.789vw;
  }
  .soudan .slider .slick-next::before {
    content: "";
    width: 8.921vw;
    height: 8.789vw;
    background-size: 8.921vw 8.789vw;
  }
  .soudan .slider .slick-prev {
    width: 8.921vw;
    height: 8.789vw;
    left: 16.5vw;
  }
  .soudan .slider .slick-next {
    width: 8.921vw;
    height: 8.789vw;
    right: 17vw;
  }
  .soudan .btbox {
    margin-bottom: 9.211vw;
    margin: 0 auto 20vw auto;
  }
  .soudan .btbox.short {
    margin: 0 auto 14vw auto;
  }
  .soudan .btbox i {
    font-size: 110%;
  }
  .soudan .btbox b {
    font-size: 110%;
  }
  .soudan .btbox p, .soudan .btbox ul {
    margin-bottom: 3.947vw;
  }
  .soudan .btbox ul li {
    margin-left: 1.5em;
    text-indent: 0;
  }
  .soudan .btbox p.c img {
    width: 45vw;
  }
  .soudan .btbox .bt {
    padding: 3.947vw 0 5.263vw 0;
    font-size: 4.5vw;
    border-radius: 1.842vw;
    -webkit-border-radius: 1.842vw;
    -moz-border-radius: 1.842vw;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  }
  .soudan .btbox .bt:hover {
    text-decoration: none;
  }
  .soudan .btbox .bx {
    border-bottom: 6px solid #fbda03;
    border-right: 6px solid #fbda03;
    border-left: 6px solid #fbda03;
    padding: 5.789vw;
    margin-top: -1.316vw;
  }
  .soudan .btbox label:after {
    content: "";
    top: 4vw;
    right: 6vw;
    width: 5.921vw;
    height: 5.789vw;
    background-size: 5.921vw 5.789vw;
  }
  /*soudan*/
}/*# sourceMappingURL=style.css.map */