@charset "utf-8";

.view .img-cloud-diagnosis { margin: 0 auto; width: 85%; }

p + .main-list { margin-top: -20px!important; }
.diagnose-box { padding: 10px 20px 24px; }
.diagnose-date { padding: 16px!important; background-color: rgba(80, 195, 30, 0.25); }

.diagnose-date  ul.flw25 { display: flex; flex-wrap: wrap; box-sizing:border-box; clear:both;  }
.diagnose-date ul.flw25 { padding-top: 10px; }
.diagnose-date ul.flw25 li { width: 25%; }
.diagnose-date ul.flw25 li:last-child { margin-bottom: 0px!important; padding-bottom: 0px!important; }
@media (max-width: 1024px) {
	.diagnose-date ul.flw25 li { width: 33.333%; }
}
@media (max-width: 680px) {
	.diagnose-date ul.flw25 li { width: 50%; }
}
@media (max-width: 480px) {
	.diagnose-date ul.flw25 li { width: 100%; }
}

@media (max-width: 360px) {
	.no-view > div > ul { top: 4px; left: 4px; }
}
@media (max-width: 400px) {
	.no-view > div > ul { font-size: 12px; }
}
@media (max-width: 480px) {
	.no-view > div { width: 100%; }
}
@media (max-width: 500px) {
	.view { display: none; }
	.no-view { display: block; }
}
@media (max-width: 767px) {
	.view .img-mobile-vulnerability { width: 95%; }
    p + .main-list { margin-top: 0px!important; }
    .diagnose-box { margin-bottom: 10px; }
}

.logo-cissp { margin: 0 auto; width: 90%; }
@media (max-width: 500px) {
	.logo-cissp { width: 50%; }
}
@media (min-width: 501px) and (max-width: 767px) {
	.logo-cissp { width: 35%; padding: 10px 0; }
}

/* =====================
key visual
===================== */
#top-keyvisual{ position: relative; max-height: 300px; background:url(../img/iot-diagnosis/key-visual.jpg) no-repeat 50% 60%; background-size:100% auto; background-color: #004400; text-align: center; }
#top-keyvisual:before {
  content:"";
  display: block;
  padding-top:43%;/* 画像横÷縦の％ */
}

#top-keyvisual .ttl-box { position: absolute; margin: 0 auto; width: 100%; top: 20%; color: #fff; text-shadow: #030 2px 2px 5px; font-weight: bold; }
#top-keyvisual .ttl-service { color: #fff; text-shadow: #030 2px 2px 5px; font-weight: bold; font-size: 36pt!important; }
#top-keyvisual .copy-box { position: absolute; margin: 0 auto; padding: 16px 0px; width: 100%; bottom: 0; color: #fff; background-color: rgba(0, 40, 0, 0.7); }
#top-keyvisual .copy-box p.h3 { font-weight: normal!important; }

@media (min-width: 1331px) {
	#top-keyvisual{ min-height: 360px; background-position: 50% 60%; }
	#top-keyvisual .ttl-box { top: 25%; }
}
@media (max-width: 767px) {
	#top-keyvisual{ min-height: 300px; background-position: 50% 60%; background-size: 100% auto; }
	#top-keyvisual .ttl-box { top: 25%; }
	#top-keyvisual .ttl-service { font-size: 30pt!important; }
	#top-keyvisual .copy-box { padding: 0px; text-align: left; }
}
@media (max-width: 640px) {
	#top-keyvisual{ background-position: 50% 100%; background-size: auto 110%; }
	#top-keyvisual .ttl-box { top: 15%; }
	#top-keyvisual .ttl-service { font-size: 28pt!important; }
}