@charset "UTF-8";

/* 共通設定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未満：スマホ縦
*/

/* **********************************全体設定**********************************/

html {
	font-family: "Hiragino Kaku Gothic ProN", "meiryo", sans-serif;
	overflow: auto;
	scrollbar-gutter: stable;
}

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

	.phone,
	.phone_vertical {
		display: none
	}

	.pc,
	.pc_and_phone_horizontal {
		display: block;
	}

	.sp_br {
		display: none;
		/* SPの改行を隠す */
	}
}

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

	.pc,
	.phone_vertical {
		display: none
	}

	.pc_and_phone_horizontal {
		display: block;
		margin-right: 0 !important;
	}

	.sp_br {
		display: none;
		/* SPの改行を隠す */
	}
}

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

	.pc,
	.pc_and_phone_horizontal {
		display: none
	}

	.phone_vertical {
		display: block;
		margin-right: 0 !important;
	}

	.sp_br {
		display: block;
		/* SPを改行する */
	}
}

/* **********************************共通設定**********************************/
.basic_collar {
	background-color: #009B74;
	border-bottom: solid 3px #29744e !important;
}

table.basic_collar_line td,
table.basic_collar_line th {
	border: solid #009B74;
}

/* 自動車保険保険単位色指定 */
.automobile_collar {
	background-color: #143278;
	border-bottom: solid 3px #091d49 !important;
}

table.automobile_collar_line td,
table.automobile_collar_line th {
	border: solid #143278;
}

/* 火災保険単位色指定色 */
.fire_collar {
	background-color: #A73279;
	border-bottom: solid 3px #6d1f4e !important;
}

table.fire_collar_line td,
table.fire_collar_line th {
	border: solid #A73279;
}

/* 障害疾病単位色指定 */
.accident_collar {
	background-color: #B49632;
	border-bottom: solid 3px #856e24 !important;
}

table.accident_collar_line td,
table.accident_collar_line th {
	border: solid #B49632;
}

/* ダウンロード色指定 */
.download_collar {
	background-color: #EB6526;
	border-bottom: solid 3px #aa491c !important;
}

/* テキスト購入サイト色指定 */
.ec_text_collar {
	background-color: #0070C0;
	border-bottom: solid 3px #04538b !important;
}

button:active {
	-webkit-transform: translateY(3px);
	transform: translateY(3px);
	border-bottom: none !important;
}

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	Text-decoration: none;
	color: inherit;
}

/* **********************************header**********************************/

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

	/****** PC  ******/
	.header_container {
		margin: auto;
		max-width: 1300px;
	}

	.header {
		margin-top: 20px;
		width: 100%;
	}

	/* -- ヘッダーロゴ -- */
	.company_img {
		max-width: 280px;
		max-height: 30px;
		float: left;
	}

	.company_logo_img {
		width: 110px;
		height: 35px;
		margin-left: 10px;
	}

	/* -- ヘッダーガイド -- */

	.header_guide {
		width: 20px;
		height: 18px;
	}

	.hnav_links {
		float: right;
	}

	.hnav_link {
		margin-left: 15px;
		text-decoration: none;
		color: rgb(96, 144, 235);
		font-size: 20px;
		font-weight: bold;
	}

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

		.header_container {
			margin: auto;
			max-width: 1182px;
		}

		.header {
			margin-top: 18px;
			width: 100%;
		}

		/* -- ヘッダーロゴ -- */
		.company_img {
			max-width: 255px;
			max-height: 27.5px;
			float: left;
		}

		.company_logo_img {
			width: 100px;
			height: 32px;
			margin-left: 9px;
		}

		/* -- ヘッダーガイド -- */

		.header_guide {
			width: 18px;
			height: 16px;
		}

		.hnav_links {
			float: right;
		}

		.hnav_link {
			margin-left: 15px;
			text-decoration: none;
			color: rgb(96, 144, 235);
			font-size: 18px;
			font-weight: bold;
		}
	}

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

		.header_container {
			margin: auto;
			max-width: 1040px;
		}

		.header {
			margin-top: 16px;
			width: 100%;
		}

		/* -- ヘッダーロゴ -- */
		.company_img {
			max-width: 224px;
			max-height: 24px;
			float: left;
		}

		.company_logo_img {
			width: 88px;
			height: 28px;
			margin-left: 8px;
		}

		/* -- ヘッダーガイド -- */

		.header_guide {
			width: 18px;
			height: 16px;
		}

		.hnav_links {
			float: right;
		}

		.hnav_link {
			margin-left: 15px;
			text-decoration: none;
			color: rgb(96, 144, 235);
			font-size: 16px;
			font-weight: bold;
		}
	}

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

		.header_container {
			margin: auto;
			max-width: 865px;
		}

		.header {
			margin-top: 13px;
			width: 100%;
		}

		/* -- ヘッダーロゴ -- */
		.company_img {
			max-width: 187px;
			max-height: 20px;
			float: left;
		}

		.company_logo_img {
			width: 74px;
			height: 23.5px;
			margin-left: 6px;
		}

		/* -- ヘッダーガイド -- */

		.header_guide {
			width: 15px;
			height: 13.5px;
		}

		.hnav_links {
			float: right;
		}

		.hnav_link {
			margin-left: 15px;
			text-decoration: none;
			color: rgb(96, 144, 235);
			font-size: 13px;
			font-weight: bold;
		}
	}
}

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

	.header_container {
		margin: auto;
		max-width: 750px;
	}

	.header {
		margin-top: 15px;
		width: 100%;
	}

	/* -- ヘッターロゴ -- */
	.company_img {
		width: 180px;
		height: 20px;
		float: left;
	}

	.company_logo_img {
		width: 60px;
		height: 20px;
		margin-left: 5px;
	}

	/* -- ヘッターガイド -- */

	.header_guide {
		width: 13px;
		height: 13px;
	}

	.hnav_links {
		margin-right: 10px;
		float: right;
	}

	.hnav_link {
		margin-left: 7.5px;
		text-decoration: none;
		color: rgb(96, 144, 235);
		font-size: 15px;
		font-weight: bold;
	}
}

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

	.header_container {
		margin: auto;
		max-width: 499px;
	}

	.header {
		margin-top: 15px;
		width: 100%;
		height: 45px;
	}

	/* -- ヘッダーロゴ -- */
	.company_img {
		max-width: 280px;
		max-height: 30px;
		float: left;
	}

	.company_logo_img {
		width: 60px;
		height: 20px;
		margin-left: 10px;
	}

	/* -- ハンバーガメニュー -- */

	.menu_open {
		display: block;
		float: right;
		width: 45px;
		height: 45px;
	}

	.menu_open.active {
		display: none;
	}


	.hamburger_menu {
		background-color: rgb(253, 253, 253);
		position: absolute;
		top: -3000px;
		left: 0;
		/*修正　クリックしたら表示された背景の大きさ*/
		width: 100%;
		height: 165px;
		display: grid;
		color: white;
		text-align: left;
		transition: .5s;
		z-index: 1000;
	}

	.hamburger_menu.active {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.hamburger_menu ul {
		margin: 0;
		padding: 0;
	}

	.menu_close {
		display: none;
		width: 45px;
		height: 45px;
	}

	.menu_close.active {
		display: block;
		margin-right: 10px;
		margin-left: auto;
	}

	.hamburger_menu li {
		list-style: none;
		margin: 15px;
		cursor: pointer;
	}

	.hamburger_menu_line {
		border-bottom: 2px solid #009B74;
		width: 100%;
	}

	.nav_href {
		display: block;
		font-size: 18px;
		font-weight: bold;
		color: #000000;
		text-decoration: none;
	}

	.nav_href::after {
		font-size: 22px;
		font-weight: bold;
		float: right;
		content: ">";
		color: #009B74;
	}

	.nav_background {
		height: 2000px;
		background-color: rgba(0, 155, 116, 0.8);
	}

	.nav_background.active {
		top: 0;
	}
}

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

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

	/****** PC big ******/
	.title_container {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 20px;
		text-align: center;
	}

	.title_img {
		height: auto;
		width: 950px;
		border-radius: 40px;
	}

	/****** PC big ******/
	@media screen and (max-width: 1750px) {
		.title_container {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 18px;
			text-align: center;
		}

		.title_img {
			height: auto;
			width: 865px;
			border-radius: 37px;
		}
	}

	/****** PC middle ******/
	@media screen and (max-width: 1600px) {
		.title_container {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 16px;
			text-align: center;
		}

		.title_img {
			height: auto;
			width: 760px;
			border-radius: 33px;
		}
	}

	/****** PC small ******/
	@media screen and (max-width: 1366px) {
		.title_container {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 12px;
			text-align: center;
		}

		.title_img {
			height: auto;
			width: 635px;
			border-radius: 27px;
		}
	}
}

/* スマホ横 */
@media screen and (max-width: 949px) {
	.title_container {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 20px;
		text-align: center;
	}

	.title_img {
		height: auto;
		width: 480px;
		border-radius: 25px;
	}
}

/* スマホ縦 */
@media screen and (max-width: 499px) {
	.title_container {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 10px;
	}

	.title_img {
		height: auto;
		min-width: 350px;
		width: 95%;
		height: 110px;
		border-radius: 25px;
	}
}


/* **********************************body**********************************/

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

	/****** PC ******/
	.guide_title {
		font-size: 25px;
		font-weight: bold;
		text-align: center;
		color: rgb(0, 0, 0);
	}

	.cursor_pc {
		width: 20px;
		height: 20px;
		padding-top: 5px;
		vertical-align: top;
		display: inline-block;
	}

	/* buttonの共通設定、margin等は個別cssにて制御している。 */
	button {
		width: 260px;
		height: 42px;
		border-radius: 10px;
		border: none !important;
		font-size: 13.5px;
		color: rgb(253, 253, 253) !important;
		text-align: left;
		display: inline-block;
		font-family: "Hiragino Kaku Gothic ProN", "meiryo", sans-serif;
		font-weight: bold;
	}

	/****** PC big ******/
	@media screen and (max-width: 1750px) {
		.guide_title {
			font-size: 22.5px;
			font-weight: bold;
			text-align: center;
			color: rgb(0, 0, 0);
		}

		.cursor_pc {
			width: 18px;
			height: 18px;
			padding-top: 4px;
			vertical-align: top;
			display: inline-block;
		}

		/* buttonの共通設定、margin等は個別cssにて制御している。 */
		button {
			width: 237px;
			height: 38px;
			border-radius: 8px;
			border: none;
			font-size: 12.5px;
			color: rgb(253, 253, 253);
			text-align: left;
			display: inline-block;
			font-family: "Hiragino Kaku Gothic ProN", "meiryo", sans-serif;
			font-weight: bold;
		}
	}

	/****** PC middle ******/
	@media screen and (max-width: 1600px) {
		.guide_title {
			font-size: 20px;
			font-weight: bold;
			text-align: center;
			color: rgb(0, 0, 0);
		}

		.cursor_pc {
			width: 16px;
			height: 16px;
			padding-top: 5px;
			vertical-align: top;
			display: inline-block;
		}

		/* buttonの共通設定、margin等は個別cssにて制御している。 */
		button {
			width: 210px;
			height: 33px;
			border-radius: 8px;
			border: none;
			font-size: 11px;
			color: rgb(253, 253, 253);
			text-align: left;
			display: inline-block;
			font-family: "Hiragino Kaku Gothic ProN", "meiryo", sans-serif;
			font-weight: bold;
		}
	}

	/****** PC small ******/
	@media screen and (max-width: 1366px) {
		.guide_title {
			font-size: 17px;
			font-weight: bold;
			text-align: center;
			color: rgb(0, 0, 0);
		}

		.cursor_pc {
			width: 14px;
			height: 14px;
			padding-top: 5px;
			vertical-align: top;
			display: inline-block;
		}

		/* buttonの共通設定、margin等は個別cssにて制御している。 */
		button {
			width: 174px;
			height: 28px;
			border-radius: 6px;
			border: none !important;
			font-size: 9px;
			color: rgb(253, 253, 253) !important;
			text-align: left;
			display: inline-block;
			font-family: "Hiragino Kaku Gothic ProN", "meiryo", sans-serif;
			font-weight: bold;
			white-space: nowrap;
		}
	}
}

/****** スマホ横 ******/
@media screen and (max-width: 949px) {
	.guide_title {
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		color: rgb(0, 0, 0);
	}

	.cursor_phone {
		width: 20px;
		position: absolute;
		transform: rotate(-40deg);
	}

	/* buttonの共通設定、margin等は個別cssにて制御している。 */
	button {
		width: 241px;
		height: 35px;
		border-radius: 10px;
		border: none;
		color: rgb(253, 253, 253);
		display: block;
		font-family: "Hiragino Kaku Gothic ProN", "meiryo", sans-serif;
		font-weight: bold;
	}

	.button_text {
		display: inline;
		font-size: 12px;
		padding-left: 2px;
		float: left;
	}

	.Android .button_text {
		padding-top: 4px;
	}
}

/****** スマホ縦 ******/
@media screen and (max-width: 499px) {
	.guide_title {
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		color: rgb(0, 0, 0);
	}

	.cursor_phone {
		width: 20px;
		position: absolute;
		transform: rotate(-40deg);
	}

	/* buttonの共通設定、margin等は個別cssにて制御している。 */
	button {
		width: 241px;
		height: 35px;
		border-radius: 10px;
		border: none;
		color: rgb(253, 253, 253);
		display: inline-block;
		font-family: "Hiragino Kaku Gothic ProN", "meiryo", sans-serif;
		font-weight: bold;
	}

	.button_text {
		display: inline;
		font-size: 12px;
		padding-left: 2px;
		float: left;
	}

	.Android .button_text {
		padding-top: 4px;
	}

}

/* **********************************footer**********************************/