@charset "UTF-8";

/* -----------------------------------------------

知っておきたい生命保険の基本 - STEP4

----------------------------------------------- */

/* .bloStep4Parts STEP4の部品群
----------------------------------------------- */
.bloStep4Parts {
    margin: 20px 0px 30px 0px;
    display: flex;
    justify-content: center;
}
.bloStep4Parts  > .BlueBackgroundText {
	display: inline-block;
	font-weight: bold;
	text-align: center;
	font-size: 24px;
	padding-bottom: 3px 10px;
	background: #009bdd;
	color: #fff;
	width: fit-content;
	padding: 3px 10px;
}
.RedBackgroundText {
	background: #eb6d6d;
	padding: 0px 5px;
	color: #fff;
}
.bloStep4Parts  > .arrowDown {
	content: "";
	width: 0px;
	height: 0px;
	border-left: 20px solid #fff;
	border-right: 20px solid #fff;
	border-top: 20px solid #83d0f1;
        margin: 0px 10px;
}
@media print, screen and (max-width: 767px) {   /* SP */
	.bloStep4Parts > .arrowDown {
	content: "";
	width: 0px;
	height: 0px;
	border-left: 15px solid #fff;
	border-right: 15px solid #fff;
	border-top: 15px solid #83d0f1;
	margin: 0px 8px;
	}
	.bloStep4Parts  > .BlueBackgroundText {
		display: inline-block;
		font-weight: bold;
		text-align: center;
		font-size: 17px;
		padding-bottom: 3px 10px;
		background: #009bdd;
		color: #fff;
		width: fit-content;
		padding: 3px 5px;
	}
}
.bloStep4Notes {
    padding: 20px 0px 30px;
}
.bloStep4Notes > .titleStep4Notes {
    font-weight: bold;
    text-align: left;
    font-size: 18px;
    padding-bottom: 0.5em;
}
.bloStep4Notes > .paragraphStep4Notes {
    text-align: left;
    font-size: 16px;
    padding-bottom: 0.5em;
}
----------------------------------------------- */
/* STEP4内のアコーディアン
----------------------------------------------- */
#jqAccordion > .dlAc{
	position: relative;
	border-bottom: 1px solid #c8c8c8;
	margin-top: 1em;
}
#jqAccordion > .dlAc:nth-of-type(1){
	border-top: 1px solid #c8c8c8;
}
#jqAccordion .TabButton {
	color: #333333;
	padding: 16px 0px 16px 32px;
	border-bottom: 1px solid #bebebe;
}
#jqAccordion .TabButton.open .iconAcBtn span::after {
	content: '閉じる';
}
#jqAccordion .TabButton .iconAcBtn span::after {
	content: '開く';
}
.iconAcBtn::after{
	content: "";
	display: inline-block;
	border-style: solid;
	border-width: 0 0 2px 2px;
	border-color: #c8c8c8;
	transform: rotate(-45deg) translateY(-8px);
}

.respYakkanKoushinUlNote .iconAcBtn::after{
	width: 16px;
	height: 16px;
	margin: 0 5px 0 5px;
}

#jqAccordion .TabButton > .iconAcBtn::after{
	position: relative;
	float: right;
	margin-right: 15px;
}
#jqAccordion .TabButton.open .iconAcBtn::after {
	top: 12px;
	transform: rotate(135deg) translateY(8px);
}
#jqAccordion .jqAcCloseBtn > .iconAcBtn::after{
	position: absolute;
	top: 37px;
	right: 15px;
	width: 17px;
	height: 17px;
	transform: rotate(135deg);
}

@media only screen and (min-width: 768px){          /* PC */
	#jqAccordion .TabButton .iconAcBtn::after{
		width: 22px;
		height: 22px;
	}
}

@media only screen and (max-width: 767px){          /* SP */
	#jqAccordion .TabButton .iconAcBtn::after{
		width: 16px;
		height: 16px;
	}
}
/* 各種共通パーツ
----------------------------------------------- */
/* サブタイトルの見出し */
.subtitleStep4Item {
    font-weight: bold;
}
@media print, screen and (min-width: 768px) {   /* PC */
    .subtitleStep4Item {
        padding: 10px 0 15px;
        font-size: 18px;
    }
}
@media only screen and (max-width: 767px) {     /* SP */
    .subtitleStep4Item {
        padding: 10px 0 10px;
        font-size: 16px;
    }
}