@charset "UTF-8";
/* CSS Document */

/*****トップページ**********************************/

/*背景*/
.topbgimg1{
background-image: url(/wp-content/uploads/bgimg3.jpg);
background-size: cover; 
} 
.topbgimg2{
background-image: url(/wp-content/uploads/bgimg2.jpg);
background-size: cover; 
} 
.topbgimg3{
background-image: url(/wp-content/uploads/bgimg3.jpg);
background-size: cover; 
} 
.topbgimg4{
background-image: url(/wp-content/uploads/bgimg4.jpg);
background-size: cover; 
}
.topbgimg5{
background-image: url(/wp-content/uploads/bgimg5.jpg);
background-size: cover; 
} 
.topbgimg6{
background-image: url(/wp-content/uploads/bgimg6.jpg);
background-size: cover; 
} 
.topbgimg7{
background-image: url(/wp-content/uploads/bgimg7.jpg);
background-size: cover; 
} 
.topbgimg8{
background-image: url(/wp-content/uploads/bgimg8.jpg);
background-size: cover; 
} 
.topbgimg9{
background-image: url(/wp-content/uploads/bgimg9.jpg);
background-size: cover; 
} 
.topbgimg10{
background-image: url(/wp-content/uploads/bgimg10.jpg);
background-size: cover; 
} 
.topbgimg11{
background-image: url(/wp-content/uploads/bgimg11.jpg);
background-size: cover; 
} 
.topbgimg12{
background-image: url(/wp-content/uploads/bgimg12.jpg);
background-size: cover; 
} 
.topbgimg14{
background-image: url(/wp-content/uploads/bgimg14.jpg);
background-size: cover; 
} 
.topbgimg13{
background-image: url(/wp-content/uploads/bgimg13.jpg);
background-size: cover; 
} 
.topbgimg15{
background-image: url(/wp-content/uploads/bgimg15.jpg);
background-size: cover; 
} 
.topbgimg16{
background-image: url(/wp-content/uploads/bgimg16.jpg);
background-size: cover; 
} 
.topbgimgbox{
background-image: url(/wp-content/uploads/head-box.jpg);
background-size: cover; 
} 
.topbgimgrei{
background-image: url(/wp-content/uploads/back-rei.jpg);
background-size: cover; 
} 


.item-top{
background-image: url(/wp-content/uploads/back1.jpg);
background-size: cover; 
}
.probgimg1{
background-image: url(/wp-content/uploads/rei10-319.jpg);
background-size: cover; 
}
.probgimg2{
background-image: url(/wp-content/uploads/rei-245-1.jpg);
background-size: cover; 
}
.probgimg3{
background-image: url(/wp-content/uploads/rei-53-5.jpg);
background-size: cover; 
}



/*トップページ　製品上揃え*/
.wc-block-grid__products{
  align-items: flex-start;

}


/*フッター部分*/
.p-footer-desc{
color:white;
background-color: #373e5d;
}

/*トップページフッターとの隙間削除*/
@media (max-width: 991px) {
   .not_margin {
       margin-bottom: 0px;
   }
}
.not_margin {
    margin-bottom: 0px;
}
.wp-block-cover{
margin-bottom:0 !important;
}


.p-footer{
background-image: url(/wp-content/uploads/back-footer.jpg);
background-size: cover; 
}

/*マウスオーバーでマウスポインタを指の形に*/
.moveryubi {
  cursor : pointer;
}




/*トップ　写真とコラムのタイトル*/

.topphtitle {
  position: relative;
  padding: 0.5em 0.5em;
  text-align: center;
}

.topphtitle:before,
.topphtitle:after {
  position: absolute;
  content: '';
}

.topphtitle:after {
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-top: 2px solid #82a180;
  border-left: 2px solid #82a180;
}

.topphtitle:before {
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  border-right: 2px solid #82a180;
  border-bottom: 2px solid #82a180;
}


/*リンクボタン*/
.ac{
       display: -webkit-flex;
	justify-content: center ;
}

.btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 240px;
	height: 50px;
	color: #333;
	font-size: 14px;
	text-decoration: none;
	transition: 0.3s;
}

.btn a:hover {
	color: #f2f2f2;
}
.btn03 a {
	background-color: #ffffff;
	border: 1px solid transparent;
}
.btn03 a::before {
	content: '';
	position: absolute;
	top: -3px;
	left: -3px;
	width: 100%;
	height: 100%;
	background-color: transparent;
	border: 1px solid #333;
}

.btn03 a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -30px;
	transform: translateY(-40%);
	width: 45px;
	height: 1px;
	background-color: #333;
}

.btn03 a:hover {
	background-color: #4265a4;
}


.textlink a {
	position: relative;
	color: #333;
	text-decoration: none;
}
.textlink a:hover {
	color: #071e91;
}
.textlink07 a {
	padding-right: 50px;
}

.textlink07 a::before {
	content: '';
	position: absolute;
	top: calc(50% - 4px);
	right: 0;
	transform: rotate(30deg);
	width: 12px;
	height: 1px;
	background-color: #333;
}

.textlink07 a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 40px;
	height: 1px;
	background-color: #333;
}

/*カテゴリリンクボタン*/
.topcatebotan{
 width:300px; /* サイズがサンプルなので適時変更してください。*/
 margin:0 auto; /*サンプルで中央に寄せたいので書かせていただいております。*/
 overflow:hidden; /*これを記述することではみ出た部分を非表示にします。*/
}
.topcatebotan img{
 transition:1s all;
}
.topcatebotan img:hover{
  transform:scale(1.1,1.1);
  transition:1s all;
}


/*表のタイトルセンター揃え*/
.hyo th{text-align:center;}




/*サイドメニュー罫線*/
.boxmi4{
  background-color: #fff;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #9ca6b2 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  padding: 2em 1em 1.98em 1em;
  color: #262626;
  margin: 0em 1em;
  font-weight: bold;
  font-size:1rem;
}


/*非表示*/
.hihyoji{display:none}


/*****フォントカラー**********************************/
/*.toprei a {
  color:#ffffff !important;
}*/

#fcwhite {
  color:#ffffff !important;
}
.fcwhite {
  color:#ffffff !important;
}


/*「数量」を非表示*/
.p-entry-product-cart-label{display:none}

/*施工例一覧ページの下に出てくる新規施工例を非表示 　*これをやるとカテゴリページが表示しない
.p-product-archive{display:none}*/

/*商品ページの　その他の施工例はこちらからボタン*/
a.btn_07 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 500px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	color: #27acd9;
	border-bottom: 2px solid #27acd9;
	border-radius: 100vh;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	transition: 0.5s;
}
a.btn_07:hover {
	color: #fff;
	background: #27acd9;
	border-bottom: 2px solid #fff;
	transform: translateY(3px);
}

/*部分的にフル幅にしない*/
@media (min-width: 768px) {
.no-full { min-width: 750px; max-width: 1180px; margin: 0 auto; }

.l-inner {   max-width: 90%;}
}
@media (max-width: 767px) {
.no-full { width: 100%; }
}


.p-cb-item-button{
background: #ffffff;
border-color:#1a66b2;
border:solid 1px;
}



/*スマホ非表示*/
.spnone{
    @media (max-width: 767px) {
        display:none;
    }
}

.imagetopphoto {
position: relative;
}
.imagetopphoto::before {
content: ''; /* このプロパティが無いと擬似要素は機能しません。 */
      display: block; /* ブロック要素にします。 */
      position: absolute; /* absoluteで上に乗せます。 */
      top: 0; /* 縦横の値を入れるのは基本です。 */
      left: 0;
      width: 100%;
      height: 100%;
      box-shadow: inset 0 0 0px 8px rgba(255,255,255,0.6);
}


/*テーブル　センター揃え*/
.has-fixed-layout  td, .has-fixed-layout  th {
text-align: center;
vertical-align: top;
}
/*セル内　垂直方向に真ん中揃え*/
.vam{
vertical-align: middle !important;
}

/*製品ページの特長　二重囲み枠*/
.box3-6 {
border:3px solid #ffffff;
background-color:#eaf4f4;
box-shadow:0 0 0 6px #eaf4f4;
padding:16px;margin:20px;
}

/*ずらし影のボックス*/
.box-design9 {
  margin: 20px auto;
  padding: 20px;
  background-color: transparent;
  border: 2px solid #949494;
  position: relative;
}
.box-design9::after {
  content: '';
  background-color: #edf4ea;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -7px;
  left: 7px;
  z-index: -1;
}



/*施工例詳細ページ　製品ページはこちらからボタン*/
/* ボタンのスタイル */
.buttonIconText02 {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 320px;
  height: 64px;
  padding: 8px 64px 8px 8px;
  font-family: sans-serif;
  font-size: 16px;
  color: #fff !important;
  text-align: center;
  overflow-wrap: anywhere;
  background-color: #468bbb;
  border-radius: 32px; /* (buttonの高さ / 2) の値 */
}

.buttonIconText02__reverse {
  flex-direction: row-reverse;
  padding: 8px 8px 8px 64px;
}

.buttonIconText02_icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  aspect-ratio: 1;
  overflow: hidden;
}

.buttonIconText02_text {
  flex-shrink: 1;
  width: 100%;
}

@media (any-hover: hover) {
  .buttonIconText02 {
    transition: background-color 0.2s;
  }

  .buttonIconText02_icon {
    transition: transform 0.2s;
  }

  .buttonIconText02:hover {
    background-color: #135c86;
  }

  .buttonIconText02:hover .buttonIconText02_icon {
    transform: translateX(4px);
  }

  .buttonIconText02:hover .buttonIconText02_icon__left {
    transform: translateX(-4px);
  }
}



/***全体******************************/

/* hタグの行間なくす*/
.gyokannasi {
            margin: 0 !important; /* 上下の余白をゼロに */
            line-height: 1.5 !important; /* 行間をなくす */
        }


/*4列カラム*/
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px; /* カラム間のスペース */
        }

        .col4 {
            flex: 1 1 calc(25% - 10px); /* 4カラムに分ける */
            padding: 20px;
            box-sizing: border-box; /* パディングを含めてサイズ計算 */
            text-align:center;
        }

        @media (max-width: 800px) {
            .col4 {
                flex: 1 1 calc(50% - 10px); /* 画面が狭くなったら2カラムに */
            }
        }

        @media (max-width: 500px) {
            .col4 {
                flex: 1 1 100%; /* 画面がさらに狭くなったら1カラムに */
            }
        }



/*外部リンクアイコン*/
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 20
}

/*長めのリンクボタン*/
.btn05 a {
	background-color: #498ece;
	border: 1px solid transparent;
    width: 400px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    color: white !important;
}

.btn05 a::before {
	content: '';
	position:  absolute;
	top: 50%;
	right: 25px;
	transform: translateY(-50%);
	width: 30px;
	height: 1px;
	background-color: #f9f342;
}

.btn05 a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background-color: transparent;
	border: 1px solid #f9f342;
	border-radius: 50%;
}


/*メイン部分の幅を広げる　200pxのところは同じ値を入れる　
@media (min-width: 992px) {
   body.sidebar-left .l-main-inner .l-primary, body.sidebar-right
.l-main-inner .l-primary {
       width: calc(100% - 150px+40px);
   }
}

@media (min-width: 992px) {
   body.sidebar-left .l-main-inner .l-secondary, body.sidebar-right
.l-main-inner .l-secondary {
       width: 150px;
   }
}*/



/*施工例ページ　マウスオーバーで拡大*/
.image-container {
      position: relative;
      display: inline-block;
      transition: transform 0.2s, box-shadow 0.2s;
}
.image-container img {
     width: 300px;
     height: auto;
     transition: transform 0.2s, box-shadow 0.2s;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: block;
  transition: 0.5s ease;
}
.image-container .overlay-text {
  position: absolute;
  top: 35%;
  left: 35%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  opacity: 1;
  transition: 0.5s ease; /* テキストのアニメーション */
  text-shadow: #4682b4 1px 0 10px;
}
.image-container:hover img {
     transform: scale(1.03); /* 画像を少し拡大 */
     box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5); /* 内側の影を強調 */
     filter: brightness(50%); /* 画像を暗くする */
}