@charset "UTF-8";
/* ---------------------------------------------------------
  INDEX
      Document visual----ページタイトル部分のCSS。
      Document heading---h2見出し部分のCSS
      汎用スタイル---colorやmarginなどカスタム用のスタイル
                      プロパティ毎に[共通/ＰＣ/スマホ]を随時追加。
--------------------------------------------------------- */


.container p{
  margin-bottom:20px;
}
/* ---------------------------------------------------------
	Document visual(SP)
--------------------------------------------------------- */
#visual {
  padding: 2% 2% 1.8%;
  background: #4472c4;
  font-size: 0;
  text-align: left;
  line-height: 1.2;
  border-bottom: solid 10px #4472c4;
  margin-bottom:20px;
}
#visual .article {
  width: 100%;
}
#visual h1 {
  vertical-align: middle;
  width: 100%;
  text-align: center;
  margin: 10px 0;
}
#visual h1 img {
  width: 100%;
}
#visual p {
  vertical-align: middle;
  text-align: left;
  font-weight: bold;
  font-size: 21px;
  line-height: 1.4;
  color: #fff;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif;
  margin-left: 4px;
}

/*————————————————-
Document visual(PC)
————————————————-*/
@media screen and (min-width:750px){
  #visual {
    height: 160px;
    margin-bottom: 40px;
    padding: 0 30px 0 24px;
  }
  #visual .article {
    height: 130px;
  }
  #visual h1 {
    text-align: left;
    padding: 30px 0 10px;
    width: 72%;
    margin: 0;
  }
  #visual p {
    font-size: 26px;
    line-height: 1.3;
    margin-left: 0;
  }
}
/* ---------------------------------------------------------
	Document heading(SP)
--------------------------------------------------------- */
h2 {
	margin-bottom: 20px;
	padding: 5px 0 10px 20px;
	border-bottom: solid 4px #d7d6d5;
	font-weight: bold;
	font-size: 6vw;
	line-height: 1.2;
	position: relative;
}

h2:before {
	content: '';
	width: 9px;
	height: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
}

h2 span {
	font-weight: 500;
}

.h2-leftColor-Pink:before{
  background: #e80c7c;
}
.h2-leftColor-Blue:before{
  background: #0168b7;
}

/*———————————————————-
Document heading(PC)
———————————————————-*/
@media screen and (min-width:750px){
h2 {
	height: 60px;
	padding: 5px 0 10px 28px;
  line-height: 50px;
  font-size: 30px;
}
}


/* ---------------------------------------------------------
	CSS Document intro
--------------------------------------------------------- */

#intro h2 {
  font-size: 23.4px;
  margin-top: 1%;
  line-height: 1.1;
  padding: 0.4em .7em 0;
  font-weight: bold;
  color: #4472c4;
  font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic", "Osaka",sans-serif;
  text-align: left;
  border-bottom: none;
}

ol.number li { 
  display: list-item;
  list-style: desimal !important;
}

#worse .section {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  text-align: left;
  border: 5px solid #b3d2e9;
  margin-bottom: 20px;
}

div.early h3 {
  color: #e73323;
  font-size: 24px;
  margin-bottom: 5px;
}

/* ---------------------------------------------------------
	汎用スタイル
--------------------------------------------------------- */
/*———————————————-
line-height
———————————————-*/
.lh-90per{line-height: 90%!important;}
.lh-100per{line-height: 100%!important;}
.lh-110per{line-height: 110%!important;}
.lh-120per{line-height: 120%!important;}
.lh-130per{line-height: 130%!important;}
.lh-140per{line-height: 140%!important;}
.lh-150per{line-height: 150%!important;}
.lh-160per{line-height: 160%!important;}
.lh-170per{line-height: 170%!important;}
.lh-180per{line-height: 180%!important;}

/*———————————————-
margin　共通
———————————————-*/
.mb0{margin-bottom:0!important;}
.mb5{margin-bottom:5px!important;}
.mb10{margin-bottom:10px!important;}
.mb20{margin-bottom:20px!important;}
.mb30{margin-bottom:30px!important;}
.mb40{margin-bottom:40px!important;}
.mb50{margin-bottom:50px!important;}
.mb60{margin-bottom:60px!important;}
.mb70{margin-bottom:70px!important;}
.mb80{margin-bottom:80px!important;}
.mb90{margin-bottom:90px!important;}
.mb100{margin-bottom:100px!important;}
.mb1em{margin-bottom:1em;}
.mb2em{margin-bottom:2em;}
.mt0{margin-top:0!important;}
.mt10{margin-top:10px!important;}
.mt20{margin-top:20px!important;}
.mt30{margin-top:30px!important;}
.mt40{margin-top:40px!important;}
.mt50{margin-top:50px!important;}
.ml1em{margin-left:1em;}
.m0auto{margin:0 auto;}



/*———————————————-
margin　PC
———————————————-*/
@media screen and (min-width:750px){
.mb0Pc{margin-bottom:0!important;}
.mb5Pc{margin-bottom:5px!important;}
.mb10Pc{margin-bottom:10px!important;}
.mb20Pc{margin-bottom:20px!important;}
.mb30Pc{margin-bottom:30px!important;}
.mb40Pc{margin-bottom:40px!important;}
.mb50Pc{margin-bottom:50px!important;}
.mt0Pc{margin-top:0!important;}
.mt10Pc{margin-top:10px!important;}
.mt20Pc{margin-top:20px!important;}
.mt30Pc{margin-top:30px!important;}
.mt40Pc{margin-top:40px!important;}
.mt50Pc{margin-top:50px!important;}
}

/*———————————————-
margin　Mo
———————————————-*/
@media screen and (max-width:749px){
.mb0Mo{margin-bottom:0!important;}
.mb5Mo{margin-bottom:5px!important;}
.mb10Mo{margin-bottom:10px!important;}
.mb20Mo{margin-bottom:20px!important;}
.mb30Mo{margin-bottom:30px!important;}
.mb40Mo{margin-bottom:40px!important;}
.mb50Mo{margin-bottom:50px!important;}
.mt0Mo{margin-top:0!important;}
.mt10Mo{margin-top:10px!important;}
.mt20Mo{margin-top:20px!important;}
.mt30Mo{margin-top:30px!important;}
.mt40Mo{margin-top:40px!important;}
.mt50Mo{margin-top:50px!important;}
}

/*———————————————-
padding
———————————————-*/
.pb0{padding-bottom:0;}
.pb5{padding-bottom:5px;}
.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb40{padding-bottom:40px;}
.pb50{padding-bottom:50px;}

.p20{padding:20px;}
/*———————————————-
font
———————————————-*/
.fwb{font-weight:bold;}
.fc-red{color:#ea3131;}
.fc-blue {color:#2c6d9e;}
.fc-green {color:#017b3a;}
.fc-orange{color:#e6a43e}
.fc-white{color:#FFFFFF;}
.fs-70per{font-size:70%;}
.fs-80per{font-size:80%;}
.fs-90per{font-size:90%;}
.fs-110per{font-size:110%;}
.fs-120per{font-size:120%;}
.fs-130per{font-size:130%;}
.fs-140per{font-size:140%;}
.fs-150per{font-size:150%;}
.fs-160per{font-size:160%;}
.fs-170per{font-size:170%;}
.fs-180per{font-size:180%;}
.fs-190per{font-size:190%;}
.fs-200per{font-size:200%;}

/*———————————————-
border
———————————————-*/
.bs1px-999999{border:solid 1px #999999;}
.bs3px-000000{border:solid 3px #000000;}
.bs2px-01b756{border:solid 2px #01b756;}
.bs2px-dddddd{border:solid 2px #DDDDDD;}

.bbs3px-01b756{border-bottom: solid 3px #b70101;}
.bbd8px-01b756{border-bottom: double 8px #b70101;}


/*———————————————-
蛍光下線
———————————————-*/
.linear-yellow{background: linear-gradient(transparent 60%, #ffff83 50%)}
.linear-green {background: linear-gradient(transparent 90%, #01b756 50%);}

/*———————————————-
text-align
———————————————-*/
.ta-r{text-align:right;}
.ta-l{text-align:left;}
.ta-c{text-align:center;}

/*———————————————-
text-align　PC
———————————————-*/
@media screen and (min-width:750px){
.ta-rPc{text-align:right;}
.ta-lPc{text-align:left;}
.ta-cPc{text-align:center;}
}

/*———————————————-
text-align　Mo
———————————————-*/
@media screen and (max-width:749px){
.ta-rMo{text-align:right;}
.ta-lMo{text-align:left;}
.ta-cMo{text-align:center;}
}

/*———————————————-
display
———————————————-*/
.disp-b{display:block;}
.disp-ilb{display:inline-block;}

/*———————————————-
flex-box
———————————————-*/
.disp-flex{
  display:flex;
  align-items:center;
}

/*———————————————-
スマホでは非表示
———————————————-*/
@media screen and (min-width:750px){
.sp{display:none;}
}

/*———————————————-
PCでは非表示
———————————————-*/
@media screen and (max-width:749px){
.pc{display:none;}
}

/*———————————————-
Shadow
———————————————-*/
.fil-ds{
filter: drop-shadow(2px 6px 6px rgba(0,0,0,0.4));
}

/*———————————————
box-Shadow
———————————————*/
.b-shadow{
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
}


/*———————————————-
二重打ち消し線
———————————————-*/
.entryday{
display: inline-block;
position: relative;
}
.entryday:before {
content: ”;
width: 100%;
height: 1px;
border-top: solid 2px #F44336;
position: absolute;
left: 0 ;
top: calc(50% – 4px) ;
}
.entryday:after {
content: ”;
width: 100%;
height: 1px;
border-bottom: solid 2px #F44336;
position: absolute;
left: 0 ;
bottom: calc(50% – 4px);
}

/*———————————————-
listの角合わせ
『・』『※』等
———————————————-*/
.corner-match{
padding-left: 1em;
text-indent: -1em;
}


/*———————————————-
20210208 追加
———————————————-*/
/*　大見出しの色　*/
.h2-leftColor-Green:before{
  background: #01b756;
}
.h2-leftColor-Orange:before{
  background: #b76201;
}
.h2-leftColor-Blue:before{
  background: #06518a;
}


.greenBack{
  background-color: #f5fff9;
  padding:1em 20px 1em ;
}
.greenBack img{
  border:solid 2px #DDDDDD;
  background-color:#FFFFFF;
  width:80%;
}
.greenFrame{
  border:solid 3px #01b756;
  padding:1.5em 0.5em 0;
}
.blackFrame{
  border:solid 3px #333333;
  padding:1.5em 0.5em 0;
}
.blueFrame{
  border:solid 5px #b3d2e9;
  padding:1em 1em 0;
}

.bb-dotted2px-0168b7 {
  border-bottom: dotted 2px #0168b7;
}

hr.dotted-w60 {
	border-width: 6px 0 0 0;
	border-style: dotted;
	border-color:rgba(160,160,160,0.3);
  margin: 30px auto;
  width: 80%;
}
.triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 50px 100px 0 100px;
border-color: #0168b7 transparent transparent transparent;
margin: 0 auto;
border-radius: 6px;
}
.threat{
  background: url("../images/immunity_1.png") no-repeat center center;
  background-size:contain;
  position : relative;
  width: 100%;
  min-height:380px;
  background-color: rgba(255,255,255,0.3);
  background-blend-mode: lighten;
}
.threat p{
  position : absolute;
  /*filter: drop-shadow(2px 2px 1px rgba(255,255,255,1));*/
  background-color: rgba(255,255,255,0.7);
  border-radius:30px;
  padding:4px 0.5em 0;
  border:solid 2px #DDDDDD;
}
.threat p:nth-child(1){
  top: 0;
  left:0;
  font-weight:bold;
  font-size:110%;
}
.threat p:nth-child(2){
  top: 50px;
  left:10px;
  font-weight:bold;
  font-size:140%;
}
.threat p:nth-child(3){
  top: 9em;
  left:0em;
  font-weight:bold;
}
.threat p:nth-child(4){
  top: 260px;
  left: 5px;
  font-weight:bold;
  font-size:90%;
}
.threat p:nth-child(5){
  top: 330px;
  left: 0px;
  font-size:100%;
}
.threat p:nth-child(6){
  top: 1.5em;
  right:0;
  font-size:120%;
}
.threat p:nth-child(7){
  top: 180px;
  right:0;
  font-weight:bold;
  font-size:100%;
}
.threat p:nth-child(8){
  top: 250px;
  right: 50px;
  font-size:110%;
}
.threat p:nth-child(9){
  top: 300px;
  right:0;
  font-weight:bold;
  font-size:140%;
}

/*———————————————-
フキダシ
———————————————-*/
.arrow_box01 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  /* border-bottom: solid 3px #2c6d9e; */
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}
/*
.arrow_box01:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
} 
.arrow_box01:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #2c6d9e;
  z-index: 1;
}
*/
.arrow_box01 p {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 32px;
}


/*———————————————-
blockquote
———————————————-*/
blockquote {
  box-sizing: border-box;
  font-style: normal;
  background: #f5f5f5;
  font-size: 80%;
  color: #777777;
  border-left: 4px solid #9dd4ff;
  margin: 0;
  padding:0 0.5em;
}

blockquote p {
  padding: 0;
  margin: 7px 0;
  line-height: 1.7;
}

blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 90%;
  font-style: normal;
}

/*———————————————-
#ds
———————————————-*/
#ds .article.effect {
  border: 3px #ea5d01 solid;
}

#ds .article.effect h3 {
  background: #fbe5d6;
}

/*———————————————-
matome
———————————————-*/
.matome {
  margin-top: 70px;
  padding: 1px 30px 30px;
  border-radius: 10px;
  background: #105d00;
  font-size: 20px;
  color: #fff;
}
.matome h3 span {
  display: inline-block;
  vertical-align: top;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  box-shadow: 0 0 0 3px #105d00 inset;
  background: #fff;
  font-weight: 500;
  font-size: 40px;
  line-height: 56px;
  color: #0f0f0f;
}
.matome p.ttl {
  margin-bottom: 10px;
}
.matome p.ol-ttl {
  text-decoration: underline;
  color: #f2e826;
  font-size: 22px;
}


/*———————————————-
目次 Indxe
———————————————-*/
.index-box {
  margin: 10px auto 20px;
  padding: 30px 20px 20px 25px;
  border: 2px solid #ddd;
  border-radius: 8px;
  position:relative;
  max-width: 450px;
}
.index-box::before {
  background-color: #fff;
  color: #333;
  content: "このページの目次";
  font-weight: bold;
  position: absolute;
  padding: 0 15px;
  left: 25%;
  top: -15px;
}
@media screen and (min-width: 768px) {
  .index-box::before {
    left: 30%;
}