@charset "utf-8";
/* CSS Document */

/*===============================================
●共通
===============================================*/
#cautionWrap header p {
	text-align: center;
	color: #0e53a3;
	/* font-family: "ゴシックMB101 M"; */
	line-height: 1.76em;
}

/* cautionLinkBox
---------------------------------------- */
#cautionLinkBox li a {
	background-color: #9fc7eb;
	text-decoration: none;
	/* font-family: "ゴシックMB101 M"; */
	font-size: 1.14em;
	display: flex;
	align-items: center;
}
#cautionLinkBox li a:hover {
	color: #000;
	opacity: 0.8;
}
/* svg カラー */
svg .cautionSt01 {fill: #fff000;}
svg .cautionSt02 {fill: #e60012;}
svg .cautionSt03 {fill: #fff;}
svg .cautionSt04 {fill: #231815;}

/* cautionContents
---------------------------------------- */
#cautionContents h3 {
	font-weight: bold;
	display: flex;
}
#cautionContents h3 {margin-bottom: 0.5em;}
#cautionContents p {line-height: 1.43em;}
#cautionContents #caution01 h4 {font-weight: bold;}

/* cautionTable  */
#cautionContents #tableTitle {margin: 1.2em 0 0.5em;}
#cautionTable {width: 100%;}
#cautionTable th,
#cautionTable td {
	padding: 0.5em 0.8em;
	vertical-align: middle;
}
#cautionTable tbody td {border-left: 1px solid #ccc;}
#cautionTable tr td {border-bottom: 1px solid #ccc;}
#cautionTable .redStyle {color: #cc3300;}

/* cautionImgBox */
#cautionImgBox div p {margin-top: 0.5em;}

/* windCaution  */
#windCaution {background-color: #e6f4fa;}
#windCaution div {margin-bottom: 0!important;}

/*===============================================
●画面の横幅が729px以下
===============================================*/
@media screen and (max-width: 767px){
	
	#cautionWrap {margin-bottom: 4em;}
	
	/* cautionLinkBox
	---------------------------------------- */
	#cautionLinkBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 370px;
		width: 100%;
		margin: 2em auto 0;
	}
	#cautionLinkBox li a {padding: 0.3em 0.4em 0.25em;}
	#cautionLinkBox li a svg {
		width: 20px;
		height: 20px;
		vertical-align: -0.3em;
	}
	#cautionLinkBox li:not(:last-of-type) a span:last-of-type {padding-left: 0.3em;}
	#cautionLinkBox li:last-of-type a span:last-of-type {padding-left: 0.1em;}
	
	/* cautionContents
	---------------------------------------- */
	#cautionContents {margin-top: 3.5em;}
	.cautionAnchor {
		padding-top: 50px;
		margin-top: -50px;
	}
	#cautionContents section >  div {margin-bottom: 3em;}
	#cautionContents h3 {
		font-size: 1.2em;
		line-height: 1.4em;
		align-items: flex-start;
		margin-bottom: 1em;
	}
	#cautionContents #caution02 h3 svg {
		width: 20px;
		height: 20px;
	}
	#cautionContents #caution01 h3 svg,
	#cautionContents #caution03 h3 svg {
		width: 21px;
		height: 21px;
	}
	#cautionContents h3 span:first-of-type {margin-top: 0.1em;}
	#cautionContents h3 span:last-of-type {padding-left: 0.5em;}
	
	/* cautionTable */
	#cautionTable thead {display: none;}
	#cautionTable tbody tr {
		display: block;
		margin-bottom: 1em;
		border-top: 1px solid #ccc;
		border-right: 1px solid #ccc;
	}
	#cautionTable tbody th {
		display: block;
		text-align: center;
		border-left: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		color: #fff;
		background-color: #2f7967;;
	}
	#cautionTable tbody .redStyle th {
		background-color: #cc3300;
		color: #fff;
	}
	#cautionTable tbody td {width: 100%;}
	#cautionTable tbody td {
		display: table;
		padding: 1em;
	}
	#cautionTable tbody td span {
		display: table-cell;
		vertical-align: middle;
		overflow: hidden;
		padding: 0.5em 0.8em 0.5em 0.8em;
	}
	#cautionTable tbody td:last-of-type {text-align: justify;}
	#cautionTable tbody td:before {
		content: attr(data-th);
		margin-right: 1em;
		width: 6.4em;
		display: table-cell;
		vertical-align: middle;
		text-align: left;
		padding: 0.5em;
		font-size: 1.1em;
		color: #fff;
		background-color: #6ba59c;
		border-right: 1px solid #ccc;
	}
	#cautionTable tbody .redStyle td:before {background-color: #a07160;}
	
	/* cautionImgBox  */
	#cautionImgBox div:first-of-type {margin-bottom: 2em;}
	#cautionImgBox img {width: 100%;}
	
	/* windCaution  */
	#windCaution {padding: 1em;}
	#windCaution div {text-align: center;}
	#windCaution img {
		max-width: 220px;
		width: 100%;
		margin: 0 auto 0.8em;
		text-align: center;
	}
	#windCaution p {
		color: #0e53a3;
		font-size: 1.14em;
	}
}
/*===============================================
●画面の横幅が730px以上
===============================================*/
@media screen and (min-width: 768px) {
	
	#cautionWrap header p {font-size: 1.21em;}
	#cautionWrap {margin-bottom: 8.28em;}
	
	/* cautionLinkBox
	---------------------------------------- */
	#cautionLinkBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 520px;
		margin: 4.14em auto 0;
	}
	#cautionLinkBox li {
		max-width: 150px;
		width: 100%;
	}
	#cautionLinkBox li a {
		padding-top: 0.3em;
		padding-bottom: 0.2em;
	}
	#cautionLinkBox li svg {
		width: 35px;
		height: 34px;
	}
	#cautionLinkBox li a span:last-of-type {padding-left: 0.5em;}
	#cautionLinkBox li:first-of-type a {padding-left:  0.8em;}
	#cautionLinkBox li:nth-child(2) a {padding-left: 0.7em;}
	#cautionLinkBox li:last-of-type a {padding-left: 1.2em;}
	#cautionLinkBox li:first-of-type a span:last-of-type {padding-left: 0.5em;}
	#cautionLinkBox li:nth-child(2) a span:last-of-type {padding-left: 0.8em;}
	
	/* cautionContents
	---------------------------------------- */
	#cautionContents {margin-top: 5.3em;}
	#cautionContents section >  div {margin-bottom: 3.5em;}
	#cautionContents h3 {
		font-size: 1.5em;
		line-height: 1.14em;
		align-items: center;
	}
	#cautionContents h3 svg {
		width: 35px;
		height: 34px;
	}
	#cautionContents h3 span:last-of-type {padding-left: 0.3em;}
	
	/* cautionTable */
	#cautionTable {
		border: 1px solid #ccc;
		border-top: none;
	}
	#cautionTable thead {
		background-color: #0052a4;
		color: #fff;
	}
	#cautionTable thead th:first-of-type,
	#cautionTable thead th:nth-child(2),
	#cautionTable thead th:nth-child(4) {width: 10%;}
	#cautionTable thead th:not(:first-of-type) {border-left: 1px solid #ccc;}
	#cautionTable tbody th,
	#cautionTable thead th:not(:last-child),
	#cautionTable tr td:first-of-type ,
	#cautionTable tr td:nth-child(4) {text-align: center;}
	#cautionTable tbody tr:nth-child(7) th {border-top: 1px solid #ccc;}
	
	/* cautionImgBox  */
	#cautionImgBox {
		display: flex;
		justify-content: space-between;
	}
	#cautionImgBox div {
		max-width: 440px;
		width: 50%;
	}
	#cautionImgBox div:first-of-type {margin-right: 3%;}
	
	/* windCaution  */
	#windCaution {
		background-color: #e6f4fa;
		padding: 0.7em 4% 0.7em 0.7em;
	}
	#windCaution div {
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 870px;
		margin-bottom: 0!important;
	}
	#windCaution img {max-width: 157px;}
	#windCaution p {
		color: #0e53a3;
		margin-left: 5%;
		font-size: 1.14em;
		line-height: 1.5em;
	}
}

/*===========================================================
●画面の横幅が769px以上530px以下(スタイルが崩壊するため、特別処置)
=============================================================*/
@media screen and (min-width: 320px) and (max-width: 374px) {
	
	#cautionLinkBox li a {
		font-size: 13.5px;
		padding: 0.1em 0.3em 0 0.3em;
	}
	#cautionLinkBox li a span:first-of-type {margin-top: 0.2em;}
	#cautionLinkBox li a svg {
		width: 20px;
		height: 20px;
	}
}