@charset "UTF-8";


/* ヘッダー */
header#header {
	/* display: none; */
    /* display: flex; */
    justify-content: space-between;
    /* padding: 25px 70px 20px 45px; */
	background-color: #FFFFFF;
	/* box-shadow: 0 3px 5px 0 rgb(0 0 0 / 50%); */
	z-index: 1;
}

#header #site-id {
	display: flex;
    /* height: 60px; */
    align-items: center;
}

#site-id a {
	display: flex;
    height: 56px;
    align-items: center;
    background-image: url(https://tohodensen.t-59.com/wp/wp-content/themes/tohodensen/img/logo-mark.svg);
    background-repeat: no-repeat;
    background-size: contain;
    text-indent: 85px;
    font-size: 24px;
    color: #293b6d;
    font-family: serif;
    font-weight: bold;
    letter-spacing: 2px;
}

#site-id a:hover {
	text-decoration-line: none;
}

#header #menu-area {
	display: flex;
}

#mega-menu-mainmenu {
	visibility: visible;
    text-align: center;
    padding: 0px 0px 0px 0px;
	margin: 0px;
}

#mega-menu-mainmenu li {
	margin: 0 0px 0 0;
    display: inline-block;
    height: auto;
    vertical-align: middle;
}

header#header #menu-area nav#main-menu #mega-menu-wrap-mainmenu #mega-menu-mainmenu > li.mega-menu-item > a.mega-menu-link {
    border-right: 1px #666 solid;
}

#mega-menu-mainmenu > li.mega-menu-item > a.mega-menu-link {
    line-height: 60px;
    height: 60px;
    padding: 0px 40px 0px 40px;
    vertical-align: baseline;
    width: auto;
    display: block;
    color: #666;
    text-transform: none;
    text-decoration: none;
    text-align: left;
    background: rgba(0, 0, 0, 0);
    border: 0;
    border-radius: 0;
    font-family: serif;
    font-size: 17px;
    font-weight: normal;
    outline: none;
}

header#header #menu-area nav#main-menu #mega-menu-wrap-mainmenu #mega-menu-mainmenu>li.mega-menu-item>a.mega-menu-link small {
    display: none;
}

header#header #menu-area nav#main-menu #mega-menu-wrap-mainmenu #mega-menu-mainmenu>li.mega-menu-item>a.mega-menu-link:hover {
	background-color: #BBDEFB;
}

header#header #menu-area #contact-link {
	height: 60px;
}

header#header #menu-area #contact-link a {
	/*display: flex;
	height: 60px;
	align-items: center;*/
	display: block;
	background-image: url(https://tohodensen.t-59.com/wp/wp-content/themes/tohodensen/img/mail-mark.svg);
	background-repeat: no-repeat;
	/*background-size: contain;*/
	background-size: 29px 17px;
	background-position: top 5px center;
	/*padding-top: 25px;*/
	height: 25px;
	padding: 35px 35px 0;
	text-align: center;
	color: #666;
}

header#header #menu-area #contact-link a i {
	margin-left: 0.5em;
	/*font-size: 1.3em;*/
}

header#header #menu-area #contact-link a:hover {
	background-color: #BBDEFB;
	text-decoration: none;
	color: #293b6d;
}

/* ページメイン */
#page-main {
	font-family: "Noto Sans JP", "serif", "Hiragino Kaku Gothic ProN", sans-serif;
	/* background-color: #f8f6ef; */
	background-color: #faf9f7;
}

#customer-top-img {
	padding: 25px;
}

/* 文字の大きさ */
#page-main p {
	font-size: 15px;
}

#page-main h1 {
	margin: 10px 3px 5px;
	color: #444444;
}

/* box */
.page-user .box {
	padding: 10px 20px;
}

/* ヘッダー */
.box h2 {
	margin: 0 0 20px;
	/* color: #E91E63; */
	font-size: 22px;
	text-align: center;
}


/* 利用者TOP画面 画像・ボタンエリア */
#top-main-area {
	display: flex;
    flex-direction: column;
	padding-top: calc(45vh - 50%);
}

/* 利用者TOP画面 ボタンエリア */
#system-start-button-area {
	display: flex;
	gap: 10px;
	padding: 10px;
    margin: 0 1% 0 auto;
	margin-top: -10%;
}

/* 利用者TOP画面 説明エリア */
#top-explain-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 2vh;
}

/* 利用者TOP画面 画像エリア */
#image-area {
	padding: 10px;
}

/* 利用者TOP画面 メイン画像 */
#customer-top-img img {
	width: 35vw;
	min-width: 700px;
}

/* テーブル */
.box table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	font-size: 15px;
}

.box table tbody tr {
	border-bottom: dashed 1px #BBBBBB;
}

.box table tbody tr:last-of-type {
	border-bottom: none;
}

.box table tbody th {
	padding: 13px 10px 13px 5px;
	/* color: #E91E63; */
	text-align: left;
}

.box table tbody td {
	padding: 9px 5px 9px 10px;
}

/* フォーム */
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="password"],
textarea,
select {
	/* padding: 3px 5px 5px; */
	font-family: "Noto Sans JP", "メイリオ", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size: 15px;
}

/* サブミットボタンエリア */
.submit-area {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 10px 0 5px;
}

.submit-area .button {
	display: inline-block;
	margin: 5px 10px;
}

/* 共通上部（進行やタイトル等） */
.common-head-box {
	display: flex;
	flex-direction: column;
	margin: 0 auto 0 0;
	min-width: 630px;
}

.selection-process {
	display: flex;
	align-items: center;
	list-style: none;
	padding:0;
	font-size: 12px;
}

.selection-process * {
	padding: 0 0 0 3px;
	
}

.select-page {
	color: #00C853;
	font-size: 120%;
}

/* 共通上部（部品選択ボックス） */
.box-head {
	/* padding: 5px; */
}

.box-head-left-menu {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	padding: 10px 0px 10px 0px;
}

.box-head-left-menu h3 {
	margin-top: 2px;
	margin-bottom: 2px;
	font-size: 18px;
}

#head-menu-explain {
	font-size: 15px;
	padding: 3px;
}

#head-menu-explain::before,
#head-menu-explain::after {
	content: "-";
}

.hidden {
	display: none;
}

.box-head-right-menu {
	/* display: block; */
	font-size: 13px;
	text-align: right;
	margin: 0 5px 0 auto;
}

.reset-button {
	margin: auto 5px 0 auto;
	vertical-align: bottom;
}

#top-page {
	text-align: center;
}

/* コネクト登録システム */
.connection-system-area {

}

.estimate-complete-area {
	display: flex;
	justify-content: center;
	padding: 30px;
}

#check-img {
	display: flex;
	flex-direction: column;
	color: #00C853;
}

#check-img i {
	margin: auto;
	font-size: 150px;
}

#check-img p {
	margin: auto;
	font-size: 30px;
	font-weight: bold;
}

.message-area {
	min-width: 380px;
	padding: 20px 0 20px 0;
}

.message-area p {
	margin: 2px;
	font-size: 14px;
	/* color: #00C853; */
}

#regist-in-message {
	color: #00B0FF;
}

.message {
	display: flex;
}

.message.caution {
	color: red;
	font-size: 18px;
    font-weight: bold;
}

.canvas-area {
	padding-bottom: 15px;
}

.button-area.horizontal {
	display: flex;
}

.button-area.centor {
	align-items: center;
	margin:auto;
}


/* 部品選択（選択用リスト欄＋選択した部品の表示欄） */
.select-page-contents-area {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 25px;
}

/* 選択用リスト欄 */
.select-parts-area {
	display: flex;
	flex-direction: column;
}

/* 検索欄 */
.search-area {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 5px;
	background-color: #dae3f3;
	border-radius: 3px;
	font-size: 13px;
	font-weight: bold;
	margin-bottom: 5px;
}

.search-title {
	margin: 0 2px;
	padding: 0;
	color: #4472C4;
	font-size: 15px;
	font-weight: bold;
}

.search-input-box {
	display: flex;
	align-items: center;
	margin-left: 0.7em;
	margin-top: 1px;
	margin-bottom: 1px;
}

.search-input-box input[type="text"], .search-input-box input[type="date"], .search-input-box [type="number"]{
	padding: 1px 2px;
	font-size: 13px;
	background-color: white;
}

.search-input-box select {
	padding: 0px;
	font-size: 13px;
	background-color: white;
}

/* 部品一覧表示 */
.parts-area {
	display: flex;
	flex-direction: column;
	width: 60vw;
	max-width: 1280px;
	min-width: 650px;
	height: auto;
	max-height: 60vh;
}

/* 色情報 */
#color-table {
	table-layout: auto;
}

.color-list-area {
	display: flex;
	flex-direction: column;
	max-width: 320px;
	min-width: 250px;
}

.color-list-area input{
	padding: 0;
}

.select-socket-number-col {
	width: 6em;
}

.select-color-name-col {
	/* width: 4em; */
}

.select-color-bar-col {
	width: 7em;
}

.list-area {
	display: flex;
	overflow-y: scroll;
}

.list-table {
	overflow-wrap: break-word;
	word-break: break-all;
	table-layout: fixed;
	width: 100%
}

/* 部品一覧のボーダー設定 */
.list-table tr, .list-table td, .list-table th {
	border-style: solid;
	border-color: white;
}

/* 選択中の部品リスト */
.selected-parts-list {
	margin-bottom: 10px;
	background-color: #FFFFFF;
}

.selected-parts-list tr {
	/* background-color: #EEEEEE; */
}

.selected-parts-list td {
	height: 23px;
}

.selected-parts-list tr, .selected-parts-area td, .selected-parts-area th {
	border-color: transparent;
}

.list-table.parts-list {
	min-width: 720px;
}

.list-table .selected {
	min-width: auto;
}

.list-table thead th {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	z-index: 1;
	padding: 5px 5px;
	background-color: #4472C4;
	color: #FFFFFF;
	font-size: 13px;
	/* border-style: solid; */
}

.selected-parts-list.list-table thead th {
	background-color: #00ACC1;
}

#re-select-button-col {
	width: 4em;
	background-color: #EEEEEE;
	border-color: #EEEEEE;
}

#re-select-button-td {
	border-color: #EEEEEE;
	background-color: #EEEEEE;
}

#re-select-button {
	background-color: transparent;
	padding: 0px;
}

#re-regist-button {
	width: 5em;
	font-weight: normal;
	padding: 5px;
}

.list-table tbody td, .list-table tbody tr {
	padding: 2px 5px;
	font-size: 14px;
	/* border-style: solid; */
	/* border-color: white; */
	text-align: center;
	overflow-wrap: anywhere;
	height: 25px;
}

/* テーブル内要素左寄せ */
.list-table tbody td.text-left {
	text-align: left;
}

/* 行 */
.list-table tbody tr.hidden {
	display: none;
}

/* クリックできる行 */
.available-click:hover {
	cursor: pointer;
}

/* 偶数行 */
.list-table tbody tr:nth-child(2n), #list-table-nth-child-1 {
	background-color: #dae3f3;
}

/* 奇数行 */
.list-table tbody tr:nth-child(2n-1), #list-table-nth-child-0 {
	/* background-color: #EDEDED; */
	background-color: #FFFFFF;
}

#estimate-detail-selected-parts-table tr,#estimate-detail-selected-parts-table td  {
	border-color: transparent;
}

#estimate-detail-selected-parts {
	background-color: transparent;
}

/* 発光前 */
.select-parts-detail-td {
	background-color: transparent;
	transition: background-color 2s;
}

.flash-target {
	/* color: #333333; */
	background-color: transparent;
	transition: background-color 2s, color 2s;
}

.list-table.selected-parts-list tbody tr {
	background-color: transparent;
	/* transition: background-color 5s; */
}

/* 発光（変化した欄）*/
.flash {
	background-color: #81D4FA;
	transition-duration: 0s;
}

.flash-selected-parts {
	/* color: transparent; */
	background-color: #81D4FA;
	transition-duration: 0s;
}

/* 現在選択された部品詳細行 */
.select-parts-td {
	background-color: #81D4FA;
}

/* テーブル内の入力要素 */
.list-table input {
	text-align: center;
	background-color: transparent;
	border: none;
	white-space: normal;
}

.list-table input:disabled {
	background-color: transparent;
}


/* テキストエリア */
.text-area {
	padding: 10px 0;
}

/* ワイヤ寸法 */
.wire-size-input {
	width: 5em;
}

/* 数量 */
.mitumori-sum-input {
	width: 5em;
}

.mitumori-sum-input.confirm {
	border-color: transparent;
}


/* 選択された部品表示欄 */
.selected-parts-area {
	background-color: #EEEEEE;
	box-shadow: 0 3px 5px 0 rgb(0 0 0 / 50%);
	border-radius: 15px;
	max-width: 350px;
	min-width: 350px;
	display: flex;
	flex-direction: column;
	margin: 20px;
	padding: 10px;
}

.selected-parts-area.add-button {
	max-width: 400px;
}

.list-box.select-parts {
	padding: 15px;
}


.left-button {
	margin: 0 0 0 auto;
	padding: 10px;
}

.wire-size-area {
	padding: 15px;
	display: flex;
	flex-direction: column;
	font-weight: bold;
	font-size: 18px;
}

.sum-area {
	padding: 15px;
	display: flex;
	align-items: center;
	font-weight: bold;
	font-size: 18px;
}

#input-mitumori-number {
	font-size: 18px;
}

/* 選択できる電線色 */
#select-wire-colors {
}

.wire-color-list-area {
	display: flex;
	flex-direction: column;
	width: 145px;
	margin: auto;
}

.wire-color-area {
	display: flex;
	/* justify-content: center; */
}

.wire-color-label {
	display: flex;
    background: white;
    width: 45px;
    border-radius: 2px;
    justify-content: center;
    margin: 2px;
}

/* 入力用テーブル */
.input-table tr, #mitumori-sum tr {
	border-color: transparent;
}

.input-table th,td {
	text-align: left;
	border: none;
}

.input-table th {
	padding-right: 5vw;
}

.input-table td {
	width: 25em;
}

.input-table input,textarea {
	width: 100%;
}

/* 顧客情報 */
#user-box {
	width: 100%;
	min-width: 350px;
	height: 100%;
	font-size: 16px;
    padding: 15px;
    margin: 10px;
	background-color: white;
}

#user-box td, #user-box th {
	/* width: 10em; */
	vertical-align: top;
	text-align: left;
	padding: 6px 20px 6px 4px;
}

#user-box table {
	table-layout: fixed;
}

#user-box th {
	width: 20%;
}

#user-box td {
	width: 70%;
}

.box-body.estimate-detail {
	display: flex;
    flex-direction: column;
    width: 940px;
    /* width: 650px; */
    flex: 1;
    height: 0;
    margin-bottom: 0;
    padding: 15px;
}

#parts-position {
	background-color: #CFD8DC;
}

/* 選択された部品 */
#selected-parts-left, #selected-parts-center, #selected-parts-right {
	width: 33%;
	/* padding: 5px; */
	/* 背景を白にしない場合、 maringを取り消す*/
	margin: 5px;
	/* background-color: white; */
	/* background-color: #EEEEEE; */
	/* background-color: transparent; */
	border-radius: 10px;
}

#selected-parts-left {
	margin: 0 auto 0 0;
}

#selected-parts-center {
	margin: 0 auto 0 auto;
}

#selected-parts-right {
	margin: 0 0 0 auto;
}


/* タブレット以下 */
@media (max-width: 1023px) {

}

/* スマートフォン */
@media (max-width: 767px) {
	/* 文字の大きさ */
	#page-main p {
		font-size: 16px;
	}

	/* box */
	#page-main .box {
		padding: 10px 10px;
	}

	/* ヘッダー */
	.box h2 {
		margin: 10px 0 10px;
	}

	/* テーブル */
	.box table {
		/* table-layout: fixed; */
		max-width: 100%;
	}

	.box table.sp-block tbody th {
		display: block;
		padding: 15px 5px 5px 5px;
	}

	.box table.sp-block tbody td {
		display: block;
		padding: 5px 5px 15px 5px;
	}

	/* 内側のテーブル */
	.box table.sp-block table {
		border-top: none;
	}

	.box table.sp-block table th {
		display: table-cell;
	}

	.box table.sp-block table td {
		display: table-cell;
	}

	/* フォーム */
	input[type="text"],
	input[type="number"],
	input[type="tel"],
	input[type="email"],
	input[type="date"],
	input[type="password"],
	textarea,
	select {
		font-size: 16px;
	}
}