@charset utf-8;


body	{font-family: sans-serif;
	color:#000;}

span.color_red	{color:#ff3300;}


/* PCでのみ改行 */
.cssbr_pc::after	{content: "\A" ;
  			white-space: pre;}

.cssbr_w768::after	{content: "\A" ;
  			white-space: pre;}

main#diy_all		{width:100%;
			position:relative;
			overflow:hidden;
			}

span.cssbr_before_brw768::before	{content: "\A" ;
  					white-space: pre;
					}


/* ＳＰ用タイトル　非表示 */
div.toptitle_sp414w {display: none;}


	/* ====================================================

			　ヘッダ　上書き調整　　	

	 ==================================================== */


/* ヘッダー 知ってるJKKアイコン 黄色下線消し */
a.el_headerBtnYellow {display:none;}

header {padding-bottom: 0;
        border-bottom:none;}






	/* ====================================================

		　ぱんくずリスト　　	 z-index 2

	 ==================================================== */

div.pan		{max-width: 74%;
		width: 100%;
    		margin: 0 auto;
    		position: relative;
    		top: 2rem;
    		z-index: 2;
		}

	.pan ol 	{width: fit-content;
    			font-size: 1rem;
			line-height: 1.4rem;
    			margin-top: 0;
    			padding: 0 0.5rem;
    			background-color: rgba(255, 255, 255, 0.3);
    			display: flex;
			}

		.pan ol	li {letter-spacing:0;}

			.pan ol li::after	{content:"＞";
						padding-left:0.5rem;}

			.pan ol	li:first-of-type	{color:#000;}

			.pan ol li:last-child::after	{content:none;}


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

		.pan ol	 {display:none;}
	}



	/* ==========================================================

	    PC タイトル　スライドの指定   zindex0/1/100 /996/997

	========================================================== */


div#slider_bg_area	{max-width:100%;
			width:100%;	
			position:relative;
			background-color: #FCD725;
			}


div.diytitle_imgbox	{width:100%;
			height:100%;
			aspect-ratio:16/9;
			position:absolute;
			top:50%;
			left:50%;
			transform:translate(-50%,-50%);
			background:url("https://www.to-kousya.or.jp/chintai/option/diy/imgs/diy_pagetitle.png") no-repeat center center;
				/* background:url("../imgs/diy_pagetitle.png") no-repeat center center; */
			background-size:calc(100% - 55%);
			filter:drop-shadow(0px 0px 10px #fff);
			z-index:996;
			}



/* ｈ1は透明　左 画面除外 */
h1.diy_centertitle 	{color:transparent;
			position:absolute;
			left:-100%;
			transform:translate(-50%,0);
			}

div#slider_allbox 	{max-width:68vw;
			min-width:414px;
			width:100%;
			aspect-ratio:16/9;
			margin:auto;
			}


div.out		{position:relative;}

div.in img	{position:absolute;
   		top:0;
    		left:0;
    		opacity:0;
    		transition:0.5s;
    		z-index:0;
		}


	div#slider_bg_area img	{display:block;
    				width:100%;
    				height:auto;
				}

	div.out input	{display:none;}

	div.in	{display:flex;
    		justify-content:center;}


	div#slider_allbox  label span	{display:block;
    					width:15px;
    					height:15px;
    					padding:7px;
    					margin:-40px 0 0;
    					border-radius:100vw;
    					cursor:pointer;
    					position:relative;
    					z-index:997;
					}

		/* 　画面遷移の● 黒　 */
		label span::before	{content: "";
    					display:block;
    					width:100%;
    					height:100%;
    					background:#FDD100;
    					opacity:0.7;
    					border-radius:100vw;	
    					}   

			input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before,
			input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before,
			input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before,
			input:nth-of-type(4):checked ~ .in label:nth-of-type(4) span::before,
			input:nth-of-type(5):checked ~ .in label:nth-of-type(5) span::before,
			input:nth-of-type(6):checked ~ .in label:nth-of-type(6) span::before,
			input:nth-of-type(7):checked ~ .in label:nth-of-type(7) span::before	{background: #000;
  			  									opacity: 1;}

	.in label span::before	{animation:slidebutton 31.5s infinite;}




	/* スライド下マーク　画像と同じタイミング */
	@keyframes slidebutton{

   	 	 0%{opacity: 0.7;background:#FDD100;}
    		4.5%{opacity: 1;background:#000;}
    		14.3%{opacity: 1;background:#000;}
    		18.8%{opacity: 0.7;background: #FDD100;}

	}       


	/* スライド画像表示時間　4秒表示0.5切り替え */     
	label:nth-of-type(2) span::before,label:nth-of-type(2) img{animation-delay:4.5s;}
            
	label:nth-of-type(3) span::before,label:nth-of-type(3) img{animation-delay:9s;}

	label:nth-of-type(4) span::before,label:nth-of-type(4) img{animation-delay:13.5s;}

	label:nth-of-type(5) span::before,label:nth-of-type(5) img{animation-delay:18s;}

	label:nth-of-type(6) span::before,label:nth-of-type(6) img{animation-delay:22.5s;}

	label:nth-of-type(7) span::before,label:nth-of-type(7) img{animation-delay:27s;}

            
	input:nth-of-type(1):checked ~ .in label:nth-of-type(1) img,
	input:nth-of-type(2):checked ~ .in label:nth-of-type(2) img,
	input:nth-of-type(3):checked ~ .in label:nth-of-type(3) img,
	input:nth-of-type(4):checked ~ .in label:nth-of-type(4) img,
	input:nth-of-type(5):checked ~ .in label:nth-of-type(5) img,
	input:nth-of-type(6):checked ~ .in label:nth-of-type(6) img,
	input:nth-of-type(7):checked ~ .in label:nth-of-type(7) img	{opacity:1;
									z-index:1;}
							

	.in img	{animation:slide 31.5s infinite;
   	 	opacity: 0;}


	@keyframes slide{
   	 	0%{opacity: 0;}
   	 	4.5%{opacity: 1;z-index: 1;}/* 1枚切り替え時間（％） */
   	 	14.3%{opacity: 1;}/* 100％ ÷ 画像の数 */
   	 	18.8%{opacity: 0;z-index: 0;}/* 合計*/
	}

			input:checked ~ .in img,input:checked ~ .in span::before {animation: none;}


		/* マウスを載せると一時停止 */
		.in:hover img,.in:hover span::before {animation-play-state:paused;}






	/* =================================================

		   PC  トップ　円３リンク   z-index --

	====================================================== */



div.indexlink_allbox	{width:100%;
			padding:3rem 0;
			background-color:#ddd;
			text-align:center;
			position:relative;
			border-top:2px solid #ddd;
			}

		div.indexlink_allbox ul.linklist	{max-width:768px;
							width:100%;
							margin:0 auto;
							display:flex;
							justify-content:space-around;
							}


		div.indexlink_allbox ul li 	{display:inline-block;
						width:150px;
						height:150px;
						border:4px solid #fff;
						border-radius:100vw;
						position:relative;
						background-color:#fccf00;
						box-shadow:10px 8px 4px 0px #998;
						box-sizing:border-box;
						}

	
		div.indexlink_allbox ul li:nth-child(2) {background-color:#444;}


		div.indexlink_allbox ul li:hover	{transition:opacity 0.5s linear;
							opacity:0.7;
							position:relative;
							top:1px;
							left:1px;
							}


		div.indexlink_allbox ul li a 	{width: 150px;
    						height: 150px;
    						padding-top: calc(50% - 10%);
    						font-size: 2.5rem;
    						font-weight: bold;
    						line-height: 2.7rem;
    						display: block;
    						position: absolute;
    						top: -0.2rem;
    						left: -2px;
    						box-sizing: border-box;
						}


				li.text_c_fff a	{color:#fff;}

					li.text_c_fff em {letter-spacing:2px;}


div.indexlink_allbox ul li em	{font-size: 2.8rem;
    				font-style: normal;
				letter-spacing: -0.5px;
				}
				



	/* =========================================================

		PC キャッチ　20％引き帯　説明2件  z-index --

	  ========================================================= */


	/* 人物2人、キャッチ部分 */


div.ordertest_box	{max-width: 1024px;
    			min-width: 768px;
    			width: 100%;
    			margin: 0 auto;
    			margin-top: 5rem;
    			display: flex;
    			justify-content: space-between;
    			align-items: center;
    			position: relative;
			}


div.p_box		{width:100%;
			text-align:center;
			padding-bottom:2rem;
			order:2;			
			}

p.order_textbox {padding-bottom: 1rem;
    		font-size:clamp(3rem, 1.5rem + 3.13vw, 3.5rem);
   		 font-weight: bold;
    		line-height: 6rem;
		}


p.order-textbox2	{color:#ff4500;
			font-size:2rem;
			font-weight:bold;
			letter-spacing:1px;
			}


p.order_textbox	 span.y_line	{background-image:linear-gradient(#fff 0% 50%,yellow 50% 100%);}

	p.order_textbox	 span.order_smalltext	{font-size:clamp(2.5rem, 1.6rem + 1.87vw, 2.8rem);}



	/*  SVG　サイズ指定　*/
	div.ordertest_box img.o_image_left 	{max-width:21%;
						width:100%;
						order:1;
						}

	div.ordertest_box img.o_image_right	{max-width:21%;
						width:100%;
						order:3;
						}




			/*　  ▼　ＰＣ　 二重四角形 20％引き帯　   */

	div.squarearea::before, div.squarearea::after {box-sizing: initial;}


div#sq_bgarea	{width:100%;
		padding:2.5rem 0 2rem;
		background-color:#FCCF00;
		text-align:center;
		position:relative;
		}


	/* 上のSvg画像が下に余白があるのを隠すもの */
	div#sq_bgarea::before		{content:"";
					display:block;
					width:100%;
					height:1rem;
					background-color:#fccf00;
					position:absolute;
					top:-0.3rem;
					}


	/* 20％引き　長バナー */
	a.yellowbg_longban	{max-width:500px;
				width:768px;
				font-weight:bold;
				line-height:4rem;
				vertical-align:bottom;
				margin:2rem auto 0;
				background-color:#fff;
				box-shadow:0 5px 0 #3a2006;
				border:3px solid #3a2006;
				border-radius:100vw;
				display:block;
				}

		a.yellowbg_longban:hover 	{text-decoration:underline;
						position:relative;
						top:2px;
						box-shadow:0 3px 0 #3a2006;
						}


		a.yellowbg_longban::after 	{content:" ▼";
						color:red;}






	/* 四角 */

	div.squarearea_sp {display:none;}/* SP用非表示 */


div.squarearea	{max-width:280px;
		width:100%;
		height:280px;
		border:5px solid #000;
		text-align:center;
		position:relative;
		box-sizing:border-box;
		}

	div.squarearea::after	{content:" ";
				display:block;
				max-width:270px;
				width:100%;
				height:100%;
				border:5px solid #fff;
				position:absolute;
				top:0;
				left:0;
				}

		div.square_content_box	{max-width:796px;
					width:100%;
					margin:0 auto;
					box-sizing:border-box;
					display:flex;
					justify-content:space-around;
					}


p.square_text	{font-size:clamp(5.5rem, 4.633rem + 1.81vw, 6.8rem);
		line-height:6.8rem;
		white-space:pre;
		position:absolute;
		top:53%;
		left:50%;
		transform:translate(-50%,-50%);
		}

		p.square_text span.sq_1	{letter-spacing:-5px;}
		p.square_text span.sq_2	{color:#b71515;}
		p.square_text span.sq_3	{letter-spacing:12px;}




	　　　　/* 　　▼　ＰＣ　黄色帯文字と白黒ボックス 　*/

div.squarearea_text	{position:relative;} 


p.plan_top	{letter-spacing:1px;
		font-weight:bold;
		text-align:left;
		font-size:clamp(16px,1.3vw,1.3rem);
		}


.plan_t1, .plan_t2	{font-size:clamp(84px,9vw,6rem);
			font-family:'BIZ UDPゴシック','MS UI Gothic','Meiryo UI','ＭＳ ゴシック',sans-serif;
			letter-spacing:3px;
			line-height: 11.5rem;
			text-shadow:2px 2px 1px #000,
     				-2px  2px 1px #000,
       				2px -2px 1px #000,
      				-2px -2px 1px #000,
       				2px  0px 1px #000,
       				0px  2px 1px #000,
     				-2px  0px 1px #000,
       				0px -2px 1px #000; 
			}


	.plan_t1	{color:#fff;
			font-weight:normal;
			margin-bottom:1.1rem;
			position:relative;
			}


		.plan_t1::before,.plan_t1::after	{content:"";
							display:inline-block;
							max-width:450px;
							width:100%;
							height:5px;
							border-bottom:5px dotted #000;
							position:absolute;
							top:11.5rem;
							left:0;
							}

				.plan_t1::after	{top:22.6rem;}
	
	.plan_t2	{color:red;
			font-weight:bold;}


p.plan_atnttext	{font-size:clamp(14px,1vw,0.9rem);}



		/* 　　  ▼　ＰＣ　 ＤＩＹ住宅+とは？　2項　　　　 */

div.diy_genteiroom_allbox	{max-width:768px;
				width:100%;
				margin:0 auto;
				margin-top:12rem;
				position:relative;
				}

	.img_kugi::before 	{content:url("../imgs/svg/diy_kugi.svg");
				display:block;
				width:50px;
				position:absolute;
				top:-16rem;
				right:0;
				}	


hr.clear	{clear:both;
		border:none;}

	hr.clear + div h2	{line-height:2.5rem;} /* フロートクリア */


div.diy_genteiroom_allbox h2	{width: 52%;
    				font-size: 2.4rem;
    				line-height: 2.5rem;
    				border-bottom: 2px solid #000;
    				font-weight: bold;
    				letter-spacing: 0;
				}

		div.diy_genteiroom_allbox h2::before 	{content:"■";
							font-size:2rem;}


		div.diy_genteiroom_allbox img.setumei_image_top,img.setumei_image_bottom	{max-width:43%;
												width:100%;
												padding-top:3.5rem;
												float:right;
												}

div.diy_genteiroom_allbox p 	{width: 50%;
    				padding-top: 1.5rem;
    				font-size: 1.9rem;
    				line-height: 2.4rem;
				}

	div.diy_genteiroom_allbox p.gentei_pointtext	{color: #333;
    							font-size: 1.2rem;
    							line-height: 1.8rem;
    							letter-spacing: 1px;
							}


span.mathikisogentei	{width: fit-content;
    			padding: 0.5rem 1rem;
    			margin-bottom: 1rem;
    			font-size: 1.6rem;
    			line-height: 2rem;
    			text-align: center;
    			border: 2px solid red;
    			border-radius: 100vw;
    			display: inline-block;
			}
			




	/* =========================================================

		事例 3項目　　格子ＢＧ 　z-index 0/1/200/300

	 ========================================================= */



div.jirei_crossbg 	{width:100%;
			padding-bottom:4rem;
			margin:5rem 0 0;
			background-image:
			repeating-linear-gradient(to bottom,#ddd,#ddd 1px,transparent 0,transparent 32px),
			repeating-linear-gradient(to right,#ddd,#ddd 1px,transparent 0,transparent 32px);
			position:relative;	
			}


	div.jirei_crossbg::after	{content:"";
					width:90px;
					height:150px;
					display:block;
					background:url("../imgs/svg/diy_rokkaku.svg") repeat-x;
					position:absolute;
					top:50%;
					left:50%;
					transform:translate(-480px,0);
					z-index:0;
					}




div.jirei_mein_allbox	{padding-top:12rem;
			text-align:center;
			border-top:2px solid #000;
			background:url("../imgs/svg/diy_ruler.svg") repeat-x;
			background-size:auto 50px;
			position:relative;
			}

	div.jirei_mein_allbox::before	{content:url("../imgs/svg/diy_makijyaku.svg");
					display:block;
					width:150px;
					position:absolute;
					top:-4rem;
					left:15%;
					transform:rotate(-35deg);
					}




 			/*      ▼事例タイトル部      */

h2.diy_jirei_title	{width: fit-content;
    			font-size: 2.6rem;
    			letter-spacing: 2px;
    			padding: 1rem 4.5rem;
    			margin: 0 auto 1.5rem;
    			border-radius: 100vw;
    			background-color: #fccf00;
    			position: relative;
    			font-weight: bold;
			}


	h2.diy_jirei_title::before 	{content: "";
    					display: block;
    					width: 21.5rem;
    					height: 100%;
    					position: absolute;
    					top: -6px;
    					left: -9px;
    					border: 3px solid #000;
    					border-radius: 100vw;
					}


			h2.diy_jirei_title+p 	{font-size:2.2rem;
						font-weight:bold;
						margin-bottom:7rem;
						text-shadow:2px 2px 0 #fccf00;
						}

					h2.diy_jirei_title+p::before {content:"●";}




	/* 個別事例 */

div.jirei_typebox	{max-width:768px;
			margin:0 auto 8rem;
			text-align:center;
			position:relative;
			}



	div.jirei_typebox h3	{width: fit-content;
				font-size: 4rem;
    				font-weight: bold;
    				text-transform: uppercase;
				line-height: 4rem;
    				margin: 0 auto 2.5rem;
				background-image:linear-gradient(transparent 0% 50%,yellow 50% 100%);
				}

		div.jirei_typebox h3>span  	{font-size: 2.5rem;
    						font-weight: bold;
    						letter-spacing: 1px;
						}



		/*   ▼　case見出し下の紹介文章   */

		div.jirei_typebox h3+p	{max-width: 500px;
    					width: 100%;
					padding:0 4rem;
    					margin: 0 auto 1.5rem;
    					font-size: 1.6rem;
    					font-weight: bold;
    					line-height: 2.5rem;
    					letter-spacing: 1px;
    					position: relative;
					}

			div.jirei_typebox h3+p::before,h3+p::after	{content:"";
									width:70px;
									border-bottom:3px solid #000;
									filter:drop-shadow(5px 5px 0 #fccf00);
									display:inline-block;
									position:absolute;
									top:2rem;
									}


			div.jirei_typebox h3+p::before	{left:-4rem;
							transform:rotate(45deg);}

			div.jirei_typebox h3+p::after	{right:-4rem;
							transform:rotate(-45deg);}	




			/*      ▼　ビフォーアフター画像     */

div.jirei_afterbox 	{position:relative;
			z-index:1;}

	div.jirei_typebox img.after_pct		{max-width:700px;
						width:100%;
						margin-bottom:0.8rem;
						border:7px solid #fff;
						box-shadow:1px 1px 8px #444;
						}

	div.jirei_afterbox::before 	{content: "After";
    					font-size: 4rem;
    					font-weight: bold;
    					padding: 0 1.2rem 0;
					background:url("../imgs/svg/diy_iconbg.svg") no-repeat top;
					background-size:auto;
					text-shadow: 
       						2px  2px 1px #fccf00,
       						-2px  2px 1px #fccf00,
       						2px -2px 1px #fccf00,
       						-2px -2px 1px #fccf00,
       						2px  0px 1px #fccf00,
       						0px  2px 1px #fccf00,
       						-2px  0px 1px #fccf00,
       						0px -2px 1px #fccf00; 
					display:block; 
					position:absolute;
					right:0%;
					top:70%;
					filter:drop-shadow(5px 5px 0px #000);
					z-index:200;
					}

	div.jirei_afterbox::after	{content:"▲";
					font-size: 4rem;
    					display: block;
    					width: 4rem;
    					height: 3.5rem;
					clip-path:polygon(0 100%,50% 0,100% 100%);
					background-color:#fff;
					position:absolute;
					left:50%;
					transform:translate(-50%,0);
					bottom:0rem;
					}   



div.jirei_beforebox		{width:550px;
				margin:0 auto;
				position:relative;
				}

	div.jirei_typebox img.before_pct	{width:100%;
						border:5px solid #000;
						display:block;
						}


		div.jirei_beforebox::before	{content:"Before";
						color:#fff;
						width: fit-content;
    						padding: 0.5rem 0.8rem;
    						font-size: 2.5rem;
    						font-weight: bold;
						line-height:2rem;
						background-color:#000;
						display:block;
						position:absolute;
						bottom:0;
						left:0;
						z-index:300;
						}


	/* ==========================================================

		ＤＩＹプラン概要　注意事項　ＰＤＦ　Ｚindex350/400

	 ==========================================================  */


div.diy_rules_allbox	{width:100%;
			padding:4rem 0 4rem;
			margin-bottom:6rem;
			text-align:center;			
			background-image:linear-gradient(#fccf00 0% 6%,#fff 6% 100%);
			position:relative;
			}

	div.diy_rules_allbox::before	{content: url(../imgs/svg/diy_roll.svg);
    					display: block;
    					width: 75px;
    					position: absolute;
    					top: -7rem;
    					left: 70%;
    					transform: rotate(10deg);
					}


	/* 見出し　下ふきだし部分の指定 */

	.diy_rules_allbox h2	{max-width: 500px;
    				width: 100%;
    				font-weight: bold;
    				font-size: 2.4rem;
    				line-height: 4.4rem;
    				letter-spacing: 1px;
    				margin-bottom: 2.5rem;
  				background:#FFF;
  				border:solid 3px #6a1917;
  				position:relative;
  				display:inline-block;
  				box-sizing:border-box;
  				}

	.diy_rules_allbox h2::before	{content: "";
  					margin-left: -1rem;
  					border: 12px solid transparent;
  					border-top: 12px solid #FFF; /* 白三角 */
  					position: absolute;
  					bottom: -23px;
  					left: 50%;
  					z-index: 400;
  					}


	.diy_rules_allbox h2::after	{content: "";
  					margin-left: -1.1rem;
  					border: 14px solid transparent;
  					border-top: 14px solid #6a1917;
  					position: absolute;
  					bottom: -30px;
  					left: 50%;
  					z-index: 350;
  					}


		.diy_rules_allbox h2+p	{font-weight:bold;
					margin-bottom:1rem;}

		.diy_rules_allbox h2+p::before	{content:"●";}




	/*   ＤＩＹできる箇所の表   */

div.diy_rules_taikyo h3+p::after {border:none;}

div.diy_itemlist_pc 	{max-width:600px;
			width:100%;
			margin:0 auto;
			margin-bottom:2rem;
			line-height:2rem;
			border:2px solid #6a1917;
			border-radius:10px 10px;
			}

caption 		{display:none;}

.border_non		{border-bottom:none;}

table.diy_mainlinst .no_border  {border-bottom:none;}


table.diy_mainlinst  	{width:100%;
			border-bottom:1px solid transparent;
			border-collapse: collapse;	
			}


table.diy_mainlinst thead th {text-align:revert;}   /* 見出し2つの左寄せ解除  */
table.diy_mainlinst thead th:last-child {border-left:2px solid #fff;}


	table.diy_mainlinst th		{width:45%;
					padding-left:1rem;
					vertical-align: middle;
					text-align:left;
					border-bottom:1px dashed #6a1917;
					}

	table.diy_mainlinst td		{width:100%;
					padding:1.5rem;
					letter-spacing:1px;
					text-align:left;
					border-bottom:1px dashed #6a1917;
					}


table.diy_mainlinst th span.list_normal {font-weight:normal;}

	.diy_list_cols	{font-weight:bold;
			margin-bottom:1rem;
			display:block;
			}

table.diy_mainlinst ul li:before 	{content:"●";}

table.diy_mainlinst span.enmark:before {content:"●";}



table.diy_mainlinst thead	{text-align:center;
				color:#fff;
				height:3rem;
				background-color:#6a1917;
				border-bottom:none;
				}




	/*   ＤＩＹ施工注意のリスト　PC用　スクロール型   */

.diy_ruleslist_pc	{max-width:600px;
			width:100%;
			margin:0 auto;
			}


		div.diy_ruleslist_pc>h3 {color: #fcc800;
    					width: fit-content;
    					font-weight: bold;
    					line-height: 3rem;
    					padding: 0.3rem 1.2rem 0;
    					background-color: #6a1917;
    					border-radius: 10px 10px 0 0;
					}


div.ruleslistbox 	{max-width:600px;
			width:100%;
			height:190px;
			margin:0 auto;
			border:3px solid #6a1917;
			border-radius:0 10px 10px 10px;
			overflow:hidden scroll;
			box-sizing:border-box;
			}

	div.ruleslistbox::-webkit-scrollbar	{width:1rem;}

	div.ruleslistbox::-webkit-scrollbar-thumb 	{background:#f8b500;
  							border-radius: 5px;}
	

		/* 　注意文の体裁  */
div.ruleslistbox	{background-color:#FFFBE8;}

div.diy_rules_sekou ol	{max-width: fit-content;
    			line-height: 2rem;
    			list-style-type: normal;
    			list-style-position: inside;
    			padding: 2.5rem 1.5rem 0;
			}/* common.cssのせいで頭数字出ない　上書きも無効 */


	div.diy_rules_sekou ol li::marker	{font-weight:bold;} /* リスト頭 太字 */

	div.diy_rules_sekou ol li	{padding-bottom:1rem;
					text-align:left;}


div.diy_rules_taikyo h3.notes_titlestyle	{color: red;
    						font-weight: bold;
    						width: fit-content;
    						text-align: left;
    						padding: 1rem 0 0 0;
						}

	div.diy_rules_taikyo h3.notes_titlestyle::before {content:"●";}
	
	div.diy_rules_taikyo h3+p {line-height:2rem;}



div.diy_rules_devicelist	{max-width:550px;
				width:100%;
				text-align:left;
				padding-left:1rem;
				margin-bottom:1rem;
				}

div.diy_rules_devicelist ul	{width:100%;
				display:flex;
				flex-wrap:wrap;
				}


	div.diy_rules_devicelist ul li::after	{content:"/";
						padding-left:2px;}
	div.diy_rules_devicelist ul li:last-child::after	{content:none;}







	/* 　ＰＣ用　ＰＤＦ/別窓ボタン　 */

div.diy_rules_linkbox	{width:100%;
			margin-top:1.5rem;
			display:flex;
			justify-content:center;
			gap:1rem;			
			}

	a.diy_rules_linkb	{width: fit-content;
    				padding: 1rem;
    				letter-spacing: 1px;
    				text-align: left;
    				line-height: 2rem;
    				font-weight: bold;
    				position: relative;
    				display: block;
   				border: 3px solid #000;
    				border-radius: 10px 10px;
    				transition: opacity 0.3s linear, box-shadow 0.3s linear;
				}


	a.diy_rules_linkb:nth-child(1) {background-color:#fccf00;order:1;}
	a.diy_rules_linkb:nth-child(2) {background-color:#fff;order:2;}
	a.diy_rules_linkb:nth-child(3) {color:#fff;background-color:#444;order:3;}


	a.diy_rules_linkb:nth-child(3)::after 	{content:"";
						display:block;
						width:15px;
						height:15px;
						background:url("../imgs/diy_wind.png");	
						background-size:cover;
						position:absolute;
						right:14px;
						top:3.3rem;
						}

	a.diy_rules_linkb:hover 	{opacity:0.7;
					box-shadow:0 0 5px #444;
					text-decoration:underline;
					}



div.diy_rules_linkbox a span.color_red	{font-size:1rem;
					letter-spacing:-1px;}

div.diy_rules_linkbox span.color_red	{border-bottom:none;}
div.diy_rules_linkbox span.cssbr 	{border-bottom:none;}	
			



	/* =============================================================

		PC用 検索欄はじめ　市町村リンク　z-index --

	 ============================================================= */



div.diy_homesearch_allbox	{width:100%;
				margin-bottom:5rem;
				position:relative;
				}


div.hs_bgbox	{max-width:80vw;
		width:100%;
		padding:8rem 0 3rem;
		margin:0 auto;
		background:url("../imgs/svg/diy_yane.svg") no-repeat top left;
		background-size:contain;
		}



	div.hs_bgbox>h2 {color: red;
    			max-width: 765px;
    			text-align: center;
    			font-size: 4rem;  
			font-weight: bold;
    			line-height: 3.5rem;
    			margin: 0 auto;
    			border-right: 5px solid #000;
    			border-left: 5px solid #000;
			}


		div.hs_bgbox h2 span.diy_hs_titlestyle	{color:#000;
							font-size:1.7rem;
							padding:0 1rem;
							border-top:5px solid #000;
							}

	/*  市名リンクのリスト  */

div.hs_cityname_linkbox	{width:100%;
			padding:4rem 0;
			margin-bottom:4rem;
			background-color:#fccf00;
			position:relative;
			}

	div.hs_cityname_linkbox::after {content:"";
					width:90px;
					height:90px;
					background:url("../imgs/svg/diy_hanmar.svg") no-repeat;
					display:block; 
					position:absolute;
					left:50%;
					bottom:-3rem;
					transform:translate(-410px,0);
					}


	div.hs_cityname_linkbox h3.hs_cityname_title	{width:fit-content;
							font-size:1.2rem;
							line-height:2.4rem;
							padding:0 2.5rem;
							margin:0 auto;
							background-color:#fccf00;
							border:3px solid #000;
							border-radius:100vw;
							display:none;
							}/* 不要により非表示 HTMLには記述あり  */


div.hs_cityname_linkbox ul+p	{font-size: 1.4rem;
    				letter-spacing: 1px;
    				text-align: center;
				margin-top: 3rem;
    				position: relative;
				}

		div.hs_cityname_linkbox ul+p::before	{content:"●";}




div.hs_cityname_linkbox ul	{max-width: 730px;
    				width: 100%;	
    				margin: 0 auto;
    				text-align: center;
				}


		div.hs_cityname_linkbox ul li	{width: fit-content;
    						margin: 1rem 1rem 1.2rem;
    						display: inline-block;
						}
					

	div.hs_cityname_linkbox ul li a {color: #fff;
    					font-size: 1.8rem;
    					font-weight: bold;
    					text-align: center;
    					background-color: #000;
   					box-shadow: 0px 3px 0 #FFEAC7;
    					border-radius: 5px 5px;
    					display: block;
    					padding: 1rem 2.5rem;
					}


		div.hs_cityname_linkbox ul li a:hover	{opacity:0.9;
							text-decoration:underline;
							position:relative;
							top:1px;
							left:1px;
							}



	/*  各物件の情報カード  */

div.hs_jyuko_kobetuarea	{width:100%;
			padding:6rem 0 4rem;
			background-color:#eee;
			position:relative;	
			}


h4.cityname	{width:fit-content;
		font-size:3rem;
		font-weight:bold;
		text-align:center;
		margin:5rem auto 2.5rem;
		border-bottom:5px solid #000;
		position:relative;
		}

	h4.cityname::after 	{content:"";
				display:inline-block;
				width:100%;
				border-bottom:5px solid #fccf00;
				position:absolute;
				left:0;
				bottom:0;
				}



div.jyuko_kobetu_box	{max-width:1022px;
			min-width:768px;
			width:100%;
			margin:0 auto 6rem;
			background-color:#fff;
			border:1px solid #aaa;
			border-radius:15px 15px;
			box-shadow:3px 3px 5px #aaa;
			box-sizing:border-box;
			overflow:hidden;
			display:flex;
			}


	div.jyuko_image_box	{width:50%;
				display:flex;
				align-items: flex-start;
				flex-wrap:wrap;
				background-color: #aaa;
				}

	div.jyuko_image_box img.home_pic3	{display:block;
						max-width:100%;
						height:auto;
						border-bottom:3px solid #fff;
						box-sizing:border-box;
						}

	div.jyuko_image_box img:nth-child(2),img:nth-child(3)	{width:50%;}

	div.jyuko_image_box img:nth-child(3)	{border-left:3px solid #fff;
						box-sizing:border-box;}

	


div.jyuko_table_box	{max-width:50%;
			width:100%;
			position:relative;
			box-sizing:border-box;
			display:flex;
			flex-wrap:wrap;
			align-items:flex-end;
			aling-content:space-between;
			}

	.jyuko_table_box table	{width:90%;
				height:65%;
				padding-top:1rem;
				margin:0 auto;
				text-align:left;
				line-height:2.5rem;
				border-spacing:0px;
				position:relative;
				}


	.jyuko_table_box table th	{white-space: nowrap;}


		.jyuko_table_box table th.jyuko_tbtitle {font-size: 2.5rem;
							font-weight:bold;
							padding-top: 1rem;
							vertical-align: bottom;
							}

	.jyuko_table_box table td:last-of-type	{line-height: 1.8rem;
    						padding: 0.5rem 0 0 1rem;}


	.jyuko_table_box table td	{padding-left:1rem;}
	
		
	.jyuko_table_box table th,td {border-bottom:2px solid #000;}


		/* 町田木曽のみ　ボーダー下線消し  */
		.jyuko_table_box table th.bordercolor_w	{border-color:#fff;}



		p.additiontext	{color:#222;
				text-align:center;
				letter-spacing:1px;
				margin-bottom:1.2rem;
				}



	/* ２部屋赤ラベル */

p.jyuko_2room_lavel::before  {content:"●";}



.jyuko_2room_lavel	{color: #fff;
    			font-size: 1.8rem;
    			font-weight: bold;
    			text-align: left;
    			line-height: 2.5rem;
    			margin: 0.8rem 0;
    			background-color: red;
			}

	table.matida_r_line th:last-child	{border:none;}




	/* 空室検索ボタン */

div.link_flexspace_bottom	{width:100%;
				padding-top:1rem;
				margin:4rem auto 1rem;
				}



	a.kuusitu_link_pc, a.kuusitu_link_sp	{
    						color: #fff;
    						font-size: 2rem;
    						width: 90%;
    						height: 4.2rem;
    						line-height: 4.2rem;
    						font-weight: bold;
    						text-align: center;
    						margin: 0 auto;
    						background-color: #38771f;
    						border-radius: 5px 5px;
    						display: block;
						}

			a.kuusitu_link_sp	{display:none;}/* スマホ用　空室リンク非表示 */
			
			a.kuusitu_link_pc:hover {opacity:0.8;
						text-decoration:underline;}



p.jyuko_jkkannaitext	{width: fit-content;
    			font-weight: bold;
    			font-size: 1.5rem;
    			text-align: center;
    			line-height: 1.8rem;
    			padding-bottom: 3rem;
    			margin-inline: auto;
			}




	/* ==============　iphone対応　============================================
		
		★　住宅画像表示が縦長表示となる異常あり
		flexboxをやめてimgをdiv囲いしてfloatで対応

		★　タイトルが表示されないため
　　		w414以下で画像を切り替える処理
							z-index:1000
	=========================================================================== */	







div.jyuko_image_box			{display:block;
					flex-wrap:initial;
					background-color:#fff;}


	div.item:first-of-type 	{width:100%;}



	div.item:nth-of-type(2) {max-width:50%;
				width:100%;
				float:left;}


	div.item:nth-of-type(3) {max-width:50%;
				box-sizing: border-box;
				box-shadow: -2px -2px 0 #fff;
				overflow: hidden;
				float:right;}


		div.item:nth-of-type(3)::after	{content: "";
						clear: both;
						display: block;
						}


 	img.img_width_scals {max-width:103.5%;}

	 img.img_width_scals_109 {max-width:109%;}

@media (769px <= width < 860px) {


	div.jyuko_image_box {overflow: hidden;}




	div.item:first-of-type {width: 119%;
    				position: relative;
    				left: -4rem;}


}

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

	div.diytitle_imgbox	{background:none;
				filter:drop-shadow(0 0 0 transparent);
				/*z-index:996;*/
				}


	div.toptitle_sp414w	{display: inline-block;
				width: 55vw;
				margin-top: 35px;
				position: absolute;
				top: 0%;       
				left: 50%;
				transform: translate(-50%, 0);
				z-index:1000;
				}



			div.toptitle_sp414w img {width:100%;
						height:auto;
						object-fit:contain;
						object-position:center center;
						}

}


	/* =========================================================

	     	 PC用 ユーザー登録案内　ＪＫＫ説明　　z-index --

	  ========================================================= */

div.diy_jkknet_allbox	{padding:0 0 2rem 1rem;
			margin-bottom:5rem;
			background-color:#fccf00;
			position:relative;
			}

div.diy_jkknetbox	{max-width:768px;
			width:100%;
			padding-top: 3rem;
			box-sizing:border-box;
			border:1px solid #fccf00;
			}

	div.diy_jkknetbox>p 	{display:inline;
				width:36rem;
				font-size:2.6rem;
				font-weight:bold;
				letter-spacing: 1px;
				line-height:4.5rem;
				text-decoration:underline;
				background-color:#fff;
				}



	/* 人物表示用 */
	div.diy_jkknet_bg	{max-width:768px;
				width:100%;
				margin:0 auto;
				background:url("../imgs/svg/diy_toiawase.svg") no-repeat;
				background-size:31%;
				background-position:top 58px right 0;
				}


	
div.diy_jkknetbox dl 	{width:fit-content;
			font-size:1.2rem;
			line-height:1.2rem;
			margin:6rem 0 4rem;
			}

	div.diy_jkknetbox dt	{color: #fff;
    				width: fit-content;
    				font-size: 1.8rem;
    				font-weight: bold;
    				text-align: center;
    				padding: 0 1.5rem;
    				background-color: #400000;
    				border-radius: 100vw;
    				line-height: 3rem;
				}


	div.diy_jkknetbox dd	{font-size: 1.5rem;
				padding-top: 0.7rem;
    				line-height: 2rem;
				}


 /* 新規登録ボタン */
div.diy_jkknetbox a.diy_jkk_linkb	{color: #fff;
    					max-width: 30rem;
    					width: 100%;
    					padding: 1rem 2rem;
    					font-size: 2.5rem;
    					font-weight: bold;
    					line-height: 2.5rem;
    					text-align: center;
    					background-color: #A40000;
    					border-radius: 10px 10px;
    					position: absolute;
    					left: 50%;
    					transform: translate(-50%, 0);
					}




	
	span.diy_jkk_linkstyle	{font-size:1.6rem;
				color:#FEE470;}

	div.diy_jkknetbox a.diy_jkk_linkb:hover	{background-color:#C00000;
						box-shadow:0 0 5px #fff;}

	a.diy_jkk_linkb:hover span	{border:none;}			



p.jkk_conp	{max-width:fit-content;
		width:100%;
		text-align:center;
		padding:0.5rem;
		margin:9rem auto 2rem;
		border:1px solid #000;
		}






	/* ========================================================

		PC用　問い合わせ　契約のながれ　　z-index -1

	  ======================================================== */


div.diy_keiyaku_allbox	{width:100%;
			text-align:center;
			padding-bottom:8rem;
			margin:8rem 0 0;
			position:relative;
			}

	div.diy_keiyaku_allbox>h3	{width:fit-content;
					font-size:2.5rem;
					padding-bottom:0;
					margin:0 auto;
					border-bottom:5px solid #000;
					}

	

	/* 円リスト */
div.diy_keiyaku_allbox ol.diy_keiyakulist_pc	{max-width:800px;
						width:100%;
						margin:0 auto;
						margin-top:2rem;
						display:flex;
						justify-content:space-around;
						flex-wrap:wrap;
						position:relative;
						}

	div.diy_keiyaku_allbox ol.diy_keiyakulist_pc::after	{content:"";
								display:inline-block;
								max-width:650px;
								width:100%;
								height:5px;
								background-color:#000;
								position:relative;
								top:-6.5rem;
								z-index:-1;
								}


	div.diy_keiyaku_allbox ol.diy_keiyakulist_pc li	{width: 130px;
    							height: 130px;
    							line-height: 1.5rem;
    							padding-top: 0.5rem;
    							border: 4px solid #000;
    							border-radius: 100vw;
    							background-color: #fccf00;
    							display: inline-block;
							}

	div.diy_keiyaku_allbox ol li:nth-child(even)	{background-color:#fff;} 


	div.diy_keiyaku_allbox ol li img.img_keiyakupic 	{display:block;
								width:40px;
								height: 60px;
								margin:0 auto 0.5rem;
								padding-top:1.7rem;
								}


	div.diy_keiyaku_allbox ol li img.sizup	{width:50px;}



	/*  問い合わせ先電話番号  */

div.diy_telpbox	{color:#fff;
		max-width:750px;
		width:100%;
		padding:1rem 1.5rem 1rem 1rem;
		margin:2rem auto 0;
		background-color:#400000;
		border-radius:100vw;	
		box-sizing:border-box;
		}

	div.diy_telpbox p:first-child 	{width:250px;
					height:100%;
					font-size:1.5rem;
					line-height:4.5rem;
					font-weight:bold;
					float:left;
					}

	div.diy_telpbox p:nth-child(2) 	{color:#fccf00;
					padding-bottom:0.5rem;}

	.diy_keiyaku_allbox p:last-child	{font-size:0.9rem;
						margin-top:1rem;
						clear:both;
						}


p span.tel_decoration::before 	{content:url("../imgs/svg/diy_info_tell_w.svg");
				width:1.2rem;
				height:1.2rem;
				display:inline-block;
				padding-right:0.2rem;
				}

p span.tel_decoration::after 	{content:":";
				padding-left:0.2rem;
				color:#fff;
				}



div.diy_telpbox	address {font-style:normal;
			letter-spacing:3px;
			font-size:2.5rem;
			}

	span.telsmall	{font-size:1.2rem;}



	/* ==============================================

		PC用　上に戻る　　z-index /900

	 ============================================== */


.topupbtn	{width:80px;
  		height:80px;
  		position:fixed;
  		right: 2rem;
    		bottom: 3rem;
  		background:#000;
  		opacity:1;
  		border:5px solid #fff;
  		border-radius:100vw;
  		box-shadow:1px 3px 5px #999;
  		cursor: pointer;
  		transition: .3s;
		z-index:900;
  		/*  デフォルト非表示  */
  		opacity:0;
  		visibility:hidden;
		}

	/*  このクラスが付与されると表示する  */
	.active	{opacity:1;
  		visibility:visible;}


	/*  このクラスが付与されると表示する  */
	.absolute	{position:absolute;
  			top: -70px;
  			bottom: auto;
			}

span.topup	{color:#fff;
 		width: 55px;
    		font-size: 1.2rem;
    		font-weight: bold;
    		line-height: 1.5rem;
    		text-align: center;
    		position: relative;
    		top: 33%;
    		display: block;
    		margin-inline: auto;
    		text-decoration: none;
		}



	/* ==================================================

 			footer 指定上書き  全幅

	====================================================== */

	/*  footer文字色  */
.txtS	{color: #fff;
    	font-size: 1.5rem;
    	line-height: 1.33333em;
	}

#FotterBnr {padding-bottom:90px;}

.ftInfo {color: #222;}

div#FotterBnr {display:none;}

footer	{background-color: #fff;
    	border-top: 1px solid #ddd;
    	box-shadow: 0 1px 1px 3px #eee;
    	padding-top: 2.5rem;
	}

	footer a {color:#fff;}


	div.ftInfoData p.txtS	{color: #222;
				font-size: 1.4rem;
    				font-weight: bold;
				padding-top: 4px;
   				padding-left: 5rem;
    				border-left: 1px solid #aaa;
				}
				

		.ftInfo {color:#222;}

		.ftInfo .ftBtn a 	{color: #222;
					font-weight:bold;
					border: solid 1px #222;}

	.ftCopy 	{color: #222;
			background-color: #fff;    
   	 		font-weight: bold;
        		padding: 25px 15px 131px;
    			}


footer p.ftLogo img	{position:relative;
			visibility:hidden;/* もとの白img消し */
			}

	footer p.ftLogo		{max-width: 100%;
				min-width: 150px;
				width:100%;
				background:url("https://www.to-kousya.or.jp/chintai/shitteru/common/img/logo_jkk.svg") no-repeat;
				background-size:cover;
				background-position: center -6px;
				}

	.ftInfo .ftLogo		{padding: 0 30px 4px 0;
    				width: 203px;}


	.ftCopy span {opacity: 1;}


	.ftInfo .ftBtn a:after {content: "";
    				position: absolute;
    				background: url(https://www.to-kousya.or.jp/content/000012755.svg) no-repeat;
    				background-position: center;
    				background-size: contain;
    				border: none;
    				text-decoration: none;
    				width: 1.8rem;
    				height: 1.8rem;
    				top: 50%;
    				right: 1.5rem;
    				transform: translateY(-50%);
				}



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

	div.ftInfoData p.txtS {font-size: 1.6rem;}

}


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

    .ftInfo .ftBtn a {padding: 10px 52px 10px 52px;}

    .ftInfo .ftInfoData .txtS, .ftInfo .ftBtn	{font-size: 1.7rem;
        					font-weight: bold;}

	div.ftInfoData p.txtS	{padding-top: 0;
   				padding-left: 0;
    				border-left: none;
				}

		.ftInfo .ftLogo img	{max-width: 29%;
    				min-width: 150px;
    				width: 100% !important;
				}


	footer p.ftLogo {max-width: 100%;
        		width: 100%;
        		background: url(https://www.to-kousya.or.jp/chintai/shitteru/common/img/logo_jkk.svg) no-repeat center;
        		background-size: auto;
    			}


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

.ftInfo .ftInfoData .txtS, .ftInfo .ftBtn {font-size: 1.2rem;}


}


/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

				                W768 以下 対応

   ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲  */



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


    	html {font-size: 62.5%;} /* 凸版の文字縮小指定　無効 */


	/* SPでのみ改行 */
	.cssbr_sp::after	{content: "\A";
  				white-space: pre;}

	/* PCでのみ改行 解除 */
	.cssbr::after	{content:none;
		 	white-space:normal;}

	.cssbr_w768::after	{content:none;
		 		white-space:normal;}

	/* sp　表非表示 */
	div.diy_itemlist_sp {display:block;}



	/* ------------------------------------------------

		    W768 トップ　円３リンク  

	--------------------------------------------------- */


	div.indexlink_allbox		{padding:2rem 0;}


	/*  ----- ３アイコン-------   */
	div.indexlink_allbox ul.linklist	{max-width:100%;
						width:100%;
						justify-content: center;
    						gap: 2rem;
						}


	div.indexlink_allbox ul li em	{font-size: revert;
    					line-height: 1.6rem;
    					font-style: normal;
					}


	div.indexlink_allbox ul li	{max-width: 120px;
        				width: 100%;
        				height: 120px;
					margin-right: 2px;
       					line-height: 2.5rem;
        				border: 4px solid #fff;
        				border-radius: 100vw;
        				box-shadow: 6px 6px 5px 0px #777;
        				box-sizing: border-box;
        				position: relative;
					display: inline-block;
    					}


		div.indexlink_allbox ul li a 	{color:#000;
						width:120px;
						height:120px;
						font-size:2.2rem;
						font-weight:bold;
						display:block;
						position:relative;
						top: -1rem;
						box-sizing:border-box;
						}


			div.indexlink_allbox ul li.text_c_fff a	{color:#fff;}




	/* ------------------------------------------------

		 W768 キャッチ　20％引き帯　説明2件 

	--------------------------------------------------- */


	/* 人物2人、キャッチ部分 */


	div.ordertest_box 	{max-width:80%;
				min-width:70%;
				width:100%;
				margin:0 auto;
				margin-top:5rem;
				display:flex;
				jyustify-content:center;
				flex-wrap:wrap;
				position:relative;
				}


	div.p_box		{width:100%;
				text-align:center;
				padding-bottom:13rem;
				position: initial;
				order:1;			
				}



	p.order-textbox2	{width: 28rem;
    				font-size: 2rem;
    				margin-inline: auto;
				position:relative;
				}


	/*  SVG　サイズ 位置指定　*/
	div.ordertest_box img.o_image_left	{max-width: 22vw;
    						padding-left: 0;
    						position: absolute;
    						left: -41px;
    						bottom: 0;
						}

	div.ordertest_box img.o_image_right	{max-width: 26vw;
    						width: 100%;
    						padding-right: 3rem;
    						position: absolute;
    						right: -14%;
    						bottom: 0;
						}



	div.ordertest_box	{width:95%;
        			height: 290px;}

	p.order_textbox span.order_smalltext {font-size: 3rem;}

	p.order_textbox {padding-bottom:2rem;
			font-size: 3.5rem;}




		/*　  ▼　w768  二重四角形 20％引き帯　   */

	div#sq_bgarea	{width:100%;
			padding:2rem 0 3rem;
			background-color:#FCCF00;
			text-align:center;
			position:relative;
			}


		/* 上のSvg画像が下に余白があるのを隠すもの */
		div#sq_bgarea::before		{content:"";
						display:block;
						width:100%;
						height:1rem;
						background-color:#fccf00;
						position:absolute;
						top:-0.3rem;
						}


	/* 20％引き　ジャンプ用 長バナー */

	a.yellowbg_longban	{max-width:60%;
				width:100%;}



	/* w768  四角 */

	div.squarearea_sp 	{display:block;} /* 四角見出し表示 */

	div.squarearea_sp	{width:70%;
				height:60px;
				margin:1rem auto 1rem;
				border:5px solid #000;
				box-sizing:border-box;
				}

		div.squarearea_sp::after	{content:" ";
						display:block;
						width:70%;
						height:61px;
						border:4px solid #fff;
						position:absolute;
						top:2.5rem;
						left:14.5%;
						}

	div.square_content_box	{max-width:100%;
				display:block;}


	p.square_text_sp	{font-size:clamp(2.2rem, 1.264rem + 3.62vw, 3rem);
				line-height:5rem;
				white-space:normal;
				position:relative;
				}

		p.square_text_sp span.sq_1	{letter-spacing:-2px;}
		p.square_text_sp span.sq_2	{letter-spacing:-4px;color:#b71515;}
		p.square_text_sp span.sq_3	{letter-spacing:5px;}



	/* w768  四角見出しＰＣ用非表示 */
	div.squarearea	{display:none;}




	　　　　/* 　　▼　w768  黄色帯文字と白黒ボックス 　*/

	div.squarearea_text	{position:relative;} 


	p.plan_top	{text-align:center;
			font-size:clamp(18px,1.4vw,1.4rem);}


	.plan_t1::before,.plan_t1::after	{content:"";
						display:inline-block;
						max-width:40rem;
						width:100%;
						height:5px;
						border-bottom:5px dotted #000;
						position:absolute;
						left:50%;
						transform:translate(-50%,0);
						}

	.plan_t1::after	{top:22.6rem;}
	
	.plan_t2	{color:red;
			font-weight:bold;}




	/* 　　  ▼　w768  ＤＩＹ住宅+とは？　2項　　　　 */

	div.diy_genteiroom_allbox	{max-width:70%;
					width:100%;
					margin:0 auto;
					margin-top:6rem;
					position:relative;
					}
	
						hr.clear {display:none;}


						/*  くぎ　*/
						.img_kugi::before	{top: -13rem;
    									right: 0;
    									left: 102%;
									}

		div.diy_genteiroom_allbox h2	{width: 100%;
        					font-size: 2.5rem;
        					margin: 1rem auto 1rem;
    						}


	div.diy_genteiroom_allbox img.setumei_image_top,
	img.setumei_image_bottom				{max-width:70%;
								widht:100%;
								margin:0 auto 4rem;
								display:block;
								float:none;
								}

	div.diy_genteiroom_allbox p 	{width:100%;
					margin:0 auto;}

		div.diy_genteiroom_allbox p.gentei_pointtext	{font-size:1.2rem;
								line-height:1.4rem;}




	/* ------------------------------------------------------------------------

		W768 事例3項目　目盛りＢＧ　格子ＢＧ 　z-index 0/1/200/300

	--------------------------------------------------------------------------- */


	div.jirei_crossbg::after	{content:none;}


		div.jirei_mein_allbox::before	{content:url("../imgs/svg/diy_makijyaku.svg");
						display:block;
						width:120px;
						position:absolute;
						top:-3rem;
						left:13%;
						transform:rotate(-35deg);
						}


 		/*      ▼ w768  事例タイトル部      */

		h2.diy_jirei_title+p::before {content:"●";}


	/* 個別事例 */
	div.jirei_typebox	{max-width:768px;
				margin:0 auto 6rem;
				text-align:center;
				position:relative;
				}



	div.jirei_typebox:last-child::before		{content:"";
							width:60px;
							height:100px;
							display:block;
							background:url("../imgs/svg/diy_rokkaku.svg") repeat-x;
							position:absolute;
							top:-4rem;
							left:0;
							transform:translate(0,0);
							z-index:0;
							}



	/*    ▼　w768  case見出し下の紹介文章   */
	div.jirei_typebox h3+p	{max-width:80%;
				position:relative;}


		div.jirei_typebox h3+p::before,h3+p::after	{content:"";
								width:70px;
								border-bottom:3px solid #000;
								filter:drop-shadow(5px 5px 0 #fccf00);
								display:inline-block;
								position:absolute;
								top:2.5rem;
								}

				div.jirei_typebox h3+p::before	{left:-3rem;}

				div.jirei_typebox h3+p::after	{right:-3rem;}	



	/*      ▼　w768 事例 ビフォーアフター画像     */

	div.jirei_typebox img.after_pct		{max-width:90%;
						width:100%;
						box-shadow:1px 1px 6px #444;
						}

		div.jirei_afterbox::before	{position:absolute;
						right:3%;
						top:75%;
						}


		div.jirei_beforebox		{width:90%;
						padding-right:0.5rem;
						margin:0 auto;
						position:relative;
						}

		div.jirei_typebox img.before_pct	{width:100%;
							border:7px solid #000;
							display:block;
							}




		/* ----------------------------------------------------------

	   		W768 ＤＩＹプラン概要　注意事項　PDF  z-index --

		------------------------------------------------------------- */



	/* 　ＰＣ用　ＰＤＦ/別窓ボタン　 */

	div.diy_rules_linkbox	{width:100%;
				margin-top:1.5rem;
				display:block;			
				}

	a.diy_rules_linkb	{max-width: 600px;
        			width: 100%;
				font-size: 1.5rem;
        			font-weight: bold;
 				text-align: center;
        			letter-spacing: 1px;
        			line-height: 4rem;
        			padding: 0;
        			margin-inline: auto;
        			margin-bottom: 1rem;
        			position: relative;
        			display: block;
        			border: 3px solid #000;
        			border-radius: 10px 10px;
        			transition: opacity 0.3s linear, box-shadow 0.3s linear;
				}
       


		a.diy_rules_linkb:nth-child(3)::after 	{content:"";
							display:inline-block;
							width:15px;
							height:15px;
							background:url("../imgs/diy_wind.png");	
							background-size:cover;
							position:relative;
							left:0;
							top:0.1rem;
							}	


	.diy_rules_allbox h2+p	{line-height: 2rem;
				margin-bottom: 1.5rem;}


	div.diy_rules_sekou ol	{font-size: 1.4rem;
				list-style-type: decimal;}


		/* ----------------------------------------------------------

			W768 検索欄はじめ　市町村リンク　z-index 700

		------------------------------------------------------------- */

	div.hs_bgbox	{max-width:768px;
			width:100%;
			padding:4rem 0 3rem;
			margin:0 auto;
			background:url("../imgs/svg/diy_yane.svg") no-repeat top center;
			background-size:cover;
			position:relative;
			}
	
		div.hs_bgbox::before 	{content:"";
					width:60px;
					height:70px;
					background:url("../imgs/svg/diy_hanmar.svg") no-repeat;
					/*background-size: ;*/
					display:block; 
					position:absolute;
					top:0.4rem;
					left:80vw;
					bottom:0;
					transform:translate(0px,0);
					z-index:700;
					}	



	div.hs_cityname_linkbox::after {content:none;}

	div.hs_bgbox>h2 {max-width:85vw;
			width:100%;
			font-size:clamp(34px,1vw,2.5rem);
			padding:1rem 0 2rem;1rem;
			box-sizing:border-box;
			}

		div.hs_bgbox h2 span.diy_hs_titlestyle	{font-size:clamp(18px,5vw,1.5rem);}




	/*  w768 検索リスト　市名リンクの見た目　円から横棒式へ  */

	div.hs_cityname_linkbox	{width:100%;
				position:relative;
				box-sizing:border-box;
				}

		div.hs_cityname_linkbox::after {content:none;}

		div.hs_cityname_linkbox ul+p	{margin-top: 2rem;
  						text-align: center;
						line-height: 1.5rem;
    						margin-inline: auto;
   						font-size: 1.4rem;
						}


	div.hs_cityname_linkbox ul	{max-width: 80%;}

		div.hs_cityname_linkbox ul li {margin: 0;}


   	 div.hs_cityname_linkbox ul li a	{color: #fff;
       						font-size: 2rem;
        					font-weight: bold;
        					line-height: 3rem;
        					margin: 0.5rem;
        					box-shadow: 2px 2px 2px #fff;
       						border-radius: 5px 5px;
        					display: block;
    						}


		div.hs_cityname_linkbox ul li a:hover	{opacity:1;
							text-decoration:none;
							position:relative;
							}

	div.hs_cityname_linkbox p	{width:90%;}

	div.diy_rules_linkbox a span.color_red {padding-left: 0.5rem;}



	/*  w768  各物件の情報カード  */
	div.hs_jyuko_kobetuarea	{padding:4rem 0 4rem;}


	div.jyuko_kobetu_box	{max-width:95%;
				min-width:95%;
				width:100%;
				border-radius:5px 5px;
				box-shadow:3px 3px 5px #999;
				box-sizing:border-box;
				overflow:hidden;
				display:block;
				}

	div.jyuko_image_box	{width:100%;}

	

	div.jyuko_table_box	{max-width:100%;
				width:100%;
				position:relative;
				box-sizing:border-box;
				display:flex;
				flex-wrap:wrap;
				align-items:flex-end;
				aling-content:space-between;
				}

	.jyuko_table_box table	{width:90%;
				height:60%;
				padding-top:1rem;
				margin:0 auto;
				text-align:left;
				line-height:2.5rem;
				border-spacing:0px;
				position:relative;
				}


		.jyuko_table_box table th.jyuko_tbtitle {padding: 1.5rem 0 0.5rem;}

		.jyuko_table_box table td:last-of-type	{line-height:2rem;
							padding:0.3rem;}

		.jyuko_table_box table td	{padding-left:1rem;}

		.jyuko_table_box table th	{font-size: 1.4rem;
						white-space: nowrap;
       						padding: 0.3rem;
						}

		.jyuko_table_box table th,td {border-bottom:2px solid #000;}



	p.additiontext	{font-size: 1.2rem;}

	p.jyuko_2room_lavel span.cssbr_sp::after	{content:"";
  							white-space:normal;}



	/* w768 空室検索ボタン */

	a.kuusitu_link_pc,a.kuusitu_link_sp	{color:#fff;
						font-size:1.4rem;
						width:90%;
						height:3.6rem;
						line-height:3.6rem;
						font-weight:bold;
						text-align:center;
						margin:0 auto;
						background-color:#38771f;
						border-radius:5px 5px;
						display:block;	
						}



	a.kuusitu_link_pc, a.kuusitu_link_sp	{color: #fff;
        					font-size: 2rem;
        					width: 90%;
        					height: 5rem;
        					line-height: 5rem;
        					text-align: center;
        					margin: 0 auto;
        					background-color: #38771f;
        					border-radius: 5px 5px;
        					display: block;
						}

				a.kuusitu_link_sp	{display:none;}
			
	a.kuusitu_link_pc:hover {opacity:1;}


	p.jyuko_jkkannaitext 	{width:90%;
				margin:0 auto;
				text-align:left;
				}




		/* ----------------------------------------------------------
		
			W768 ユーザー登録案内　ＪＫＫ説明　　z-index --

		------------------------------------------------------------- */

	div.diy_jkknet_allbox	{padding:0;
				margin-bottom:5rem;
				background-color:#fccf00;
				position:relative;
				}


	div.diy_jkknetbox	{max-width:90%;
				width:100%;
				padding:1.5rem 1rem 1.5rem;
				border:none;
				}

		div.diy_jkknetbox>p 	{display:inline;
					font-size:2.4rem;
					text-decoration:none;
					border-bottom:3px solid #000;
					}

	/* w768  人物表示用 */
	div.diy_jkknet_bg	{padding: 0 2rem;
				background-size: 25%;
        			background-position: top 80% right 6%;
				}


	
	div.diy_jkknetbox dl 	{width:30rem;
				font-size:1.2rem;
				line-height:1.2rem;
				margin:2rem 0 2rem;
				}


		div.diy_jkknetbox dd span.cssbr_pc::after	{content:"";
  								white-space:normal;}

		

		div.diy_jkknetbox dd	{padding-top:1rem;
					line-height:1.5rem;}


 	/* 新規登録ボタン */
	div.diy_jkknetbox a.diy_jkk_linkb		{background-color:#C00000;}

		div.diy_jkknetbox a.diy_jkk_linkb:hover	{background-color:#C00000;
							box-shadow:none;}

	a.diy_jkk_linkb:hover span	{border:none;}			


	p.jkk_conp	{max-width:90%;
			font-size:1.1rem;}




		/* ----------------------------------------------------------
	
			W768　問い合わせ　契約のながれ　　z-index 800

		------------------------------------------------------------- */

	p span.tel_decoration::before 	{content:none;}
	p span.tel_decoration::after 	{content:none;}


	div.diy_keiyaku_allbox	{width:100%;
				text-align:center;
				padding-bottom:0;
				margin:4rem 0 0;
				position:relative;
				}

	div.diy_keiyaku_allbox>h3	{letter-spacing:1px;}

	ol.diy_keiyakulist_pc img	{position:absolute;
					left:-1000vh;
					}

	div.diy_keiyaku_allbox ol.diy_keiyakulist_pc::after	{content:none;}


	div.diy_keiyaku_allbox ol.diy_keiyakulist_pc li	{width:90%;
							height:100%;
							font-weight:bold;
							line-height:3rem;
							margin-bottom:0.4rem;
							position:relative;
							}

		div.diy_keiyaku_allbox ol.diy_keiyakulist_pc li::before {content:"";
									display:block;
									width:30px;
									height:30px;
									clip-path:polygon(0 100%,100% 100%,50% 0);
									background-color:#000;
									position:absolute;
									top:100%;
									left:10%;
									transform:rotate(-180deg);
									bottom:0rem;	
									z-index:800;
									}

			div.diy_keiyaku_allbox ol.diy_keiyakulist_pc li:last-child::before {content:none;}

			span.pointdot::after	{content:"・";}



	/* w768  問い合わせ先電話番号  */
	div.diy_telpbox		{color:#fff;
				max-width:100%;
				padding:2rem 0;
				text-align:left;
				border-radius:0;
				}

	div.telp_innerbox	{width:83%;
				margin:0 auto;}

	div.diy_telpbox p:first-child 	{float:none;
					font-size:1.2rem;
					width:13rem;
					padding:0;
					text-align:center;
					line-height:2rem;
					margin-bottom:1.5rem;
					border:1px solid #fff;
					border-radius:100vh;
					}

	div.diy_telpbox p:nth-child(2) 	{width:90%;
					font-size:1.1rem;
					padding-bottom:0.5rem;
					}

	.diy_keiyaku_allbox p:last-child	{padding:1rem;
						margin-bottom:2rem;}



	div.diy_telpbox	address {font-style:normal;
				letter-spacing:0;
				font-size:3rem;
				}

	span.telsmall	{font-size:0.9rem;}



	/* ----------------------------------------------------------

			W768　上に戻る　　z-index 900

	------------------------------------------------------------- */


	.topupbtn	{width: 5rem;
        		height: fit-content;
        		position: fixed;
        		right: 0px;
        		border: 3px solid #fff;
       			border-radius: 10px 0px 0px 10px;
        		box-shadow: none;
        		cursor: pointer;
        		transition: .3s;
        		z-index: 900;
			}/*  デフォルト非表示  */




	/*  このクラスが付与されると表示する  */

	.active	{opacity:1;
  		visibility:visible;}


	/*  このクラスが付与されると表示する  */

	.absolute	{position:absolute;
  			top: -70px;
  			bottom: auto;
			}

	span.topup	{writing-mode: vertical-rl;
        		width: 3rem;
        		padding: 1rem 0.5rem 1rem 3.5rem;
        		vertical-align: center;
        		font-size: 1.2rem;
        		font-weight: bold;
       			letter-spacing: 2px;
        		line-height: 3rem;
        		text-align: center;
        		position: relative;
        		top: 0;
        		display: block;
        		text-decoration: none;
        		box-sizing: border-box;
			}



   
   


}

/*  ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

				W550 以下 対応

    ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲  */


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


   	p.order_textbox span.order_smalltext {font-size:clamp(1.5rem, -1.904rem + 17.02vw, 2.5rem);}

      	p.order_textbox {font-size:clamp(2rem, -0.435rem + 9.41vw, 2.8rem);}

	p.order_textbox	{line-height: 5rem;}



	/* ＤＩＹ内容表 */
	div.diy_itemlist_pc,
	.diy_ruleslist_pc,
   	 a.diy_rules_linkb {max-width: 95%;}



	/* 　市名リスト　 */
	    div.hs_cityname_linkbox ul {max-width: 91%;}

    		div.hs_cityname_linkbox ul li {margin: 1rem 0.5rem;}

    		div.hs_cityname_linkbox ul li a {font-size: 1.8rem;
        					padding: 1rem 1.2rem;
        					margin: 0;
        					line-height: 3rem;
        					border: 1px solid #fff;
        					box-shadow: 0 0 0 3px #000;
    						}


		.cssbr_pc::after	{content: "" ;
  					white-space:initial;}
  
		 div.diy_jkknetbox {max-width: 100%;}

    		div.diy_jkknet_bg	{background-size: 31%;
        				background-position: top 80% right 9%;}

    		div.diy_jkknetbox dl {margin: 5rem 0 2rem;}

		div.diy_jkknetbox dd {width: 25rem;}







}
/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

				W480px以下 対応

    ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲  */


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

	.cssbr_pc::after	{content: "" ;
  				white-space:initial;}

	.cssbr_w480::after	{content: "\A";
  				white-space: pre;}


	div.p_box	{padding-bottom: 8rem;}


	/*  人物絵　キャッチ  */

	div.ordertest_box	{max-width: 91%;
				height: 330px;        
				margin-top: 0;
				}

	p.order_textbox span.order_smalltext {font-size: clamp(25px, 3.8vw, 5rem);}


	p.order_textbox		{letter-spacing: 0;
            			line-height: 4rem;
            			font-size: clamp(26px, 4.8vw, 5rem);
        			}

	p.order-textbox2	{max-width:23rem;
				width:100%;
    				font-size: clamp(19px, 2.8vw, 3.5rem);
				letter-spacing: 0;
				line-height: 2.2rem;
				}



	/*  SVG　サイズ 位置指定　*/
	        div.ordertest_box img.o_image_left	{max-width: 23vw;
            						padding-left: 0;
            						position: absolute;
							left:0;
							bottom:0;
        						}

	        div.ordertest_box img.o_image_right	{max-width: 29.8vw;
            						width: 100%;
            						padding-right: 3rem;
            						position: absolute;
            						right: -4%;
            						bottom: 0;
							}
        

	h2.diy_jirei_title {margin: 0 auto 2rem;}

		h2.diy_jirei_title+p 	{line-height: 3rem;
					margin-bottom: 5rem;
					}



	            div.hs_cityname_linkbox ul {width: 100%;}

    		    div.hs_cityname_linkbox ul li {margin: 1rem 0.8rem;
						   text-align: center;}

	
    		    div.hs_cityname_linkbox ul li a	{font-size: 1.8rem;
        						width: 13rem;
       							margin: 0;
        						line-height: 3.5rem;
        						border: 1px solid #fff;
        						text-wrap: nowrap;
							}


}
/*  ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

				W414px以下 対応

    ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲  */


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

	/* pcのみbrの解除 */
	.cssbr::after	{content:"";
  			white-space:nowrap;}

	/* SPでのみ改行 */
	.cssbr_sp::after	{content:"\A";
  				white-space:pre;}

	/* 上に戻るボタン非表示 */
	p.topupbtn	{display:none;}

	/* ３アイコン　ホバー動作解除 */
	div.indexlink_allbox ul li:hover	{opacity:1;position:relative;}

	/* PC用　空室リンク非表示 */
	a.kuusitu_link_pc {display:none;}

	/* スマホ用　空室リンク表示 */
	a.kuusitu_link_sp {display:block;}


	/* スマホ用　空室リンク表示 */
	a.kuusitu_link_pc:hover {opacity:1;
				text-decoration:none;}


	/* 対象住宅バナーの動き解除 */	
	a.yellowbg_longban:hover 	{text-decoration:none;box-shadow:none;}


	span.cssbr_before_brw768::before	{content: "";
    						white-space: initial;}


	div.indexlink_allbox ul.linklist	{justify-content: space-around;
    						gap:revert;}

		/*  -------------------------------------

		 　	SP W414　３アイコン下キャッチ文 

		-----------------------------------------   */


	/* ▼ 人物2人、キャッチ部分 */
	div.ordertest_box 	{max-width:100%;
				min-width:100%;}

	p.order_textbox {padding-bottom: 1rem;}

	
	p.order_textbox	 span.order_smalltext	{font-size:clamp(1.5rem, -1.904rem + 17.02vw, 2.5rem);} 


	    	div.ordertest_box img.o_image_right {right: -3%}
		div.ordertest_box img.o_image_left {left: 6%;}


	/* ▼ 四角  */

	div.squarearea_sp	{height: initial;
            			width: 80%;
            			margin: 0 auto;
            			border: 3px solid #000;
        			}
  
	div.squarearea_sp::after	{top: 1.2rem;
            				left: 3.5rem;
            				width: 80%;
            				height: auto;
            				padding-top: 3.8rem;
        				}
        				
    

	p.square_text_sp	{line-height:3.5rem;
            			text-wrap: nowrap;}



	/* 　　▼　SP 　黄色帯文字と白黒ボックス 　*/

	div.squarearea_text	{position:relative;} 


	    p.plan_top {width: 27rem;
			margin: 1rem auto;
        		line-height: 2.2rem;
    			}


	.plan_t1::before,.plan_t1::after	{content:"";
						display:inline-block;
						max-width:90%;
						width:100%;
						height:5px;
						border-bottom:5px dotted #000;
						position:absolute;
						top:5rem;
						left:50%;
						transform:translate(-50%,0);
						}


	.plan_t1, .plan_t2 	{font-size:6.3rem;
				letter-spacing: 5px;
				line-height:8.5rem;
			 	}


		.plan_t1	{color:#fff;
				font-weight:normal;
				/*letter-spacing:-2px;*/
				margin-bottom:1.1rem;
				position:relative;
				}


   	 p.square_text_sp span.sq_3 {letter-spacing: 0px;}

			.plan_t1::before, .plan_t1::after	{max-width: 32rem;
       								width: 100%;
								top: 8.5rem;}
			.plan_t1::after	{top:16.5rem;}


        
	p.plan_atnttext {width: 80%;
       			line-height: 1.5rem;
			margin-inline: auto;
			}


    a.yellowbg_longban {max-width: 70%;}



	/* 黄帯下2項目の見出し */
	div.diy_genteiroom_allbox h2	{width: 100%;
        				font-size: clamp(1.5rem, -0.202rem + 8.51vw, 2rem);
        				margin: 0 auto;
    					}

	

	/* ▼ 事例  */

	/* くぎ */
	.img_kugi::before	{width: 40px;
        			top: -8rem;
        			left: 102%;
    				}


	    div.diy_genteiroom_allbox img.setumei_image_top, img.setumei_image_bottom {max-width: 90%;}

    div.diy_genteiroom_allbox p.gentei_pointtext	{font-size: 1.5rem;
        						line-height: 1.8rem;}


	div.jirei_typebox h3+p::before, h3+p::after {top: 7rem;}

	div.jirei_afterbox::before {font-size: 3rem;}

	div.jirei_mein_allbox {padding-top: 10rem;}

	h2.diy_jirei_title+p {margin-bottom: 3rem;}



	/*  -------------------------------------------------

		 ▼    SP W414 　ＤＩＹ施工時注意 

	----------------------------------------------------- */ 

		/* 下ふきだし部分の指定 */

	.diy_rules_allbox h2	{max-width:90%;
  				width:100%;}



	/*   ＤＩＹできる箇所の表   */
        div.diy_itemlist_pc	{font-size: 1.4rem;
				max-width: 95%;}


	table.diy_mainlinst  	{border-bottom:1px solid transparent;}


	table.diy_mainlinst th 	{width:50%;
				padding-left:0.58rem;}

	table.diy_mainlinst td	{width:100%;
				padding-right:0.7rem;}

	.diy_list_cols	{font-weight:bold;
			margin-bottom:1rem;
			display:block;
			}


	/* w414  表内　ＳＰのみ改行 */

	table.diy_mainlinst span.sponly_br 	{display:block;}



	/*  PC用　施工箇所の表　非表示 */
	div.diy_ruleslist_pc {display:none;}


	div.diy_rules_allbox h2+p	{font-size: 1.4rem;
            				letter-spacing: 0;}

            


	div.diy_rules_linkbox	{width:95%;
				margin:0 auto;
				margin-top:0;	
				display:flex;
				flex-wrap:wrap;	
				}

	a.diy_rules_linkb	{width:100%;
				font-size:1rem;
				padding-left:1rem;
				margin:0;
				line-height:3rem;
				text-align:left;
				text-decoration:underline;
				border:2px solid #333;
				border-radius:6px 6px;
				position:relative;
				text-underline-offset: 3px;
				}


        a.diy_rules_linkb	{padding-left: 1rem;
				margin:0;
            			font-size: 85%;
            			text-align: left;
            			text-decoration: underline;
				line-height: 4rem;
            			border: 2px solid #333;}


	a.diy_rules_linkb:nth-child(3)::after	{background: url(../imgs/diy_wind_b.png);
            					background-size: cover;
            					position: absolute;
            					left: 90%;
            					top: 50%;
            					translate: 0 -50%;
        					}

	a.diy_rules_linkb:nth-child(1) {background-color:#fff;order:2;}
	a.diy_rules_linkb:nth-child(2) {background-color:#fff;order:3;}
	a.diy_rules_linkb:nth-child(3) {color:#000;background-color:#fccf00;order:1;}

												
	a.diy_rules_linkb:hover 	{opacity:1;
					box-shadow:none;
					text-decoration:none;}


	div.diy_rules_linkbox span.color_red {border-bottom:none;}
	div.diy_rules_linkbox span.cssbr {border-bottom:none;}	
			

	caption 			{display:none;}

	.border_non			{border-bottom:none;}

	table.diy_mainlinst .no_border  {border-bottom:none;font-size: 1.6rem;}



		/* ----------------------------------------------------------

			SP W414 検索欄はじめ　市町村リンク　Ｚindex 700

		------------------------------------------------------------- */


			div.hs_cityname_linkbox p	{width:100%;}


		div.hs_cityname_linkbox ul+p	{margin: 2rem auto 0;		
						width: 81%;
    						font-size: 1.2rem;
    						line-height: 1.5rem;
						}


	/* SP w414 各住戸情報　町田 ２部屋赤ラベル */

	p.jyuko_2room_lavel span.cssbr_sp::after {content:"\A";
 						 white-space:pre;}	

		p.jyuko_2room_lavel::before  {content:none;}

	


	.jyuko_2room_lavel	{font-size: 2rem;
        			width: 100%;
        			padding: 0.8rem 0 0.5rem;
        			font-weight: bold;
        			line-height: 2rem;
        			display: inline-block;
        			text-align: center;
        			position: relative;
        			border-radius: 100vh;
				}  

	p.additiontext	{font-size:1.1rem;}

	p.jyuko_jkkannaitext	{width:88%;}

.jyuko_table_box table td {font-size: 1.5rem;}


		/* ----------------------------------------------------------
		
			SP  W414 ユーザー登録案内　ＪＫＫ説明　　z-index --

		------------------------------------------------------------- */

	div.diy_jkknetbox	{padding:2rem 1rem 4rem;}


		div.diy_jkknetbox>p 	{line-height:12vw;}

		/* 人物表示用 */
		    div.diy_jkknet_bg	{padding: 0;
					background: none;}
					
	

	div.diy_jkknetbox dl	{width: fit-content;
				margin: 3rem 0;}

		div.diy_jkknetbox dt {margin: 0 auto;}

		div.diy_jkknetbox dd	{width: 90%;
					padding-top:1rem;
        				margin: 0 auto;
					}

	div.diy_jkknetbox dl::before	{content:"";
					display:block;
					width:100%;
					height:200px;
					margin-top:1rem;
					background-image: url(../imgs/svg/diy_toiawase.svg);
        				background-repeat: no-repeat;
        				background-size: contain;
        				background-position: bottom center;
					}



	/*  sp  問い合わせ先電話番号  */

	div.telp_innerbox	{margin:0 auto;}


	div.diy_telpbox p:first-child 	{float:none;
					margin:0 auto 1.5rem;}

	div.diy_telpbox p:nth-child(2) 	{width:100%;
					line-height:1.2rem;
					padding-bottom:0.5rem;
					font-size:0.95rem;
					}

	div.diy_telpbox	address {font-style:normal;
				letter-spacing:0;
				font-size:9.5vw;
				margin:0 auto;
				}

	span.telsmall	{font-size:0.95rem;}


	.diy_keiyaku_allbox p:last-child	{padding:1rem;
						margin-bottom:2rem;}


	 /* 新規登録ボタン */
	div.diy_jkknetbox a.diy_jkk_linkb	{bottom:-2rem;}

	div.diy_jkknetbox a.diy_jkk_linkb:hover	{background-color:#C00000;}




}  /*  w414 last  */
/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

				W380  以下

▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲  */


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

    div.ordertest_box {height: 298px;}

	div.ordertest_box img.o_image_left {left: 4%;}


        div.indexlink_allbox ul.linklist	{max-width: 300px;
            					gap: 1%;}
        

		div.indexlink_allbox ul li	{max-width: 100%;
        					width: 100%;
        					height: 100%;
        					border-radius: 0;
    						}

    		div.indexlink_allbox ul li a	{color: #000;
        					width: 100%;
        					height: 100%;
						font-size: 1.6rem;
						line-height: 2rem;
						padding: 2.2rem 0;
        					top: 0.5rem;
						left: 0;
    						}
	

    		div.indexlink_allbox ul li em	{font-size: 1.8rem;
						letter-spacing: 0.5px;}

	/* 事例　左右線 */
	div.jirei_typebox h3+p {max-width: 87%;
				padding: 0 0rem;}


    	div.jirei_afterbox::before {top: 71%;}


}/*  w380  last  */

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


    div.hs_cityname_linkbox ul li a {width:12rem;}


	div.diy_jkknetbox>p {font-size: 2.2rem;}

	.plan_t1, .plan_t2 {font-size: 5.5rem;}

    	.plan_t1::before, .plan_t1::after	{max-width: 27rem;
        					width: 100%;
        					top: 8rem;
    						}
				
			.plan_t1::after {top: 16.5rem; }



}/*  w330  last  */

/*  ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

				W320px 以下対応　

 ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼   */

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

    div.hs_cityname_linkbox ul li a	{padding: 0.5rem;
        				border-radius: 10px;}

}