/* 各エリア共通 */
.hipf_underlinetitle h2{
	color: #2d50a9;
	font-size: 175%;
	font-weight: bold;
	position: relative;
	background: none;
	margin-bottom: 40px;
}

.hipf_underlinetitle h2::after{
  content: '';
  width: 120px;
  height: 4px;
  display: inline-block;
  background-color: #2d50a9;
  position: absolute;
  bottom: 0px;
  left: calc(50% - 60px);
}

.hipf_underlinetitle{
	text-align: center;
	margin-bottom: 25px;
}

.TextStyle1 {
	font-size: 100%;
}

.sp_only_br{
	display: none;
}

.footnote {
	display: flex;
	justify-content: flex-end;
}
.footnote p {
	margin-left: 1em;
}	
	

@media screen and (max-width: 579px) {
	.hipf_underlinetitle h2{
		font-size: 150%;
	}
}

/* ブランディングエリア */
#BrandingArea {
	height: 200px;
	padding-bottom: 30px;
	background-color: #fff;
}
#BrandingArea .ImgArea {
	background-image: url(/products/it/IoTM2M/list/hipf/image/img_hipf_2500_400.jpg);
	background-repeat: no-repeat;
	background-position: center;
	height: 100%;
}
#BrandingArea .ImgArea .TextArea {
	padding-top: 35px;
	width: 1275px;
	margin: 0 auto;
}
#BrandingArea .ImgArea .TextArea h1 {
	color: #fff;
	font-weight: bold;
	font-size: 200%;
}

#BrandingArea .ImgArea .TextArea h1 .hipf_subtitle{
	font-size: 60%;
}


@media screen and (min-width :995px) and (max-width: 1304px) {
	.JS #BrandingArea .ImgArea .TextArea {
		width: auto;
		max-width: 1275px;
		padding-left: 15px;
	}
	.sp_only_br{
		display: inline;
	}	
}

@media screen and (max-width: 994px) {
	.JS #BrandingArea .ImgArea .TextArea {
		box-sizing: border-box;
		padding-left: 15px;
		width: 100%;
	}
	.sp_only_br{
		display: inline;
	}	

	.footnote { display: block; }
	.footnote p.ListRightAdjust {
		margin-left: 0;
		text-align : left;
	}
}

@media screen and (max-width: 579px) {
	.JS #BrandingArea .ImgArea .TextArea h1 {
		font-size: 180%;
	}
	.sp_only_br{
		display: inline;
	}
}

@media screen and (max-width: 399px) {
	.JS #BrandingArea .ImgArea {
		background-position: center left -800px;
	}
	.sp_only_br{
		display: none;
	}	
}

/* キャッチコピーエリア */
.CatchCopy.hipf {
	font-size: 175%;
}

@media screen and (max-width: 579px) {
	.CatchCopy.hipf {
		font-size: 150%;
	}
}

/* 特徴エリア */
.hipf_features{
	width: calc(100% - 80px);
	background: linear-gradient(130deg, #00814b, #0a8190 20%,#0a8190 45%,#0f5090 85%);
	padding: 40px;
	margin-bottom: 60px;
}

.hipf_features h2{
	color:#fff;
	text-align: center;
	background: none;
	font-size: 175%;
	font-weight: bold;
	margin-bottom: 15px;
}

ul.hipf_features_box {
	display: flex;
}

ul.hipf_features_box li {
	width: 33%;
	margin-right: 40px;
}

ul.hipf_features_box li:nth-child(3) {
	margin-right: 0;
}

ul.hipf_features_box li p.title {
	font-size: 138%;
	font-weight: bold;
	color: #fff;
	border: solid 1px #fff;
	text-align: center;
	padding: 10px 0px 5px;
	margin-bottom: 20px;
}

ul.hipf_features_box li p.sub {
	font-size: 138%;
	font-weight: bold;
	color: #fff;
	text-align: center;
	margin-bottom: 20px;
}

ul.hipf_features_box li p.com {
	margin-bottom: 20px;
	color: #fff;
}

@media screen and (max-width: 767px) {
	ul.hipf_features_box {
		display: flex;
		flex-wrap: wrap;
	}
	ul.hipf_features_box li {
		width: 100%;
		margin-right: 0px;
		margin-bottom: 50px;
	}
	ul.hipf_features_box li:last-child {
		margin-bottom: 0px;
	}
}

@media screen and (max-width: 579px) {
	.hipf_features h2 {
		font-size: 150%;
	}
	ul.hipf_features_box li p.title,
	ul.hipf_features_box li p.sub{
		font-size: 125%;
	}
}

/* ページ内リンクエリア */

.hipf_inpagelinks{
	background: #ebebeb;
	width: 100%;
	margin-bottom: 70px;
}

.hipf_inpage{
	display: flex;
	padding: 8px;
}

.hipf_inpage li{
	width: 33.3%;
	text-align: center;
	border-right: solid 2px #fff;
}

.hipf_inpage li:last-child{
	border-right: none;
}

.hipf_inpage li a{
	display: block;
	color: #2d50a9;
	text-decoration: none;
	font-weight: bold;
	font-size: 115%;
	height: 60px;
	background-image: url(/products/it/IoTM2M/image/icon/red_arrow_down.svg);
	background-repeat: no-repeat;
	background-position: center bottom 10px;
	background-size: 24px 24px;
	-moz-background-size: 24px 24px;
	-webkit-background-size: 24px 24px;
	-o-background-size: 24px 24px;
	-ms-background-size: 24px 24px;
}

@media screen and (max-width: 767px) {
	.hipf_inpage {
		flex-wrap: wrap;
	}
	.hipf_inpage li{
		width: 100%;
		text-align: center;
		border-right: none;
		border-bottom: solid 2px #fff;
		padding-top: 10px;
		padding-bottom: 5px;
	}
	.hipf_inpage li:first-child{
		padding-top: 5px;
	}
	.hipf_inpage li:last-child{
		border-right: none;
		border-bottom: none;
		padding-bottom: 0px;
	}
}

/* DXのユースケースエリア */
ul.uc_Box {
	display: flex;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

ul.uc_Box li.uc_Boxitem {
	width: calc((100% - 50px)/3);
	margin-right: 25px;
	margin-bottom: 30px;
	background: #efefef;
	box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.4);
}

ul.uc_Box li.uc_Boxitem:hover {
	opacity: 0.8;
}

ul.uc_Box li.uc_Boxitem:nth-child(1) .title{
	background-image: url("/products/it/IoTM2M/list/hipf/image/dx01.png");
}
ul.uc_Box li.uc_Boxitem:nth-child(2) .title{
	background-image: url("/products/it/IoTM2M/list/hipf/image/dx02.png");
}
ul.uc_Box li.uc_Boxitem:nth-child(3) .title{
	background-image: url("/products/it/IoTM2M/list/hipf/image/dx03.png");
	margin-right: 0;
}
ul.uc_Box li.uc_Boxitem:nth-child(4) .title{
	background-image: url("/products/it/IoTM2M/list/hipf/image/dx04.png");
}
ul.uc_Box li.uc_Boxitem:nth-child(5) .title{
	background-image: url("/products/it/IoTM2M/list/hipf/image/dx05.png");
}
ul.uc_Box li.uc_Boxitem:nth-child(6) .title{
	background-image: url("/products/it/IoTM2M/list/hipf/image/dx06.png");
}

ul.uc_Box li.uc_Boxitem:nth-child(3n){
	margin-right: 0px;
}

ul.uc_Box li p{
	padding: 0 20px;
}

ul.uc_Box li a {
	display: grid;
	text-decoration: none;
	height: 320px;
}

ul.uc_Box li a .title{
	height: 120px;
	display: grid;
	place-content: center;
}

ul.uc_Box li a .text_area{
    grid-column: 1/2;
    grid-row: 1/2;
}

ul.uc_Box li a .title p{
	font-size: 170%;
	color: #fff;
	font-weight: bold;
	text-align: center;
	text-shadow: 0px 0px 12px black, 0px 0px 12px black, 0px 0px 12px black, 0px 0px 12px black;
}

ul.uc_Box li a p{
	color: #333;
}

ul.uc_Box li a p.com {
	font-size: 120%;
	color: #2d50a9;
	font-weight: bold;
	margin: 15px 0 10px;
	line-height: 1.3;
	text-align: center;
}

ul.uc_Box li a .detail{
    grid-column: 1/2;
    grid-row: 1/2;
	align-self: end;
	justify-self: end;
	padding-right: 10px;
	color: #333;
	display: block;
	background-image: url(/products/it/IoTM2M/image/icon/red_arrow_right.svg);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 24px 24px;
	-moz-background-size: 24px 24px;
	-webkit-background-size: 24px 24px;
	-o-background-size: 24px 24px;
	-ms-background-size: 24px 24px;
	margin: 10px 20px;
}
ul.uc_Box li a .detail p{
	font-weight: bold;
}

@media screen and (max-width: 1304px) {
	ul.uc_Box li a {
		height: 350px;
	}
}

@media screen and (max-width: 994px) {
	ul.uc_Box li.uc_Boxitem {
		width: calc((100% - 50px)/2);
	}
	ul.uc_Box li.uc_Boxitem:nth-child(3n){
		margin-right: 25px;
	}
	ul.uc_Box li.uc_Boxitem:nth-child(2n){
		margin-right: 0px;
	}
}

@media screen and (max-width: 579px) {
	ul.uc_Box {
		justify-content: center;
	}
	ul.uc_Box li.uc_Boxitem {
		width: 100%;
		max-width: 400px;
		margin-right: 0px;
	}
	ul.uc_Box li.uc_Boxitem:nth-child(3n){
		margin-right: 0px;
	}
}

@media screen and (max-width: 399px) {
	ul.uc_Box li a p.title {
		font-size: 170%;
	}
	ul.uc_Box li a p.com {
		font-size: 110%;
	}
}

/* サービス体系エリア */
.grid_section {
	display: grid;
	grid-template-columns: 26% 74%;
}

.grid_section p.title{
	font-weight: bold;
	line-height: 1.3;
}

.grid_section img.hipf_icon{
	width: 50px;
	height: 50px;
}

.hipf_arrow_pc{
	height: 100%;
	grid-column:1/3;
	grid-row:1/2;
}

.first_arrow_area{
	grid-column:1/2;
	grid-row:1/2;
	display: grid;
	place-content: center;
}

.arrow_style{
	color: #fff;
	font-weight: bold;
}

.second_arrow_area{
	grid-column:2/3;
	grid-row:1/2;
	display: flex;
}

.left_area{
	display: grid;
	place-content: center;
	width: 60%;
}

.right_area{
	display: grid;
	place-content: center;
	width: 40%;
}

.num_area ul{
	display: flex;
	margin-bottom: 10px;
	margin-top: 10px;
}

.num_area li{
	background: linear-gradient(to right, #afbec8, #afbec8 60%, #899dab);
	display: inherit;
	margin-right: 10px;
}

.num_area li span{
	display: grid;
	place-content: center;
	width: 38px;
	height: 38px;
	background: url("/products/it/IoTM2M/list/hipf/image/bk-image.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 38px 38px;
    -moz-background-size: 38px 38px;
    -webkit-background-size: 38px 38px;
    -o-background-size: 38px 38px;
    -ms-background-size: 38px 38px;
	color:#fff;
	font-size: 125%;
	font-weight: bold;
	margin-right: 10px;
}

.num_area li div{
	display: grid;
	place-content: center;
	font-weight: bold;
}

.first_num_area{
	grid-column:1/2;
	grid-row:2/3;
}
.first_num_area li{
	width: 100%;
}

.second_num_area{
	grid-column:2/3;
	grid-row:2/3;
}

.second_num_area li:nth-child(1){
	width: 30%;
}

.second_num_area li:nth-child(2){
	width: 31%;
}

.second_num_area li:nth-child(3){
	width: 39%;
	margin-right: 0;
}

.bk_white{
	background: linear-gradient(to right, rgb(255,255,255,0.8) 0%, rgb(255,255,255,0.6) 40%, rgb(255,255,255,0.6));
}

.more_right a{
	text-decoration: none;
	color: #333;
	font-weight: bold;
	display: inline-block;
    padding: 0 20px 0 0;
    background-image: url(/products/it/IoTM2M/image/icon/red_arrow_right.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 16px 16px;
    -moz-background-size: 16px 16px;
    -webkit-background-size: 16px 16px;
    -o-background-size: 16px 16px;
    -ms-background-size: 16px 16px;
}

.more_down a{
	text-decoration: none;
	color: #333;
	font-weight: bold;
	display: inline-block;
    padding: 0 20px 0 0;
    background-image: url(/products/it/IoTM2M/image/icon/red_arrow_down.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 16px 16px;
    -moz-background-size: 16px 16px;
    -webkit-background-size: 16px 16px;
    -o-background-size: 16px 16px;
    -ms-background-size: 16px 16px;
}

.more_right a:hover,
.more_down a:hover{
	text-decoration: underline;
}

.first_btn_area{
	background: linear-gradient(to right, #b4c8e6,#a5bbe0);
	grid-column:1/2;
	grid-row:3/6;
	padding: 10px;
	margin-right: 10px;
	position: relative;
}

.first_btn_area p.title{
	margin-bottom: 10px;
}

.first_btn_area .bk_white{
    position: absolute;
    top: 80px;
    bottom: 10px;
	width: calc(100% - 40px);
	padding: 10px;
	padding-top: 200px;
}

.first_btn_area .more_right{
	text-align: right;
}

.dot_service li{
	position: relative;
	margin-left: 15px;
}

.dot_service li:before{
	position: absolute;
	content: url("/products/it/IoTM2M/list/hipf/image/circle.png");
	top: -2px;
	left: -15px;
}

.first_btn_area img{
	margin-bottom: 10px;
}

.second_btn_area{
	background: linear-gradient(to right, #a9d1c7, #6793b0);
	grid-column:2/3;
	grid-row:3/4;
	padding: 10px;
}

.second_btn_area{
	display: grid;
	justify-content:space-between;
	align-items: center;
	margin-bottom: 10px;
}

.second_btn_area p.title {
    grid-column: 1/2;
    grid-row: 1/2;
    margin-bottom: 10px;
}

.second_btn_area ul{
	grid-column:1/2;
	grid-row:2/3;
	margin-left: 0px;
	margin-bottom: 10px;
	}

.second_btn_area ul{
	display: flex;
    flex-wrap: wrap;
	margin-left: 10px;
}
.second_btn_area ul li{
	width: 72px;
	border: 2px solid #fff;
	color: #fff;
	display: grid;
	place-content: center;
	margin: 0 10px 5px 0;
}

.second_btn_area ul li:nth-child(1){
	background: #6080c8;
}

.second_btn_area ul li:nth-child(2){
	background: #549668;
}

.second_btn_area ul li:nth-child(3){
	background: #643da9;
}

.second_btn_area ul li:nth-child(4){
	background: #4b9cc1;
}/**/

.second_btn_area ul li:nth-child(5){
	background: #41af91;
}
.second_btn_area ul li:nth-child(6){
	background: #8C4194;
}

.second_btn_area .more_right{
	grid-column:2/3;
	grid-row:1/3;
}
.second_btn_area .more_right a{
	color:#fff;
}

.thrid_btn_area{
	background: linear-gradient(to right, #aed6eb, #74a0d2);
	grid-column:2/3;
	grid-row:4/5;
	padding: 10px;
	margin-bottom: 10px;
}

.thrid_btn_area .basic_service{
	margin-top: 5px;
}

.thrid_btn_area .basic_service{
	background: linear-gradient(to right, #37af96, #288989);
	padding: 10px;
	margin-bottom: 10px;
}

.thrid_btn_area .text_white{
	color: #fff;
}

.thrid_btn_area .basic_service ul{
	display: flex;
	justify-content:space-between;
	margin-top: 10px;
}

.thrid_btn_area .basic_service ul li{
	width: calc(50% - 25px);
	padding: 10px;
	text-align: center;
}


.thrid_btn_area .pic_service{
	background: linear-gradient(to right, #5e9bba, #447aaa);
	padding: 10px;
}

.thrid_btn_area .pic_service .hipf_wrap{
	display: flex;
	justify-content:space-between;
}

.thrid_btn_area .pic_service ul{
	display: flex;
	justify-content:space-between;
	margin-top: 5px;
}

.thrid_btn_area .pic_service ul li{
	padding: 10px;
	width: calc(16% - 25px);
	text-align: center;
}

.thrid_btn_area .pic_service ul li:nth-child(5){
	width: calc(20% - 25px);
}

.thrid_btn_area .pic_service ul li p.TextStyle1 {font-size:90%;}

.thrid_btn_area .more_down{
	text-align: right;
}

.fourth_btn_area{
	background: linear-gradient(to right, #a5bbe0, #7794ce);
	grid-column:2/3;
	grid-row:5/6;
	padding: 10px 10px 10px 0;
	margin-left: -10px;
}

.fourth_btn_area .bk_white{
	display: grid;
	padding: 10px;
}

.fourth_btn_area .hipf_data1{
	grid-column:1/3;
	grid-row:1/2;
	display: flex;
	padding: 10px;
	justify-content:space-around;
}
.fourth_btn_area .hipf_data1 > li{
	text-align: center;
	padding: 0px;
}

.fourth_btn_area .hipf_data1 .dot_service li {
	text-align: left;
}

.fourth_btn_area .more_down{
	grid-column:1/3;
	grid-row:2/3;
	text-align: center;
}

.fourth_btn_area .hipf_data2{
	grid-column:3/4;
	grid-row:1/2;
	display: flex;
	padding: 10px;
	justify-content:space-between;
}
.fourth_btn_area .hipf_data2 > li{
	text-align: center;
	padding: 0px;
}

.fourth_btn_area .hipf_data2 .dot_service li {
	text-align: left;
}

.fourth_btn_area .more_right{
	grid-column:3/4;
	grid-row:2/3;
	text-align: right;
}

.fourth_btn_area .hipf_data3{
	grid-column:4/5;
	grid-row:1/2;
	display: flex;
	padding: 10px;
	justify-content:space-between;
}
.fourth_btn_area .hipf_data3 > li{
	text-align: center;
	padding: 0px;
}

.fourth_btn_area .hipf_data3 .dot_service li {
	text-align: left;}


.hipf_arrow_sp1,
.hipf_arrow_sp2{
	display: none;
}

@media screen and (max-width: 1304px) {
	.num_area li{
		height: 60px;
	}
	
	.num_area li span{
		width: 60px;
		height: 60px;
	    background-repeat: no-repeat;
	    background-position: right center;
	    background-size: 60px 60px;
	    -moz-background-size: 60px 60px;
	    -webkit-background-size: 60px 60px;
	    -o-background-size: 60px 60px;
	    -ms-background-size: 60px 60px;
	}
	.num_area li div{
		font-size: 80%;
	}
	
	.pc_only_br{
		display: none;
	}
	
	.second_btn_area{
		display: grid;
	}
	
	.second_btn_area p.title{
		grid-column:1/2;
		grid-row:1/2;
		margin-bottom: 10px;
	}
	
	.second_btn_area ul{
		grid-column:1/2;
		grid-row:2/3;
		margin-left: 0px;
	}
	
	.second_btn_area .more_right{
		grid-column:2/3;
		grid-row:1/3;
	}
	
	.thrid_btn_area .pic_service ul{
		flex-wrap: wrap;
	}
	
	.thrid_btn_area .pic_service ul li:nth-child(1),
	.thrid_btn_area .pic_service ul li:nth-child(2),
	.thrid_btn_area .pic_service ul li:nth-child(3){
		width: calc(33.3% - 25px);
		margin-bottom: 10px;
	}
	.thrid_btn_area .pic_service ul li:nth-child(4),
	.thrid_btn_area .pic_service ul li:nth-child(5),
	.thrid_btn_area .pic_service ul li:nth-child(6){
		width: calc(33.3% - 25px);
	}
	
	.fourth_btn_area .bk_white{
		justify-items: center;
		padding-right: 20%;
		padding-left: 20%;
		margin: 0 auto;
	}
	.fourth_btn_area .hipf_data1,
	.fourth_btn_area .hipf_data2,
	.fourth_btn_area .hipf_data3{	
		grid-column:1/2;
		grid-row:1/2;
		width: 100%;
		flex-wrap: wrap;
	}
	.fourth_btn_area .hipf_data1 > li,
	.fourth_btn_area .hipf_data2 > li,
	.fourth_btn_area .hipf_data3 > li{
		display: grid;
		width: 100%;
		margin-bottom: 10px;
	}
	.fourth_btn_area .hipf_data1 > li:last-child,
	.fourth_btn_area .hipf_data2 > li:last-child,
	.fourth_btn_area .hipf_data3 > li:last-child{	
		margin-bottom: 0px;
	}
	.fourth_btn_area .hipf_data1 > li p.title,
	.fourth_btn_area .hipf_data2 > li p.title,
	.fourth_btn_area .hipf_data3 > li p.title{	
		grid-column:1/3;
		grid-row:1/2;
		text-align: left;
	}
	.fourth_btn_area .hipf_data1 > li .dot_service,
	.fourth_btn_area .hipf_data2 > li .dot_service,
	.fourth_btn_area .hipf_data3 > li .dot_service{	
		grid-column:1/2;
		grid-row:2/3;
	}
	.fourth_btn_area .hipf_data1 > li .hipf_img,
	.fourth_btn_area .hipf_data2 > li .hipf_img,
	.fourth_btn_area .hipf_data3 > li .hipf_img{	
		grid-column:2/3;
		grid-row:2/3;
		display: grid;
		place-content: center;
	}
	
	.fourth_btn_area .more_down{
		grid-column:1/2;
		grid-row:2/3;
		width: 100%;
		text-align: right;
	}
	.fourth_btn_area .hipf_data2{
		grid-column:1/2;
		grid-row:3/4;
	}
	.fourth_btn_area .hipf_data3{
		grid-column:1/2;
		grid-row:5/6;
	}		
	.fourth_btn_area .more_right{
		grid-column:1/2;
		grid-row:4/5;
		width: 100%;
		text-align: right;
	}
}

@media screen and (max-width: 994px) {
	.pc_tab_br{
		display: none;
	}
	.grid_section {
		display: grid;
		grid-template-columns: 100%;
	}
	.hipf_arrow_sp1,
	.hipf_arrow_sp2{
		display: inline;
	}
	.hipf_arrow_sp1{
		grid-column:1/2;
		grid-row:1/2;
	}
	.hipf_arrow_sp1 img,
	.hipf_arrow_sp2 img{
		max-height: 50px;
	}
	.first_arrow_area{
		grid-column:1/2;
		grid-row:1/2;
	}
	.first_num_area num_area{
		grid-column:1/2;
		grid-row:2/3;
	}
	.first_num_area li{
		height: 38px;
	}
	
	.first_num_area li span{
		width: 38px;
		height: 38px;
	    background-repeat: no-repeat;
	    background-position: right center;
	    background-size: 38px 38px;
	    -moz-background-size: 38px 38px;
	    -webkit-background-size: 38px 38px;
	    -o-background-size: 38px 38px;
	    -ms-background-size: 38px 38px;
	}
	.first_btn_area{
		grid-column:1/2;
		grid-row:3/4;
		margin-bottom: 10px;
		position: static;

	}

	.first_btn_area .bk_white{
		display: grid;
		grid-column:1/2;
		grid-row:2/3;
	    position: static;
		width: calc(100% - 20px);
		padding-top: 10px;
	}
	.first_btn_area .bk_white p.title{
		grid-column:1/3;
		grid-row:1/2;
	}
	.first_btn_area .bk_white ul{
		grid-column:1/2;
		grid-row:2/3;
	}
	.first_btn_area .bk_white p.CenterAdjust{
		grid-column:2/3;
		grid-row:2/3;
		display: grid;
		place-content: center;
	}
	.first_btn_area .bk_white .more_right{
		grid-column:1/3;
		grid-row:3/4;
	}
	
	.hipf_arrow_sp2{
		grid-column:1/2;
		grid-row:4/5;
	}
	.second_arrow_area{
		grid-column:1/2;
		grid-row:4/5;
	}
	.second_num_area{
		grid-column:1/2;
		grid-row:5/6;
	}
	.second_btn_area{
		grid-column:1/2;
		grid-row:7/8;
	}
	.thrid_btn_area{
		grid-column:1/2;
		grid-row:8/9;
	}
	.fourth_btn_area{
		grid-column:1/2;
		grid-row:9/10;
	}
	
	.hipf_arrow_pc{
		display: none;
	}
	.fourth_btn_area{
		margin-left: 0px;
		padding: 10px;
	}
}

@media screen and (max-width: 579px) {
	.second_btn_area {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.second_btn_area ul{
		margin-bottom: 10px;
	}
	.second_btn_area .more_right{
		width: 100%;
		text-align: right;
	}
	.fourth_btn_area .bk_white{
		justify-items: center;
		padding-right: 10%;
		padding-left: 10%;
		margin: 0 auto;
	}
}


.hipf_dx {
	margin-bottom: 50px;
}

.hipf_dx h3 {
	background: none;
	padding: 0;
	margin-bottom: 30px;
	font-weight: bold;
}

.hipf_dx h3 span {
	display: inline-block;
	width: 280px;
	margin-right: 20px;
	color: #fff;
	text-align: center;
	padding: 10px 0;
}

.hipf_dx h3.title_dx01 { border: 2px solid #37af96; }
.hipf_dx h3.title_dx01 span { background-color: #37af96; }

.hipf_dx h3.title_dx02 { border: 2px solid #5e9bba; }
.hipf_dx h3.title_dx02 span { background-color: #5e9bba; }

.hipf_dx h3.title_dx03 { background-color: #5e9bba; }
.hipf_dx h3.title_dx03 {
	color: #fff;
	text-align: center;
	padding: 10px 0;
}

.back_pic li{
	text-align: right;
}
.back_pic a{
	text-decoration: none;
	color: #333;
	font-weight: bold;
	display: inline-block;
    padding: 0 20px 0 0;
    background-image: url(/products/it/IoTM2M/image/icon/red_arrow_up.svg);
    background-repeat: no-repeat;
    background-position: right bottom 6px;
    background-size: 16px 16px;
    -moz-background-size: 16px 16px;
    -webkit-background-size: 16px 16px;
    -o-background-size: 16px 16px;
    -ms-background-size: 16px 16px;
}

.back_pic a:hover{
	text-decoration: underline;
}

.hipf_small{
	font-size: 80%;
}

.hipf_dx h4{
	font-size: 115%;
}

.hipf_dx h4:before{
	content: url("/products/it/IoTM2M/list/hipf/image/square.png");
	margin-right: 5px;
}

.hipf_dot li{
	position: relative;
	margin-left: 15px;
}

.hipf_dot li:before{
	position: absolute;
	content: url("/products/it/IoTM2M/list/hipf/image/circle.png");
	top: -2px;
	left: -15px;
}

.over_image_link{
	position: relative;
	display: inline-block;
}

.over_image_link p{
	display: block;
	max-width: 100%;
	height: auto;
}

.over_image_link a{
	position: absolute;
	right: 16%;
	bottom: 8%;
	width: 29%;
	height: 15%;
}

.over_image_link a:hover{
	background: rgba(255,255,255,10%);
}


@media screen and (max-width: 1304px) {
	.hipf_dx h3.title_dx01,
	.hipf_dx h3.title_dx02{
		display: grid;
		text-align: center;
		padding-bottom: 10px;
	}
	.hipf_dx h3.title_dx01 span,
	.hipf_dx h3.title_dx02 span {
		display: inline-block;
		width: 100%;
		margin-right: 0px;
		margin-bottom: 10px;
		color: #fff;
	}
}

/* 活用例エリア */
h3.hipf_utilization{
	border-bottom: solid 1px #4b4b4b;
}

.hipf_util{
	margin-bottom: 45px;
}

/* TOPICSエリア */
.hipf_topics h2{
	text-align: center;
	font-weight: bold;
	font-size: 115%;
	background: none;
}

.hipf_topics{
	background: #f0f0f0;
	padding: 40px;
	margin-bottom: 50px;
}

.hipf_topics ul {
	margin: 10px 0;
}

.hipf_topics ul li{
	border-bottom: 1px solid #969696;
	display: flex;
	padding: 10px 0;
}

.hipf_topics ul li:first-child{
	border-top: 1px solid #969696;
}

.hipf_topics ul li div.hipf_category{
	width: 200px;
}

.hipf_topics ul li div.link{
	display: inline;
	width: calc(100% - 200px);
}

.hipf_topics ul li span{
	display: block;
	background: #969696;
	color: #fff;
	width: 150px;
	text-align: center;
	font-size: 90%;
}

.hipf_topics ul li a{
	display: inline;
	text-decoration: none;
	font-size: 90%;
}

.hipf_topics ul li .hipf_newin{
    background-image: url(/image/jp/r1/icon/icon_new_window_hd.gif);
	background-repeat: no-repeat;
	background-position: right center;
	padding: 0 17px 0 0;
    background-size: 16px 16px;
    -moz-background-size: 16px 16px;
    -webkit-background-size: 16px 16px;
    -o-background-size: 16px 16px;
    -ms-background-size: 16px 16px;
}


@media screen and (max-width: 994px) {
	.hipf_topics ul li{
		flex-wrap: wrap;
	}
	.hipf_topics ul li div.link{
		width: 100%;
	}
	.hipf_topics ul li span{
		margin-bottom: 5px;
	}
}

@media screen and (max-width: 767px) {
	.hipf_topics{
		margin: 0 calc(50% - 50vw);
		margin-bottom: 50px;
		padding: 40px 15px;
	}
}



/* ダウンロード・お問い合わせエリア */

.download {
	background-image: url(/products/it/IoTM2M/list/hipf/image/bg_download.png);
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
	text-align: center;
	padding: 30px 10px 15px;
	margin-bottom: 20px;
}

.download p strong {
	color: #fff;
}

.download .ButtonStyle1 a {
	background-image: url(/products/it/IoTM2M/image/icon/white_arrow_right.svg);
	background-size: 24px 24px;
	-moz-background-size: 24px 24px;
	-webkit-background-size: 24px 24px;
	-o-background-size: 24px 24px;
	-ms-background-size: 24px 24px;
	width: 280px;
	margin-top: 20px;
}

.download .ButtonStyle1 a:link,
.download .ButtonStyle1 a:visited {
	background-color: #2D50A9;
	font-size: 115%;
	padding: 23px 45px 23px 20px;
	border-right: solid 15px transparent;
}
@media screen and (max-width: 399px) {
	.download .ButtonStyle1 a:link,
	.download .ButtonStyle1 a:visited {
		padding-right: 35px;
	}
}
@media screen and (max-width: 375px) {
	.download .ButtonStyle1 a:link,
	.download .ButtonStyle1 a:visited {
		padding-right: 10px;
	}
}

.download .ButtonStyle1 a:hover,
.download .ButtonStyle1 a:active {
	opacity: 0.7;
}


.ask {
	text-align: center;
	padding: 30px 0 15px;
}

.ask.RelatedLink{
	padding-bottom: 30px;
}

.ask p strong {
	color: #2D50A9;
}

.ask .ButtonStyle1 a {
	background-image: url(/products/it/IoTM2M/image/icon/white_other_window.svg);
	background-size: 24px 24px;
	-moz-background-size: 24px 24px;
	-webkit-background-size: 24px 24px;
	-o-background-size: 24px 24px;
	-ms-background-size: 24px 24px;
	width: 280px;
	margin-top: 20px;
}

.ask .ButtonStyle1 a:link,
.ask .ButtonStyle1 a:visited {
	background-color: #2D50A9;
	font-size: 115%;
	padding: 23px 45px 23px 20px;
	border-right: solid 15px transparent;
}
@media screen and (max-width: 399px) {
	.ask .ButtonStyle1 a:link,
	.ask .ButtonStyle1 a:visited {
		padding-right: 50px;
	}
}
@media screen and (max-width: 375px) {
	.ask .ButtonStyle1 a:link,
	.ask .ButtonStyle1 a:visited {
		padding-right: 30px;
	}
}

.ask .ButtonStyle1 a:hover,
.ask .ButtonStyle1 a:active {
	opacity: 0.7;
}
