@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__thumb {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.3s ease; /* 拡大アニメーションのスムーズなトランジション */
  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__thumb::before {
  content: "";  
  width: 100%;        
  height: 100%;       
  display: block;      /* 高さを指定するためにブロック要素にする */
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  position: absolute;  /*  */
  top: 0;
  left: 0;
}


/*カード内のポジション設定*/
.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;
}



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

}