@charset "UTF-8";
/*##########################################################################################
##//ご利用シーン//####################################################################
##########################################################################################*/
dl.case { margin: 20px auto 16px auto; width: 69%; display: flex; flex-wrap: wrap; }
@media screen and (min-width: 0) and (max-width: 768px) { dl.case { width: 100%; } }
dl.case dt { margin-bottom: 4px; padding: 10px 12px; width: 20%; background-color: #65AADD; color: #FFF; font-weight: bold; }
dl.case dd { margin-bottom: 4px; padding: 10px 12px; width: 80%; background-color: #E0EEF8; color: #333; }

article.shadow_it { width: 716px !important; height: 440px; margin-bottom: 40px; background: url(/bs/i-filter/security/common/images/shadow_it/frame.png) no-repeat; padding: 0 !important; }
@media screen and (min-width: 0) and (max-width: 768px) { article.shadow_it { background: none; width: auto !important; height: auto; } }
@media screen and (min-width: 769px) and (max-width: 9999px) { article.shadow_it .pcdn { display: none !important; } }
@media screen and (min-width: 99px) and (max-width: 768px) { article.shadow_it .pcdn { display: block; position: absolute; bottom: -72px; width: 100%; height: auto; z-index: -99; text-align: center; padding-right: 20px; } }
article.shadow_it div { width: 345px; height: 430px; padding: 10px 20px 20px; }
@media screen and (min-width: 99px) and (max-width: 320px) { article.shadow_it div { max-width: 300px; height: auto; padding: 5px; text-align: center; margin: 0 auto; } }
@media screen and (min-width: 321px) and (max-width: 768px) { article.shadow_it div { max-width: 345px; height: auto; padding: 15px; text-align: center; margin: 0 auto; } }
article.shadow_it div:nth-child(1) { float: left; }
@media screen and (min-width: 99px) and (max-width: 320px) { article.shadow_it div:nth-child(1) { position: relative; background: url(/bs/i-filter/security/common/images/fshadow_it/rame_pc.png) no-repeat 0px 0px; background-size: 620px 380px; float: none; margin: 20px auto; max-width: 300px; min-height: 380px; margin-bottom: 20px; text-align: left; } }
@media screen and (min-width: 321px) and (max-width: 768px) { article.shadow_it div:nth-child(1) { position: relative; background: url(/bs/i-filter/security/common/images/shadow_it/frame_pc.png) no-repeat left top; background-size: initial; float: none; margin: 20px　auto; max-width: 345px; min-height: 440px; margin-bottom: 20px; text-align: left; } }
article.shadow_it div:nth-child(1) dt span { color: #004CA0; }
article.shadow_it div:nth-child(1) li span { color: #CCD9EB; }
article.shadow_it div:nth-child(2) { float: right; }
@media screen and (min-width: 99px) and (max-width: 320px) { article.shadow_it div:nth-child(2) { background: url(/bs/i-filter/security/common/images/shadow_it/frame_pc.png) no-repeat -320px 0px; background-size: 620px 380px; float: none; margin: 20px auto; max-width: 300px; min-height: 380px; text-align: left; } }
@media screen and (min-width: 321px) and (max-width: 768px) { article.shadow_it div:nth-child(2) { background: url(/bs/i-filter/security/common/images/shadow_it/frame_pc.png) no-repeat right top; background-size: initial; float: none; margin: 20px　auto; max-width: 345px; min-height: 440px; margin-bottom: 20px; text-align: left; } }
article.shadow_it div:nth-child(2) dt span { color: #00865B; }
article.shadow_it div:nth-child(2) li span { color: #CCE5DE; }
article.shadow_it dt { margin-bottom: 120px; font-size: 22px; text-align: center; line-height: 150%; position: relative; }
@media screen and (min-width: 99px) and (max-width: 320px) { article.shadow_it dt { margin-bottom: 120px; font-size: 16px; text-align: center; line-height: 150%; position: relative; } }
article.shadow_it dt span { font-size: 14px; font-weight: bold; position: absolute; top: 0; left: 0; }
article.shadow_it dd { margin-bottom: 30px; text-align: center; font-weight: bold; font-size: 15px; line-height: 150%; }
@media screen and (min-width: 99px) and (max-width: 320px) { article.shadow_it dd { margin-bottom: 21px; text-align: center; font-weight: bold; font-size: 12px; line-height: 150%; } }
article.shadow_it li { width: auto; height: auto; margin-left: 1em; text-indent: -1em; font-size: 14px; line-height: 170%; background: none; text-align: left; }
@media screen and (min-width: 0) and (max-width: 768px) { article.shadow_it li { margin-left: 1em; text-indent: 0em; } }