@charset "UTF-8";


/* top画面用CSS
    **************************************************
	各商品単位色コード
	--------------------------------------------------
	各商品単位色 |    code			|		RGB
	--------------------------------------------------
	基礎単位：	 |	 #009B74		|	0 155 116　
	--------------------------------------------------
	自動車：   	 |	 #143278    	|	20 50 120
	--------------------------------------------------
	火災：		 |	 #A73279		|	167 50 121
	--------------------------------------------------
	傷害疾病：	 |   #B49632		|	180 150 50
	--------------------------------------------------
	DL：	     |   #EB6526		|	235 101 38
	--------------------------------------------------

	1750以上：PC　通常
	1750未満：PC　大
	1600未満：PC 中
	1350未満：PC 小
	950未満：スマホ横
	500未満：スマホ縦
*/

/* **********************************title**********************************/

/****** PC ******/
@media screen and (min-width: 950px) {

	/****** PC ******/
	#tittle {
		width: 520px;
		padding: 30px;
		border-radius: 20px;
		font-size: 40px;
		font-weight: bold;
		position: absolute;
		top: 37%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #000000;
		background-color: rgba(255, 255, 255, 0.9);
	}

	/****** PC big ******/
	@media screen and (max-width: 1750px) {

		/* タイトル */
		#tittle {
			width: 470px;
			padding: 28px;
			border-radius: 20px;
			font-size: 36px;
			font-weight: bold;
			position: absolute;
			top: 37%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #000000;
			background-color: rgba(255, 255, 255, 0.9);
		}
	}

	/****** PC middle ******/
	@media screen and (max-width: 1600px) {

		/* タイトル */
		#tittle {
			width: 410px;
			padding: 25px;
			border-radius: 18px;
			font-size: 31px;
			font-weight: bold;
			position: absolute;
			top: 38%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #000000;
			background-color: rgba(255, 255, 255, 0.9);
		}
	}

	/****** PC small ******/
	@media screen and (max-width: 1366px) {

		/* タイトル */
		#tittle {
			width: 342px;
			padding: 21px;
			border-radius: 15px;
			font-size: 26px;
			font-weight: bold;
			position: absolute;
			top: 38%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #000000;
			background-color: rgba(255, 255, 255, 0.9);
		}
	}
}

/****** スマホ横 ******/
@media screen and (max-width: 949px) {

	/* タイトル */
	#tittle {
		width: 300px;
		padding: 17px;
		border-radius: 20px;
		font-size: 24px;
		font-weight: bold;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #000000;
		background-color: rgba(255, 255, 255, 0.9);
	}
}

/****** スマホ縦 ******/
@media screen and (max-width: 499px) {
	#tittle {
		width: 278px;
		padding: px;
		border-radius: 20px;
		font-size: 22px;
		font-weight: bold;
		position: absolute;
		top: 33%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #000000;
		background-color: rgba(255, 255, 255, 0.9);
	}
}

/* **********************************main**********************************/

@media screen and (min-width: 950px) {

	/****** PC ******/
	/* guide */
	.main_container {
		margin: auto;
		padding-top: 20px;
		max-width: 850px;
		justify-content: center;
	}

	.table_style {
		border-collapse: collapse;
		width: 850px;
		padding-left: 100px;
		word-break: break-all;
		font-size: 16pt;
	}

	.table_title {
		border-collapse: collapse;
		margin-bottom: 16px;
		font-size: 20px;
		border: none;
		white-space: nowrap;
		font-weight: bold;
	}

	table {
		margin-bottom: 50px;
	}

	td {
		font-size: 18px;
		width: 180px;
		font-weight: bold;
		text-align: center;
	}

	th{
		font-size: 18px
	}

	.table_all_download {
		text-align: center;
		margin: 0;
	}

	.table_sab_title {
		text-align: left;
		text-indent: 1rem;
		margin: 0;
	}

	/* button設定 */

	.icon {
		margin-left: 10px;
		width: 20px;
		height: 20px;
		display: inline-block;
		vertical-align: top;
		filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
	}

	button {
		margin: 5px
	}

	/****** PC big ******/
	@media screen and (max-width: 1750px) {

		/* guide */
		.main_container {
			margin: auto;
			padding-top: 20px;
			max-width: 770px;
			justify-content: center;
		}

		.table_style {
			border-collapse: collapse;
			width: 100%;
			padding-left: 100px;
			word-break: break-all;
			font-size: 18pt;
		}

		.table_title {
			border-collapse: collapse;
			margin-bottom: 14px;
			font-size: 18px;
			border: none;
			white-space: nowrap;
			font-weight: bold;
		}

		table {
			margin-bottom: 45px;
		}

		td {
			font-size: 16px;
			width: 160px;
			font-weight: bold;
			text-align: center;
		}

		th{
			font-size: 16px;
		}

		.table_all_download {
			text-align: center;
			margin: 0;
		}

		.table_sab_title {
			text-align: left;
			text-indent: 0.8rem;
			margin: 0;
		}

		/* button設定 */

		.icon {
			margin-left: 8px;
			width: 19px;
			height: 19px;
			display: inline-block;
			vertical-align: top;
			filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
		}

		button {
			margin: 4.5px
		}
	}

	/****** PC middle ******/
	@media screen and (max-width: 1600px) {

		/* guide */
		.main_container {
			margin: auto;
			padding-top: 15px;
			max-width: 680px;
			justify-content: center;
		}

		.table_style {
			border-collapse: collapse;
			width: 100%;
			padding-left: 100px;
			word-break: break-all;
			font-size: 16pt;
		}

		.table_title {
			border-collapse: collapse;
			margin-bottom: 10px;
			font-size: 16px;
			border: none;
			white-space: nowrap;
			font-weight: bold;
		}

		table {
			margin-bottom: 40px;
		}

		td {
			font-size: 14px;
			width: 145px;
			font-weight: bold;
			text-align: center;
		}

		th{
			font-size: 14px;
		}

		.table_all_download {
			text-align: center;
			margin: 0;
		}

		.table_sab_title {
			text-align: left;
			text-indent: 0.8rem;
			margin: 0;
		}

		/* button設定 */

		.icon {
			margin-left: 8px;
			width: 18px;
			height: 18px;
			display: inline-block;
			vertical-align: top;
			filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
		}

		button {
			margin: 4.5px
		}
	}

	/****** PC small ******/
	@media screen and (max-width: 1366px) {

		/* guide */
		.main_container {
			margin: auto;
			padding-top: 10px;
			max-width: 570px;
			justify-content: center;
		}

		.table_style {
			border-collapse: collapse;
			width: 100%;
			padding-left: 100px;
			word-break: break-all;
			font-size: 16pt;
		}

		.table_title {
			border-collapse: collapse;
			margin-bottom: 10px;
			font-size: 13px;
			border: none;
			white-space: nowrap;
			font-weight: bold;
		}

		table {
			margin-bottom: 35px;
		}

		th,td {
			font-size: 12px;
			width: 120px;
			font-weight: bold;
			text-align: center;
		}

		.table_all_download {
			text-align: center;
			margin: 0;
		}

		.table_sab_title {
			text-align: left;
			text-indent: 0.6rem;
			margin: 0;
		}

		/* button設定 */

		.icon {
			margin-left: 6px;
			width: 16px;
			height: 16px;
			display: inline-block;
			vertical-align: top;
			filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
		}

		button {
			margin: 4px
		}
	}
}


/****** スマホ横 ******/
@media screen and (max-width: 949px) {

	/* guide */
	.main_container {
		margin: auto;
		max-width: 600px;
		justify-content: center;
	}

	.table_style {
		border-collapse: collapse;
		width: 100%;
		font-size: 16pt;
		margin: auto;
		word-break: break-all;
	}

	.table_title {
		border-collapse: collapse;
		margin-top: 30px;
		margin-bottom: 10px;
		font-size: 16px;
		font-weight: bold;
		border: none;
		white-space: nowrap;
	}

	th {
		font-size: 14.5px;
		width: 210px;
		font-weight: bold;
		text-align: center;
	}

	td {
		font-size: 14.5px;
		width: 210px;
		font-weight: bold;
		text-align: center;
	}

	.table_all_download {
		text-align: center;
		margin: 0;
	}

	.table_sab_title {
		text-align: left;
		text-indent: 0.5rem;
		margin: 0;
	}

	/* button設定 */

	.icon {
		margin-left: 10px;
		width: 20px;
		height: 20px;
		display: inline;
		float: left;
		filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
	}

	button {
		margin: auto;
		margin-top: 5px;
		margin-bottom: 5px;
	}
}

/****** スマホ縦 ******/
@media screen and (max-width: 499px) {

	/* guide */
	.main_container {
		margin: auto;
		max-width: 372px;
		justify-content: center;
		padding-right: 8px;
	}

	.table_title {
		border-collapse: collapse;
		margin-top: 35px;
		margin-bottom: 10px;
		font-size: 16px;
		font-weight: bold;
		border: none;
		white-space: nowrap;
	}

	table th,
	table td {
		display: flex;
		/* tableを縦1列にする */
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 50px;
		border-bottom: none !important;
		/* 横のborderが２本重なり太くなってしまうため下部の線を削除 */
	}

	table th {
		font-size: 14.5px;
	}

	table.basic_collar_line tr:last-child th {
		height: 50px;
		border-bottom: solid #009B74 !important;
		/* 最下部の線を再定義 */
	}

	table.automobile_collar_line tr:last-child th {
		height: 50px;
		border-bottom: solid #143278 !important;
		/* 最下部の線を再定義 */
	}

	table.fire_collar_line tr:last-child th {
		height: 50px;
		border-bottom: solid #A73279 !important;
		/* 最下部の線を再定義 */
	}

	table.accident_collar_line tr:last-child th {
		height: 50px;
		border-bottom: solid #B49632 !important;
		/* 最下部の線を再定義 */
	}

	.table_all_download,
	.table_sab_title {
		text-align: center;
		font-weight: bold;
		margin: 0px;
	}

	.table_all_download{
		padding-left: 8px;
	}

	/* button設定 */
	.icon {
		margin-left: 10px;
		width: 20px;
		height: 20px;
		display: inline;
		float: left;
		filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
	}

	button {
		margin: 5px
	}

}