@charset "utf-8";

/* - - - - - - - - - - - - - - - - - - - - - - - - 
 Carrier Router - Top
- - - - - - - - - - - - - - - - - - - - - - - - */
/* overwrite */
@media screen and (max-width: 1012px){
	.lyt-hover-a.diff-col3 .hover-content .visual .hover-hdg { 
		font-size: 2.4vw;}
}
@media only screen and (max-width: 768px) {
    .lyt-hover-a .hover-content .visual a {
		background-color: rgba(0,0,0,0.8);
		padding: 8px; }
	.lyt-hover-a .hover-content .visual:hover a{
		background-color: rgba(0,0,0,0.8); }
}
.lyt-idx-b.diff-col1 a {
	border: none;
	color: #fff; }
.lyt-idx-b.diff-text-inline .text-box .title {
	align-self:center;
	font-weight:normal;
	padding-right: 0; }
.lyt-idx-b.diff-text-inline .text-box .title::after {
	display: none; }
/* bg */
.diff-bg-bk { background-color:#000;color:#fff;}
.diff-bg-bk a { color:#fff;}
.diff-bg-bk a:hover { opacity:0.75;}
/* margin padding font */
/* margin */
.mg-t-24p{ margin-top: 24px;}
/* font */
@media screen and (max-width: 480px){
.fs-16sp{ font-size: 1.6rem;}
}
/* custom */
/* lyt-idx-b 1カラム表示 */
.lyt-idx-b.diff-col1 {
	flex-flow: column;
}
.lyt-idx-b.diff-col1 .text-box.diff-type-b {
	padding: 15px 35px 15px 24px;
}
.lyt-idx-b.diff-col1 a{
	border:none;
	color:#fff;
}
@media only screen and (max-width: 767px) {
    .lyt-idx-b.diff-col1 .text-box.diff-type-b .title{
        align-self: flex-end;
        text-shadow: 0px 0px 15px #000; }
}
.lyt-idx-b.diff-text-inline {
    display: flex;
    flex-flow: column; }
.lyt-idx-b.diff-text-inline .text-box{
	padding: 15px 35px 15px 24px;
    display: flex;
    flex-flow: column; }
.lyt-idx-b.diff-text-inline .text-box::before {
	display: none; }
/*
.lyt-idx-b.diff-text-inline .text-box .title{
	align-self: center;
    position: relative;
    padding-right: 20px;
}
.lyt-idx-b.diff-text-inline .text-box .title:after {
    display: inline-block;
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-top: -5px;
}
*/
.diff-bg-products-service{
	background:url(/jp/imagesgig5/bg-products-service_tcm102-4073140_tcm102-2750236-32.jpg) top center no-repeat #051620;}
.lyt-idx-b .text-box.bg-service-platform{
	background:url(/jp/imagesgig5/bg-service-platform_tcm102-4072982_tcm102-2750236-32.png) top left no-repeat #333;}
.lyt-idx-b .text-box.bg-integration-service{
	background:url(/jp/imagesgig5/bg-integration-service_tcm102-4072983_tcm102-2750236-32.png) top left no-repeat #333;}
/**/
.card-type01{}
.opt-flx-justify-c{
	justify-content: center;}
.card-type01 li{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	font-size:1.4rem; }
.card-type01 .card-type01-box{
	position: relative;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	flex-wrap: wrap;
  flex-flow: column;
	width:100%;
	background: #ffffff; }
.card-type01 .card-type01-box img{
	width: 100%;
	max-width:309px;
	height: auto;}
.card-type01 .title{
	background: #3c3b36;
	color: #fff;
	padding:10px;
	margin: 0;
	font-size:1.4rem;
  width: 100%;
  box-sizing: border-box;}
.card-type01 p{
	padding: 16px;}
.card-type01 .item-btn-a{
	width: 100%;
	margin-bottom:34px;
  align-self: flex-end;}
.card-type01 .item-btn-a li{
	padding:0 !important;}
.card-type01 a.btn-a{
	border: 1px solid #a30b1a;}
.card-type01 .btn-a{
	padding:8px 22px;
	width: 70%;
	margin:0 auto;}
.card-type01 .item-btn-a li + li .btn-a{
	margin-top:10px;}
.card-type01 .btn-a::before{
	content: normal;}
.card-type01 li .card-type01-box-titlewrap {
  min-height: 0%;}
.card-type01 li .card-type01-box-text {
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 auto;}

@media only screen and (max-width: 767px) {
	.card-type01.lyt-idx-b .card-type01-box img {
	  position: absolute;
	  max-width: 120px;
	  left: 0; }
	.card-type01.lyt-idx-b .card-type01-box {
	  padding-left: 128px;
	  background: inherit;
	  display: block; }
	.card-type01.lyt-idx-b li .card-type01-box-text {
	  display: block; }
	.card-type01.lyt-idx-b p {
	  padding: 16px 0 0 0; }
	.card-type01.lyt-idx-b .item-btn-a {
	  align-self: auto; }
}