/*
Theme Name: 大丸工務店
Author: 大丸工務店
Author URI: https://k-daimaru.co.jp
Description: 
*/





/* ■■　一覧ページエフェクト　■■ */
.eff {
	width:			300px;
	height:			180px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.eff .caption {
	font-size:		100%;
	text-align: 		center;
	color:			#fff;
}
.eff .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.eff:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}


/* ■■　拡大表示エフェクト　■■ */
.link00 {}
.link00 a{
  display: inline-block;
  color:#333;
  font-size:120%;
  text-decoration:none;
  transition: all .3s;
}
.link00 a:hover{
  color: #fff;
  background-color: #999;
}

/* ■■　画像エフェクト　■■ */
.sample_box{
 width:350px; // サイズがサンプルなので適時変更してください。
 margin:0 auto; //サンプルで中央に寄せたいので書かせていただいております。
 overflow:hidden; //これを記述することではみ出た部分を非表示にします。
}
.sample_box img{
 transition:1s all;
}
.sample_box img:hover{
  transform:scale(1.2,1.2);
  transition:1s all;
}




/* ■■　ページヘッダー画像　■■ */
.kasane1-2{
position: relative;
text-align: center;
}
.kasane1-2 p{
  position: absolute;
  color: #fff;
  font-size: 1.8rem;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: -moz-radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));
  background: radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));
}

.kasane1-3{
position: relative;
text-align: center;
}
.kasane1-3 p{
  position: absolute;
  color: #fff;
  font-size: 1.4rem;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: -moz-radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));
  background: radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));
}




// ---------------------------------------------------------------
// ここからページネーション
// ---------------------------------------------------------------

.news-pagination-wrapper {
  margin: 50px auto;
  @include fw.mq("sp") {
    margin: 30px auto;
  }
}
.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.page-numbers > li > a,
.page-numbers > li > span {
  width: 32px;
  height: 32px;
  border: 1px solid fw.$dark-gray;
  background-color: fw.$white;
  display: grid;
  place-items: center;
  border-radius: 5px;
}
.page-numbers > li > .dots {
  width: auto;
  height: auto;
  border: 0;
}
.page-numbers li span {
  opacity: 0.5;
}
.page-numbers > li > .dots {
  opacity: 1;
}
.page-numbers a:hover{ color:#fff; background-color:#111d3d; border-color:#666; }