@charset "utf-8";

@media(min-width:751px) {

  .pc {
    display: block;
  }

  .sp {
    display: none;
  }

  .hojokin-back
  {
    background-image: url(../images/26310026.jpg);
  }

  /* kv */
  .kv {
    /* height: 100vh; */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .kv .main-copy {
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    letter-spacing: .2em;
    text-shadow: #0c0c65 0 -2px;
  }

  .kv .sub-copy {
    color: #fff;
    font-size: 3.5vw;
    padding: 10px;
    text-align: center;
  }

  /* video */
  .video {
    width: 100%;
    height: -webkit-fill-available;
    background: url(../img/kv-alternative.jpg) no-repeat center/cover;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
  }

  .video::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #10394b;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    opacity: .3;
  }

  .video video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }

  /* .hojokin-back {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
}
.hojokin-back video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
} */
  /* video p {
    font-size: 20px;
    padding: 20px;
    border-radius: 8px;
    background-color: rgba(255,255,255,07);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%,-50%);
} */

  @media screen and (min-width: 768px) {

    /* kv */
    .kv {
      min-width: 960px;
    }

    .kv .main-copy {
      /* font-size: 60px; */
      font-size: 3.5vw;
      padding: 20px;
      text-align: center;
      background-color: rgba(253, 253, 253, 0.5);
      /* color:black; */
    }

    .kv .sub-copy {
      font-size: 30px;
    }

    /* video */
    .video {
      min-width: 960px;
    }

  }

  .hojokin-sub {
    width: 100%;
    margin: 0 auto;
    background:linear-gradient(to bottom right, #FFF, rgb(207,161,19));
    font-size: 3vw;
    padding: 20px;
    position: relative;
    display: inline-block;
    margin: 20px 0;
    min-width: 120px;
    max-width: 100%;
    text-align: center;
    color: black;
    margin-top: 0px;
    font-weight: bold;
  }


  .hojokin-sub:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid rgb(207,161,19);
  }

  .hojokin-sub p {
    margin: 0;
    padding: 0;
  }

  .hojokin-top{
    font-size: 3vw;
    text-align: center;
    /* font-weight: bold; */

  }

  .hojokin-top span{
    /* border: #0d3661 3px solid; */
    color: yellow;
    border-radius: 50px;
    padding: 10px;
    background-color: #0d3661;
     /* background:linear-gradient(transparent 60%, #f6c 60%); */
  }

  .hojokin-top-title{
    background-color: #fff;
    font-size: 2.5vw;
    padding:25px;
    line-height:1.5;
    color:#000;
    border-top: 10px red solid;
    border-bottom: 10px red solid;
  }

  .hojokin-top-inner
  {
    width: 80%;
    margin: 0 auto;
  }

  .hojokin-inner-area {
    background-color: white;
    width: 90%;
    margin: 0 auto;
    border: orange 5px solid;
  }

  .zeroemi-top {
    background: linear-gradient(to bottom, rgb(229 197 157), #dd6f1f);
    color: white;
    padding: 10px;
    font-size: 3vw;
    text-align: center;
    width: 90%;
    margin: 0 auto;
  }

  .madorinove-top {
    background: linear-gradient(to bottom, #eda4e1, #e314c0);
    color: white;
    padding: 10px;
    font-size: 3vw;
    text-align: center;
    width: 90%;
    margin: 0 auto;
  }

  .hojo-green-top {
    background: linear-gradient(to bottom, #bef5c5, #0d811c);
    color: white;
    padding: 10px;
    font-size: 3vw;
    text-align: center;
    width: 90%;
    margin: 0 auto;
  }

  .zeroemi-lbl {
    background-color: white;
    border: #f30d84 solid 5px;
    color: #f30d84;
    font-size: 2vw;
    padding: 5px;
  }

  .madorinove-lbl {
    background-color: white;
    border: rgb(4, 59, 12) solid 5px;
    color: rgb(4, 59, 12);
    font-size: 2vw;
    padding: 5px;
  }

  .hojo-green-lbl {
    background-color: white;
    border: rgb(4, 59, 12) solid 5px;
    color: rgb(4, 59, 12);
    font-size: 2vw;
    padding: 5px;
    width: 40%;
    margin: 0 auto;
  }

  .hojokin-text-inner-area {
    width: 90%;
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.5;
  }

  .aircon-hojogaku-top {
    background-color: #10394b;
    color: white;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    font-size: 2.5vw;
    padding: 10px;
  }

  .aircon-hojogaku-area {
    border: #10394b solid 3px;
    width: 90%;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
  }

  .mado-hojogaku-area {
    border: #f30d84 solid 3px;
    width: 90%;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
  }

  .aircon-hojogaku {
    font-size: 3vw;
    text-align: center;
  }

  .hojogaku-red {
    color: red;
  }

  .hojogaku-unit {
    font-size: 2vw;
  }

  .hojogaku-big {
    font-size: 6vw;
  }

  .hojogaku-lbl {
    border: blue 3px solid;
    padding: 5px;
    font-size: 2vw;
    color: blue;
  }

  .hojo-taisho-kishu {
    font-size: 3vw;
    color: black;
    line-height: 1.2;
  }

  .hojo-taisho-text {
    width: 90%;
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.3;
  }

  .hojo-sub{
    font-size: 1.8vw;
    text-align: center;
  }

  .hojo-green
  {
    text-align:left;
    font-size: 1.8vw;
    width: 90%;
    margin: 0 auto;
    line-height: 1.2;
  }

  /* 補助金ボタン start */

  .hojokin-btn {
    font-size: 2vw;
  }

  .hojokin-btn a {
    background: #68a4df;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    /* max-width: 280px; */
    width: 50%;
    padding: 10px 25px;
    color: white;
    transition: 0.3s ease-in-out;
    font-weight: 500;
  }

  .hojokin-btn a:after {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 2rem;
    font-size: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: right 0.3s;
    width: 6px;
    height: 6px;
    border-top: solid 2px currentColor;
    border-right: solid 2px currentColor;
    transform: translateY(-50%) rotate(45deg);
  }

  .hojokin-btn a:hover {
    background: #0a376f;
    color: #FFF;
  }

  .hojokin-btn a:hover:after {
    right: 1.4rem;
  }

  .hojo-taisho-text a {
    color: inherit;
  }

  .hojokin-mado-btn {
    font-size: 2vw;
  }

  .hojokin-mado-btn a {
    background: #68a4df;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    /* max-width: 280px; */
    width: 50%;
    padding: 10px 25px;
    color: white;
    transition: 0.3s ease-in-out;
    font-weight: 500;
  }

  .hojokin-mado-btn a:after {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 2rem;
    font-size: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: right 0.3s;
    width: 6px;
    height: 6px;
    border-top: solid 2px currentColor;
    border-right: solid 2px currentColor;
    transform: translateY(-50%) rotate(45deg);
  }

  .hojokin-mado-btn a:hover {
    background: #0a376f;
    color: #FFF;
  }

  .hojokin-mado-btn a:hover:after {
    right: 1.4rem;
  }

  .hojo-taisho-text a {
    color: inherit;
  }

  /* 補助金ボタン end */

  .hojokin-text-end
  {
    background:rgba(253, 253, 253, 0.5);
    width: 90%;
    margin: 0 auto;
    font-size: 20px;
    padding: 10px;
    color:black;
  }

  .windows-text
  {
    width: 80%;
    margin: 0 auto;
    font-size: 2vw;
    line-height:1.5;
  }

}