@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;@700&display=swap');

header {
  padding: 25px 0;
}
header .logo img {
  width: 20%;
	max-width: 120px;
}
footer {
  padding: 60px 0 0;
}
footer .copy #f_logo img {
  width: 107px;
}
footer .copy #copy small span {
  display: inline-block;
  margin-left: 1em;
}
#drmonitor {
	font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(16px, 1.172vw, 18px);
	font-weight: 400;
	line-height: 1.7;
	color: #333;
	padding-bottom: 6em;
}
#drmonitor a {
  color: #0080d6;
  text-decoration: underline;
}
#drmonitor a:hover {
  text-decoration: none;
}
#drmonitor a:hover img {
	opacity: .7;
}
#drmonitor img {
	width: auto;
	max-width: 100%;
	height: auto;
	transition: .5s;
}
#drmonitor .fs_xsmall {font-size: .85em;}
#drmonitor .fs_small {font-size: .9em;}
#drmonitor .fs_large {font-size: 1.125em;}
#drmonitor .fs_xlarge {font-size: 1.25em;}
#drmonitor .red {color: #f00;}
#drmonitor .yellow {color: #fff100;}
#drmonitor .txt_center {text-align: center;}
#drmonitor .txt_right {text-align: right;}
#drmonitor .em {font-weight: 700;}
#drmonitor .underline {text-decoration: underline;}
#drmonitor .normal {font-weight: normal;}
#drmonitor .palt {font-feature-settings: "palt";}
#drmonitor .marker {
	background: linear-gradient(transparent 60%, #fcec03 60%, #fcec03 90%, transparent 90%);
	padding-bottom: .1em;
}
#drmonitor .list > li {
  position: relative;
  padding-left: 1.3em;
}
#drmonitor .list.number {
	counter-reset: item1;
}
#drmonitor .list.number > li {
	padding-left: 2em;
}
#drmonitor .list.number > li::before {
	counter-increment: item1;
	content: counter(item1)".";
}
#drmonitor .list.number2 {
	counter-reset: item2;
}
#drmonitor .list.number2 > li {
	padding-left: 2.5em;
}
#drmonitor .list.number2 > li::before {
	counter-increment: item2;
	content: "（"counter(item2)"）";
	left: -.5em;
}
#drmonitor .list.custom_0 > li {
  padding-left: 0;
}
#drmonitor .list.custom_2 > li {
  padding-left: 2.3em;
}
#drmonitor .list.custom_3 > li {
  padding-left: 3.3em;
}
#drmonitor .list.custom_4 > li {
  padding-left: 4.3em;
}
#drmonitor .list > li + li {
  margin-top: .2em;
}
#drmonitor .list._m0 > li + li {
  margin-top: 0;
}
#drmonitor .list > li::before,
#drmonitor .list > li > .num {
  position: absolute;
  top: 0;
  left: 0;
}
#drmonitor .list.kome > li::before {
  content: "※";
}
#drmonitor .list.smldot > li::before {
  content: "・";
}
#drmonitor .list.circle > li::before {
  content: "○";
}
#drmonitor .list.inline,
#drmonitor .list.inline > li {
	display: inline-block;
	text-align: left;
}
#drmonitor .container {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
}
#drmonitor .flex {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

/* mv_block */
#drmonitor .mv_block {
	text-align: center;
	padding: 2em 0;
}
#drmonitor .mv_img {
	position: relative;
	padding-bottom: 4em;
}
#drmonitor .mv_ecocute {
	width: 17.45%;
	position: absolute;
	left: 0;
	bottom: 0;
}
#drmonitor .mv_limit {
	width: 10em;
	height: 10em;
	color: #fff;
	background: #cc0000;
	border-radius: 50%;
	font-size: clamp(15px, 1.317vw, 18px);
	font-weight: 700;
	line-height: 1.3;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 0;
	bottom: 0;
}
#drmonitor .mv_limit .fs_large {
	font-size: clamp(20px, 2.049vw, 28px);
}
#drmonitor .mv_tit {
	font-size: clamp(20px, 2.342vw, 32px);
	font-weight: 700;
	color: #233d63;
	margin-bottom: .5em;
}
#drmonitor .mv_catch {
	display: inline-block;
	font-size: clamp(18px, 2.196vw, 30px);
	font-weight: 700;
	line-height: 1.4;
	color: #cc0000;
	border: 2px solid #cc0000;
	padding: .35em .75em;
}
#drmonitor .mv_img + * {
	text-align: left;
	margin-top: 2em;
}

/* sec_block */
#drmonitor .sec_block + .sec_block {
	margin-top: 6em;
}
#drmonitor .sec_tit {
	background: #233d63;
	color: #fff;
	font-size: clamp(18px, 2.049vw, 28px);
	font-weight: 700;
	text-align: center;
	padding: .25em 1em .35em;
	margin-bottom: 1em;
	position: relative;
	z-index: 1;
}
#drmonitor .sec_tit::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	clip-path: polygon(51% 0, 100% 0, 100% 100%, 48% 100%);
	background: rgba(35,61,99,.5);
	mix-blend-mode: multiply;
	z-index: -1;
}
#drmonitor .sec_detail {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
#drmonitor .sec_detail > * {
	padding: .5em 1em;
}
#drmonitor .sec_detail > *:nth-child(n+3) {
	margin-top: 10px;
}
#drmonitor .sec_detail > dt {
	width: 22%;
	white-space: nowrap;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	background: #0b58af;
	color: #fff;
	font-size: clamp(16px, 1.317vw, 18px);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}
#drmonitor .sec_detail > dd {
	border: 1px solid #aaa;
	width: calc(78% - 10px);
}
#drmonitor .sec_stit {
	font-size: clamp(16px, 1.317vw, 18px);
	margin-bottom: .5em;
}
#drmonitor .image_box {
	margin-top: 2em;
}
#drmonitor .image_box > .flex > *:nth-child(1) {
	width: 36.5%;
}
#drmonitor .image_box > .flex > *:nth-child(2) {
	width: 58.5%;
}
#drmonitor #monitor .sec_tit {
	background: #cc0000;
}
#drmonitor #monitor .sec_tit::before {
	background: rgba(204,0,0,.5);
}
#drmonitor #monitor .sec_detail > dt {
	background: #f5cccc;
	color: inherit;
}

/* btn_block */
#drmonitor .btn_block {
	text-align: center;
	margin-top: 3em;
	position: relative;
}
#drmonitor .btn_link {
	display: inline-block;
	background: #0b58af;
	border-radius: .75em;
	color: #fff;
	font-size: clamp(18px, 1.610vw, 22px);
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.4;
	text-decoration: none;
	padding: 1.5em 3em;
	box-shadow: 3px 3px 0 rgba(255,255,255,.2) inset,
							-3px -3px 0 rgba(0,0,0,.3) inset;
	overflow: hidden;
	position: relative;
	z-index: 1;
	transition: .5s;
}
#drmonitor .btn_link::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(11,88,175,.3);
	clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%);
	mix-blend-mode: multiply;
	z-index: -1;
}
#drmonitor .btn_link:hover {
	background: #6bb5dc;
}

/* faq_box */
#drmonitor .faq_box {
	padding: 1em;
	counter-reset: qnumber 0;
}
#drmonitor .faq_box > div + div {
	margin-top: 1.5em;
	padding-top: 1.5em;
	border-top: 1px solid #aaa;
}
#drmonitor .faq_box .trigger {
	font-size: clamp(16px, 1.464vw, 20px);
	font-weight: 700;
	padding-left: 6em;
	margin-bottom: 1em;
	position: relative;
	cursor: pointer;
}
#drmonitor .faq_box .trigger::before {
	counter-increment: qnumber 1;
	content: "Q " counter(qnumber);
	background: #0b58af;
	border-radius: 999px;
	color: #fff;
	width: 3.5em;
	height: 1.5em;
	font-size: 140%;
	font-weight: 400;
	letter-spacing: -.05em;
	line-height: 1.5;
	text-align: center;
	position: absolute;
	top: -.1em;
	left: 0;
}
#drmonitor .faq_box .trigger:hover {
	text-decoration: underline;
}
#drmonitor .faq_box .trigger_target {
	background: #e1f0f8;
	border-radius: 1em;
	padding: 1.5em 2em;
	display: none;
}
#drmonitor .faq_box .trigger_target > * + * {
	margin-top: 1em;
}
#drmonitor .closed {
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	background: rgba(0,0,0,.65);
	color: #fff;
	font-size: 110%;
	line-height: 1.4;
	letter-spacing: .05em;
	text-align: center;
	text-shadow: 1px 1px 3px #000,
							 -1px -1px 3px #000,
							 0 0 3px #000;
	padding: 1.5em;
}
#drmonitor .closed_tit {
	font-size: 150%;
	font-weight: bold;
	margin-bottom: .25em;
}
#drmonitor .btn_block .closed {
	width: 100%;
	height: calc(100% + 2em);
	position: absolute;
	top: -1em;
	left: 0;
	z-index: 1;
}

/* -------------------------------------------------
  Media Queries による切り替え
------------------------------------------------- */
/* スマホ向けのスタイル：768px */
@media only screen and (max-width: 768px) {
  header {
    padding: 10px 0;
  }
	header .logo img {
		max-width: 90px;
	}
	footer {
		padding: 0;
	}
	footer .fnav {
		padding-top: 40px;
	}
	footer .copy #copy small span {
		display: block;
	}
	#drmonitor {
		font-size: clamp(14px, 1.172vw, 16px);
		padding-bottom: 3em;
	}
	#drmonitor .sp_container {
		width: 90%;
		margin: 0 auto;
	}
	#drmonitor .flex {
		flex-direction: column;
	}
	
	/* mv_block */
	#drmonitor .mv_block {
		width: 92%;
		padding: 1em 0 3em;
		margin: 0 auto;
	}
	#drmonitor .mv_img {
		padding-bottom: 0;
	}
	#drmonitor .mv_ecocute {
		width: 27%;
		max-width: 100px;
		position: static;
		margin: 0 auto 1em;
	}
	#drmonitor .mv_limit {
		width: 100%;
		height: auto;
		color: #fff;
		border-radius: 0;
		flex-direction: row;
		position: static;
		padding: .3em 1em .5em;
	}
	#drmonitor .mv_limit > span:first-child::after {
		content: "：";
	}
	#drmonitor .mv_catch {
		display: block;
		border-width: 1px;
		padding: .35em .75em;
	}
	#drmonitor .mv_img + * {
		margin-top: 1em;
	}
	
	/* sec_block */
	#drmonitor .sec_block + .sec_block {
		margin-top: 4em;
	}
	#drmonitor .sec_detail > *:nth-child(n+2) {
		margin-top: inherit;
	}
	#drmonitor .sec_detail > dt:nth-child(n+3) {
		margin-top: 1em;
	}
	#drmonitor .sec_detail > dt {
		width: 100%;
		padding: .5em 5%;
	}
	#drmonitor .sec_detail > dd {
		border: none;
		width: 100%;
		padding: 1em 5%;
	}
	#drmonitor .sec_stit {
		text-align: center;
	}
	#drmonitor .image_box {
		padding: 0 5%;
	}
	#drmonitor .image_box > .flex > *:nth-child(1) {
		width: 65%;
		margin: 0 auto;
	}
	#drmonitor .image_box > .flex > *:nth-child(2) {
		width: 100%;
		margin: 1.5em auto 0;
	}

	/* btn_block */
	#drmonitor .btn_block {
		width: 90%;
		margin: 2em auto 0;
	}
	#drmonitor .btn_link {
		display: block;
		padding: 1em;
	}

	/* faq_box */
	#drmonitor .faq_box {
		padding: 1em;
	}
	#drmonitor .faq_box > div + div {
		margin-top: 1em;
		padding-top: 1em;
	}
	
	#drmonitor .closed {
		font-size: 100%;
		letter-spacing: 0;
		padding: 1.5em 4%;
	}
	#drmonitor .closed_tit {
		font-size: 130%;
		letter-spacing: .05em;
	}
	#drmonitor .btn_block .closed {
		width: 114%;
		left: -7%;
		overflow-x: hidden;
		padding: 1.5em 7%;
	}
	
	


}


/* タブレット＆PCのスタイル：769px */
@media only screen and (min-width: 769px) {	
 
	
	

}