@charset "utf-8";

/*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/

/*トップページのロゴ画像*/
.home header #logo {
  position: absolute;
  z-index: 1;
  width: 75%;
  /*ロゴの幅*/
  left: 15%;
  /*headerに対して、左からの配置場所*/
  top: 0px;
  /*headerに対して、上からの配置場所*/
}

/*トップページのロゴ下に書いている説明文*/
header #logo p {
  font-size: 1.2em;
  color: #fff;
  font-family: 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
  font-weight: bold;
  font-style: italic;
  line-height: 1.5;
}

#logo img {
  width: 25%;
  /* 任意の幅に設定 */
  height: auto;
  /* 比率を保ったまま高さを自動調整 */
}

#mainimg video {
  height: 80vh;
  width: 100%;
  object-fit: cover;
  box-sizing: none;
}



/*「お知らせ」ブロック
---------------------------------------------------------------------------*/
#new {
  width: 80%;
  margin: 0 auto;
  display: flex;
  /*flexボックスを使う指定*/
  flex-wrap: wrap;
  /*折り返す指定*/
  padding: 0 20px;
  /*上下、左右へのボックス内の余白*/
}

/*日付(dt)、記事(dd)共通設定*/
#new dt,
#new dd {
  padding: 15px 0;
  /*上下、左右へのボックス内の余白*/
}

/*日付(dt)設定*/
#new dt {
  width: 8em;
  /*幅。8文字(em)分。※下の「900px以上」の端末用の設定に再設定があります。*/
  border-bottom: 1px dotted #ccc;
}

/*日付の横のマーク（共通設定）*/
#new dt span {
  display: none;
  /*小さな端末では非表示にしておく。*/
}

/*記事(dd)設定*/
#new dd {
  width: calc(100% - 8em);
  /*「8em」は上の「#new dt」のwidthの値です。※下の「900px以上」の端末用の設定に再設定があります。*/
  border-bottom: 1px dotted #ccc;
}




/*取り組み
---------------------------------------------------------------------------*/
/*Flex設定*/
.wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2.5rem;
  width: 90%;
  margin: 0 auto;
  max-width: 960px;
  margin-top: 20px;
}

.wrapper .service-div {
  width: 45%;
}

/*カード設定*/
.card-1col {
  width: 90%;
  margin: 1.5rem auto;
}

.card-1col .card {
  margin: 0 auto 3rem;
  width: 100%;
  aspect-ratio: 21 / 9;
  max-width: 960px;
}

.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-basis: 47%;
  word-wrap: break-word;
  cursor: pointer;
  z-index: 0;
  transition: .5s;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 5 / 7;
  max-height: 630px;
}

/*カード内タイトル(英語)*/
.card-title {
  color: white;
  font-size: 3.5rem;
  font-weight: bold;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
  text-align: left;
  position: absolute;
  top: 4rem;
  width: 80%;
  font-family: 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
  font-style: oblique;
  line-height: 1.1;
}

/*カード内タイトル(span日本語)*/
.card-title span {
  color: white;
  font-size: 1.3rem;
  letter-spacing: .1em;
  font-weight: normal;
  text-shadow: none;
  text-align: center;
  font-family: 'BIZ UDPGothic', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-style: normal;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 1rem .5rem;
  border-radius: 3px;
  margin-right: .5rem;
}

/*カード内ボタン*/
.card-btn {
  position: absolute;
  bottom: 2rem;
  padding: 0.5rem;
  background-color: #fff;
  color: #333;
  text-decoration: none;
  border: 2px solid #fff;
  width: 80%;
  text-align: center;
  border-radius: 3px;
}

/*カード内ボタン(ホバー時)*/
.card:hover .card-btn {
  background-color: transparent;
  color: #FFF;
}

/*カードaタグ(背景画像)*/
.card-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: auto;
  box-sizing: border-box;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/*カードaタグ(背景画像)少し暗くする*/
.card-link::before {
  position: absolute;
  inset: 0;
  background-color: #000;
  content: '';
  z-index: -10;
  opacity: .4;
  border-radius: 10px;
}

/*カードaタグ(背景画像)ホバー時*/
.card:hover .card-link::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(0, 177, 212, 1) 0%, rgb(4, 92, 109) 90%);
  content: '';
  z-index: -1;
  border-radius: 10px;
}

.card:hover .card-link {
  transform: scale(1.1);
  /* 拡大 */
  background-image: none !important;
}



/*施工事例
---------------------------------------------------------------------------*/
/*中央配置設定*/
.jirei-card {
  margin: 0 auto;
}

/*Flex設定*/
.list-jirei {
  display: flex;
  justify-content: space-around;
  list-style: none;
  padding-left: 0;
}

/*カード設定*/
.fc {
  width: 45%;
  height: 100%;
  overflow: hidden;
}

.fc__wrapper {
  position: relative;
  transform-style: preserve-3d;
  overflow: hidden;
  /* これにより拡大時にも親要素内に収まる */
  aspect-ratio: 1/1.618;
  border-radius: 10px;
  /* 画像の角を丸くする */
}

.fc__wrapper:hover .fc__thumb {
  transform: scale(1.07);
  /* ホバー時に画像を少し拡大 */
  border-radius: 10px;
  /* 画像の角を丸くする */
}

.fc__overlay::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  /* 画像の下から25% */
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgb(0 0 0 / 0%));
  pointer-events: none;
  border-radius: 10px;
  /* 画像の角を丸くする */
  z-index: 1;
}

/*カード内のポジション設定*/
.fc__content {
  position: absolute;
  left: 10px;
  /* right: 42px; */
  bottom: 20px;
  transform: translateZ(100px) scale(0.9);
  z-index: 2;
}

/*カード内のタイトル設定*/
.fc__content h3 {
  color: white;
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  margin-bottom: -10px;
  /* margin: 0; */
  padding: 0;
}


/*カード内のキャプション設定*/
.fc__content .caption {
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}



/*---------------------------------------------------------------------------
【SP】画面サイズが767px以下
---------------------------------------------------------------------------*/
@media screen and (max-width:767px) {




  /*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
  /*トップページのロゴ画像*/
  .home header #logo {
    padding-top: 13%;
    /*上に空ける余白。上下間のバランスをとって下さい。*/
    left: 5%;
    /*headerに対して、左からの配置場所*/
  }

  .home header #logo p img {
    width: 30%;
  }

  /*トップページのロゴ下に書いている説明文*/
  header #logo p {
    font-size: 1em;
  }


  #mainimg video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    box-sizing: none;
  }

  #new {
    width: 100%;
    margin: 0 auto;
    display: flex;
    /*flexボックスを使う指定*/
    /*折り返す指定*/
    padding: 0 20px;
    /*上下、左右へのボックス内の余白*/
    flex-direction: column;
  }

  #new dt {
    width: 100%;
    border-bottom: 1px dotted #ccc;
  }


  #new dd {
    width: 100%;
    border-bottom: 1px dotted #ccc;
  }

  /*取り組み
---------------------------------------------------------------------------*/
  /*カード設定*/
  .card-1col {
    width: 100%;
    padding: 0.7rem;
  }

  .card-1col .card {
    height: 350px;
  }

  .wrapper {
    width: 100%;
  }

  .wrapper .service-div {
    width: 100%;
  }

  .card {
    flex-basis: 100%;
    margin: 0 auto;
  }

  /*背景動画非表示*/
  .card .video {
    visibility: hidden;
  }

  .card-title {
    font-size: 2.3rem;
    letter-spacing: .05em;
    line-height: 1.3;
  }



  /*施工事例
---------------------------------------------------------------------------*/
  /*Flex設定*/
  .list-jirei {
    flex-wrap: wrap;
  }

  /*カード設定*/
  .fc {
    width: 100%;
    margin-bottom: 1rem;
  }



  /*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/


}





/*---------------------------------------------------------------------------
【Tab】画面サイズ768px以上1024px以下
---------------------------------------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1024px) {


  /*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
  /*トップページのロゴ画像*/
  .home header #logo {
    padding-top: 10%;
    /*上に空ける余白。上下間のバランスをとって下さい。*/
    left: 5%;
    /*headerに対して、左からの配置場所*/
  }

  .home header #logo p img {
    width: 30%;
  }

  /*トップページのロゴ下に書いている説明文*/
  header #logo p {
    font-size: 1.2em;
  }


  /*取り組み
---------------------------------------------------------------------------*/
  /*カード設定*/
  .card-1col {
    width: 91%;
    margin: 1.5rem auto;
  }

  .wrapper {
    width: 91%;
  }

  .wrapper .card {
    flex-basis: 45%;
  }

  /*背景動画非表示*/
  .card .video {
    visibility: hidden;
  }

  .card-title {
    font-size: 2.5rem;
    letter-spacing: .05em
  }



  /*施工事例
---------------------------------------------------------------------------*/

  /*カード内のポジション設定*/
  .fc__content {
    left: 20px;
    bottom: 20px;
  }

  /*カード内のタイトル設定*/
  .fc__content h3 {
    font-size: 2rem;
  }

  /*カード内のキャプション設定*/
  .fc__content .caption {
    font-size: .8rem;
  }

  /*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}





/*---------------------------------------------------------------------------
【PC】画面サイズ1025px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1025px) {

  /*header（ロゴなどが入った最上段のブロック）
---------------------------------------------------------------------------*/
  /*トップページのロゴ画像*/
  .home header #logo {
    left: 7%;
    /*headerに対して、左からの配置場所*/
    padding-top: 7%;
    /*上に空ける余白。上下間のバランスをとって下さい。*/
  }

  /*menubarブロック設定
---------------------------------------------------------------------------*/

  /*メニュー１個あたりの設定*/
  .p #menubar a {
    box-sizing: border-box;
    background: transparent;
    color: #fff;
  }

  /*「お知らせ」ブロック
---------------------------------------------------------------------------*/
  /*日付(dt)設定*/
  #new dt {
    width: 14em;
    /*幅。14文字(em)分。*/
    display: flex;
    /*flexボックスを使う指定*/
    justify-content: space-between;
    /*日付とアイコンをそれぞれ端に寄せる*/
    flex-direction: row;
    flex-wrap: wrap;

  }

  /*日付の横のマーク（共通設定）*/
  #new dt span {
    display: inline-block;
    /*表示させる*/
    width: 6em;
    /*幅。6文字(em)分。*/
    background: #999;
    /*背景色*/
    font-size: 0.8em;
    /*文字サイズを80%に。*/
    text-align: center;
    /*文字をセンタリング*/
    margin-right: 1em;
    /*アイコンの右側に空けるスペース*/
    align-self: flex-start;
    /*高さを間延びさせない指定*/
    line-height: 1.8;
    /*行間を少し狭く*/
    position: relative;
    top: 0.4em;
    /*上下の配置バランスの微調整*/
  }

  /*bg1設定。サンプルテンプレートでは「サービス」と書いてあるマーク*/
  #new dt span.icon-bg1 {
    background: #f1efef;
    /*背景色*/
  }

  /*記事(dd)設定*/
  #new dd {
    width: calc(100% - 14em);
    /*「14em」は上の「#new dt」のwidthの値です。*/
  }

  /*「施工事例」ブロック
---------------------------------------------------------------------------*/
  /*幅設定*/
  .jirei-card {
    width: 60%;
  }


  /*「取り組み」ブロック
---------------------------------------------------------------------------*/
  /*背景動画設定*/
  .card .video {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    visibility: hidden;
    z-index: -1;
    object-fit: cover;
  }

  .card .video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }

  .card-1col .card .video {
    width: 100%;
    height: 100%;
  }

  .card-1col .card .video video {
    width: 100%;
  }

  /*hover時に背景動画表示*/
  .card:hover .video {
    visibility: visible;
  }



  /*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}