/* ============================================================
   施工事例 詳細ページ 専用CSS（2026-08-08 追加）
   ・single-works.php でのみ読み込まれる（functions.php で制御）
   ・本番の style.css には一切手を入れない方針
   ・支店テーマ tobeshin-home-wp-noda のビルド済みCSSから抽出
   ============================================================ */
.use-work__info-state-inner {
	margin-top: 2.5rem;
	margin-left: auto;
	margin-right: auto;
	max-width: 31.25rem;
	padding: 0 1.5625rem;
}
.single-works-content__voice-flex {
	flex: 1;
	min-width: 0;
}
.single-works-content__voice-name {
	font-family: "A-OTF Futo Go B101 Pr5", "Noto Sans", sans-serif;

	color: #8EC31F;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.02em;
}
.use-work__images {
	display: flex;
	position: relative;
}
.use-work__arrow {
	align-self: center;
	bottom: 0;
	height: 3.4375rem;
	justify-self: center;
	left: 0;
	place-self: center;
	position: absolute;
	right: 0;
	top: 0;
	width: 3.4375rem;
	z-index: 10;
}
.use-work__img {
	position: relative;
	width: 100%;
}
.use-work__img img {
	-o-object-fit: cover;
	aspect-ratio: 195/259;
	height: auto;
	object-fit: cover;
	width: 100%;
}
.use-work__tab {
	background-color: #A80000;
	border-radius: 2.1875rem;
	color: #fff;
	display: inline-block;
	font-size: 0.8375rem;
	font-weight: 700;
	left: 0.625rem;
	letter-spacing: 0.05em;
	line-height: 1;
	padding: 0.53125rem 0.625rem 0.40625rem;
	position: absolute;
	top: 0.625rem;
}
.use-work__tab--blue {
	background-color: #0062A8;
}
.use-work__info {
	background-color: #F6FFE4;
	padding: 1.875rem 0;
}
.use-work__info-inner {
	margin-left: auto;
	margin-right: auto;
	max-width: 31.25rem;
	padding: 0 1.5625rem;
}
.use-work__info-head {
	align-items: center;
	border-bottom: solid 0.125rem #8EC31F;
	display: flex;
	gap: 0.625rem;
	padding-bottom: 0.625rem;
}
.use-work__info-house {
	height: 1.75rem;
	width: 1.875rem;
}
.use-work__info-title {
	color: #13521F;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 2;
}
.use-work__info-info + .use-work__info-info {
	margin-top: 1.875rem;
}
/* SP：施工情報ブロックは .use-work__info-inner の外にあり左パディングが効かないため、
   「施工中の様子」ブロック（inner の padding:0 1.5625rem）と左ラインを揃える。 */
.use-work__info-flex {
	padding-left: 1.5625rem;
	padding-right: 1.5625rem;
}
.use-work__info-list {
	margin-top: 1.25rem;
}
.use-work__info-item + .use-work__info-item {
	margin-top: 0.5rem;
}
.use-work__info-icon {
	height: 1.5625rem;
	width: 1.5rem;
}
.use-work__info-wrap {
	display: flex;
	flex-shrink: 0;
	gap: 0.625rem;
	width: 10rem;
}
.use-work__info-sub {
	color: #007E5C;
	font-family: "A-OTF Futo Go B101 Pr5", "Noto Sans", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
}
.use-work__info-text {
	color: #143D32;
	font-family: "A-OTF Futo Go B101 Pr5", "Noto Sans", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
}
.use-work__info-content {
	display: flex;
}
.use-work__info-sentence {
	color: #13521F;
	font-family: "A-OTF Futo Go B101 Pr5", "Noto Sans", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 2;
	margin-top: 1.25rem;
}
.use-work__info-state {
	background-color: #FFF1F1;
	padding: 1.875rem 0;
}
.use-work__info-state--progress {
	background-color: #FFFDDC;
}
.use-work__info-state--after {
	background-color: #E4F6FF;
}
.use-work__info-head--state {
	border-bottom: solid 0.125rem #C97373;
}
.use-work__info-head--progress {
	border-bottom: solid 0.125rem #C9C873;
}
.use-work__info-head--after {
	border-bottom: solid 0.125rem #73A3C9;
}
.use-work__info-title--state {
	color: #521313;
}
.use-work__info-title--after {
	color: #134C52;
}
.use-work__info-title span {
	color: #FF0000;
	font-family: "avenir", sans-serif;
	text-transform: capitalize;
}
.use-work__info-title--after span {
	color: #00A6FF;
}
.use-work__info-state-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.875rem 0.625rem;
	margin-top: 1.875rem;
}
.use-work__info-state-item {
	margin: 0;
	max-width: calc(50% - 0.3125rem);
	width: 100%;
}
.use-work__info-state-head {
	align-items: center;
	background-color: #A80000;
	border-radius: 2.0625rem;
	color: #fff;
	display: flex;
	flex-direction: column;
	font-family: "A-OTF Futo Go B101 Pr5", "Noto Sans", sans-serif;
	font-size: 0.625rem;
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0.08em;
	line-height: 1.3;
	min-height: 2.3125rem;
	text-align: center;
}
.use-work__info-state-head--progress {
	background-color: #FFD046;
	color: #584200;
}
.use-work__info-state-head--after {
	background-color: #0062A8;
}
.use-work__info-state-img {
	margin-top: 0.625rem;
}
.use-work__info-state-img img {
	-o-object-fit: cover;
	aspect-ratio: 161/121;
	height: auto;
	object-fit: cover;
	width: 100%;
}
.use-work__info-state-text {
	color: #521313;
	font-family: "A-OTF Futo Go B101 Pr5", "Noto Sans", sans-serif;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.6;
	margin-top: 0.625rem;
}
.use-work__info-state-text--progress {
	color: #31350D;
}
.use-work__info-state-text--after {
	color: #134952;
}
.state-text-clamped {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}
.state-text-more {
	background: none;
	border: none;
	color: #8EC31F;
	cursor: pointer;
	display: none;
	font-family: "A-OTF Futo Go B101 Pr5", "Noto Sans", sans-serif;
	font-size: 0.625rem;
	font-weight: 700;
	margin-top: 0.25rem;
	padding: 0;
	text-decoration: underline;
}
@media screen and (min-width: 48rem) {
  .single-works-content__voice-flex{
	margin-top: 0.875rem;
	width: 46.86%;

}
}
@media (min-width: 48rem) {
  .single-works-content__voice-name{
	font-size: 2rem;
}
  .use-work{
	margin-left: auto;
	max-width: 62.625rem;
	padding-right: 0rem;
	width: 100%;
}
  .use-work__images{
	gap: 10.0625rem;
}
  .use-work__arrow{
	height: 5.6875rem;
	width: 5.6875rem;
}
  .use-work__img{
	margin: 0;
	max-width: calc(50% - 5.03125rem);
}
  .use-work__img img{
	aspect-ratio: 417/556;
}
  .use-work__tab{
	border-radius: 3.75rem;
	font-size: 1.375rem;
	left: 1.375rem;
	padding: 0.75rem 1.4375rem 0.75rem;
	top: 1.875rem;
}
  .use-work__info{
	margin-top: 2.5rem;
	padding: 2.9375rem 0 3.125rem;
}
  .use-work__info-inner{
	max-width: 59.375rem;
}
  .use-work__info-flex{
	display: flex;
	gap: 5rem;
	justify-content: center;
	/* SP用に付けた左右パディングはPCでは不要（PCは :only-child 側で調整） */
	padding-left: 0;
	padding-right: 0;
}
  /* 施工内容が未入力の既存事例では子要素が「施工情報」1つになり、
     justify-content:center で中央に寄ってしまうため左寄せに戻す。
     ただし左端ベタ付きにはせず、「施工中の様子」ブロック（.use-work__info-inner の
     padding:0 1.5625rem）と同じ左インデントを付けて縦のラインを揃える。
     2カラム（施工情報＋施工内容）のときは従来どおり中央揃え。 */
  .use-work__info-info:only-child{
	margin-right: auto;
	/* 「施工中の様子」ブロックのアイコン左位置と縦ラインを揃える。
	   768〜1250pxは html{font-size:1.024vw} のvwスケーリングのため
	   px固定ではなくremで指定し、全幅で追従させる。 */
	padding-left: 3.046875rem;
}
  .use-work__info-head{
	gap: 1.25rem;
}
  .use-work__info-house{
	height: 3rem;
	width: 3.375rem;
}
  .use-work__info-title{
	font-size: 1.75rem;
}
  .use-work__info-info{
	width: 44.4444%;
}
  .use-work__info-contents{
	width: 46.6666%;
}
  .use-work__info-info + .use-work__info-info{
	margin-top: 0rem;
}
  .use-work__info-list{
	margin-top: 1.875rem;
}
  .use-work__info-item + .use-work__info-item{
	margin-top: 0.5625rem;
}
  .use-work__info-icon{
	height: 1.875rem;
	width: 1.8125rem;
}
  .use-work__info-wrap{
	gap: 1.25rem;
	width: 13.125rem;
}
  .use-work__info-sub{
	font-size: 1.25rem;
}
  .use-work__info-text{
	font-size: 1.25rem;
}
  .use-work__info-sentence{
	font-size: 1.125rem;
	margin-top: 1.875rem;
}
  .use-work__info-state{
	padding: 3.75rem 0;
}
  .use-work__info-state-list{
	gap: 2.5rem;
	margin-top: 2.5rem;
}
  .use-work__info-state-item{
	max-width: calc(33.3333% - 1.6666666667rem);
}
  .use-work__info-state-head{
	border-radius: 4.375rem;
	font-size: 1.125rem;
	line-height: 1.2777777778;
	min-height: 4.375rem;
}
  .use-work__info-state-img{
	margin-top: 1.25rem;
}
  .use-work__info-state-img img{
	aspect-ratio: 280/210;
}
  .use-work__info-state-text{
	font-size: 1.125rem;
	line-height: 1.5555555556;
	margin-top: 1.25rem;
}
  .state-text-more{
	font-size: 1rem;
}
  .use-work__info-state-inner{
	margin-top: 3.75rem;
	margin-left: auto;
	margin-right: initial;
	max-width: 62.625rem;
	padding-right: 0rem;
	width: 100%;
}
}