@charset "UTF-8";



/* PC start */
@media screen and (min-width:768px), print {





.solution #topTitle h1 {
	padding: 0 0 60px 0 ;
}




/* tab & accordion */

.solutionTabacc {
}
.solutionTabacc .siteInner {
	width: 100% ;
	min-height: 375px ;
}
.solutionTabacc dl dt {
	padding: 0 ;
	line-height: 70px ;
}
.solutionTabacc dl dt.btnAcv a {
	color: #374252 ;
	text-decoration: none ;
}
.solutionTabacc dl dt.btnAcv:hover,
.solutionTabacc dl dt.btnAcv:focus {
	background: #fafeff ;
}
.solutionTabacc dl dt span {
	display: inline-block ;
	width: auto ;
	background-size: 30px ;
	padding: 0 0 0 36px ;
}
.solutionTabacc dl:nth-child(1) dt {
}
.solutionTabacc dl:nth-child(1) dt span {
	background: url(../img/solution-menuicon_01.png) left center no-repeat ;
}
.solutionTabacc dl:nth-child(1) dt.btnAcv span {
	background: url(../img/solution-menuicon2_01.png) left center no-repeat ;
}
.solutionTabacc dl:nth-child(2) dt {
	left: 25% ;
}
.solutionTabacc dl:nth-child(2) dt span {
	background: url(../img/solution-menuicon_02.png) left center no-repeat ;
	background-size: 30px ;
}
.solutionTabacc dl:nth-child(2) dt.btnAcv span {
	background: url(../img/solution-menuicon2_02.png) left center no-repeat ;
}
.solutionTabacc dl:nth-child(3) dt {
	left: 50% ;
}
.solutionTabacc dl:nth-child(3) dt span {
	background: url(../img/solution-menuicon_03.png) left center no-repeat ;
	background-size: 30px ;
}
.solutionTabacc dl:nth-child(3) dt.btnAcv span {
	background: url(../img/solution-menuicon2_03.png) left center no-repeat ;
}
.solutionTabacc dl:nth-child(4) dt {
	left: 75% ;
    border-right: none ;
}
.solutionTabacc dl:nth-child(4) dt span {
	background: url(../img/solution-menuicon_04.png) left center no-repeat ;
}
.solutionTabacc dl:nth-child(4) dt.btnAcv span {
	background: url(../img/solution-menuicon2_04.png) left center no-repeat ;
}
.solutionTabacc dl dd {
	width: 75% ;
	background: #f0f4f5 ;
	padding: 0 ;
}
.solutionTabacc dl dd ul {
	display: -webkit-flex ;
	display: flex ;
	-webkit-flex-wrap: wrap ;
	flex-wrap: wrap ;
	-webkit-justify-content: flex-start ;
	justify-content: flex-start ;
	-webkit-align-items: stretch ;
	align-items: stretch ;
	position: relative ;
	width: 100% ;
}
.solutionTabacc dl dd ul li {
	display: table ;
	position: relative ;
	width: 33.333333% ;
	height: 60px ;
	font-size: 13px ;
    border-right: 1px solid #ffffff ;
    border-bottom: 1px solid #ffffff ;
}
.solutionTabacc dl dd ul li:nth-child(3n) {
    border-right: none ;
}
.solutionTabacc dl dd ul li a {
	display: table-cell ;
	position: relative ;
	background: url(../../common/img/ar9.png) 95% center no-repeat ;
	background-size: 10px ;
	width: 100% ;
	height: 60px ;
	padding: 0 35px 0 15px ;
	line-height: 1.2 ;
	font-size: 13px ;
	color: #333333 ;
	vertical-align: middle ;
	text-decoration: none ;
}
.solutionTabacc dl dd ul.dc li a {
	background: url(../../common/img/blank3.png) 95% center no-repeat ;
	background-size: 16px ;
}
.solutionTabacc dl dd ul li.now a,
.solutionTabacc dl dd ul li a:hover,
.solutionTabacc dl dd ul li a:focus {
	background-color: #e2e9eb ;
}
.solutionTabacc .catalog {
	display: block !important ;
	position: absolute ;
	top: 70px ;
	right: 0 ;
	background: #d7e1e3 ;
	width: 25% ;
	min-height: 305px ;
	padding: 25px 0 0 0 ;
	text-align: center ;
}
.solutionTabacc .catalog img {
	width: 62% ;
	height: auto ;
}
.solutionTabacc .catalog p {
	margin: 25px 0 0 0 ;
	text-align: center ;
}
.solutionTabacc .catalog .btn1 {
	width: 70% ;
	min-width: 0px ;
	padding: 5px 5px ;
}
.solutionTabacc .catalog .btn1 span {
	padding: 0 10px 0 0 ;
	font-size: 13px ;
	background-position: right top ;
}




/* solutionMenu */
.solutionMenu {
	width: 100% ;
	max-width: 980px ;
	margin: 40px auto ;
}
.solutionMenu ul {
	display: -webkit-flex ;
	display: flex ;
	-webkit-flex-wrap: nowrap ;
	flex-wrap: nowrap ;
	-webkit-justify-content: center ;
	justify-content: center ;
	-webkit-align-items: stretch ;
	align-items: stretch ;
	width: 100% ;
	height: 90px ;
}
.solutionMenu ul li {
	display: table ;
	background: #4f5b6c ;
	width: 33.33% ;
	height: 90px ;
	border-left: 1px solid #737b86 ;
	vertical-align: middle ;
	-webkit-transition-duration: 0.2s ;
	transition-duration: 0.2s ;
	-webkit-transition-timing-function: ease-out ;
	transition-timing-function: ease-out ;
}
.solutionMenu ul li:first-child {
	border-left: none ;
}
#twoColumn .solutionMenu ul li {
	width: 40% ;
}
.solutionMenu ul li a {
	display: table-cell ;
	background: url(../../common/img/ar3.png) 95% center no-repeat ;
	background-size: 10px ;
	width: 500px ;
	height: 90px ;
	padding: 0 0 0 30% ;
	font-size: 14px ;
	line-height: 1.4 ;
	color: #ffffff !important ;
	vertical-align: middle ;
	text-decoration: none ;
	-webkit-transition-duration: 0s ;
	transition-duration: 0s ;
}
.solutionMenu ul li.menu1 {
	background: #4f5b6c url(../../common/img/products-icon_01.png) 12% center no-repeat ;
}
.solutionMenu ul li.menu2 {
	background: #4f5b6c url(../../common/img/products-icon_02.png) 12% center no-repeat ;
}
.solutionMenu ul li.menu3 {
	background: #4f5b6c url(../../common/img/products-icon_03.png) 12% center no-repeat ;
}
.solutionMenu ul li:hover,
.solutionMenu ul li:active {
	background-color: #737b86 ;
}




/* Contents */

#solutionContents {
	padding: 60px 0 ;
}

#solutionContents .contentsList > div {
	position: relative ;
	background: #f0f4f5 ;
	overflow: hidden ;
}
#solutionContents .contentsList a {
	display: block ;
	width: 100% ;
	height: 100% ;
	color: #333333 ;
	text-decoration: none ;
}
#solutionContents .contentsList .imgFit {
	overflow: hidden ;
	min-height: 295px;
	z-index: 1 ;
}
#solutionContents .contentsList .imgBox {
	background-color: transparent ;
	z-index: 1 ;
}
#solutionContents .contentsList .imgFit img,
#solutionContents .contentsList .imgBox img {
	position: relative ;
	left: 50% ;
	width: auto ;
	max-width: none ;
	height: 100% ;
	-webkit-transform: translate(-50%,0) ;
	-ms-transform: translate(-50%,0) ;
	transform: translate(-50%,0) ;
}
#solutionContents .contentsList h3 {
	position: relative ;
	background: url(../../common/img/ar1.png) 90% 13px no-repeat ;
	background-size: 12px ;
	margin: 0 ;
	padding: 10px 28px 10px 20px ;
	font-size: 16px ;
	font-weight: bold ;
	color: #333333 ;
	line-height: 1.4 ;
	z-index: 10 ;
}
#solutionContents .contentsList a.blank h3,
#solutionContents .contentsList a[target="_blank"] h3 {
	background: url(../../common/img/blank3.png) 94% 12px no-repeat ;
	background-size: 16px ;
}

#solutionContents .contentsList p {
	position: relative ;
	margin: 0 ;
	padding: 0 20px 20px 20px ;
	font-size: 12px ;
	line-height: 1.5 ;
	z-index: 10 ;
}
#solutionContents .contentsList .category {
	position: absolute ;
	top: 0 ;
	left: 0 ;
	font-size: 0px ;
}
#solutionContents .contentsList .category p {
	position: relative ;
	display: inline-block ;
	background: #999999 ;
	height: 30px ;
	padding: 0 15px ;
	line-height: 30px ;
	vertical-align: middle ;
	font-size: 10px ;
	color: #ffffff ;
	vertical-align: top ;
}
#solutionContents .contentsList .category p.pro {
	background: #387e9f ;
}
#solutionContents .contentsList .category p.sol {
	background: #33a0b4 ;
}
#solutionContents .contentsList .column1-4 .imgBox {
	height: 350px ;border:1px solid #ddeaf1;
}
#solutionContents .contentsList .column1-4 a:hover,
#solutionContents .contentsList .column1-4 a:focus {
	background-color: #e2e9eb ;
}
#solutionContents .contentsList .column1-2 {
	background: #374252 ;
	padding: 350px 0 0 0 ;
}
#solutionContents .contentsList .column1-2 a,
#solutionContents .contentsList .column1-2 p {
	color: #ffffff ;
}
#solutionContents .contentsList .column1-2 h3 {
	background: url(../../common/img/ar3.png) 96% 13px no-repeat ;
	background-size: 12px ;
	color: #ffffff ;
}
#solutionContents .contentsList .column1-2 a.blank h3,
#solutionContents .contentsList .column1-2 a[target="_blank"] h3 {
	background: url(../../common/img/blank2.png) 94% 12px no-repeat ;
	background-size: 16px ;
}

.solution .ankerPoint {
	padding-top: 0 ;
}

.solution #solutionContents {
    padding: 40px 0 60px ;
}

#loader {
	position: absolute;
	display: none;
	width: 32px;
	height: 32px;
	left: 50%;
	bottom: -80px;
	margin-left: -16px;
}



}




/* SP start */
@media screen and (max-width:767px) {


/* tab & accordion */

.solutionTabacc {
}
.solutionTabacc .siteInner {
	background: #f0f4f5 ;
	width: 100% ;
	padding: 6vw 4vw ;
}
.solutionTabacc .siteInner:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(240, 244, 245, 0);
	border-top-color: #f0f4f5;
	border-width: 30px;
	margin-left: -30px;
}
.solutionTabacc dl dd ul {
	width: 100% ;
}
.solutionTabacc dl dd ul li a {
	display: block ;
	position: relative ;
	background: #ffffff url(../../common/img/ar9.png) 96% center no-repeat ;
	background-size: 3vw ;
	width: 100% ;
	padding: 4vw 8vw 4vw 4vw ;
	color: #333333 ;
	border-bottom: 1px solid #eeeeee ;
	text-decoration: none ;
}
.solutionTabacc dl dd ul.dc li a {
	background: #ffffff url(../../common/img/blank3.png) 96% center no-repeat ;
	background-size: 4.8vw ;
}
.solutionTabacc dl dd ul li.now a,
.solutionTabacc dl dd ul li a:hover,
.solutionTabacc dl dd ul li a:focus {
	background-color: #e2e9eb ;
}
.solutionTabacc .catalog {
	background: #d7e1e3 ;
	padding: 4vw ;
	text-align: center ;
}
.solutionTabacc .catalog img {
	width: 60% ;
	height: auto ;
}
.solutionTabacc .catalog p {
	margin: 4vw 0 0 0 ;
	text-align: center ;
	color: #666666 ;
}




/* solutionMenu */
.solutionMenu {
	width: 100% ;
	margin: 8vw 0 ;
}
.solutionMenu ul {
	display: table ;
	width: 100% ;
	margin: 0 ;
	padding: 0 ;
}
.solutionMenu ul li {
	display: table-cell ;
	background: #4f5b6c ;
	margin: 0 ;
	padding: 0 ;
	border-left: 1px solid #737b86 ;
	vertical-align: middle ;
	-webkit-transition-duration: 0.2s ;
	transition-duration: 0.2s ;
	-webkit-transition-timing-function: ease-out ;
	transition-timing-function: ease-out ;
}
.solutionMenu ul li:first-child {
	border-left: none ;
}
.solutionMenu ul li a {
	display: table-cell ;
	background: url(../../common/img/ar3.png) 95% center no-repeat ;
	background-size: 10px ;
	width: 100vw ;
	height: 15vw ;
	padding: 2vw 3vw 2vw 1vw ;
	font-size: 3.2vw  ;
	line-height: 1.4 ;
	color: #ffffff !important ;
	text-decoration: none ;
	vertical-align: middle ;
	word-wrap: break-word ;
	text-align: center ;
	-webkit-transition-duration: 0s ;
	transition-duration: 0s ;
}
.solutionMenu ul li br { display: none ; }
.solutionMenu ul li:hover,
.solutionMenu ul li:active {
	background-color: #737b86 ;
}




/* Contents */

#solutionContents {
	position: relative ;
	padding: 8vw 0 ;
}

#solutionContents .contentsList {
	display: -webkit-flex ;
	display: flex ;
	-webkit-flex-wrap: wrap ;
	flex-wrap: wrap ;
	-webkit-justify-content: space-between ;
	justify-content: space-between ;
	-webkit-align-items: stretch ;
	align-items: stretch ;
	position: relative ;
	width: 100% ;
	margin: 0 auto ;
}
#solutionContents .contentsList > div {
	position: relative ;
	background: #f0f4f5 ;
	overflow: hidden ;
}
#solutionContents .contentsList a {
	display: block ;
	width: 100% ;
	height: 100% ;
	color: #333333 ;
	text-decoration: none ;
}
#solutionContents .contentsList .imgFit {
	overflow: hidden ;
	z-index: 1 ;
}
#solutionContents .contentsList .imgBox {
	background-color: transparent ;
	z-index: 1 ;
}
#solutionContents .contentsList .imgFit img,
#solutionContents .contentsList .imgBox img {
	position: relative ;
	left: 50% ;
	width: auto ;
	height: 100% ;
	-webkit-transform: translate(-50%,0) ;
	-ms-transform: translate(-50%,0) ;
	transform: translate(-50%,0) ;
}
#solutionContents .contentsList h3 {
	position: relative ;
	background: url(../../common/img/ar1.png) 92% 4vw no-repeat ;
	background-size: 2.5vw ;
	margin: 0 ;
	padding: 2.8vw 5vw 2.8vw 4vw ;
	font-size: 3.7vw ;
	font-weight: bold ;
	color: #333333 ;
	line-height: 1.4 ;
	z-index: 10 ;
}
#solutionContents .contentsList a.blank h3,
#solutionContents .contentsList a[target="_blank"] h3 {
	background: url(../../common/img/blank3.png) 94% 3vw no-repeat ;
	background-size: 3.8vw ;
}
#solutionContents .contentsList p {
	position: relative ;
	margin: 0 ;
	padding: 0 4vw 4vw 4vw ;
	font-size: 3.2vw ;
	color: #666666 ;
	line-height: 1.5 ;
	z-index: 10 ;
}
#solutionContents .contentsList .category {
	position: absolute ;
	top: 0 ;
	left: 0 ;
	font-size: 0px ;
}
#solutionContents .contentsList .category p {
	position: relative ;
	display: inline-block ;
	background: #999999 ;
	height: 5.6vw ;
	padding: 0 3vw ;
	line-height: 5.6vw ;
	vertical-align: middle ;
	font-size: 2.6vw ;
	color: #ffffff ;
	vertical-align: top ;
}
#solutionContents .contentsList .category p.pro {
	background: #387e9f ;
}
#solutionContents .contentsList .category p.sol {
	background: #33a0b4 ;
}
#solutionContents .contentsList .column1-4 {
	width: 47.8260% ;
}
#solutionContents .contentsList.columnBtm > div.column1-4:last-child {
	margin-bottom: 4vw ;
}
#solutionContents .contentsList .column1-4 .imgBox {
	height: 37vw ;
}
#solutionContents .contentsList .column1-4 a:hover,
#solutionContents .contentsList .column1-4 a:focus {
	background-color: #e2e9eb ;
}
#solutionContents .contentsList .column1-2 {
	background: #374252 ;
	width: 100% ;
	min-height: 65vw ;
	padding: 39vw 0 0 0 ;
}
#solutionContents .contentsList .column1-2 a,
#solutionContents .contentsList .column1-2 p {
	color: #ffffff ;
}
#solutionContents .contentsList .column1-2 h3 {
	background: url(../../common/img/ar3.png) 96% 4vw no-repeat ;
	background-size: 2.5vw ;
	color: #ffffff ;
}
#solutionContents .contentsList .column1-2 a.blank h3,
#solutionContents .contentsList .column1-2 a[target="_blank"] h3 {
	background: url(../../common/img/blank2.png) 94% 3vw no-repeat ;
	background-size: 3.8vw ;
}

#loader {
	position: absolute;
	display: none;
	width: 10vw;
	height: 10vw;
	left: 50%;
	bottom: -20vw;
	margin-left: -16px;
}



}