@charset "UTF-8";

/* BaseColor : #00afc4 、0,175,196 */

/* 比率：0.66666 / 1.5 */

/************************************************** reset */
*{
	box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}
input,select{
	vertical-align: middle;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html{ 
	font-size: 62.5%;
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
}
body{
	font-size: 10px;
	font-size: 1.0rem;  
	line-height: 1.7rem;
}


/************************************************** common */

/********** SP対応 */
.sp{ display: none; }
.pc{ display: block; }
@media screen and (max-width:767px){
	.sp{ display: block; }
	.pc{ display: none; }
}

/********** cookie同意バナー */
#cookie{
	padding: 10px;
	width: 100%;
	background: rgba(0,0,0,0.6);
	color: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999999;
	font-size: 1.3rem;
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;
}
	#cookie .block{
		margin: 0 auto;
		width: 100%;
		max-width: 450px;
		display: flex;
		align-items: center;
	}
	#cookie .block .text{
		flex: 1;
	}
	#cookie .block .button{
		padding-left: 20px;
		width: 100px;
		flex-shrink: 0;
	}
	#cookie .block #ok-button{
		padding: 10px 20px;
		width: 80px;
		border: 1px #ddd solid;
		background: rgba(255, 255, 255, 0.4);
		color: #fff;
		text-align: center;
	}
	#cookie .block a{
		color: #fff;
	}
	#cookie .block #ok-button:hover{
		background: rgba(255, 255, 255, 0.8);
		color: #000;
	}

/********** 風マーク */
#staff{
	position: fixed;
	bottom: 5px;
	left: 5px;
	z-index: 99999;
}
	#staff a{
		width: 30px;
		height: 30px;
		background: rgba(0,0,0,0.2);
		color: rgba(255,255,255,0.6);
		text-decoration: none;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;	
	}
	/* 期限切れ間近警告 */
	#staff.red a{
		background: rgba(255,0,0,0.8);
		color: rgba(255,255,255,0.8);
	}


/************************************************** base */

/********** body */
body{
	min-width: 320px;
	background-image: url('../img/bg-main.jpg');
	background-size: 100%;
	font-size: 1.5rem;
	font-family: "Yu Mincho","YuMincho","MS P明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif;
	line-height: 1.4em;
}

/********** header */
header{
	height: 60px;
	width: 100%;
	background: rgba(0,0,0,0.4); /* 黒 */
	/* background: rgba(0,175,196,0.7); 風知蒼カラー */
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}
	header nav{
		margin: 0 auto;
		padding: 10px 10px 10px 15px;
		width: 100%;
		max-width: 1400px;
		display: flex;
		justify-content: space-between;
	}
	header nav a{
		color: #fff;
		text-decoration: none;
		text-shadow: 1px 1px 5px rgb(0 0 0 / 150%);
	}
	header nav ul a:hover{
		color: #000;
		text-shadow: 
			-1px -1px 2px #fff,  
			 1px -1px 2px #fff,
			-1px  1px 2px #fff,
			 1px  1px 2px #fff;
		transition: color 0.3s ease;
	}
		header nav h1{
			width: 180px;
			height: 38.7px;
			background: url(../img/fuchiso-logo.png) no-repeat;
			background-size:  cover;
			z-index: 4000;
		}
			header nav h1 span{
				display: none;
			}
			header nav h1 a{
				width: 100%;
				height: 100%;
				display: block;
			}

/* ナビ */
#global-navi{
	z-index: 2000;
}
#global-navi ul{
	display: inline-block;
	list-style: none;
	vertical-align: middle;
}
	#global-navi ul li{
		padding: 0 5px;
		display: inline-block;
		text-align: center;
		vertical-align: middle;
	}
	#global-navi ul li a::after {
		margin: 0 0 0 0.5rem;
		content: attr(data-en);
		display: block;
		font-size: .75rem;
	}
		/* EN */
		#en #global-navi ul li a::after {
			margin: 0;
			display: none;
		}
	#global-navi ul li.contact a{
		padding: 10px 35px;
		border: 1px #fff solid;
		display: block;
		box-shadow: 0 0.5rem 1rem rgb(34 34 34 / 15%); 
	}
		.jpen{
			font-size: 1.2rem;
		}
		#global-navi ul li.jpen ul li{
			padding: 0 3px;
		}
		.jpen ul li a,
		.jpen ul li span{
			width: 30px;
			height: 30px;
			box-shadow: 0px 0px 5px #555;
			background: rgba(0,0,0,0.3);
			border: 1px #fff solid;
			border-radius: 50%;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.jpen ul li span{
			/*background: rgba(255, 255, 255, 0.2);*/
		}
		#global-navi .jpen ul li a::after {
			margin: 0;
		}
		#global-navi ul li.contact a:hover,
		.jpen li a:hover{
			border: 1px #000 solid;
			box-shadow: 
				-1px -1px 3px #fff,  
				 1px -1px 3px #fff,
				-1px  1px 3px #fff,
				 1px  1px 3px #fff;
			transition: color 0.3s ease;
			color: #000;
			text-shadow: 
				-1px -1px 2px #fff,  
				 1px -1px 2px #fff,
				-1px  1px 2px #fff,
				 1px  1px 2px #fff;
			transition: color 0.3s ease;
		}
	
	#navi-sp{
		position: absolute;
		top: 13px;
		right: 10px;
		display: none;
		z-index: 4000;
	}

/* ナビ（PC以外） */
@media screen and (max-width:999px){
	#navi-sp{
		margin: 0;
		padding: 0;
		list-style: none;
		display: block;
	}
		#navi-sp li{
			margin: 0;
			padding: 0 0 0 3px;
			display: inline-block;
			vertical-align: middle;
			cursor: pointer;
		}
		#navi-sp li#icon-mail{
			margin-top: -2px;
		}
	 /* 高さの変化をアニメーション化 */
	#global-navi {
		height: 0;
		overflow: hidden;
		transition: height 0.3s ease;
	}
	/* 透過黒帯 */
	#global-navi ul::before {
		height: 60px;
		width: 100%;
		content: '';
		background: rgba(0,0,0,0.4);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3000;
	}
	/*  */
	#global-navi {
		background: #fff;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		box-shadow: 0px 0px 5px #999;  
		overflow: hidden;
	}
	#global-navi ul{
		margin: 90px auto 30px;
		padding: 0 20px;
		width: 100%;
		max-width: 250px;
		display: block;
	}
	#global-navi ul li{
		margin-top: 10px;
		padding: 5px;
		display: block;
		font-size: 1.9rem;
		text-align: left;
	}
	#global-navi ul li a,
	#global-navi ul li span{
		color: #000;
		text-shadow: none;
	}
	#global-navi ul li a::after {
		padding-left: 10px;
		display: inline-block;
	}
		#global-navi ul li.contact a::after {
			padding-left: 0;
		}
	
	#global-navi ul li.contact{
		margin-top: 30px;
	}
	#global-navi ul li.contact a{
		padding: 10px 30px;
		border: 1px #666 solid;
		text-align: center;
		box-shadow: 0 0.5rem 1rem rgb(34 34 34 / 15%); 
	}
	#global-navi .jpen ul{
		margin: 10px auto 0 !important;
		display: block;
		text-align: center;
	}
	.jpen ul li{
		display: inline-block !important;
		font-size: 1.3rem !important;
	}
	.jpen ul li a,
	.jpen ul li span{
		background: rgba(255,255,255,0.3);
		border: 1px #666 solid;
		box-shadow: none;
	}
	#global-navi .jpen ul li a::after {
		padding: 0;
	}
	#global-navi ul li a:hover{
		color: #00afc4;
	}
}

@media screen and (max-width:374px){
	header nav h1{
		width: 170px;
		height: 36.55px;
		width: 160px;
		height: 34.4px;
	}
	#navi-sp li{
		padding: 0 0 0 0;
	}
}


/********** パンくず */
#breadcrumbs{
	margin: 100px auto 0;
	padding: 15px  10px 0 10px;
	width: 100%;
	max-width: 1100px;
	color: #fff;
	font-size: 1.5rem;
}
	#breadcrumbs ul{
	}
	#breadcrumbs ul li{
		display: inline;
	}
	#breadcrumbs ul li:after{
		content: ' > ';
	}
	#breadcrumbs ul li:last-child:after{
		content: none;
	}
	#breadcrumbs ul li a{
		color: #fff;
		text-decoration: none;
	}
	#breadcrumbs ul li a:hover{
		color: #222;
	}


/********** main */
main{
}
	main article{
		margin-top: 80px;
	}
	main>article{
		margin-top: 10px;
	}


/********** footer */
footer{
	margin-top: 100px;
	padding: 60px 50px 50px 50px;
	background: rgba(173,194,194,0.6);
	color: #fff;
	text-align: center;
}
	/* HOMEだけは 0 にする */
	#main-home+footer{
		margin-top: 0;
	}
	/* ナビ*/
	footer nav{
		/*margin-top: 50px;*/
		width: 100%;
	}
	footer nav ul{
		list-style: none;
	}
	footer nav li{
		padding: 0 5px;
		display: inline-block;
		list-style: none;
	}
	footer nav a{
		color: #fff;
		text-decoration: none;
	}
	footer nav a:hover{
		color: #222;
	}
	/* sns */
	ul.sns{
		margin-top: 50px;
		list-style: none;
	}
	ul.sns li{
		padding: 0 5px;
		width: 40px;
		height: 40px;
		display: inline-block;
	}
	ul.sns li img{
		width: 100%;
	}
	/* コピーライト */
	footer .copy{
		margin-top: 30px;
	}

/* 「ページ最上部へ」アイコン */
#page-top-link{
	height: 40px;
	width: 40px;
	position: fixed;
	bottom: -5px;
	right: 10px;
	background: rgba(0,0,0,0.5);
	border-radius: 5px 5px 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	/*opacity: 0;
	transition: opacity 0.3s;  アニメーション効果をつける */
}
#page-top-link:hover{
	background: rgba(0,0,0,0.8);
}
	#page-top-link img{
		width: 30px;
		height: 30px;
	}

/* 「検索フォームへ」アイコン */
#to-search-form{
	height: 40px;
	width: 40px;
	position: fixed;
	bottom: -5px;
	right: 60px;
	background: rgba(0,0,0,0.5);
	border-radius: 5px 5px 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
#to-search-form:hover{
	background: rgba(0,0,0,0.8);
}
	#to-search-form img{
		width: 30px;
		height: 30px;
	}




/************************************************** contents . common */

/********** common */

article{
	margin: 50px auto 0;
	padding: 50px;
	width: 100%;
	max-width: 1100px;
}
	/* 施工事例・ワード１０ */
	article.word10,
	article.gallery{
		max-width: 1300px;
	}

	/* 横長の画面対応
	@media (max-height: 1080px) and (min-width: 1296px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 1000px; } }
	@media (max-height: 1060px) and (min-width: 1272px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 1000px; } }
	@media (max-height: 1040px) and (min-width: 1248px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 1000px; } }
	@media (max-height: 1020px) and (min-width: 1224px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 1000px; } }
	@media (max-height: 1000px) and (min-width: 1200px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 1000px; } }
	@media (max-height: 980px) and (min-width: 1176px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 1000px; } }
	@media (max-height: 960px) and (min-width: 1152px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 1000px; } }
	@media (max-height: 940px) and (min-width: 1128px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 1000px; } }
	@media (max-height: 920px) and (min-width: 1104px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 1000px; } }
	@media (max-height: 900px) and (min-width: 1080px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 1000px; } }
	@media (max-height: 880px) and (min-width: 1056px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 1000px; } }
	@media (max-height: 860px) and (min-width: 1032px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 1000px; } }
	@media (max-height: 840px) and (min-width: 1008px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 1000px; } }
	@media (max-height: 820px) and (min-width: 984px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 884px; } }
	@media (max-height: 800px) and (min-width: 960px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 860px; } }
	@media (max-height: 780px) and (min-width: 936px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 836px; } }
	@media (max-height: 760px) and (min-width: 912px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 812px; } }
	@media (max-height: 740px) and (min-width: 888px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 788px; } }
	@media (max-height: 720px) and (min-width: 864px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 764px; } }
	@media (max-height: 700px) and (min-width: 840px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 740px; } }
	@media (max-height: 680px) and (min-width: 816px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 716px; } }
	@media (max-height: 660px) and (min-width: 792px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 692px; } }
	@media (max-height: 640px) and (min-width: 768px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 668px; } }
	@media (max-height: 620px) and (min-width: 744px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 644px; } }
	@media (max-height: 600px) and (min-width: 720px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 620px; } }
	@media (max-height: 580px) and (min-width: 696px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 596px; } }
	@media (max-height: 560px) and (min-width: 672px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 572px; } }
	@media (max-height: 540px) and (min-width: 648px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 548px; } }
	@media (max-height: 520px) and (min-width: 624px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 524px; } }
	@media (max-height: 500px) and (min-width: 600px) { #works .content, #home-works-list ul, article.gallery .content { margin-left: auto; margin-right: auto; width: 500px; } }
 */
	#works .content, #home-works-list ul, article.gallery .content { width: 100%; }


/* パンくず直後は10px */
#breadcrumbs + article{
	margin: 10px auto 0;
}

	/* タイトル */
	article h2{
		font-size: 2.5rem;
		font-weight: normal;
	}
		/* タイトル上部の英字 */
		@font-face{
			font-family:the artisan;
			font-style:normal;
			font-weight:400;
			src:local('the artisan'),url('../common/the_artisan.woff') format('woff');
			font-display: swap;
		}
		article h2::before{
			margin: 0 0;
			padding: 20px;
			content: attr(data-en);
			color: #fff;
			font-family: "the artisan",sans-serif;
			font-size: 5rem;
			display: inline-block;
		}
		#arealist h2::before,
		#speciality h2::before,
		#concept h2::before{
			color: #39a1b8 !important;
		}
		#home-works-list h2::before{
			margin: 0;
			padding: 20px 20px 0 20px;
		}
		
		/* HOMEでは改行するため */
		#company1 article h2::before,
		#company2 article h2::before{
			display: block;
		}

		/* 各ページ */
		#works h2::before,
		#drawing h2::before,
		#journal h2::before,
		#faq h2::before,
		#biz h2::before,
		#contact h2::before,
		#privacy h2::before{
			color: #000;
		}

		#works .content,
		#drawing .content,
		#journal .content,
		#faq .content,
		#biz .content,
		#contact .content{
			padding: 50px 50px 0 50px;
			display: block;
		}
		#works .content,
		#drawing .content{
			padding: 0;
		}

		#works,
		#drawing,
		#journal,
		#faq,
		#biz,
		#contact,
		#privacy{
			padding: 100px 50px;
			background: #fff;
		}
		#works{
			padding: 50px 50px;
		}
		#works.drawing{
			background: #fffffa;
		}

@media screen and (max-width:767px){
	#faq,
	#biz,
	#contact{
		padding: 50px 0;
	}
	#faq .content,
	#biz .content,
	#contact .content{
		padding-left: 10px;
		padding-right: 10px;
	}
	article h2{
		font-size: 2.0rem;
	}
		article h2::before{
			font-size: 4.0rem;
		}
		#works{
			padding: 30px 50px 50px 50px;
		}
}



/************************************************** contents */

/********** HOME */
#home-main img{
	width: 100%;
	height: auto;
	box-shadow: 0px 0px 10px #555;
}

#home-main-image {
	/*opacity: 0;  初期状態では透明 */
	/*transition: opacity 0.5s ease-in-out;  フェードインの効果を0.5秒かけて適用 */
}

#home-copy{
	margin-top: 70px;
	color: #fff;
	font-size: 2rem;
	line-height: 2em;
	text-align: center;
}

/* iPad未満：写真が大きくナビに隠れるので写真を下げる */
@media screen and (max-width:767px){
	#home-main {
		margin-top: 60px;
	}
}

/* 代表事例 */
#home-works-list{
	margin-top: 80px;
	padding: 0 20px 50px;
	max-width: 1200px;
	background: rgba(255,255,255,0.0);
}
	#home-works-list h2 span{
		display: none;
	}
	#home-works-list ul{
		list-style: none;
	}
		#home-works-list ul li{
			margin-top: 80px;
		}
		#home-works-list ul li:first-child{
			margin-top: 40px;
		}
		#home-works-list ul li .image{
		}
			#home-works-list img{
				width: 100%;
				height: auto;
				box-shadow: 0px 0px 10px #555;  
			}
		#home-works-list ul li .text{
		}
			#home-works-list ul li .no{
				padding-right: 10px;
				color: #eee;
				display: inline-block;
				font-size: 1.4rem;
				text-decoration: none;
				vertical-align: top;
			}
			#home-works-list ul li .title{
				margin-top: 10px;
				display: inline-block;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			#home-works-list ul li .title a{
				color: #fff;
				font-size: 2.0rem;
				text-decoration: none;
			}
			#home-works-list ul li .title a:hover{
				color: #111;
			}

/********** HOME 会社情報 */
#company1{
	margin-top: 50px;
	padding: 0 10px;
}
#company2{
	margin-top: 100px;
	padding: 10px;
	background: rgba(173,194,194,0.6);
}

/* 人と空間の佇まい。 */
#concept{
	background: rgba(255,255,255,0.6);
	line-height: 2em;
	display: flex;
}
	#concept h2{
		width: 260px;
	}
	#concept .content{
		text-align: justify;
		flex: 1;
	}
@media screen and (max-width:767px){
	article#concept{
		padding-left: 20px;
		padding-right: 20px;
		display: block;
	}
		#concept h2{
			width: 100%;
		}
		#concept h2::before {
			margin: 0 0 10px;
		}
		#concept .content{
			margin-top: 50px;
			font-size: 1.4rem;
		}
}

/* 工事・サービスの対象エリア */
#arealist{
	background: rgba(255,255,255,0.6);
	line-height: 2em;
}
	#arealist .block1{
		display: flex;
	}
		#arealist h2{
			width: 40%;
		}
		#arealist .content{
			text-align: justify;
			flex: 1;
		}
	#arealist .block2{
	}
	#arealist .area-list{
		margin-top: 30px;
		background: #fff;
	}
	#arealist .area-list div:nth-of-type(1){
		width: 60%;
	}
	#arealist .area-list div:nth-of-type(2){
		width: 40%;
	}
	#arealist .area-list div{
		padding: 20px;
		display: inline-block;
		vertical-align: top;
	}
		#arealist .area-list h3{
			margin-top: 10px;
			font-weight: normal;
		}
		#arealist .area-list h3:nth-of-type(1){
			margin-top: 0;
		}
	#arealist .area-list ul{
		margin-top: 10px;
		padding-left: 30px;
	}
	#arealist .area-list li{
		margin: 0;
		padding: 0;
	}
	#arealist .area-list div ul ul{
		margin-top: 0;
		padding-left: 0;
		font-size: 1.3rem;
		color: #666;
	}
	#arealist .area-list div ul ul li{
		display: inline-block;
	}
	#arealist .area-list div ul ul li::after{
		content: "、";
	}
	#arealist .area-list div ul ul li:last-of-type::after{
		display: none;
	}

	/* お問い合わせ */
	#arealist .link-contact{
	}
	#arealist .link-contact a{
		margin-top: 30px;
		padding: 15px 5px;
		background: rgba(0, 0, 0, .6);
		background: #595959;
		color: #fff;
		display: block;
		font-size: 2rem;
		text-align: center;
		text-decoration :none;
	}
	#arealist .link-contact a:hover{
		background: rgba(0,175,196,0.8);
		background: rgba(0,175,196,1);
		box-shadow: 0px 0px 5px #999;  
	}

/* タイトルと文章の重なりを回避 */
@media screen and (max-width:980px){
	#arealist h2{
		width: 50%;
	}
}
/* タブレット未満対応 */
@media screen and (max-width:767px){
	article#arealist{
		padding-left: 20px;
		padding-right: 20px;
	}
		#arealist .block1{
			display: block;
		}
			#arealist h2{
				width: 100%;
			}
			#arealist h2::before {
				margin: 0 0 10px;
			}
			#arealist .content{
				margin-top: 50px;
				font-size: 1.4rem;
			}
	#arealist .area-list div:nth-of-type(1),
	#arealist .area-list div:nth-of-type(2){
		width: 100%;
		display: block;
	}
	#arealist .area-list div:nth-of-type(1){
		padding-bottom: 0;
	}
	#arealist .area-list div:nth-of-type(2){
		padding-top: 0;
	}
	#arealist .area-list div:nth-of-type(2) h3:nth-of-type(1){
		margin-top: 10px;
	}
}
.shifted {
	top: 70px;
}

/* 会社概要 */
#aboutus{
	color: #fff;
	display: flex;
}
	#aboutus h2{
		width: 35%;
	}
	#aboutus .content{
		flex: 1;
		vertical-align: top;
		display: flex;
		align-items: flex-start;
	}
	#aboutus .content div{
		display: inline-block;
		width: 50%;
	}
	#aboutus .content dl{
		margin-bottom: 20px;
	}
	#aboutus .content dt{
		font-weight: bold;
	}
	#aboutus .content dd{
		font-size: 1.4rem;
	}
	#aboutus .content .map{
		margin-top: 5px;
		padding: 15px;
		width: 90%;
		border: 1px #fff solid;
		text-align: center;
	}
	#aboutus .content a{
		color: #fff;
		text-decoration: none;
	}
@media screen and (max-width:767px){
	article#aboutus{
		display: block;
	}
		#aboutus h2{
			width: 100%;
		}
		#aboutus h2::before {
			margin: 0 0 10px;
		}
		#aboutus .content{
			margin-top: 50px;
			display: block;
		}
		#aboutus .content div{
			display: block;
			width: 100%;
		}
		#aboutus .content .map {
			width: 100%;
		}
}

/* 得意分野 */
#speciality{
	background: rgba(255,255,255,0.6);
	color: #000;
}
	#speciality h2{
	}
	#speciality .content{
		margin-top: 30px;
	}
	#speciality li{
		width: 49%;
		display: inline-block;
		margin-top: 15px;
		text-indent: -1em;
		padding-left: 1em;
	}
	#speciality li:before{
		content: "・";
	}
@media screen and (max-width:767px){
	article#speciality{
		padding-left: 20px;
		padding-right: 20px;
		display: block;
	}
		#speciality h2{
			width: 100%;
		}
		#speciality h2::before {
			margin: 0 0 10px;
		}
		#speciality .content{
			margin-top: 50px;
		}
		#speciality li {
			width: 100%;
		}
}

/* メッセージ */
#message{
	border: 1px #fff solid;
	color: #fff;
	line-height: 2em;
	display: flex;
}
	#message h2{
		width: 220px;
	}
	#message .content{
		text-align: justify;
		flex: 1;
	}
@media screen and (max-width:767px){
	article#message{
		padding-left: 20px;
		padding-right: 20px;
		display: block;
	}
		#message h2{
			width: 100%;
		}
		#message h2::before {
			margin: 0 0 10px;
		}
		#message .content{
			margin-top: 50px;
			font-size: 1.4rem;
		}
}









/************************************************** 一覧 */

/*
	兼用
	施工事例・図面（初期画面、検索結果などの一覧）
	上記の事例と関連する事例
	ワード１０関連（○○の事例、お問い合わせの多いページ）
*/

/* 33.3%から開始、SPは100% */
ul.works-list {
	margin: 0 auto;
	padding: 10px 0 30px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
ul.works-list li ,
ul.tag-list li {
	margin-top: 30px;
	padding: 10px;
	flex: 0 0 auto;
	width: 33.33333%;
	width: 25%;
}

/* タグのキャプション */
.description{
	margin: 20px auto 0;
	max-width: 700px;
}


ul.works-list li .image,
ul.tag-list li .image {
	width: 100%;
	aspect-ratio: 3 / 2;
	display: inline-block;
}
ul.works-list li .image a,
ul.tag-list li .image a{
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
}
ul.works-list li .image img,
ul.tag-list li .image img{
	height: auto;
	max-height: 100%;
	width: auto;
	max-width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}



ul.works-list li a{
	text-decoration: none;
}
@media screen and (max-width:767px){
	ul.works-list li {
		margin-top: 10px;
		width: 50%;
	}
	article.works-list.words10 ul.works-list li{
		padding-left: 5px;
		padding-right: 5px;
		font-size: 1.4rem;
	}
}

/* もっとタグを見る */
.more-tag{
	padding: 20px 0 40px 0;
}
.more-tag a{
	margin: 0 auto;
	padding: 15px 5px;
	width: 280px;
	background: rgba(0, 0, 0, .6);
	background: #595959;
	color: #fff;
	display: block;
	font-size: 1.5rem;
	text-align: center;
	text-decoration :none;
}
.more-tag a:hover{
	background: rgba(0,175,196,1);
}


/* 施工事例・図面（初期画面、検索結果などの一覧） */
/* 1件の幅を50%から開始 */
#works ul.works-list li {
	width: 50%;
}
#works ul.works-list li .image {
	background: #f1f1f1;
}
#works ul.works-list li .no-area{
	margin-top: 5px;
	color: #555;
	font-size: 1.4rem;
}
#works ul.works-list li .no {
	padding-right: 20px;
}
#works ul.works-list li .title {
	margin-top: 5px;
	/*max-height: 2.6em;*/
	overflow: hidden;
	font-size: 1.6rem;
	text-align :left;
	overflow: hidden;
	display: -webkit-box;
	/**/
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
#works ul.works-list li .title a {
	color: #000;
}
@media screen and (max-width:768px){
	#works {
		padding-left: 10px;
		padding-right: 10px;
	}
	#works ul.works-list li {
		margin-top: 50px;
		width: 100%;
	}
	#works ul.works-list li:first-child {
		margin-top: 0;
	}
}

@media screen and (max-width:767px){
	#works ul.works-list li .title {
		font-size: 1.7rem; /* 320:18 */
	}
}


/*
	上記の事例と関連する事例
	ワード１０関連（○○の事例、お問い合わせの多いページ）
*/
article.works-list{
	margin: 80px auto 0;
	padding: 0 20px;
	padding: 0;
	width: 100%;
}
@media screen and (max-width:768px){
	article.works-list{
		padding: 0;
	}
}
	article.works-list h2{
		padding: 10px;
		background: #fff;
		background: #00afc4;
		background: rgba(255 ,255 ,255 ,0.7);
		background: rgba(0,0,0,0.6);
		color: #00afc4;
		color: #000;
		color: #fff;
		padding: 8px 0 14px;
		font-size: 1.8rem;
		text-align: center;
	}
	article.works-list h2::before{
		padding: 0;
	}
	article.works-list .content{
		padding: 0 10px;
		background: rgba(0,0,0,0.3);
		background: rgba(255 ,255 ,255 ,0.0);
		background: #fff;
		width: 100%;
	}

	/* ○○の事例 */
	/* お問い合わせの多いページ */
	/* 上記の事例と関連する事例 */
	article.works-list ul.works-list li a{
		color: #fff;
		color: #000;
	}
	article.works-list ul.works-list li:hover a{
		color: #222;
		color: #00afc4;
	}
	article.works-list.words10 ul.works-list.center li .title{
		text-align: center;
	}
	@media screen and (max-width:768px){
		article.works-list .content{
			padding: 0 5px;
		}
	}


/* 「お問い合わせの多いページ」へのページ内リンク */
.words10-link{
	margin: 60px auto 0;
	padding: 0;
	width: 280px;
	font-size: 1.6rem;
}
	.words10-link a{
		padding: 15px 0;
		background: rgba(0,0,0,0.6);
		color: #fff;
		display: block;
		text-align: center;
		text-decoration: none;
	}
	.words10-link a:hover{
		background: rgba(0,175,196,1);
		/*
		background: rgba(255,255,255,0.6);
		color: #000;
		text-decoration: none;
		*/
	}


/********** 施工事例・図面・ジャーナルのメッセージ */

/* １ページ目の下部に表示 */
#works .message,
#drawing .message,
#journal .message{
	margin-top: 50px;
	padding: 30px;
	border: 1px #999 solid;
}


/********** 施工事例・図面（一覧） */

/* 検索フォーム */
#search-form{
	margin-top: 50px;
}
	#search-form .search-message{
		text-align: center;
	}
	#search-form .formw{
		margin: 10px auto 0;
		padding: 0;
		width: 250px;
		border: 1px #333 solid;
	}
	#search-form form{
		width: 100%;
		height: 100%;
		vertical-align: middle;
		display: flex;
	}
	#search-form input.q{
		padding: 10px;
		width: 100%;
		height: 100%;
		font-size: 16px;
		border: none;
		vertical-align: middle;
		flex-grow: 1;
	}
	#search-form input.q::placeholder {
		color: #ccc;
	}
	#search-form button{
		margin: 5px 10px;
		border: none;
		width: 30px;
		background: none;
		vertical-align: middle;
		cursor: pointer;
		flex-basis: 30px;
	}

/* 前次ページリンク */
.page-link{
	margin: 0 auto;
	padding: 50px 0 0 0;
	text-align: center;
}
	.page-link ul{
		list-style: none;
	}
	.page-link ul li{
		list-style: none;
		display: inline-block;
	}
	.page-link ul li span,
	.page-link ul li a{
		width: 32px;
		height: 32px;
		display: block;
		color: #000;
		border-radius: 50%;
		display: grid;
		place-content: center;
		text-decoration: none;
	}
	/* フェードで OnOff */
	/* off */
	.page-link ul li a{
		background-color: transparent;
		transition: background-color 0.5s ease;
	}
	/* on */
	.page-link ul li.current span,
	.page-link ul li.current a,
	.page-link ul li a:hover{
		background-color: rgba(228, 235, 235, 1);
	}


/********** 施工事例（ワード１０の事例） */
.word10{
	width: 100%;
}
.word10 li{
	margin-top: 100px;
	padding: 0;
	width: 100%;
	list-style: none;
}
.word10 li:first-child{
	margin-top: 0;
}
	.touch-message{
		margin-top: 50px;
		text-align: center;
		display: block;
	}

	.word10 li .image{
		height: initial;
		background: none;
		display: block;
		text-align: center; 
	}
	.word10 li .image img{
		margin: 0 auto;
		max-width: 100%;
		max-height: 800px;
		object-fit: contain;
		height: auto;
	}
	.word10 li .title{
		margin-top: 5px;
		padding-left: 0;
	}
	.word10 li .title a{
		color: #000;
		font-size: 1.9rem;
		text-decoration: none;
	}
	.word10 li .no{
		color: #555;
		font-size: 1.4rem;
	}
.word10 li.caption{
	margin: 0 auto;
	padding: 60px 0 20px 0;
	width: 100%;
	max-width: 700px !important;
	display: block;
}



/********** 施工事例・図面（事例） */

#works.work{
}
#works.work h2{
	line-height: 1.1em;
}
	article#works.work h2::before{
		/*margin-bottom: 30px;*/
		/*display: block;*/
	}
#works.work .content{
	margin-top: 0;
}
	#works.work .no-area{
		margin-top: 5px;
		color: #555;
		font-size: 1.3rem;
		text-align: right;
	}
		#works.work .no{
			padding-right: 10px;
			display: inline-block;
		}
		#works.work .area{
			display: inline-block;
		}
	#works.work .caption-top{
		margin: 90px auto 0;
		padding: 0 10px;
		width: 100%;
		max-width: 700px;
	}
	x#works.work .block{
		margin-top: 50px;
	}
	/* tagでの写真指定ジャンプ用にヘッダーに隠れないための対策 */
	#works.work .block{
		margin-top: -40px;
		padding-top: 140px;
	}
	#works.work .block#photo1{
		margin-top: 5px;
		padding-top: 0;
	}
		#works.work .image a{
			vertical-align: middle;
		}
			#works.work .image{
				width: 100%;
				background: #f7f7f7;
				text-align: center;
				aspect-ratio: 3 / 2;
				display: inline-block;
			}
			#works.work .image a,
			#works.work .image span{ /* span はblog用。aの代わり */
				width: 100%;
				height: 100%;
				display: block;
				position: relative;
			}
			#works.work .image img{
				height: auto;
				max-height: 100%;
				width: auto;
				max-width: 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateY(-50%) translateX(-50%);
				-webkit- transform: translateY(-50%) translateX(-50%);
			}
			/* drawing だけ背景との境が見にくいので縁付きに */
			#works .image.drawing{
				border: 1px #ddd solid;
			}
		#works.work .caption{
			margin: 15px auto 0;
			padding-left: 10px;
			padding-right: 10px;
			max-width: 800px;
			font-size: 1.4rem;
			text-align: justify;
		}
	#works.work .tag{
		margin-top: 50px;
		padding-top: 30px;
		border-top: 1px #ddd solid;
	}
		#works.work .tag h3{
			font-size: 1.6rem;
			font-weight: normal;
		}
		#works.work .tag ul{
			margin-top: 10px;
		}
		#works.work .tag ul li{
			margin-top: 10px;
			padding: 5px;
			display: inline-block;
		}
		#works.work .tag ul li a{
			padding: 7px 15px;
			background: #e9ecef;
			border-radius: 5px;
			color: #000;
			display: block;
			font-size: 1.4rem;
			text-decoration: none;
		}
		#works.work .tag ul li a:hover{
			color: #fff;
			background: #00afc4;
		}

		/* １枚目とキャプションの後にも追加した分 */
		#works.work .tag2 {
		    margin-top: 50px;
		    padding-top: 0;
		    border: none;
		    text-align: center;
		}

/* 20250210 タグリストへのリンク */
#works.work .tag2 a.to-taglist{
	margin: 0 auto;
    padding: 7px 15px;
    width: 250px;
    background: #e9ecef;
    border-radius: 5px;
    color: #000;
    display: block;
    font-size: 1.4rem;
    text-decoration: none;
}
#works.work .tag2 a.to-taglist:hover{
	color: #fff;
	background: #00afc4;
}


@media screen and (max-width:767px){
	#works.work .content{
		margin-top: 30px;
	}
	/* SP表示時、Worksが高さを取りすぎるので右上の空欄に移動 */
	article#works.work h2::before{
		position: absolute;
		top: 80px;
		right: 0;
		text-shadow: 
			-5px -5px 20px #fff,  
			5px -5px 20px #fff,
			-5px  5px 20px #fff,
			5px  5px 20px #fff;
	}
}
/********** 図面の関連事例 */

#drawing-related{
	margin: 80px auto 0;
	padding: 0;
	width: 100%;
	max-width: 700px;
}
	#drawing-related h3{
		padding-bottom: 5px;
		border-bottom: 2px #ccc solid;
		font-weight: normal;
	}
	#drawing-related div{
		margin-top: 5px;
	}
	#drawing-related ul{
		margin-top: 20px;
	}
	#drawing-related li{
		margin-top: 10px;
		list-style: none;
	}
	#drawing-related li a{
		color: #00afc4;
		text-decoration: none;
	}
	#drawing-related li a:hover{
		color: #000;
	}


/********** タグ一覧ページ */
.tag-list{
	list-style: none;
}
	.tag-list li{
		margin-top: 10px;
		padding:0 3px;
		width: 25%;
		display: inline-block;
	}
	.tag-list li a{
		color: #000;
		text-align: center;
		text-decoration: none;
	}
	.tag-list li a:hover{
		color: #00afc4;
		text-align: center;
	}





@media screen and (max-width:1023px){
	.tag-list li{ 	width: 25%; }
}
@media screen and (max-width:767px){
	.tag-list li{ 	width: 33.333%; }
}
@media screen and (max-width:499px){
	.tag-list li{ 	width: 50%; }
}

/********** タグ一覧 各ページの下部 */


/********** ジャーナル */

#journal{
}
.journallist{
	list-style: none;
}
.journallist li{
	margin-top: 30px;
	display: flex;
}
	.journallist li a{
		color: #000;
		text-decoration: none;
	}
	.journallist li a:hover{
		color: #00afc4;
	}
	.journallist .image{
		width: 300px;
		background: #eee;
		aspect-ratio: 3 / 2;
		display: inline-block;
	}
		.journallist .image a{
			width: 100%;
			height: 100%;
			display: block;
			position: relative;
		}
		.journallist .image img{
			height: auto;
			max-height: 100%;
			width: auto;
			max-width: 100%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateY(-50%) translateX(-50%);
			-webkit- transform: translateY(-50%) translateX(-50%);
		}
	.journallist .text{
		padding-left: 20px;
		flex: 1;
	}
		.journallist .text h3{
			margin-top: 10px;
			font-size: 2rem;
			font-weight: normal;
		}
		.journallist .text .date{
			margin-top: 5px;
			font-size: 1.3rem;
		}
		.journallist .text .body{
			margin-top: 5px;
		}
		.journallist .text .more{
			margin-top: 15px;
			text-align: right;
		}
		.journallist .text .more a{
			background: url(../img/icon/arrow_right_100.svg) right no-repeat;
			background-size: 30%;
			padding-right: 40px;
		}
	/* 前次記事ページリンク */
	.prev-next{
		margin-top: 50px;
	}
		.prev-next li{
			margin-top: 10px;
			list-style: none;
		}
		.prev-next li a{
			color: #000;
			text-decoration: none;
		}
		.prev-next li a:hover{
			color: #00afc4;
		}
		
@media screen and (max-width:767px){
	#journal{
		padding-left: 10px;
		padding-right: 10px;
	}
	#journal .content{
		padding: 0;
	}
	.journallist li{
		display: block;
	}
	.journallist .image{
		width: 100%;
	}
}


/********** FAQ */

#faq dl{
}
#faq dt{
	margin-top: 20px;
	text-indent: -2em;
	padding-left: 2em;
}
	#faq dt::before {
		content: "Ｑ．";
		color: #00afc4;
	}
#faq dd{
	margin-top: 5px;
	text-indent: -2em;
	padding-left: 2em;
}
	#faq dd::before {
		content: "Ａ．";
		color: #dc3545;
	}

/********** 法人のお客様へ */

#biz .c1{
	line-height: 2em;
}

#biz .c2{
	margin: 100px auto 0;
	padding: 15px;
	width: 100%;
	max-width: 600px;
	background: #00afc4;
	color: #fff;
	text-align: center;
	font-size: 2.5rem;
	font-weight: bold;
}

#biz .c3 div{
	margin-top: 50px;
	width: 50%;
	display: inline-block;
	vertical-align: top;
}
	#biz .c3 div h3{
		padding: 10px;
		color: #00afc4;
	}
	#biz .c3 div ul{
		padding: 10px;
		list-style: none;
	}
	#biz .c3 div ul li{
		margin-top: 10px;
	}
#biz .c4{
}
	#biz .c4 div{
		margin-top: 50px;
		width: 100%;
	}
	#biz .c4 div img{
		width: 100%;
		height: auto;
	}

@media screen and (max-width:767px){
	#biz .c3 div{
		margin-top: 30px;
		width: 100%;
		display: block;
	}
	#biz .c3 ul{
		font-size: 1.4rem;
	}
}



/********** 個人情報保護方針及び利用規約 */

#privacy .content{
	margin-top: 50px;
}
ol{
	margin-top: 50px;
	padding-left: 20px;
}
ol > li{
	margin-top: 20px;
}
ol h3{
	color: #00afc4;
	font-weight: normal;
}
ol li p{
	margin-top: 10px;
}
ol li ul{
	padding-left: 20px;
}
ol li ul li{
	margin-top: 10px;
}
#privacy .address{
	margin-top: 50px;
}



/********** お問い合わせフォーム */

/* ご案内（ここだけは、margin-bottom を使用） */
.contact-info{
	margin-bottom: 50px;
}

/* 入力、確認、完了*/
.state{
	text-align: center;
}
	.state span{
	}
	.state div{
		padding: 5px;
		width: 80px;
		border-radius: 4px;
		display: inline-block;
		text-align: center;
	}
	.state div.on{
		background: #00afc4;
		color: #fff;
	}
	.state div.off{
		background: #eee;
	}

	/* 英語版 */
	#en .state div{
		padding: 5px 3px;
		width: 80px;
		font-size: 1.3rem;
	}


/* フォーム */
.items{
	margin-top: 50px;
}
	.item{
		margin-top: 10px;
		display: flex;
	}
		.item .l{
			width: 200px;
			display: inline-block;
			display: flex;
			align-items: center;
		}
			.item .l span{
				padding-left: 3px;
				display: inline-block;
				color: #00afc4;
			}
		.item .r{
			flex: 1;
			display: inline-block;
		}
			.item .r input[type="text"],
			.item .r textarea,
			.item .r span{ /* spanは確認画面 */
				padding: 10px 5px;
				width: 100%;
				border: none;
				background: #e8ecef;
				display: inline-block;
				min-height: 25px;
				word-break: break-all;
			}
			.item .r textarea{
				height: 200px;
			}
			.item .r.submit{
				padding-top: 30px;
			}
			.item .r input[type="submit"]{
				padding: 10px 20px;
				background: #fff;
				color: #00afc4;
				border: 2px #00afc4 solid;
				font-size: 1.5rem;
				border-radius: 4px;
			}
			.item .r input[type="submit"]:hover{
				background: #00afc4;
				color: #fff;
			}
			.item .r input[type="text"]::placeholder,
			.item .r textarea::placeholder {
				color: #999;
			}
			/* エラー */
			.item .r .error{
				color: #dd0000;
			}
			/* メッセージ */
			.contact-message{
				margin-top: 30px;
				text-align: center;
			}

/* お問い合わせ項目 */
.category-select input {
	display: none;
}
.category-select label{
	margin-right: 2px;
	padding: 5px 10px;
	display: inline-block;
	cursor: pointer;
	border: 1px #000 solid;
	color: #000;
	border-radius: 4px;
	font-size: 1.4rem;
	text-align: center;
	transition: .2s;
}
.category-select label:hover{
	background: #ddd;
}
.category-select input[type="radio"]:checked + label {
	background-color: #000;
	color: #fff;
}

@media screen and (max-width:850px){
	.category-select label{
		margin-top: 5px;
		width: 45%;
	}
}
@media screen and (max-width:767px){
	.item,
	.item .l,
	.item .r{
		display: block;
	}
	.item .r .submit{
		text-align: center;
	}
	.item .r.submit{
		text-align: center;
	}
}





  header {
    transition: top 0.3s; /* トランジションを使用してスライド効果を追加 */
  }
  .scrolling {
    top: -63px; /* スクロール時にヘッダーを表示 */
  }