@charset "utf-8";

/*------------------------------------------------------------
  base
------------------------------------------------------------*/
#wrapper {
	padding: 0 0 40px 0;
}
.contents {
	line-height: 1.8;
	padding-top: 50px;
	padding-bottom: 60px;
}
.contents img {
	max-width: 100%;
	height: auto;
}
.tro_etc a {
	color: #63bcb8;
}
.tro_ap a {
	color: #63bcb8;
}
.red {
	color: #f35b69;
}
.bold{
	font-weight: bold;
}
.text-weight-normal{
	font-weight: 400;
}
.text-small {
	font-size: .85em;
}
.align-left {
	text-align: left;
}
.align-center {
	text-align: center;
}
.repair_text {
	font-size: 16px;
}
.big_text {
	display: block;
	font-size: 18px;
	padding: 10px 0;
}
.big_text span {
	text-align: left;
	display: inline-block;
}
.fontBoldMore{
	font-weight: bold;
	font-size: 105%;
	background: linear-gradient(transparent 65%, #FFEEC1 0%);
}
.fontBoldMore2{
	font-size: 105%;
	border-bottom: solid 1px black;
}
.cp_button08 {
	display: inline-block;
	max-width: 320px;
	min-width: 200px;
	margin: 15px auto;
	padding: 1em 1.5em;
	line-height: 1.4;
	border: 1px solid #263238;
	border-radius: 100vh;
	background: #263238;
	color: #FFFFFF;
	text-align: center;
	transition: box-shadow .2s ease-out;
}
.cp_button08:hover {
	box-shadow: 0 4px 4px rgb(38 50 56 / .4);
	color: #FFFFFF;
}
.h2title {
	width: 100%;
	padding: 5px 0 7px 10px;
	font-size: 1.2em;
	font-weight: bold;
	border-left: 12px solid #63bcb8;
	border-bottom: 1px solid #63bcb8;
	text-align: justify;
	margin: 50px 0px 30px;
}
#cp01_in{
	padding-top: 70px;
	margin-top:-70px;
}
@media screen and (min-width: 992px) {
	.repair_text {
		font-size: 19px;
	}
	.big_text {
		padding: 30px 10px;
		font-size: 22px;
	}
}

/*------------------------------------------------------------
  detector-head
------------------------------------------------------------*/
.detector-head {
	display: grid;
	gap: 25px;
}
.detector-head__title {
	text-align: center;
	font-size: 20px;
}
.detector-head__sentence {
	inline-size: fit-content;
	margin-inline: auto;
}
@media screen and (min-width: 992px) {
	.detector-head {
		gap: 40px;
	}
	.detector-head__title {
		font-size: 24px;
	}
}

/*------------------------------------------------------------
  detector-sub-menu
------------------------------------------------------------*/
.detector-sub-menu-container {
	width: min(560px,100%);
	margin: 0 auto;
}
.detector-sub-menu {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2,1fr);
}
.detector-sub-menu__item {
	display: contents;
}
.detector-sub-menu__link {
	display: grid;
	align-items: center;
	padding: 10px 5px;
	border: 1px solid currentColor;
	background: #fff;
	color: #565656;
	font-weight: 500;
	font-size: 13px;
	text-align: center;
	border-radius: 3px;
	transition: background .2s ease-out;	
}
.detector-sub-menu__link--invalid {
	background: #63bcb8;
	border-color: #63bcb8;
	color: #263238;
	pointer-events: none;
}
@media screen and (min-width: 992px) {
	.detector-sub-menu-container {
		width: 100%;
	}
	.detector-sub-menu {
		grid-template-columns: repeat(4,1fr);
	}
	.detector-sub-menu__link {
		padding: 12px 10px;
		font-size: 16px;
	}
}
@media screen and (min-width: 1200px) {
	.detector-sub-menu {
		gap: 20px;
	}
}
@media (any-hover: hover) {
	.detector-sub-menu__link:hover {
		background: #63bcb8;
		border-color: #63bcb8;
		color: #263238;
	}
}
@media (any-hover: none) {
	.detector-sub-menu__link:hover {
		color: inherit;
	}
	.detector-sub-menu__link:active {
		background: #59b6b7;
		border-color: #59b6b7;
		color: #263238;
	}
}

/*------------------------------------------------------------
  trouble_tel
------------------------------------------------------------*/
.trouble_tel {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	padding: 20px;
	background:#f4f4f4;	
}
.trouble_tel .tro_telcard {
	width: 100%;
	padding: 20px;
	line-height: 1.8;
	border: solid 1px #63bcb8;
}
.trouble_tel .h3title_tel,
.trouble_tel_outside {
	width: 100%;
	height: auto;
	line-height: 1.2em;
	background: #b2dfdb;
	padding: 10px;
	font-size: 1.2em;	
}
.trouble_tel .h3title_tel h3 {
	inline-size: fit-content;
	margin-inline: auto;
}
@media screen and (min-width: 768px) {
	.trouble_tel .tro_telcard {
		width: calc(50% - 10px);
		padding: 30px;
	}
}
@media screen and (min-width: 992px) {
	.trouble_tel {
		padding: 30px;
		gap: 30px;
	}
	.trouble_tel .tro_telcard {
		width: calc(50% - 15px);
	}
}

/*------------------------------------------------------------
  mainte
------------------------------------------------------------*/
.mainte {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	gap: 30px;
	width: 100%;
	margin: 20px auto;
	background: #fff;
	border-radius: 10px;
	padding: 30px 20px;
}
.nomainte {
	width: 80%;
	margin: 0 auto;
	text-align: justify;
}
.mainte img {
	margin-top: 20px;
	margin-bottom: 20px;
}
.mainte_img {
	min-width: 250px;
	width: 80%;
	max-width: 412px;
	text-align: center;
}
.mainte_img_title {
	height: 40px;
	line-height: 40px;
	font-weight: bold;
	text-align: center;
	background: #e8f5f4;
	margin: 0 auto 20px;
}
.mainte_head,
.mainte_head-sub {
	max-width: 840px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.mainte_head-sub {
}
.mainte_head_title {
	font-weight: 700;
	font-size: 20px;
	text-align: center;
}
.mainte_head-sub_title {
	font-weight: 700;
	font-size: 18px;
}
.mainte_w100 { width: 100%; }

.mainte_text{
	width: 90%;
	height: auto;
	margin: auto;
	text-align: justify;
	border: solid 1px #AEDAD6;
	padding: 20px;
}
.mainte_img_text {
	margin: auto;
	padding: 20px;
	border: solid 1px #AEDAD6;
	text-align: left;
}
@media screen and (max-width: 991px) {
	.mainte img {
		width: 100%;
		height: auto;
	}
}
@media screen and (min-width: 768px) {
	.mainte_img {
		width: 44%;
		padding: 0 10px;
	}
}
@media screen and (min-width: 768px) {
	.mainte_img-substances {
		width: 60%;
		padding: 5px 10px;
	}
}
@media screen and (min-width: 992px) {
	.mainte {
		width: 94%;
	}
}


/*------------------------------------------------------------
  table
------------------------------------------------------------*/
table {
	margin-top: 30px;
}
table th {
	padding : 10px 10px;
	border:solid 1px #ccc;
	background-color: #AEDAD6; /*背景色*/
	font-weight: bold;
	text-align:left;
}
table td {
	text-align:left;
}
table tr {
	background-color: #ECEEF0;
}
.tb01 {
	width: 90%;
}
.tb01 th,
.tb01 td {
	padding: 10px;
	border: solid 1px #ccc;
	box-sizing:border-box;
}
.tb01 th {
	background: #7DC4BD;
	color: #212940;
}
.tb01 td {
	font-size: 15px;
}
.tb_title1 {
	width: 28%;
	text-align:center;
	font-size: 18px;
}
.tb_title2 {
	text-align:center;
	width: 15%;
	vertical-align: middle;
}
.tb_title2 img {
	width: 95%;
	margin: 0px;
	padding-top: 25px;
	padding-bottom: 5px;
}
.tb01 .tb_title3 {
	background: #b2dfdb;
	padding: 15px 15px 15px 20px;
}
span.aks {
	display: inline-block;
}
.tb_box1 dt {
	font-weight: 700;
}
.tb_box1 + .tb_box1 {
	padding-top: 1em;
}

@media screen and (max-width: 991px) {
	table,
	.tb01 {
		width: 100%;
	}
	.tb01 .head {
		display:none;
	}
	
	.tb01 td,
	.tb01 th{
		width: 100%;
		display: block;
		border-bottom:none;
		text-align:left;
	}
	.tb01 td{
		display: block;
		text-align:left;
	}
	.tb01 td::before{
		content: attr(data-label);
		display: inline;
		color: #fff;
		font-weight: bold;
		padding: 0px 10px;
		background-color: #138D94;
		margin-right: 10px;
		float: left;
	}
	.tb01 tr:last-child{
		border-bottom: solid 1px #ccc;
	}
	.tb_title2 img{
		display: none;
	}
}

/*------------------------------------------------------------
  yu-card-list
------------------------------------------------------------*/
.yu-card-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}
.yu-card-list__item {
	width: 250px;
	padding: 20px;
	border-radius: 3px;
	background: #e7eced;
}
.yu-card-list__item p {
	margin: 20px 0 0;
}
.yu-card-list__item img {
	display: block;
	width: 60%;
	height: auto;
	margin: 0 auto;
}

@media screen and (min-width: 768px){
	.yu-card-list {
		padding: 20px 0;
	}
	.yu-card-list__item img {
		width: auto;
		height: 180px;
	}
	.trouble_caution_box {
		padding: 2em 3em;
	}
}

/*------------------------------------------------------------
  trouble-caution-box
------------------------------------------------------------*/
.trouble-caution-box {
	width: fit-content;
	margin: 0 auto;
	padding: 1.5em;
	background: #fff;
	border-radius: 10px;
}
.trouble-caution-box__head {
	margin: 0 0 .25em;
	font-size: 18px;
}
@media screen and (min-width: 768px){
	.trouble-caution-box {
		padding: 2em 3em;
	}
}

/*------------------------------------------------------------
  tro_ap
------------------------------------------------------------*/
.tro_ap {
	width: 70%;
	margin: 15px;
	padding: 35px;
	border: solid 1px #63bcb8;
}
.tro_ap h3 {
	text-align: center;
	font-size: 1.3em;
}
.tro_ap .aptitle{
	width: 100%;
	height: auto;
	line-height: 2em;
	border-radius: 15px;
	background: #63bcb8;
	color: #fff;
	margin-bottom: 10px;
}
@media screen and (max-width: 639px) {
	.tro_ap {
		width: 100%;
		height: auto;
	}
	.tro_ap{
		padding: 15px;
	}
}

/*------------------------------------------------------------
  kenchimae
------------------------------------------------------------*/
.kenchimae {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 30px;
	padding: 0 10px;
}
.kenchimae-text {
	display: flex;
	flex-direction: column;
	gap: 30px;
	font-weight: 700;
}
.kenchimae-figure {
	align-self: center;
	text-align: center;
}
.kenchimae-figure img {
	width: 320px;
}
.kenchimae-caution {
	padding: .5em .75em;
	border: solid 2px currentColor;
	color: #f35b69;
	font-weight: 700;
	font-size: 16px;
}
@media screen and (min-width: 768px) {
	.kenchimae {
		flex-direction: row;
	}
	.kenchimae-caution {
		padding: .5em 1em;
		font-size: 18px;
	}
	.kenchimae-text {
		width: calc(100% - 40% - 30px);
	}
	.kenchimae-figure {
		width: 40%;
		min-width: 200px;
	}
}

/*------------------------------------------------------------
  solution-list
------------------------------------------------------------*/
.solution-list {
	display: grid;
	gap: 20px;
	padding-top: 40px;
}
.solution-list + * {
	margin-top: 40px;
}
.solution-list summary::-webkit-details-marker {
  display: none;
}
.solution-list__item {
	width: 100%;
}
.solution-list__head {
	position: relative;
	display: block;
	width: 100%;
	margin: auto;
	padding: 15px 20px 15px 45px;
	border-radius: 3px;
	background: #ffffff;
	border: 1px solid #b2dfdb;
	color: #263238;
	text-align: left;
	cursor: pointer;
	transition: .3s;
}
.solution-list__headTitle {
}
.solution-list__head:hover {
	color: #263238;
	background:#b2dfdb;
	transition: background .3s;
}
.solution-list__head::before {
	content: "";	
	position: absolute;
	left: 16px;
	top: 22px;
	width: 18px;
	height: 18px;
	background: #263238;
	text-align: center;
}
.solution-list__head:hover::before {
	color: #263238;
}
.solution-list__head::after {
	content: "\e145";
	position: absolute;
	left: 17px;
	top: 23px;
	line-height: 1;
	color: #fff;
	font-size: 16px;
	font-family: "Material Icons";
	font-weight: 900;
}
.solution-list :where([open]) .solution-list__head {
	background:#b2dfdb;
}
.solution-list :where([open]) .solution-list__head::after {
	content: "\e15b";
}
.solution-list__body {
	overflow: hidden;
	margin-top: -1px;
	transition: height .3s ease-in-out, box-shadow .6s linear;
	background:#f4f4f4;
}
.solution-list__body {
	padding: 20px;
	margin-top: 1px;
}
.solution-list__box{
	border: solid 1px #63bcb8;
	padding: 15px;	
	background:#f4f4f4;	
}
.solution-list__box img {
	margin: 10px
}
.solution-list__column {
	display: flex;
	align-items:flex-start;
	justify-content:flex-start ;
	flex-wrap: wrap;
	width: 100%;
	vertical-align: middle;
	margin-bottom: 15px;
}
.solution-list__column img {
	margin: 10px;
}
.solution-list__column p {
	width: 90%;
	text-align: justify;
	margin: 0 auto;
}
.solution-list__column .err {
	margin-bottom: 50px;
}
.solution-list__column .err_box {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
}
.solution-list__column .err_box .err_img {
	width: 100%;
	margin-bottom: 30px;
}
.solution-list__column .err_box .err_img img {
	width: 200px;
}
.solution-list__column .err_box .err_text {
	text-align: justify;
	width: 100%;
	min-width: 200px;
}
@media screen and (min-width: 768px) {
	.solution-list {
		gap: 30px;
	}
	.solution-list__body {
		padding: 30px;
	}
	.solution-list__column .err_box .err_text {
		width: 78%;
	}
	.solution-list__column .err_box .err_img {
		width: 22%;
		max-width: 230px;
	}
}

/*------------------------------------------------------------
  postagetable
------------------------------------------------------------*/
.postagetable {
	margin: 0 auto;
	width: 750px;
	table-layout: fixed;
}
.postagetable .customercolor {
	background-color: #f35b69;
}
.postagetable .paircolor {
	background-color: #63bcb8;
}
.postagetable tr {
	background-color: #e6f2f5;
	font-size: 16px;
	border-bottom: 2px solid #fff;
}
.postagetable th,
.postagetable td {
	padding: 1em 10px 1em 1em;
	border-right: 2px solid #fff;
}
.postagetable th {
	font-size: 16px;
	text-align: center;
	vertical-align: middle;
	width: 30%;
	font-weight: 400;
}
.postagetable thead tr{
	background-color: #167F92;
	color:#fff;
}
.postagetable tbody th {
	background: #bcd8d4;
}
.postagetable .customer {
	font-size: 16px;
	text-align: center;
	vertical-align: middle;
	background-color: #e6e8e8;
}
.postagetable .pair {
font-size: 16px;
text-align: center;
vertical-align: middle;
background-color: #e6e8e8;
}
.postagetable .non {
background:#fff
}
.postagetext {
font-weight: 600;
}
  
@media screen and (max-width: 991px) {
	.postagetable {
		border: 0;
		width: 100%;
	}
	.postagetable th {
		background-color: #167F92;
		display: block;
		border-right: none;
		width: 100%;
	}
	.postagetable thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}
	.postagetable tr {
		display: block;
		margin-bottom: .625em;
	}
	.postagetable td {
		border-bottom: 1px solid #bbb;
		display: block;
		font-size: .8em;
		text-align: right;
		position: relative;
		padding: .625em .625em .625em 4em;
		border-right: none;
	}
	.postagetable td::before {
		content: attr(data-label);
		position: absolute;
		left: 10px;
	}
	.postagetable td:last-child {
		border-bottom: 0;
	}
	.postagetable tbody th {
		background: #7DC4BD;
		color: #fff;
		font-weight: bold;
	}
	.postagetable .customer {
		font-size: .85em;
		text-align: right;
		vertical-align: middle;
		background-color: #e6e8e8;
	}
	.postagetable .pair {
		text-align: right;
		vertical-align: middle;
		background-color: #e6e8e8;
	}
}

/*------------------------------------------------------------
  point-list
------------------------------------------------------------*/
.point-list {
}
.point-list > li {
	text-indent: -10px;
	padding-left: 20px;
}
.point-list > li + li {
	padding-top: 1em;
}
.point-list__icon {
	position: relative;
	top: 2px;
	padding: 0 5px 0 0;
	font-size: 16px;
}
.point-list__child {
	padding: .5em 0 .75em 1em;
}
.point-list__child > li {
	line-height: 1.5;
}

/*------------------------------------------------------------
  flow-list
------------------------------------------------------------*/
.flow-list {
	display: grid;
	gap: 30px;
}
.flow-list__item {
	max-width: 240px;
	text-align: center;
}
.flow-list__image {
	margin-top: 0;
	width: 150px;
}
@media screen and (min-width: 576px) {
	.flow-list {
		grid-template-columns: repeat(2,1fr);
	}
}
@media screen and (min-width: 992px) {
	.flow-list {
		column-gap: 50px;
	}
	.flow-list__image {
		width: 200px;
	}
}
@media screen and (min-width: 1200px) {
	.flow-list {
		grid-template-columns: repeat(4,1fr);
	}
}