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

/*--------------------★★★PC、SP両方に共有★★★---------------------*/

#mainContents .mainImg {
	margin-top: 0px !important;
    margin-bottom: 20px;
}

.mainImg small{
	font-size: 1.2rem;
	margin-top: 5px;
	display: block;
	line-height: 1.2;
}
strong.fs18{
	font-size: 18px;
}
span.red {
	font-size: 20px;
    font-weight: bold;
    color: red;
    margin: 0;
    padding: 0;
}

/*日付*/
.article-date {
    font-weight: 300;
    font-size: 1.5rem;
    color: #999;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 10px;
}


/*目次*/
.mokujiBox {
	width: 100%;
	box-sizing: border-box;
	margin: 40px 0px 0px 0px;
	padding: 25px 20px;
	border: 2px solid #00006c;
	border-radius: 20px;
	line-height: 1.2;
	background: #fffada;
	position: relative;
}
.mokujiBox ol {
	margin: 3% 0% 0% 5%;
	padding: 0;
	color: #00006c;
}
.mokujiBox ol li {
	font-weight: bold;
	list-style-type: decimal;
	margin-bottom: 10px;
}
.mokujiBox ol li ol{
	margin: 1% 0% 2% 5%;
}
.mokujiBox ol li ol li {
	font-weight: normal;
	font-size: 95%;
	list-style-type: decimal;
	margin: 10px 0px;
}
.mokujiBox ol li ol li:last-child { margin-bottom: 25px;}

.mokujiBox div{
	text-align: center;
	font-weight: bold;
	font-size: 1.8rem;
	color: #00006c;
	margin: 0 auto 5% auto;
	background: #fff;
	border: 2px solid #00006c;
	border-radius: 10px;
	padding: 8px 15px 5px;
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
}
.mokujiBox a{
	color: #00006c;
	text-decoration: none;
	line-height: 1.6;
}
.mokujiBox a:hover{
	color: #41aafa;
	transition: 0.2s;
}

/* 目次の表示・非表示 */
.hidden {
	display: none;
}
  
.mokujiBox div{
	width: max-content;
}

.mokujiBox div button{
	font-size: 16px;
	line-height: 20px;
	border: none;
	color: #41aafa;
	background: none;
	margin-left: 5px;
}
.mokujiBox div button:hover {
	color: #00006c;
	cursor: pointer;
}




/*見出し、キャプション等*/

.caption{
	line-height: 1.2;
	font-weight: bold;
	font-size: 1.6rem;
}
.pageBoxHeading{
	line-height: 1.2;
	font-weight: bold;
	font-size: 1.8rem;
	color: #00006c;
	margin-bottom: 20px;
}


.wLineHeading{
	line-height: 1.2;
	font-weight: bold;
	font-size: 4.4rem;
	color: #00006c;
}
.wLineHeading span{
	font-size: 0.6em;
	display: block;
}

small{ font-size: 1.2rem;}


picture img{
	width: 100%;
	height: auto;
	margin: 20px 0 0 0;
}

/*あわせて読みたい*/
/* related */
.related_post{
	width: 80%;
	position: relative;
	border: 2px solid #99A5C3;
	margin: 40px auto 20px;
	text-align: center;
	font-size: 17px;
	padding: 1em;
}
.related_tit{
	color: #3F568D;
	position: absolute;
	top:-10px;
	left: 10px;
	padding: 0 10px;
	background: #fff;
	font-size: 15px;
}
.related_tit::before{
	content:url(../img/icon_relatedPost.png);
	float: left;
	vertical-align:middle;
	margin: 0 5px 0 0;
}
.related_post a{
	color: #2F83FF;
	line-height: 1.4;
}
.related_post a:hover{
	opacity: 0.5;
	transition: 0.3s;
}


/*まとめ*/
.box_matome {
  padding: 20px;
  background-color: #E6EAF6;
  margin: 0 auto;
}
.box_matome h3 {
  text-align: center;
  margin: 10px 0 30px;
}

/*コラムのまとめ*/
.box_matome_column {
	padding: 30px 20px 30px 20px;
	background-color: #E6EAF6;
	margin: 20px auto 0;
}
.box_matome_column h3 {
	color: #00006c;
	font-size: 1.9rem;
	text-align: center;
	margin: 10px 0 20px 0;
	padding: 0 0 0 0;
}
.box_matome_column h3 span{
	color: #fff;
	font-size: 1.5rem;
	background: #00006c;
	border-radius: 20px;
	padding: 5px 20px;
	display: table;
	margin: 10px auto 0px;
}
.box_matome_column h4 {
	color: #00006c;
	font-size: 1.8rem;
	margin: 20px 0 10px 0;
	border-top: 1px solid #cbcbe5;
	padding: 20px 0 0 0;
}




/*署名プロフィール*/
.profileArea {
	box-sizing: border-box;
	margin: 30px auto;
	background: #eee;
	border: 1px solid #444;
	padding: 20px;
}
.profileTtl p {
	font-weight: bold;
	font-size: 1.8rem;
	color: #fff;
	padding: 10px;
	background: #444;
}
.profileBox {
	margin-top: 20px;
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}

.profileImg{
	width: 20%;
}
.profileImg img{
	max-width: 140px;
	height: auto;
}
.profileTxt {
    width: 75%;
	padding:0% 0% 0% 4%;
}
.profileAssociation{ font-weight: bold;}
.profileName{
	font-size: 2.0rem;
	margin: 0px 0px 10px 0px;
	font-weight: bold;;
}
.profileName span {	font-size: 2.8rem;}
.profileBox ul {
	padding-left: 20px;
}
.profileBox ul li {
	font-size: 1.5rem;
	line-height: 1.4;
	margin: 10px auto 0;
}
.profileMemo {
	padding: 20px;
	margin-top: 20px;
	background: #fff;
	border-radius: 5px;
}
.profileMemo p {
	font-size: 1.7rem;
	text-align: justify;
	line-height: 1.6;
}

.writer {
	text-align: right;
	padding: 15px 0;
}

/* 監修者 */
.sv{
	margin: 30px auto 80px;
	border: 1px solid #444;
	padding: 30px 20px 20px;
	display: flex;
}
.sv_left{
	width: 25%;
	font-size: 26px;
	color: #00006c;
	font-weight: bold;
	text-align: center;
	padding: 5px 0 0 0;
}
.sv_left img{
	margin: 70px 0 0 0;
}

.sv_right{
	width: 75%;
	padding: 0 0 0 2%;
}
.sv_tit{
	font-weight: bold;
	font-size: 18px;
	border-bottom: 1px solid #00006c;
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
	line-height: 1.4;
}

.sv_tit br{display: none;}

.sv_tit div span{
	font-size: 1.5em;
	margin: 10px 0 0 0;
}

.sv_right dl {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin:0 auto;
	font-size: 17px;
}
.sv_right dt {
	width: max-content;
	padding: 1% 0% 1% 0%;
	line-height: 1.4;
}
.sv_right dd {
	width: 75%;
	padding: 1% 0% 1% 0%;
	line-height: 1.4;
}

.svOpen{
	background: #eee;
	padding: 4% 5%;
	margin: 2% 0;
}
.svOpen p{
	margin: 0 0 1em 0;
}
.svOpenButton{ display: none;}
.svOpenButton{ color: #3c6ef0;}


/*colorBox内リスト*/
/*ulリスト*/
.colorBox b{ color: #00006c; font-weight: bold;}
.colorBox ul li{
	line-height: 1.5;
	margin-top: 10px;
    margin-left: 20px;
}
.colorBox ul li:first-child{margin-top: 0px;}

.colorBox ul li a {
    color: #00006c;
    text-decoration: none;
}
.colorBox ul li a.line{
    color: #00006c;
    text-decoration: underline;
}
.colorBox ul li a:hover{
	color: #41aafa;
	transition: 0.2s;
}


/*olリスト*/
.colorBox ol {
	display: table;
	margin-top: 20px;
	padding: 0;
}

/*リストスタイルを数字として指定*/
.colorBox ol li {
	line-height: 1.6;
	margin-top: 10px;
	list-style-type: decimal;
	padding: 0;
	display: table-row;
	counter-increment: table-ol;
}

/*リストスタイルのカウンター項目を指定（table-olは任意の文字列）*/
.colorBox ol li:before {
	content: counter(table-ol) ".";
	display: table-cell;
	padding-right: 0.4em;
	text-align: right;
	font-weight: bold;
	color: #00006c;
}

/*リストアイテムの下部余白を指定*/
.colorBox ol li:after {
	content: "";
	display: block;
	margin-bottom: 1em;
}

/*最後のリストアイテム下部の不要な余白を無くす指定*/
.colorBox ol li:last-of-type:after {
	margin-bottom: 0;
}


/*colorBox内 olリスト内にulリストを入れ子*/
.colorBox ol li ul {
	margin: 10px 0;
  }
  .colorBox ol li ul li {
	line-height: 1.5;
	margin-top: 10px;
	list-style-type: disc;
	padding: 0;
	display: table-row;
  }
  
  .colorBox ol li ul li:before {
	content:  "・";
	display: table-cell;
	padding-right: 0.4em;
	text-align: right;
	font-weight: bold;
	color: #00006c;
  }



/*ページのまとめ*/
.box_matome_page {
    margin: 30px auto 0;
    padding: 30px;
    background: #e6f2ff;
}

.box_matome_page ol{
	counter-reset: item;
	list-style-type: none;
	padding-left: 0;
  }
  .box_matome_page ol ol{
	padding-left: 0.5em;
	margin:10px 0px 20px 0px;
	
  }
  .box_matome_page li{
	text-indent: -1.3em;
	padding-left: 1.3em;
	line-height: 1.5;
	margin: 10px 0;
  }
  .box_matome_page li:before {
	counter-increment: item;
	content: counter(item)'.';
	/* 以下は自由に装飾... */
	padding-right: .5em;
	font-weight: bold;
	color: #00006c;
  }




/*コンテンツ内数字リスト*/

.listNum ol {
	/*要素の連番（カウンタ）の値をリセットする*/
	counter-reset: li;
	margin: 20px 0; 
}

.listNum li {
	position: relative;
	font-size: 1.8rem;
	padding: 5px 0px 5px 40px;
	margin: 5px 0;
	/*デフォルトのスタイルを非表示にする*/
	list-style: none;
	line-height: 1.2;
	color: #00006c;
	font-weight: bold;
}
.listNum li::before {
	position: absolute;
	top: 0;
	left: 0;
	font-weight: bold;
	color: #fff;
	padding: 5px 10px 5px 10px;
	background: #00008f;
	/*要素の連番（カウンタ）の値を進める*/
	counter-increment: li;
	/*自動連番を付ける関数*/
	content: counter(li);
}

/*リンク*/

a.link_blue { color: #3c6ef0;}
a.link_blue:link{ color: #3c6ef0;}
a.link_blue:hover { opacity: 0.7;}


/* 緊急アラート */

.alert_wrap{
	margin: 2em auto 3em;
}
.alert{
	background:#f60;
	color: #fff;
	padding: 2% 3%;
	font-size: clamp(16px, 3vw, 17px);
	line-height: 1.4;
	font-weight: bold;
	margin: 0 0 10px;
	}

.alert div{
	font-size: 1.2em;
	margin: 0 auto 5px;
	text-align: center;
}

.alert_bt{
	background: #00913a;
	border-radius: 5px;
	width: max-content;
	margin: 0 auto;
	padding: 10px 30px 10px 20px;
	position: relative;
}


.alert_bt a{
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}
.alert_bt a::after {
  position: absolute;
  top: auto;
  right: 10px;
  content: "\f105";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #fff;
}

.alert_bt a:hover{
	opacity: 0.5;
	transition: 0.3s;
}

/*--------------------★★★PCサイト用（1080px以上）★★★---------------------*/


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



}

/*--------------------★★★タブレット★★★---------------------*/
@media (min-width: 768px) and (max-width: 1079px) {

/*目次*/
/*.mokujiBox ol {margin: 4% 0% 0% 3%;}
.mokujiBox ol li ol {margin: 2% 0% 3% 4%;}*/

/* 監修者 */
.sv_left{ font-size: 20px;}
.sv_tit{ font-size: 17px;}
.sv_right dd { width: 70%;}


}


/*--------------------★★★スマホサイト用（767px以下）★★★---------------------*/
@media screen and (max-width:767px) {

/*日付*/
.article-date {font-size: 1.2rem;}

.mainImg small{font-size: 1.0rem;}

/*見出し、キャプション等*/
.wLineHeading{
    line-height: 1.2;
    font-weight: bold;
    font-size: 2.4rem;
    color: #00006c;
}
.wLineHeading span{
	font-size: 0.7em;
	display: block;
}


/*署名プロフィール*/
.profileImg{
	width: 100%;
	text-align: center;
    padding:0px 0px 15px 0px;
}
.profileTtl p { text-align: center;}

.profileTxt {
	width: 100%;
}

/* 監修者 */
.sv{
	display: block;
}

.sv_left,.sv_right{ 
	width: 100%; 
	display: block;
	padding: 0 0;
}
.sv_right dd { width: 68%;}

.sv_left{font-size: 24px;}

.sv_left img{
	max-width: 139px;
	width: 100%;
	height: auto;
	margin: 15px auto 20px;
	display: block;
}
.sv_tit br{display: block;}



/*コンテンツ内数字リスト*/
.listNum li {font-size: 1.6rem;}

/*コラムのまとめ*/
.box_matome_column h3 {
	line-height: 1.2;
}



}



/*--------------------★★★スマホサイト用（480px以下）★★★---------------------*/
@media screen and (max-width:480px) {

	
	/* 監修者 */
	.sv_tit{ font-size: 17px;}
	.svOpenButton{ display: block;}
	
	}