@charset "UTF-8";

/* Flow図 */
.dropdownbox {
	position: relative;
	/*display: inline-block;*/
	/*background-color: #000;
	padding: 50px;*/
	cursor: pointer;
	transition: all .2s ease;
}
.dropdownbox .drop-content {
	display: block;
	position: absolute;
	/*background-color: #f9f9f9;*/
	/*min-width: 160px;*/
	/*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);*/
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 20, 70, 0.95);
	/*background-color: #006ea8;*/
	/*background-color: rgba(0, 110, 168, 0.95);*/
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	opacity: 0;
	top: 50px;
	left: 0px;
	visibility: hidden;
}
@media(max-width: 1200px) {
	.dropdownbox .drop-content {
		height: auto !important;
		z-index: 100;
		padding-bottom: 10px;
	}
}
.drop-content ul.solutions {
	margin-top: 10px;
}
.drop-content ul.solutions li {
	width: auto !important;
	background: none !important;
	background-image: none !important;
	margin: 0 !important;
	position: relative;
  
}
.drop-content ul.solutions li::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 18px;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-left: 7px solid #fff;
}
/* ドロップダウン内のリンク */
.drop-content ul.solutions li a {
	padding: 4px 22px 4px 32px;
	text-decoration: none;
	display: block;
	color: #fff;
	line-height: 1.2em;
	font-size: 90%;	
}
@media(max-width: 500px) {
	.drop-content ul.solutions {
		margin-top: 7px;
	}
	.drop-content ul.solutions li::before {
		top: 12px;
    	left: 10px;
		border: 3px solid transparent;
    	border-left: 4px solid #fff;
	}
	.drop-content ul.solutions li a {
		font-size: 80%;	
		padding: 4px 12px 4px 18px;
	}
}
.drop-content ul.solutions li a:hover {
	color: #006ea8;
}
.dropdownbox:hover .drop-content {
	display: block;
	top: 0px;
	left: 0px;
	transition: all .2s ease;
	opacity: 1;
	visibility: visible;
}
.drop-content ul.solutions li a span {
  font-size: 80%;	
  padding-left: 8px;
  position: relative;
  color: #1a93d3;
}
.drop-content ul.solutions li a span::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url("../images/icn-blank-b.svg");
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 3px;
  right: -14px;
}
@media(max-width: 500px) {
  .drop-content ul.solutions li a span {
    font-size: 70%;	
    padding-left: 4px;
  }
  .drop-content ul.solutions li a span::after {
    width: 8px;
    height: 8px;
    top: 3px;
    right: -10px;
  }
}