:root {
  --spc: 20px;
  --diff: 20px;
  --spc-md: calc(var(--spc) * 1.5);
  --spc-lg: calc(var(--spc) * 2);
  --spc-sm: calc(var(--spc) - 10px);
  --wrap: 30px;
}

@media only screen and (min-width: 768px) {
  :root {
    --spc: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  :root {
    --wrap: 80px;
  }
}
.img {
  line-height: 1;
}

img {
  max-width: 100%;
  height: auto;
}

.fwb {
  font-weight: 700;
}

p:not(:last-child) {
  margin-bottom: var(--spc-sm);
}

.txt-center {
  text-align: center;
}

.ttl-style-1 {
  font-size: 24px;
  line-height: 50px;
}
.ttl-style-1 > span {
  border-bottom: 1px solid #707070;
  line-height: 30px;
}
.bg-grey {
  background: #F5F5F5;
}

.bg-black {
  background: #000;
  color: #fff;
  text-align: center;
}

@media only screen and (max-width: 768px) {
  .mt0-sp {
    margin-top: 0 !important;
  }
  .mt0-sp {
    margin-bottom: 0 !important;
  }
  .ml0-sp {
    margin-left: 0 !important;
  }
  .mr0-sp {
    margin-right: 0 !important;
  }
}
.mt {
  margin-top: var(--spc);
}

.mt-md {
  margin-top: var(--spc-md);
}

.mt-lg {
  margin-top: var(--spc-lg);
}

.mt-sm {
  margin-top: var(--spc-sm);
}

.mt0 {
  margin-top: 0 !important;
}

.mb {
  margin-bottom: var(--spc);
}

.mb-md {
  margin-bottom: var(--spc-md);
}

.mb-lg {
  margin-bottom: var(--spc-lg);
}

.mb-sm {
  margin-bottom: var(--spc-sm);
}

.mb0 {
  margin-bottom: 0 !important;
}

.ml {
  margin-left: var(--spc);
}

.ml-md {
  margin-left: var(--spc-md);
}

.ml-lg {
  margin-left: var(--spc-lg);
}

.ml-sm {
  margin-left: var(--spc-sm);
}

.ml0 {
  margin-left: 0 !important;
}

.mr {
  margin-right: var(--spc);
}

.mr-md {
  margin-right: var(--spc-md);
}

.mr-lg {
  margin-right: var(--spc-lg);
}

.mr-sm {
  margin-right: var(--spc-sm);
}

.mr0 {
  margin-right: 0 !important;
}

.pt {
  padding-top: var(--spc);
}

.pt-md {
  padding-top: var(--spc-md);
}

.pt-lg {
  padding-top: var(--spc-lg);
}

.pt-sm {
  padding-top: var(--spc-sm);
}

.pb {
  padding-bottom: var(--spc);
}

.pb-md {
  padding-bottom: var(--spc-md);
}

.pb-lg {
  padding-bottom: var(--spc-lg);
}

.pb-sm {
  padding-bottom: var(--spc-sm);
}

.pl {
  padding-left: var(--spc);
}

.pl-md {
  padding-left: var(--spc-md);
}

.pl-lg {
  padding-left: var(--spc-lg);
}

.pl-sm {
  padding-left: var(--spc-sm);
}

.pr {
  padding-right: var(--spc);
}

.pr-md {
  padding-right: var(--spc-md);
}

.pr-lg {
  padding-right: var(--spc-lg);
}

.pr-sm {
  padding-right: var(--spc-sm);
}

@media only screen and (min-width: 1024px) {
  header {
    min-height: auto;
  }
}
#key .img {
  width: 100%;
  height: 100%;
}
#key .img img {
  width: 100%;
  max-width: auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#key .bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: url(../img/works02/key.jpg) no-repeat center/cover;
}
@media only screen and (min-width: 1024px) {
  #key {
    margin-top: -30px;
    padding: 0 40px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }
  #key .img img {
    height: auto;
  }
}

.box-2col {
  --gap: 20px;
}
.box-2col > [class*=col-] {
  margin-top: var(--gap);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.box-2col.start-sp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: calc(var(--gap) * -1);
  margin-right: calc(var(--gap) * -1);
}
.box-2col.start-sp > [class*=col-] {
  margin-left: var(--gap);
  margin-right: var(--gap);
}
.box-2col.start-sp > [class*=col-] [class*=col-] {
  margin-top: 0;
}
.box-2col .col-1of2-sp {
  width: 50%;
  max-width: 560px;
}
.box-2col .col-1of2-sp.wider {
  width: calc(50% + var(--gap));
  max-width: 640px;
}
.box-2col .col-1of2-sp.narrower {
  width: calc(50% - var(--gap));
  max-width: 480px;
}
.box-2col .col-1of3-sp {
  width: 33.3333333333%;
  max-width: 320px;
}
.box-2col .col-2of3-sp {
  width: 66.6666666667%;
  max-width: 800px;
}
.box-2col.no-gap {
  margin-left: 0;
  margin-right: 0;
}
.box-2col.no-gap > [class*=col-] {
  margin-left: 0;
  margin-right: 0;
}
.box-2col.no-gap .col-1of2-sp {
  max-width: 600px;
}
@media only screen and (min-width: 768px) {
  .box-2col.start-tablet {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: calc(var(--gap) * -1);
    margin-right: calc(var(--gap) * -1);
  }
  .box-2col.start-tablet > [class*=col-] {
    margin-left: var(--gap);
    margin-right: var(--gap);
  }
  .box-2col.start-tablet > [class*=col-] [class*=col-] {
    margin-top: 0;
  }
  .box-2col .col-1of2-tablet {
    width: 50%;
    max-width: 560px;
  }
  .box-2col .col-1of2-tablet.wider {
    width: calc(50% + var(--gap));
    max-width: 640px;
  }
  .box-2col .col-1of2-tablet.narrower {
    width: calc(50% - var(--gap));
    max-width: 480px;
  }
  .box-2col .col-1of3-tablet {
    width: 33.3333333333%;
    max-width: 320px;
  }
  .box-2col .col-2of3-tablet {
    width: 66.6666666667%;
    max-width: 800px;
  }
  .box-2col.no-gap {
    margin-left: 0;
    margin-right: 0;
  }
  .box-2col.no-gap > [class*=col-] {
    margin-left: 0;
    margin-right: 0;
  }
  .box-2col.no-gap .col-1of2-tablet {
    max-width: 600px;
  }
  .box-2col.reverse > [class*=col-]:nth-child(1) {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .box-2col.reverse > [class*=col-]:nth-child(2) {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
@media only screen and (min-width: 1024px) {
  .box-2col {
    --gap: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: calc(var(--gap) * -1);
    margin-right: calc(var(--gap) * -1);
  }
  .box-2col.gap-md {
    --gap: 28px;
  }
  .box-2col.gap-sm {
    --gap: 18px;
  }
  .box-2col.start-pc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: calc(var(--gap) * -1);
    margin-right: calc(var(--gap) * -1);
  }
  .box-2col.start-pc > [class*=col-] {
    margin-left: var(--gap);
    margin-right: var(--gap);
  }
  .box-2col.start-pc > [class*=col-] [class*=col-] {
    margin-top: 0;
  }
  .box-2col .col-1of2-pc {
    width: 50%;
    max-width: 560px;
  }
  .box-2col .col-1of2-pc.wider {
    width: calc(50% + var(--gap));
    max-width: 640px;
  }
  .box-2col .col-1of2-pc.narrower {
    width: calc(50% - var(--gap));
    max-width: 480px;
  }
  .box-2col .col-1of3-pc {
    width: 33.3333333333%;
    max-width: 320px;
  }
  .box-2col .col-2of3-pc {
    width: 66.6666666667%;
    max-width: 800px;
  }
  .box-2col.no-gap {
    margin-left: 0;
    margin-right: 0;
  }
  .box-2col.no-gap > [class*=col-] {
    margin-left: 0;
    margin-right: 0;
  }
  .box-2col.no-gap .col-1of2-pc {
    max-width: 600px;
  }
}



.footerbox .txt {
  font-weight: 600;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.02em;
  text-align: center;
}