/*
 * felica-j / business / index.css
 * created --- 2021/10/06
 */

 /* index
---------------------------------------------------------------*/

/* common
----------------------------------- */
.guide-heading {
	text-align: center;
	margin: 45px 0 40px;
	padding: 0 0 10px;
	font-size: 24px;
	line-height: 1.2;
	border-bottom: 1px solid #898989;
}
@media (max-width: 414px){
	.guide-heading {
		margin: 30px 0 30px;
	}
}
.btn_select .midashi{
	width: 260px;
	margin: 0 auto 50px;
	padding: 10px;
	color:#155185;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	border-radius: 50px;
	border: 1px #155185 solid;
	transition: .3s ease-in-out;
	display: block;
}
@media (max-width: 414px){
	.btn_select .midashi{
		margin: 0 auto 40px;
	}
}
.sdk_wrap{
	padding: 30px 0 20px;
}



/* main_visual
----------------------------------- */
.main_visual{
	position: relative;
}
.main_visual > h2{
	width: 100%;
	text-align: center;
	position: absolute;
	top:26%;
	left: 0;
}
.main_visual > h2 span{
	padding: 13px 13px;
	font-size: 32px;
	color: #fff;
	background: #000;
}
@media (max-width: 639px){
	.main_visual > h2 span{
		font-size: 20px;
	}
}
@media (max-width: 414px){
	.main_visual > h2{
		top:20%;
	}
	.main_visual > h2 span{
		padding: 8px 5px;
		font-size: 16px;
	}
}
@media (max-width: 360px){
	.main_visual > h2 span{
		font-size: 14px;
	}
}
.main_visual > p img{
	width: 100%;
	vertical-align: bottom;
}
/* dev_about
----------------------------------- */
.dev_about{
	margin-bottom: 80px;
	padding: 50px 20px;
	text-align: center;
	background: #ecf0f4;
}
@media (max-width: 414px){
	.dev_about{
		margin-bottom: 50px;
	}
}
.dev_about .dev_about_ttl{
	margin-bottom: 20px;
	font-size: 24px;
}
@media (max-width: 639px){
	.dev_about .dev_about_ttl{
		font-size: 18px;
	}
}
.dev_about .dev_about_txt{
	font-size: 18px;
}
@media (max-width: 639px){
	.dev_about .dev_about_txt{
		font-size: 15px;
	}
}
@media (max-width: 414px){
	.dev_about .dev_about_txt{
		text-align: left;
	}
	.dev_about .dev_about_txt br{
		display: none;
	}
}
/* sdk
----------------------------------- */
.sdk_ttl{
	margin: 40px 0 15px;
	padding: 0 0 8px 20px;
	font-size: 106.3%;
	line-height: 1.2;
	border-bottom: 2px solid #bfbfbf;
	position: relative;
}
.sdk_ttl:before{
	width:10px;
	height:70%;
	margin-right: 40px;
	content: "";
	background: #bcdffa;
	display: block;
	position:absolute;
	top:0;
	left: 0;
}
/* sdk_block */
.sdk_block{
	margin-bottom: 30px;
	align-items: center;
	justify-content: space-between;
	display: flex;
	list-style: none;
}
@media (max-width: 639px){
	.sdk_block{
		display: block;
	}
}
.sdk_block:last-of-type{
	margin-bottom: 60px;	
}
@media (max-width: 414px){
	.sdk_block:last-of-type{
		margin-bottom: 40px;	
	}
}
.sdk_block li:first-child{
	flex: 1;
}
@media (max-width: 639px){
	.sdk_block li:first-child{
		margin-bottom: 20px;
	}
}
.sdk_block li:first-child > p{
	font-size: 14px;
}
.sdk_block .sdk_ttl2{
	margin-bottom: 5px;
	font-size: 16px;
	color: #145189;
}
.sdk_block .sdk_ttl3{
	margin-bottom: 5px;
	font-size: 16px;
}
.sdk_block li:last-child{
	width: 190px;
	margin-left:30px;
}
@media (max-width: 639px){
	.sdk_block li:last-child{
		width: auto;
		margin-left:0px;
	}
}
.sdk_block li:last-child span a{
	padding: 5px 0;
	text-align: center;
	color: #fff;
	font-size: 12px;
	background:#145189;
	display:block;
	position: relative;
}
.sdk_block li:last-child span a:after{
	content: "\e826";
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -6.5px;
	font-size: 8px;
	font-family: "fontello";
}
/* usecase
----------------------------------- */
a.bg_point{
	background: #006837 !important;
}

/* sdk_compare
----------------------------------- */
.sdk_compare_txt{
	margin-bottom: 40px;
	font-size: 16px;
	text-align: center;
}
@media (max-width: 414px){
	.sdk_compare_txt{
		margin-bottom: 20px;
	}
}
.sdk_compare_btn a{
	width: 390px;
	margin:0 auto;
	padding: 20px;
	text-align: center;
	font-size: 16px;
	color: #fff;
	background: #145189;
	display: block;
	position: relative;
}
@media (max-width: 414px){
	.sdk_compare_btn a{
		width: auto;
	}
}
.sdk_compare_btn a:after{
	content: "\e826";
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -6.5px;
	font-size: 8px;
	font-family: "fontello";
}
.sdk_compare_btn img{
	margin-left: 5px;
}
/* sdk_howto
----------------------------------- */
.sdk_howto_ttl{
	margin-bottom: 5px;
	font-size: 16px;
	text-align: center;
}
.sdk_howto_txt{
	margin-bottom: 30px;
	font-size: 16px;
	text-align: center;
}
.sdk_howto_block{
	justify-content: space-between;
	display: flex;
	list-style: none;
}
@media (max-width: 414px){
	.sdk_howto_block{
		display: block;
	}
}
.sdk_howto_block li{
	width:48%;
}
@media (max-width: 414px){
	.sdk_howto_block li{
		width:auto;
	}
	.sdk_howto_block li:first-child{
		margin-bottom: 20px;
	}
}
.sdk_howto_block li .mov {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	display:block;
}
.sdk_howto_block li .mov iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
.sdk_howto_block li .mov_ttl{
	margin-top: 10px;
	text-align: center;
	font-weight: bold;
	color: #155185;
	display:block;
}
@media (max-width: 639px){
	.sdk_howto_block li .mov_ttl{
		font-size: 14px;

	}
}
/* sdk_dl
----------------------------------- */
.sdk_dl_txt{
	margin-bottom: 5px;
	font-size: 16px;
	text-align: center;
}
.sdk_dl_txt2{
	margin-bottom: 40px;
	font-size: 14px;
	text-align: center;
}
@media (max-width: 414px){
	.sdk_dl_txt2{
		margin-bottom: 20px;
	}
}
.sdk_dl_block{
	margin-bottom: 40px;
	align-items: center;
	justify-content: space-between;
	display: flex;
	list-style: none;
}
@media (max-width: 639px){
	.sdk_dl_block{
		display: block;
	}
}
@media (max-width: 414px){
	.sdk_dl_block{
		margin-bottom: 20px;
	}
}
.sdk_dl_block li:first-child{
	flex: 1;
}
@media (max-width: 639px){
	.sdk_dl_block li:first-child{
		margin-bottom: 10px;
	}
}
@media (max-width: 414px){
	.sdk_dl_block li:first-child br{
		display: none;
	}
}
.sdk_dl_block li:last-child{
	width: 510px;
}
@media (max-width: 639px){
	.sdk_dl_block li:last-child{
		width: auto;
	}
}
.sdk_dl_block li:last-child span a{
	padding: 20px;
	text-align: center;
	font-size: 16px;
	color: #fff;
	background: #145189;
	display: block;
	position: relative;
}
@media (max-width: 414px){
	.sdk_dl_block li:last-child span a{
		font-size: 12px;
	}
}
.sdk_dl_block li:last-child span a:after{
	content: "\e826";
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -6.5px;
	font-size: 8px;
	font-family: "fontello";
}
/* sdk_contact
----------------------------------- */
.sdk_contact_box{
	margin-top: 40px;
	padding: 20px 25px;
	font-size: 14px;
	background: #e6f0f8;
}
@media (max-width: 414px){
	.sdk_contact_box{
		margin-top: 30px;
		padding: 20px 20px;
		font-size: 13px;
	}
}
.sdk_contact_box:last-of-type{
	margin-top: 20px;
	margin-bottom: 40px;
}
.sdk_contact_box > p{
	margin-bottom: 5px;
}
.sdk_contact_box > p:last-child{
	margin-bottom: 0px;
}
.sdk_contact_box .icon-ic_right_arrow2{
	margin-left: 5px;
	font-size:10px;
	font-weight: normal;
	vertical-align: middle;
}
.sdk_contact_and{
	margin-top: 10px;
	list-style: none;
}
.sdk_contact_and dt{
	margin-bottom: 5px;
	font-weight: bold;
}
.sdk_contact_and dd{
	margin-bottom: 5px;
}
.sdk_contact_and dd:last-child{
	margin-bottom: 0px;
}