@charset "utf-8";


.obi_002 p {
    text-align: center;
    line-height: 2;
    font-weight: bold;
}


.loop_wrap_base {
    background-color: #fff;
    padding-top: 90px;
}

.example_h2 {
    font-size: 36px;
    font-weight: bold;
    color: #111;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.2em;
}
.example_span {
    letter-spacing: 0.2em;
    font-size: 14px;
    color: #91BF8A;
}
.example_h2 {
    font-size: 36px;
    font-weight: bold;
    color: #111;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.2em;
}
.slider-container {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.slider-container {
    /* display: flex
; */
    overflow: hidden;
}
.slider-container {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.slider-wrapper {
    display: flex
;
    --slide-duration: 3s;
    --original-slide-count: 6;
    --total-move-distance: 1800px;
    animation-name: infinite-slide;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
.slider-wrapper {
    display: flex
;
    /* animation: horizontal-animation 30s linear infinite; */
    --slide-duration: 3s;
    --original-slide-count: 6;
    --total-move-distance: 1800px;
    animation-name: infinite-slide;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

.slide, .loop_wrap_base .slider-wrapper > .slide {
    width: 400px;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden !important;
    position: relative;
    /* margin-right: 10px; */
}
.slide {
    width: 400px;
    flex-shrink: 0;
    box-sizing: border-box;
    /* margin-right: 10px; */
    overflow: hidden;
    position: relative;
}

.slider-container .slide .slide-caption {
    display: block;
    margin-top: 8px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    color: #333;
    text-align: center;
}

.slide_img_wrap {
    cursor: pointer;
    max-width: 500px;
    overflow: hidden;
    width: 100%;
}

.slider-container .slide .slide_img {
    display: block;
    vertical-align: bottom;
    margin-left: auto;
    margin-right: auto;
}
.slide img.slide_img {
    display: block;
    width: 100%;
    height: 266px;
    object-fit: cover;
}
.slide_img_wrap img {
    height: auto;
    transition: transform .6s ease;
}

.slide_img_wrap {
    cursor: pointer;
    max-width: 500px;
    overflow: hidden;
    width: 100%;
}

.slider-container .slide .slide_img {
    display: block;
    vertical-align: bottom;
    margin-left: auto;
    margin-right: auto;
}
.slide img.slide_img {
    display: block;
    width: 100%;
    height: 266px;
    object-fit: cover;
}


.clfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}


.loop_wrap_base {
    background-color: #fff;
    padding-top: 90px;
}


.clfix:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}



/*
施工事例
-------------------------------------------*/
.example_h2{
    font-size: 36px;
    font-weight: bold;
    color: #111;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.2em;
}

.example_span{
	letter-spacing: 0.2em;
    font-size: 14px;
    color: #91BF8A;
}

/* 施工事例スライドのキャプションスタイル */
.slider-container .slide .slide-caption {
	display: block; /* ブロック要素として表示 */
	margin-top: 8px; /* 画像との上の間隔 */
	padding: 0 10px; /* 左右の余白 */
	font-size: 14px; /* 文字サイズ */
font-weight: bold;
	line-height: 1.5; /* 行の高さ */
	color: #333; /* 文字色 */
	text-align: center; /* 中央揃え */
	/* 必要に応じて他のスタイル（font-weightなど）を追加 */
  }
  
  /* 画像の下に不要な隙間ができるのを防ぐ */
  .slider-container .slide .slide_img {
	display: block; /* ブロック要素にする */
	vertical-align: bottom; /* ベースライン揃えを防ぐ */
	margin-left: auto; /* 画像自体を中央揃えする場合 */
	margin-right: auto; /* 画像自体を中央揃えする場合 */
  }


.slider-container{
	overflow: hidden; /* ★必須: はみ出した要素を隠す */
  width: 100%;      /* コンテナ幅は100% */
  /* display: flex; は不要 */
  position: relative; /* 必要に応じて */
  }

  .slide {
	width: 40%;
  }









/*
無限ループ（作り直した）
-------------------------------------------*/
@keyframes infinite-slide {
	from {
	  transform: translateX(0);
	}
	to {
	  /* ★修正: CSS変数 '--total-move-distance' を使う */
	  /* オリジナルスライド群の合計幅だけ移動するようにJSで設定 */
	  transform: translateX(calc(-1 * var(--total-move-distance, 1800px))); /* デフォルト値も念のため設定 */
	}
  }
  
  .slider-container {
	/* display: flex; */
	overflow: hidden;
  }
  
  .slider-wrapper {
	display: flex;
	/* animation: horizontal-animation 30s linear infinite; */
/* ★CSS変数の定義 (初期値、JSで上書きされます) */
--slide-duration: 3s; /* 1枚あたりの表示時間 (JSで設定) */
--original-slide-count: 6; /* オリジナルスライド数 (JSで設定) */
--total-move-distance: 1800px; /* 全移動距離 (JSで設定) */

/* ★アニメーションを適用 */
animation-name: infinite-slide;
/* animation-duration は JS で style 属性に設定します */
animation-timing-function: linear; /* 一定速度 */
animation-iteration-count: infinite; /* 無限ループ */
animation-play-state: running; /* アニメーション開始 */
}


  
  .slide {
	width: 400px;
  }
  
  .slide img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
  }
  
  @media (hover: hover) {
	.slider-container:hover .slider-wrapper {
	  animation-play-state: paused;
	}
  }


.slide_img{
	width:400px;
	 height:266px;
} 


.loop_wrap_base{
	background-color: #fff;
	padding-top: 90px;
}


/* 無限ループ（作り直した） */

/* ★アニメーションの名前を 'infinite-slide' に変更 (JSと合わせる) */
@keyframes infinite-slide {
	from {
	  transform: translateX(0);
	}
	to {
	  /* ★修正: CSS変数 '--total-move-distance' を使う */
	  /* オリジナルスライド群の合計幅だけ移動するようにJSで設定 */
	  transform: translateX(calc(-1 * var(--total-move-distance, 1800px))); /* デフォルト値も念のため設定 */
	}
  }
  
  .loop_wrap_base{ /* スライダー全体を囲む親要素 */
	background-color: #F2F6F7;
	padding-top: 20px; /* 既存のスタイル */
  padding-bottom: 130px;
  }
  
  .slider-container {
	overflow: hidden; /* ★必須: はみ出した要素を隠す */
	width: 100%;      /* コンテナ幅は100% */
	/* display: flex; は不要 */
	
	position: relative; /* 必要に応じて */
  }
  
  .slider-wrapper {
	display: flex;     /* ★必須: スライドを横並びにする */
	/* width は指定しない (内容に応じて伸びる) */
  
	/* ★CSS変数の定義 (初期値、JSで上書きされます) */
	--slide-duration: 3s; /* 1枚あたりの表示時間 (JSで設定) */
	--original-slide-count: 6; /* オリジナルスライド数 (JSで設定) */
	--total-move-distance: 1800px; /* 全移動距離 (JSで設定) */
  
	/* ★アニメーションを適用 */
	animation-name: infinite-slide;
	/* animation-duration は JS で style 属性に設定します */
	animation-timing-function: linear; /* 一定速度 */
	animation-iteration-count: infinite; /* 無限ループ */
	animation-play-state: running; /* アニメーション開始 */
  }
  
  /* ★マウスオーバーでアニメーション停止 */
  .slider-container:hover .slider-wrapper {
	animation-play-state: paused;
  }
  
  .slide {
	width: 400px; /* PCでの固定幅 */
	flex-shrink: 0; /* ★必須: スライドが縮まないようにする */
	box-sizing: border-box; /* 念のため追加 */
	/* margin-right: 10px; */ /* 必要であればスライド間のマージンを指定 */


	overflow: hidden; /* ★★★重要：はみ出し防止 */
  position: relative; /* ★キャプション等の位置決めの基点 */

}

.slide,.loop_wrap_base .slider-wrapper > .slide { /* 親要素を追加してセレクタの詳細度を上げる */
	width: 400px; /* PCでの固定幅 */
	flex-shrink: 0; /* 必須 */
	box-sizing: border-box;
	overflow: hidden !important; /* ★★★ !important を追加して強制的に適用 */
	position: relative;
	/* margin-right: 10px; */ /* 必要であれば */
}





  /* 画像のスタイル (セレクタをより具体的に) */
  .slide img.slide_img {
	display: block; /* vertical-alignによる下部の隙間を防ぐ */
	width: 100%; /* 親要素(.slide)の幅に合わせる */
	height: 266px; /* 高さは固定？ 必要なら auto や aspect-ratio を検討 */
	object-fit: cover; /* アスペクト比を維持しつつ要素を埋める */
  }
  
  /* 施工事例スライドのキャプションスタイル (既存のまま) */
  .slider-container .slide .slide-caption {
	display: block;
	margin-top: 8px;
	padding: 0 10px;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.5;
	color: #333;
	text-align: center;
  }

.pc_non{
	display: none;
}




.slide_img_wrap {
	cursor: pointer;
	max-width: 500px;
	overflow: hidden;
	width: 100%;
  }
  .slide_img_wrap img {
	height: auto;
	transition: transform .6s ease;/* ゆっくり変化させる */
	width: 100%;
  }
  .slide_img_wrap:hover img {
	transform: scale(1.1);/* 拡大 */
  }


/* ピックアップアイテムのアニメーション */
.pick_up ul li.effect {
  opacity: 0; /* 初期状態: 透明 */
  transform: translateY(20px); /* 初期状態: 下に20pxずらす */
  animation-name: fadeInFromBottom;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes fadeInFromBottom {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 遅延の設定 */
.pick_up ul li.effect.d_02 {
  animation-delay: 0.2s; /* 0.2秒遅れて開始 */
}
.pick_up ul li.effect.d_04 {
  animation-delay: 0.4s; /* 0.4秒遅れて開始 */
}
.pick_up ul li.effect.d_06 {
  animation-delay: 0.6s; /* 0.6秒遅れて開始 */
}





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


.pc_non{
	display: none;
}


}



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



.no_pc {
	display: none !important;
}



.pc_non{
	display: none;
}

}



@media screen and (max-width:960px){


img {
	max-width: 100% !important;
	height: auto;
	width:auto;
	margin-left:auto;
	margin-right:auto;
}

.pc_non{
  display: block;

}


}



@media screen and (max-width:640px){



	.effect.start {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "alpha( opacity=100 )";
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
}
.effect {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "alpha( opacity=0 )";
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -webkit-transition: 1.0s ease-out;
    -moz-transition: 1.0s ease-out;
    transition: 1.0s ease-out;
}


	.slide, .loop_wrap_base .slider-wrapper > .slide {
    width: 200px;
	}

#sub_top {
	height: 180px;
	padding-top: 100px;
}


.loop_wrap {
  width: 400%;
}


  .slide {
    width: 150px; /* SPでの固定幅 */
  }
  /* SP用に slide_img の height も調整が必要な場合があります */

  .slide img.slide_img {
     height: auto; /* または適切な高さ (例: 100px) */
     /* aspect-ratio: 4 / 3; */ /* アスペクト比を指定するのも良い */
  }




}




    
@media screen and (max-width:460px){
    



	.example_h2,.contact_h2 {
		font-size: 24px;
	}

	.example_span,.contact_span {
		font-size: 13px;
	}



.slide,.loop_wrap_base .slider-wrapper > .slide { /* 親要素を追加してセレクタの詳細度を上げる */
	width: 150px;

}

.loop_wrap_base {
    padding-bottom: 130px;
}




/*
エフェクト
-------------------------------------------*/

 .effect {
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "alpha( opacity=0 )";
	transform: translateY(20px);
	-webkit-transform: translateY(20px);  
    -moz-transform: translateY(20px); 
	-webkit-transition: 1.0s ease-out;
	-moz-transition: 1.0s ease-out;
	transition: 1.0s ease-out;
}
.effect.d_02 {
transition-delay:0.2s;
-webkit-transition-delay:0.2s;
}
.effect.d_04 {
transition-delay:0.4s;
-webkit-transition-delay:0.4s;
}
.effect.d_06 {
transition-delay:0.6s;
-webkit-transition-delay:0.6s;
}
.effect.d_08 {
transition-delay:0.8s;
-webkit-transition-delay:0.8s;
}
.effect.start {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
}


	
}