/* ===================================
	スマートフォン対応
=================================== */
@media screen and (max-width: 959px) {/*ページ全体の背景の線削除*/
	body {
  		background-image: none;
	}
}

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


	/*=======================================================================================================================*/
	/*共通部　レイアウト修正*/
	/*=======================================================================================================================*/

	/* テキストの可読性向上 */
	body {
		font-size: 14px;
		line-height: 1.7;
	}
	
	ol.bc {
		font-size: 12px;
		display: flex;
		flex-direction: column;
		text-align: left;
	}


	img {
		display: block;
		max-width: 100%;
		margin: 0 auto 1rem;
	}

	/* 横スクロール防止 */
	body,
	html {
		overflow-x: hidden;
	}

	#wrapper {
		overflow-x: hidden;
		box-sizing: border-box;
		max-width: 100%;
		width: 100%;
	}

	#aside {
		float: none;
		display: block;
		padding: 0;
		width: 100%;
	}
	
	

	/* ===================================ヘッダーとページ内リンク位置修正=================================== */
	:root {
		/* ヘッダーの基準高（PC） */
		--header-h: 212px;
		--header-log: 110px;
	}

	/* iPhone等のセーフエリアに対応 */
	#header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000 !important;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
		height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
		padding-top: env(safe-area-inset-top, 0px);
	}

	#main {
		float: none !important;
		box-sizing: border-box;
		padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
		padding-right: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
	}

	/*会員専用ページのヘッダー位置修正*/
	#civil-data-idx #header {
		height: calc(var(--header-log) + env(safe-area-inset-top, 0px));
	}

	#civil-data-idx #main {
		padding-top: calc(var(--header-log) + env(safe-area-inset-top, 0px));
	}

	/* アンカー飛び先がヘッダーに隠れないよう補正 */
	#lv02-01, #lv02-02, #lv02-03, #lv02-04, #lv02-05, #lv02-06,/*各ページ小見出し*/
	#lv03-02-01, #lv03-02-02, #lv03-02-03, #lv03-02-04,/*名簿　会員種別*/
	#lv03-04-01,/*名簿 正会員*/
	#lv04-02-01, #lv04-02-02, #lv04-02-03, #lv04-02-04, #lv04-02-05, #lv04-02-06, #lv04-02-07, #lv04-02-08,/*名簿　各地区*/
	#civil-calc-idx #introduction, #civil-calc-idx #example,/*　←数量計算　hajimeni-1.html用　*/
	#civil-cad-idx #KSC, #civil-cad-idx #KSS, #civil-cad-idx #KSG, #civil-cad-idx #OF,/*　←CADDownLoad　cad2.html用　*/
	#civil-cad-idx #HC, #civil-cad-idx #HSS, #civil-cad-idx #HS, #civil-cad-idx #TC, #civil-cad-idx #TSS, #civil-cad-idx #TS,/*←CADDownLoad　cad2.html用　*/
	#civil-cad-idx #zan, #civil-cad-idx #utan /*←CADDownLoad　cad3.html用　*/{
		scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
	}

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


	/* メインコンテンツの調整 */
	#main .inner {
		padding: 0;
	}
	
	#content {
		width: 100%;
		float: none;
		display: block;
		box-sizing: border-box;
		padding: 0;
		margin: 0;
	}

	
	/*=======================================================================================================================*/
	/*table*/
	/*=======================================================================================================================*/
	table {
		display: block;
		overflow-x: scroll;
		max-width: 100%;
		width: fit-content;
		font-size: 13px;
		margin: 0 auto 1rem;
		-webkit-text-size-adjust: 100%;/* iOS対策 */
		text-size-adjust: 100%;
	}

	th,
	td {
		min-width: 4em;
		line-height: 1.5;
	}

	td.link,
	td.name {
		text-wrap: nowrap;
	}

	.table-nowrap {
		border: 1px solid #ccc;
	}
	.table-nowrap th,
	.table-nowrap td {
		text-wrap: nowrap;
		border: 1px solid #ccc;
	}

	/* 会員名簿一覧 */
	table.meibo thead th:last-child{
		min-width: fit-content;
	}
	td.link {
		width: 55px;/*site.cssで6em指定なので打消し*/
		font-size: 12px;
	}
	.meibo .long {
		text-wrap: wrap;
	}

	@media screen and (max-width:575px) {
		/*会員名簿　社名th（576px以上の時はmax-width指定なし）*/
		table.meibo tr th:first-child {
			width: 7em !important;
			box-sizing: border-box;
		}
		table.meibo td.link {
			padding: 0;
		}
	}
	/*=======================================================================================================================*/
	/*table おわり*/
	/*=======================================================================================================================*/

	.flex {
		flex-direction: column;
		align-items: center;
	}

	.frmbox-left,
	.frmbox-right {
		float: none;
  		width: 100%;
	}

	#footer .inner .fmenu {
		padding: 0;
		width: 100%;
	}
	
	/*map*/
	.map > iframe {
		width: 100%;
		height: 100%;
	}



	/*トピックス*/
	.topics-ichiran {/*トピックス一覧ページ*/
		height: 400px;
	}
	.news dl {/*各部門トップのトピックス欄*/
		background-color: #f8f8f8;
		overflow-y: scroll;
		margin-bottom: 1rem;
	}
	.news dl dd {
		margin: 0;
		padding: 0;
	}
	.civil-topics,
	.pc-topics {
		height: 12.5rem;
	}

	/*サイトマップ*/
	.civil ul.banners,
	.pc ul.banners {
		flex-direction: column;
	}

	.civil ul.banners li,
	.pc ul.banners li {
		flex-basis: inherit;
		height: 105px;
	}

	.civil ul.banners li a,
	.pc ul.banners li a {
		margin: auto;
		width: 335px;
	}

	#content div ul.banners li {
		background-image: none;
	}
	

	/*各ページ　オレンジ見出し*/
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	h1.FIR {
		background: url(../img/nav-h2.gif) repeat-y !important;
		text-indent: 0 !important;
		font-weight: bold;
		font-size: 1.7rem;
		line-height: 1.4;
		padding-left: 10px;
		height: auto;
		margin: 10px 0 1rem 0;
	}


	/*NETIS番号*/
	.kakomi-box2 {
		width: fit-content;
		margin: 0.1em auto 1em auto;
	}

	/*SCストランド等の施工事例*/
	#content .inner .d-cases div,
	#content .inner .d-cases .first {
		margin: 0 auto 1.5em;
		display: block;
		width: 100%;
		float: none;
	}

	.d-cases div p {
		text-align: center;
	}

	.d-cases p.tech {
		text-align: left;
	}

	.d-cap {
		text-align: center;
	}
	
	
	
	/*=======================================================================================================================*/
	/* 画像の調整 */
	/*=======================================================================================================================*/
	#main img {
		max-width: 100%;
		height: auto;
	}

	/*画像の回り込み撤回*/
	p.fLeft,
	p.fRight {
		float: none;
	}


	.d-cases div img /*各ページの施工事例欄　画像*/,
	.d-cases-330 div img /*　/pc/method/02.html　画像　*/ {
		margin: 1rem auto 1rem;
	}

	/*=======================================================================================================================*/
	/*画像 おわり*/
	/*=======================================================================================================================*/


	



	/*=======================================================================================================================*/
	/*ヘッダー　HOMEとお問合せの行*/
	/*=======================================================================================================================*/
	#header ul#nav-global {
		width: 100%;
	}

	/*=======================================================================================================================*/
	/*ヘッダー　上の３つのナビ*/
	/*=======================================================================================================================*/
	#header .inner {
		width: 100%;
	}

	ul#nav-main {
		flex-direction: column;
		width: 100%;
	}

	ul#nav-main li.about,
	ul#nav-main li.civil,
	ul#nav-main li.pc {
		width: 100%;
		background-repeat: repeat-x;
		background-image: url(../img/nav-back.png);
		display: block;
	}

	ul#nav-main li a {
		background-repeat: no-repeat;
		background-position: center top;
	}
	
	ul#nav-main li a:hover {
		background-position: center top;
	}
	

	/*=======================================================================================================================*/
	/* フッターの調整 */
	/*=======================================================================================================================*/
	#footer {
		width: 100%;
		margin-bottom: 0;
	}

	#footer .inner .fmenu {
		float: none;
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	#footer p.btt {
		margin: 0 0 0 auto;
	}

	#footer .inner {
		padding: 0 20px;
		width: 100%;
		box-sizing: border-box;
		background-image: none;
		background-color: #232a33;
	}

	#footer .inner .copy {
		width: 100%;
	}


	/*=======================================================================================================================*/
	/*ヘッダーとフッター おわり*/
	/*=======================================================================================================================*/





	/*=======================================================================================================================*/
	/*aside　サイドメニュー調整*/
	/*=======================================================================================================================*/

	/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
	/*ハンバーガーメニュー*/
	/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
	.hamburger {
		display: flex;
	}

	/* asideをスライドメニューに */
	#aside {
		position: fixed;
		top: 20px;
		right: -100%;
		width: 80%;
		height: 100vh;
		max-width: 350px;
		background: #eaf3fade;
		box-shadow: -2px 0 10px rgba(0,0,0,0.3);
		overflow-y: auto;
		transition: right 0.3s ease-in-out;
		z-index: 9999;
		padding: 0;
		float: none;
		margin: 0;
	}
	#aside.is-active {
		right: 0;
	}
	#aside .inner {
		min-height: calc(100vh + 100px); /* 画面より少し長く */
		padding: 80px 15px 110px 15px; /* 上下に余裕 */
		overflow: visible;
	}
	
	/* オーバーレイ */
	.menu-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.1);
		z-index: 9998;
	}
	.menu-overlay.is-active {
		display: block;
	}
	
	/* ハンバーガーアニメーション */
	.hamburger.is-active span:nth-child(1) {
		transform: rotate(45deg) translate(8px, 8px);
	}
	.hamburger.is-active span:nth-child(2) {
		opacity: 0;
	}
	.hamburger.is-active span:nth-child(3) {
		transform: rotate(-45deg) translate(5px, -5px);
	}
	
	/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
	/*ハンバーガーメニューおわり*/
	/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/


	/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
	/*メニュー内　背景画像変更とサイズ調整*/
	/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
	.menu {
		width: auto;
		margin: 0;
	}
	#aside .menu h2,
	#aside .menu h2 a,
	#aside .menu ul.lv01 li span,
	#aside .menu ul.lv02 li a {
		box-sizing: border-box;
		width: 100%;
	}

	.menu ul li.back-to-home {
		display: block;
	}
	
	/* asideメニュー*/
	#main #aside .menu ul.lv01 li span,
	#main #aside .menu h2 a,
	#aside .menu ul.lv02 li a,
	#aside .menu ul.lv03 li a {
		background-position:  0 center;
		background-repeat: no-repeat;
	}

	/*部門トップ名前*/
	#main #aside .menu h2 a {
		background-image: url("../img/bg-aside-top.png");
	}

	/*濃い青色背景*/
	#main #aside .menu ul.lv01 li span {
		background-image: url("../img/bg-nav-aside-lv01.png");
	}
	
	/*薄い青色背景メニュー*/
	#aside .menu ul.lv02 li a {
		background-image: url("../img/bg-nav-aside-lv02.png");
	}
	#main #aside .menu ul.lv02 li a:hover {
		background-position: 0 center;
	}
	/*薄い灰色背景メニュー*/
	#aside .menu ul.lv03 li a {
		background-image: url("../img/bg-nav-aside-lv03.png");
		font-weight: normal !important;
	}
	#aside .menu ul.lv03 a:hover {
		background-position: 0 center;
	}

	#aside .menu ul li.idx a,
	#aside .menu h2 a {
		width: 100% !important;
		background-position: 0 center !important;
	}

	/*=======================================================================================================================
		aside　おわり
	=======================================================================================================================*/









	/*=======================================================================================================================*/
	/* #home専用設定 お知らせと#content */
	/*=======================================================================================================================*/
	#home #main {
		margin: 212px 0 0;
		background: #ffffff;
		display: flex;
		flex-direction: column-reverse;
	}
	
	#home #content,
	#home .topics {
		width: 100%;
		position: initial;
		display: block;
		box-sizing: border-box;
		padding: 0 10px 20px;
		margin: 0;
	}

	#home #content .inner {
		display: block;
	}
	#home .topics {
		margin-top: 1rem;
	}
	.home-topics {
		border: 1px dotted #6084A6;
		padding-left: 10px;
		height: 300px;
	}
	#home .topics .news h2.FIR {
		margin: 0;
	}

	#home #content .civil p.image,
	#home #content .pc p.image {
		float: left;
	}

	#home #content .civil,
	#home #content .pc {
		float: none;
		display: block;
		padding: 0;
		border-right: 0;
		border-bottom: 1px dotted #c6c9c6;
		width: 100%;
	}

	#home #content .cases {
		padding: 10px;
		margin: 0;
	}

	.news ul.menu-news li {
		width: 81px;
	}


	/*画像*/
	#home #main .swiper img {
		margin: 0;
	}

	/*事例紹介の正方形画像*/
	#home div .cases ul li a img {
		display: inline;
	}

	/* トップページのh2,h3背景画像変更 */
	#home #content div h2,
	#home .topics .news h2.FIR {
		width: 100%;
		
	}
	#home #content .civil h2 {
		background-image: url(../img/h2-home-civil.png);
	}
	#home #content .pc h2 {
		background-image: url(../img/h2-home-pc.png);
	}
	#home .topics .news h2.FIR {
		background-image: url(../img/h2-home-news.png);
	}

	#home #content .civil .cases h3 {
		background-image: url(../img/h2-home-cases-civil.png);
	}
	#home #content .pc .cases h3 {
		background-image: url(../img/h2-home-cases-pc.png);
	}
	
	/*=======================================================================================================================*/
	/*=======================================================================================================================*/




	/*=======================================================================================================================*/
	/*about内　微調整*/
	/*=======================================================================================================================*/
	
	/*委員会・役員名簿の調整*/
	table.members {
		border: none;
	}
	table.members thead,
	table.members tbody {
		border: 1px solid #a7aab0;
	}
	table.members th {
		width: auto;
	}

	/*会員名簿一覧の調整*/
	#about-members #lv02-01 div {
		float: none;
		display: block;
	}
	#about-members #lv02-01 div,
	#about-members #lv02-01 .lv03-01,
	#about-members #lv02-01 h3 {
		width: 100%;
		margin-left: 0;
	}

	
	/*お問合せフォームtable*/
	#about-contact table.info input,
	#about-contact table.info textarea {
		width: 95%;
	}

	/*=======================================================================================================================*/
	/*about　微調整おわり*/
	/*=======================================================================================================================*/



	/*=======================================================================================================================*/
	/*civil内　微調整*/
	/*=======================================================================================================================*/
	
	/*見出し青文字小さく*/
	#civil-plate-01 #content div.lead p span {
		font-size: 1.2rem;
	}

	
	/*CAD図面ダウンロード,数量計算ページ　dl*/
	#civil-bridge-01 table,
	table.spec {
		display: table;
		width: 100%;
	}
	.navigation-list {
        padding-left: 0;
	}
	#civil-cad-idx p img {
		margin: 0 2px 3px;
		display: inline-block;
	}
	#civil-cad-idx th,#civil-cad-idx td {
		min-width: 0;
	}
	#content .navigation-list li {
		text-wrap: nowrap;
		background-image: none;
	}
	.cell120 {
		width: fit-content;
		padding: 10px;
	}

	/*数量計算 input*/
	#civil-calc-idx .frmbox dt {
		margin-bottom: 0;
		padding-left: 1em ;
	}
	#civil-calc-idx .frmbox input {
        display: block;
		width: calc(100% - 2em);
        box-sizing: border-box;
        margin: 0 auto 0.5em;
	}
	
	/*Ducst 試験結果table*/
	#civil-cable-02 table:last-of-type th {
		text-wrap: wrap;
	}
	/*SCストランドtable*/
		table.sc-table {
			table-layout: fixed;
			display: table;
			width: 100%;
		}
		table.sc-table col:nth-child(2),
		table.sc-table col:nth-child(3) {
			width: calc((100% - 6em) / 2);
		}
	/* SCストランドtable - おわり */


	
	/* カンリくん/スーパーメタルフレーム table (/civil/anchor/06.html)(/civil/plate/01.html) */
		.half,
		.two_thirds {
			box-sizing: border-box;
			width: fit-content;
		}
		.half td,
		.half th,
		.two_thirds th,
		.two_thirds td,
		.kikakuBox th,
		.kikakuBox td,
		.standard td,
		.standard th {
			line-height: 1.3;
			text-wrap: nowrap;
		}
	/* スーパーメタルフレーム おわり*/
	

	/*  名簿　（/civil/members/）*/
	#civil-members-idx td.link {
		font-size: 12px;
	}

	/* 名簿おわり */

	/*=======================================================================================================================*/
	/* civil　微調整おわり */
	/*=======================================================================================================================*/
	


	/*=======================================================================================================================*/
	/*pc内　微調整*/
	/*=======================================================================================================================*/

	/* 見出し青文字調整 */
	div.lead p span {
		display: block;
		width: 100%;
		line-height: 1.3;
		padding: 0.5em 0;
	}
	#pc-material-02 #content div.lead p span {
		font-size: 1.2rem;
	}
	#pc-method-idx #content div.lead p span {
		font-size: 1rem;
	}
	/*青文字おわり*/

	#pc-material-02 table td {
		text-wrap: nowrap;
	}

	#content .inner .d-cases-330 div {
		float: none;
		margin: 0;
	}

	#pc-method-04 .weak {
		text-align: right;
	}

	/*SPC工法 table -- /pc/method/06.html*/
	.lv02-03-table th,
	.lv02-03-table td {
		min-width: 2em;
		line-height: 1.3;
	}
	.lv02-03-table thead th {
		text-wrap: nowrap;
	}
	/*=======================================================================================================================*/
	/*PC　微調整おわり*/
	/*=======================================================================================================================*/
}