@charset "UTF-8";
/* CSS Document */
body {
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  padding: 20px;
  background-color: #fff;
}
a {
	text-decoration: none!important;
}
.link-text {
    text-align: center;
	margin: 50px auto 50px;
    border: solid 2px #000;
    padding: 20px 0px;
    width: 50%;
}
@media (max-width: 991px) {
.link-text {
    width: 100%;
}
}
@media (max-width: 767px) {
.link-text {
	font-size: 3.5vw;
	padding: 10px 0px;
	line-height: 1.5em;
    margin: 50px 0px 20px;
}
}
@media (max-width: 376px) {
.link-text {
	font-size: 3.8vw;
}
}
.link-text a span{
	color: #000;
    font-weight: bold;
}
.link-text a span:hover{
	color: #9fb1a3;
}
@media (max-width: 767px) {
.sp-none{
	display: none;
}
}
/* タブ全体の基本 */
.tabs {
  margin: 0 auto;
}
/* ラジオボタンは非表示 */
.tabs input[type="radio"] {
  display: none;
}
/* タブ（ラベル）デザイン */
.tabs .tab-label {
  display: inline-block;
  padding: 10px 20px;
  margin-right: -1px;
  border: 2px solid #ccc;
  cursor: pointer;
  border-bottom: none;
}
@media (max-width: 991px) {
.tabs .tab-label {
	font-size: 13px;
}
}
@media (max-width: 767px) {
.tabs .tab-label {
	width: 100%;
	text-align: center;
	padding: 5px 20px 5px;
	font-size: 14px;
}
}
/*タブ切り替えのタイトル*/
@media (max-width: 767px) {
label.tab-label {
    display: block;
    text-align: center;
    padding: 12px 8px;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #ccc;
    border-radius: 8px;
    margin-bottom: 8px;
/*    background-color: #f5f5f5;*/
    word-break: break-word;
    line-height: 1.4;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 0;
    width: auto;
    border-radius: 8px 8px 0 0;
    padding: 10px 20px;
}
}

/* 選択中タブのスタイル */
.tabs input[type="radio"]:checked + .tab-label {
	background: #7ecef4a3;
	border-bottom: 1px solid #fff;
	font-weight: bold;
}
/* コンテンツエリア全体のスタイル */
.tab-content {
  border: 1px solid #ccc;
  padding: 20px;
  background: #fff;
  display: none;
}
/* チェックされたタブの内容を表示 */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}
h2.price-title {
    text-align: center;
    font-weight: bold;
    margin-top: 50px;
	color: #cc1e1e;
}
@media (max-width: 991px) {
.container.container-sp {
    padding-right: 0px;
    padding-left: 0px;
}
}
@media (max-width: 991px) {
h2.price-title {
	margin-top: 0px;
	font-size: 18px!important;
}
}
@media (max-width: 767px) {
h2.price-title {
	margin-top: 0px !important;
}
}
h2 {
  margin-bottom: 10px;
}
@media (max-width: 991px) {
h2, .h2 {
    font-size: 1.5rem!important;
    margin-top: 20px!important;
	text-align: center!important;
}
}
@media (max-width: 767px) {
h2, .h2 {
    font-size: 1.4rem!important;
}
}
@media (max-width: 767px) {
.title {
    font-size: 15px;
    margin-bottom: 10px;
}
}
/*表をポップアップ表示*/
span.pop-up {
    color: #e99736;
}
span.pop-up:hover{
    cursor: pointer;
}
table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #333;
  margin-bottom: 30px;
}
@media (max-width: 991px) {
table {
	margin-bottom: 10px;
}
}
tr.input-row.red th{
    padding: 6px 10px;
    text-align: center;
    background-color: #f0f0f0;
    font-weight: bold;
}
.roof-table td,
.roof-table th,
.coefficient-table td,
.coefficient-table th {
  border: 1px solid #333; /* 各セルに罫線 */
  padding: 6px 10px;
  text-align: center;
}
div#table-area {
    text-align: center;
}
@media (max-width: 440px) {
div#table-area.border-r{
    border-right: 2px solid #333;
}
}
.section-title th {
	background-color: #eee;
	font-weight: bold;
	font-size: 16px;
    border: 1px solid #333;
	text-align: center;
	padding: 6px 10px;
}
.input-row.red td {
  color: #000;
  border: 1px solid #333;
}
tr.input-row td{
    padding: 6px 10px;
	text-align: center;
}
@media (max-width: 991px) {
tr.input-row td{
display: inline-block;
    width: 100%;
    box-sizing: border-box;
	text-align: left;
	border-top: 1px solid #000;
}
}
.input-row.green td {
  color: #000;
  border: 1px solid #333;
	    padding: 6px 10px;
}
@media (max-width: 991px) {
.input-row.green td {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
	text-align: left;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
}
}
.input-row.beige td {
  background-color: #fff9c4;
  font-weight: bold;
  border: 1px solid #333;
}
.input-row.yellow td {
  background-color: #fff200;
  font-weight: bold;
  border: 1px solid #333;
}
.coefficient-table th {
  background-color: #eee;
  font-weight: bold;
  border: 1px solid #333;
}
/* ＋項目を追加 */
.btn-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px; /* 必要に応じて調整 */
}
.btn-container button {
  padding: 6px 12px;
}
/* ラストシールド行の上に余白を追加 */
tr.spacer-row td {
  height: 20px; /* 好きな高さに調整 */
  background: transparent;
  border: none;
  padding: 0;
}
th.coefficient-color {
    background-color: #eee;
}
tr.input-row.gray {
    background-color: #43aeea87;
}
@media (max-width: 767px) {
tr.input-row.gray,tr.input-row.yellow {
	font-size: 14px;
}
table.roof-table {
    border: 1px solid #333;
}
}
/* 価格系入力欄を右寄せ */
.price-right {
  text-align: right;
}
/*STEP2　足場価格*/
.roof-table th {
  background-color: #f0f0f0;
  font-weight: bold;
}

.input-row.red th,
.input-row.red td {
	border: 1px solid #333;
	padding: 6px 10px;
	text-align: center;
}
.price-right {
  text-align: right;
}
/*合計は黄色*/
th.roof-table-yellow {
    background-color: #fff200;
}
.roof-table-text {
    text-align: center;
	margin: -20px 0px 50px;
}
@media (max-width: 991px) {
.roof-table-text {
	margin: 0px 0px 50px;
}
}
/*入力欄の枠の垢*/
input.input-cell.yoko.waku-red,
input.input-cell.tate.waku-red,
input.input-cell.noki.waku-red,
input#awaYoko,
input#awaTate,
input#awaNokiko,
input.yoko.waku-red,
input.tate.waku-red,
input.noki.waku-red,
input.yoko,
input.tate,
input.noki,
input.open-w,
input.open-h,
sumStep1Total-2,sumAwaTotal-2,sumSubTotal-2,sumSiteExpense-2,sumPriceExcl-2,sumPriceIncl-2
{
    border: solid 2px #cc1e1e!important;
	width: 100%;
}
input#openings-total,input#seal-coef,input#coating-area,input#seal-length,input#awaTotalPrice-2,input#sumStep1Total-2,input#sumAwaTotal-2,input#sumSubTotal-2,input#sumSiteExpense-2,input#sumPriceExcl-2,input#sumPriceIncl-2,input#finalStep1-2,input#finalOption-2,input#finalBaseSum-2,input#finalAwa-2,input#finalTotal-2,input#finalExpense-2,input#finalExcl-2,input#finalIncl-2,input.open-area,input#openings-total-3,input#seal-coef-3,input#coating-area-3,input#seal-length-3,input#awaTotalPrice-3,input#sumStep1Total-3,input#sumAwaTotal-3,input#sumSubTotal-3,input#sumSiteExpense-3,input#sumPriceExcl-3,input#sumPriceIncl-3,input#awaTotalPrice-3,input#finalStep1-3,input#finalOption-3,input#finalBaseSum-3,input#finalAwa-3,input#finalTotal-3,input#finalExpense-3,input#finalExcl-3,input#finalIncl-3{
	width: 100%;
}
@media (max-width: 991px) {
input.input-cell.yoko.waku-red,
input.input-cell.tate.waku-red,
input.input-cell.noki.waku-red,
input#awaYoko,
input#awaTate,
input#awaNokiko,
input.touei,
input.coating,
input#totalSum,
input#paintArea,
input.input-8000-sp,
input#priceTotal,
input#step1PriceTotal,
input#awaArea,
input#awaTotalPrice,
input#sumStep1Total,
input#sumAwaTotal,
input#sumSubTotal,
input#sumSiteExpense,
input#sumPriceExcl,
input#sumPriceIncl,
input#finalStep1,
input#finalOption,
input#finalBaseSum,
input#finalAwa,
input#finalTotal,
input#finalExpense,
input#finalExcl,
input#finalIncl
{
	width: 100%;
	text-align: right;
}
}
/*オプション*/
div#option-trigger {
    font-size: 20px;
}
@media (max-width: 991px) {
tr.input-row.red {
    display: grid;
    width: 100%;
}
}
@media (max-width: 991px) {
/* ラベル（th）は非表示 */
tr.input-row.red th {
display: none;
}
/* 入力欄の行をグリッド化しラベル＋入力欄が並ぶように */
tr.input-row.red.input-row-sp {
	display: table-row;
}
tr.input-row.red.input-row-sp td:nth-child(1)::before { content: "横(mm)"; }
tr.input-row.red.input-row-sp td:nth-child(2)::before { content: "縦(mm)"; }
tr.input-row.red.input-row-sp td:nth-child(3)::before { content: "軒の出(mm)"; }
tr.input-row.red.input-row-sp td:nth-child(4)::before { content: "屋根投影面積(㎡)"; }

/* td内テキストを上に揃える */
tr.input-row.red.input-row-sp td {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	border: 1px solid transparent;
}
tr.input-row.red.input-row-sp2 td:nth-child(1)::before { content: "横(mm)"; }
tr.input-row.red.input-row-sp2 td:nth-child(2)::before { content: "縦(mm)"; }
tr.input-row.red.input-row-sp2 td:nth-child(3)::before { content: "軒高(mm)"; }
tr.input-row.red.input-row-sp2 td:nth-child(4)::before { content: "外壁面積(㎡)"; }
tr.input-row.red.input-row-sp3 td:nth-child(1)::before { content: "㎡単価"; }
tr.input-row.red.input-row-sp3 td:nth-child(2)::before { content: "価格（¥）"; }
tr.input-row.red.input-row-sp2 td,tr.input-row.red.input-row-sp3 td{
		 text-align: left;
}
}
@media (max-width: 991px) {
tr.input-row.green td[colspan="3"] {
/* colspan替わりにグリッドで1列＋制御 */
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
}
/* select 要素は新しい行に寄せる */
tr.input-row.green td select {
	display: inline-block;
	margin-top: 8px;
	width: 100%;
}
tr.input-row.green {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
}
@media (max-width: 991px) {
  tr.input-row-sp-contents td:nth-child(1)::before { content: "塗布面積（㎡）"; }
  tr.input-row-sp-contents td:nth-child(2)::before { content: "㎡単価"; }
  tr.input-row-sp-contents td:nth-child(3)::before { content: "価格（¥）";
}
}
@media (max-width: 991px) {
tr.input-row.input-row-sp.input-row-sp-none {
    display: none;
}
input.input-8000-sp,input.input-1600-sp{
    display: block;
    width: 100%;
}
}
/* ポップアップ全体 */
div#coef-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.popup-overlay {
position: fixed; /* absolute → fixed に変更 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
.popup-content {
    position: relative;
    background: #fff;
    border: 2px solid #333;
    padding: 20px;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    z-index: 1;
}
@media (max-width: 767px) {
.popup-content { 
	padding: 20px 10px;
}
}
@media (max-width: 767px) {
div#option-trigger {
    font-size: 16px;
}
}
.close-btn { 
	position:absolute; 
    top: -6px;
    right: -1px;
	font-size:18px; 
	background:none; 
	border:none; 
	cursor:pointer; 
	  position: absolute;
	background: transparent;
	font-size: 1.5em;
}
@media (max-width: 767px) {
th.coefficient-color {
    font-size: 13px;
}
}


/* siding-exterior-wall用スタイル */
/* ボタン横並び＆右寄せ配置 */
.siding-exterior-wall-btn-cell {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
/* ボタンの余計なスタイルを抑制 */
.siding-exterior-wall-btn-cell button {
  margin: 0;
}
/* ボタンとセル整列 */
.siding-exterior-wall-btn-row .btn-cell {
  display: flex;
  justify-content: flex-start; /* 左寄せ */
  gap: 8px;
}
/* ボタン見た目 */
.siding-exterior-wall-btn-row .btn-cell button {
  padding: 4px 8px;
  font-size: 14px;
  cursor: pointer;
}
table .delete-open-btn {
  margin-left: 8px;
}

/*サイディング外壁メンテナンス///////////////////*/
/* ボタンセル（面積入力下） */
/* テーブル全体の幅を固定してボタン位置のズレを防止 */
#table-area-2 table {
  width: 100%;
  border-collapse: collapse;
}
/* 面積セル下にボタンが揃うようtd幅確保 */
td.siding-exterior-wall-btn-cell {
  width: auto;
}
/* 読み取り専用入力の背景色調整 */
input[type=number][readonly] {
  background: #f9f9f9;
}
/* ボタン配置セル */
.siding-exterior-wall-btn-cell {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}
/* ボタン共通デザイン */
.siding-exterior-wall-btn-cell button {
  padding: 6px 12px;
  font-size: 14px;
  border: 2px solid #333;
  background: #fff;
  cursor: pointer;
  transition: background .2s;
	 background: #f0f0f0;
    color: #000!important;
}
.siding-exterior-wall-btn-cell button:hover {
  background: #f0f0f0;
}
/* 面積セル下にボタンが揃うようtd幅確保 */
td.siding-exterior-wall-btn-cell {
  width: auto;
}
/* 読み取り専用入力の背景色調整 */
input[type=number][readonly] {
  background: #f9f9f9;
}
tr.opening-total-row {
    background-color: #fff9c4;
    font-weight: bold;
    border: 1px solid #333;
}
@media (max-width: 991px) {
tr.opening-total-row {
	display: table-row;
}
}
@media (max-width: 991px) {
tr.opening-total-row td{
   display: block;
    width: 100%;
    box-sizing: border-box;
	padding: 6px 10px;
}
}
td.opening-total-row-text{
     text-align: center; 
}
button.open-area-button,button.delete-open-btn {
    background-color: #f0f0f0;
}
@media (max-width: 991px) {
tr.siding-exterior-wall-btn-row {
    display: block;
}
}
/*サイディング外壁メンテナンスのSP*/
@media (max-width: 991px) {
tr.input-row.red.input-row-sp.input-row-sp-siding td:nth-child(1)::before { content: "横(mm)"; }
tr.input-row.red.input-row-sp.input-row-sp-siding td:nth-child(2)::before { content: "縦(mm)"; }
tr.input-row.red.input-row-sp.input-row-sp-siding td:nth-child(3)::before { content: "軒高(mm)"; }
tr.input-row.red.input-row-sp.input-row-sp-siding td:nth-child(4)::before { content: "外壁面積(㎡)"; }

tr.input-row.red.input-row-sp2.input-row-sp-siding td:nth-child(1)::before { content: "No."; }
tr.input-row.red.input-row-sp2.input-row-sp-siding td:nth-child(2)::before { content: "横(mm)"; }
tr.input-row.red.input-row-sp2.input-row-sp-siding td:nth-child(3)::before { content: "縦(mm)"; }
tr.input-row.red.input-row-sp2.input-row-sp-siding td:nth-child(4)::before { content: "面積(㎡)"; }
tr.input-row.red.input-row-sp3.input-row-sp-siding td:nth-child(1)::before { content: "㎡単価"; }
tr.input-row.red.input-row-sp3.input-row-sp-siding td:nth-child(2)::before { content: "価格（¥）"; }
}
.button#add-btn{
	border: 2px solid #333!important;
	color: #000!important;
}


/*ダウンロードボタン*/
.pdf-button {
  background-color: #1976d2;
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: background-color 0.3s;
}
.pdf-button:hover {
  background-color: #115293;
}
.pdf-button .icon {
  font-size: 18px;
}
.button-container {
  text-align: center;
  margin-top: 30px;
}