@charset "Shift_jis";

.wrapper {
	box-sizing: border-box;
	width: 100%;
	max-width: 820px;
	margin: 0 auto;
	padding: 0 10px;
}

.wrapper img {
    max-width: 100%;
    height: auto;
	vertical-align: bottom;
}

.wrapper table {
	border-collapse: collapse;
	font-size: 14px;
}

.wrapper ul {list-style: none; padding-left: 0;}

.wrapper figure {margin: 0;text-align: center;}

.wrapper figcaption {text-align: center;font-size: 0.9em;}

sup {font-size: .6em;}



/* ヘッダー */
.site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.site-header h1 {
	margin: 0;
	padding: 0;
	line-height: 22px;
}

.header-bar {
	border-bottom: 1px solid #ccc;
	margin: 4px 0;
}

.page-nav {
	font-size: 13px;
	margin: 1em 0;
	display: flex;
	flex-wrap: wrap;
	word-break: keep-all;
}


/* フッター */
.contact {
	text-align: center;
	font: 11pt/1.25 sans-serif;
}

.contact h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 11pt;
	color: #0066FF;
}

.contact h2::before,
.contact h2::after {
	content: "";
	flex: 1;
	height: 2px;
	background: #0066FF;
}

.contact address { font-style: normal; }

.contact .small { font-size: 10pt; }

.contact .green { color: #008000; }


/* メインタイトルバー */
.title-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #73CC87;
	padding: 8px 16px;
	font-size: 20px;
	color: #ffffff;
	font-weight: 600;
	margin-bottom: 16px;
}

/* セクション見出し (緑ストライプ / 青枠) */
.heading-green {
	background: repeating-linear-gradient(-45deg, #f1fff0, #f1fff0 3px, #ddfbd8 3px, #ddfbd8 7px);
	padding: 8px 16px;
	border-top: 2px solid #008000;
	border-bottom: 2px solid #008000;
	font-size: 18px;
	color: #008000;
	font-weight: 600;
	margin-top: 2rem;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
}

.heading-blue-sub {
	background-color: #E6F2FF;
	padding: 6px 12px;
	border-left: 4px solid #000080;
	color: #000080;
	font-weight: bold;
}

/* 汎用クラス */
.highlight-red {
	color: #FF3300;
	font-weight: bold;
}

/*右下の戻るリンク*/
.nav-link {
	display: flex;
	justify-content: end;
	font-size: 13px;
}

.nav-link.footer {
	margin-top: 3rem;	
}

/* カタログへのリンク 
   ================================================== */
.dl-box {
    width: 230px;
}

.dl-box-title {
    background: #73CC87;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 4px 8px;
}

.dl-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-top: none;
    background: #fff;
}

.dl-link {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding: 4px;
    font-size: 13px;
    text-decoration: none;
    color: #0000FF;
}

.dl-item {
    border-bottom: 1px solid #f0f0f0;
}

.dl-item:last-child {
    border-bottom: none;
}

.dl-icon {
    width: 20px;
    height: 22px;
    flex-shrink: 0;
}

.dl-icon2 {
    width: 53px;
    height: 20px;
    flex-shrink: 0;
}

.gaiyou_section_iji .dl-list,
.gaiyou_section_iji .dl-item {
	border: none;
}

.gaiyou_section_iji .dl-link {
	width: fit-content;
	font-size: 1rem;
}

/* 角丸リンク */
.box-link {
	width: 260px;
	padding: 6px;
	margin: 0 0 1rem auto;
	text-align: center;
	background-color: #f9f9f9;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 13px;
}

/* 横一列のデータ */
.row-oneline {
	display: grid;
	grid-template-columns: auto 1fr; /* 1列目：dtの幅（自動）、2列目：ddの幅（残りの空間） */
	gap: 4px 12px;
}
.row-oneline dd {
	margin-left: 0;
}

/*-- ここから概要ページのスタイル --*/

/* 概要セクション レイアウト */
.overview-container {
	display: flex;
	gap: 1rem;
}

.overview-text {
	width: calc(100% - 287px);
}

.overview-text p {
	margin: .5rem 0 2em .5rem;
}

.overview-image {
	width: 271px;
	text-align: center;
}


/* -- gk.asp専用 -- */
.gk.overview-text {
	width: calc(100% - 376px);
}

.gk.overview-text p {
	margin: 0 0 1rem .5rem;
}

.overview-i-gk {
	text-align: center;
	width: 360px;
}
/* -- /gk.asp専用 -- */


/* 特長セクション リスト (ulタグ用) */
.feature-list {
	list-style: none;
	padding: 8px 0 16px 8px;
	margin: 0;
}

.feature-title {
	width: 120px;
	flex-shrink: 0;
	color: #FF3300;
	font-weight: bold;
}

.feature-list li::before {
	display: inline-block;
	content: "\25CF";
	color: #006699;
}

.toku-txt {
	margin-bottom: 8px;
	display: inline-flex;
	flex-wrap: wrap;
	max-width: calc(100% - 24px);
}

.toku-bio {max-width: calc(100% - 120px);}


/* カラーセクション */
.color-box {text-align: center;width: 50%;}


/* 施工手順 グリッド */
.tejun-flex {
	width: 676px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	border: 1px solid #000080;
}

.tejun-grid {
	flex: 0 0 337px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 33px auto;
}

.tejun-grid:nth-child(odd) {
	border-right: 1px solid #000080;
}

.tejun-name {
	background-color: #e6f2ff;
	padding-left: 0.5em;
	line-height: 33px;
	border-top: 1px solid #000080;
}

.tejun-grid:nth-child(1) .tejun-name,
.tejun-grid:nth-child(2) .tejun-name {
	border: none;
}

.tejun-img {
	text-align: center;
	padding: 5px 0;
	border-top: 1px solid #000080;
}


/* 構造セクション */
.kouzou-wrap, .dl-wrap {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1em;
}

.kouzou-wrap figure {
	flex: 0 0 auto;
}

.kouzou-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: end;
}

.kouzou-flex figure {flex: 0 0 262px;}

.yl-txt {
	width: 100%;
	background-color: #FF9;
	text-align: center;
	padding: 5px 0 2px;
	margin: 1em 0;
}


/* 設計セクション */
.dl-wrap {gap:1rem;align-items: flex-start;}

.dl-wrap p {width: calc(100% - 286px); margin: 0;}

.border-box {
	border: 1px solid #000080;
	padding: 12px;
	margin: 0 auto;
	width: 90%;
}

.formula-title {
	color: #000080;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
}

.formula-note,
.formula-list dt {text-align: right;}

.formula-list {
	display: inline-grid;
	grid-template-columns: auto 1fr;
	gap: 4px 8px;
	text-align: left;
	font-size: 13px;
}

.formula-list dd {margin: 0;}

.formula-var {color: #000080;}

/* gaiyou.asp　規格のテーブル */
.tbl-01 {
	width: 60%; margin: 16px auto;
	border: 1px solid #666;
}

.tbl-01 th, .tbl-01 td {
	border: 1px solid #666;
	padding: 4px;
	text-align: center;
	word-break: keep-all;
}

.tbl-01 th {
	background-color: #EBEBD8;
	font-weight: normal;
}

.double-border td {
	border-top: 2px double #000 !important;
	border-bottom: 2px double #000 !important;
}

/* 施工例 グリッド */
.example-group {
	margin-bottom: 16px;
}

.example-title {
	background-color: #E8E8E8;
	padding: 6px 12px;
	margin-bottom: 8px;
}

.example-images {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.example-card {
	text-align: center;
}
/*--

	ここまで概要ページのスタイル

--*/




@media screen and (max-width:768px) {
	sup {font-size: .5em;}
	.wrapper {
		overflow: clip;
	}

	.wrapper img {max-width: 100%;}

	.title-bar {
		font-size: 1.1rem;
		flex-wrap: wrap;
		padding: 8px 0.5rem;
	}

    .dl-box {
        width: 100%;
    }

	/* 表の囲み用box */
	.tbl-wrapper {
		width: 100%;
		overflow-x: scroll;
	}
	.tbl-01 {
		width: auto;font-size: 13px;
	}

	.overview-container,.kouzou-wrap, .kouzou-flex,.dl-wrap {
		flex-wrap: wrap;
		justify-content: center;
	}

	.toku-txt {flex-direction: column;}
	.toku-bio {max-width: 100%;}

	.color-box {width: auto;}

	.tejun-flex {width: 100%;}
	.tejun-grid {flex: 0 0 100%;}
	.tejun-grid:nth-child(odd) {
		border: none;
	}
	.tejun-grid:nth-child(2) .tejun-name {
		border-top: 1px solid #000080;
	}
	.gk.overview-text,
	.overview-i-gk,
	.overview-text,
	.dl-wrap p {width: 100%;}

	.overview-i-gk iframe {
		max-width: 100%;
		height: auto;
	}

}

@media print {
	.wrapper {
		min-width: 1024px; /* PC版の基本幅に合わせる */
		width: 1024px;
	}
}