@charset "UTF-8";

/* ***************************************************************

	Web明細切り替えキャンペーン用　CSS

	/card/campaign/webmeisai/

	01. 見出し帯の色
	02. キャンペーン内容
	03. スマホランドスケープ対応

*************************************************************** */



/* ***************************************************************

	01. 見出し帯の色

*************************************************************** */
.cp-color {
	color: #fff;
	background-color: #108cc0;
	border-bottom: 3px solid #000;
}


/* ***************************************************************

	02. キャンペーン内容

*************************************************************** */

.loginFirstSection {
	margin: 0 0 30px;
	padding: 20px 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.loginFirstSection p.loginBtn a {
	min-width: 380px;
	display: inline-block;
	background: #008cd0;
	padding: 10px 20px 8px;
	text-align: center;
	color: #fff;
	text-decoration: none;
	font-size: 128.6%;
	font-weight: bold;
	line-height: 1.4;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border-bottom: 4px solid #0077B1;
}
.loginFirstSection p.loginBtn {
	margin-right: 3%;
}
.loginFirstSection p.loginBtn a:hover {
	background: #0077b1;
	border-bottom-color: #00387B;
}

#campaign .appbtn a {
	min-width: 380px;
	display: inline-block;
	background: #008cd0;
	padding: 15px 20px 13px;
	text-align: center;
	color: #fff;
	text-decoration: none;
	font-size: 128.6%;
	font-weight: bold;
	line-height: 1.4;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border-bottom: 4px solid #0077B1;
}
#campaign .appbtn {
	margin-right: 3%;
}
#campaign .appbtn a:hover {
	background: #0077b1;
	border-bottom-color: #00387B;
}

#campaign .txt_blue { color:#007dbf; }
#campaign .txt_pink { color:#e4007f; }
#campaign .bold { font-weight:bold; }

#campaign .point_box {
    background: #FDFFED;
    margin-bottom: 2em;
	padding: 3%;
}
#campaign .point_box h3 {
    padding: 5px 10px;
    background: #00638f;
    text-align: center;
    color:#ffffff;
	border-radius: 3px;
	margin-bottom: 25px !important;
}
#campaign .point_box .vn {
	display: flex;
	justify-content: center;
	margin: 2% auto;
}
#campaign .point_box .vn li {
	margin: 0 10px;
}
#campaign .point_box .vn img {
	border: 1px solid #D3E9F1;
}
#campaign .point_box .viewsimage {
	width: 680px;
	margin: 20px auto;
}

#campaign .more {
	padding: 20px 0;
    background: #FDFFED;
	border: 5px solid #008cd0;
}
#campaign .more .txt-area {
	margin-top: 0;
}

/* ***************************************************************

	03. スマホランドスケープ対応

*************************************************************** */

@media screen and (max-width: 949px) and (min-width: 641px){
	#main .content { width: 100%; }

	#campaign .detail-text {
		width: 65%;
		margin-left: 3%;
	}
	#campaign .details_entry_right { margin-top: 10px; }
	#campaign .txt-area.sp-left .cp-period { text-align: left !important; }
	#campaign .point_box .vn li {
		width: 30%;
	}
	#campaign .point_box .vn img {
		width: 100%;
	}
	#campaign .point_box .viewsimage {
		width: 100%;
	}
	#campaign .point_box .viewsimage img {
		width: 100%;
	}
}

/*	for SP
=============================================================== */
@media screen and (max-width: 640px){
	
	#campaign .cp-category .txt-area {
		margin: 30px 2% 0px;
	}
	.loginFirstSection p.loginBtn a, #campaign .appbtn a {
    	min-width: 100%;
	}
	.loginFirstSection {
		display: block;
		padding: 3%;
	}
	.loginFirstSection p.loginBtn, #campaign .appbtn {
    margin: 3% auto 2% 0;
	}
	#campaign .point_box {
    	margin-bottom: 2em;
		padding: 5%;
	}
	#campaign .point_box .vn {
		display: block;
		text-align: center;
		margin: 3% auto;
	}
	#campaign .point_box .vn img {
		width: 220px;
	}
	#campaign .point_box .viewsimage {
		width: 100%;
		margin: 5% auto 2%;
	}
	#campaign .more {
	padding: 8% 6%;
	}
	#campaign .more .txt-area {
		margin-top: 0;
	}
}

@media screen and (max-width: 359px){

.step-sp li:after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: -20px;
  left: 0;
  border-style: solid;
  border-color: #000000 transparent transparent transparent;
  border-width: 20px 150px 0 140px;
  z-index: 1;
}
}