@charset "utf-8";

.campaignSms-inner{
	border: 1px solid #cfcfcf;
	padding: 20px 10px;
}

/*ステップ*/
.campaignSms-flow{
	display: flex;
    margin: 0 auto 20px;
    width: 832px;
    border: 2px solid #d2d2d2;
    overflow: hidden;
    box-sizing: border-box;
    justify-content: center;
}

.campaignSms-flow-item {
	display: flex;
	align-items: center;
    justify-content: center;
	position: relative;
	font-size: 11px;
	width: calc(100% / 7);
    font-weight: bold;
    flex-grow: 1;
    text-align: center;
    background: #f2f2f2;
    padding: 10px 0 8px 7px;
    line-height: 1.2;
    color: #afafaf;
    box-sizing: border-box;
}

.campaignSms-flow-item::before {
	content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -7px;
    margin: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 23px solid transparent;
    border-bottom: 23px solid transparent;
    border-left: 7px solid #d2d2d2;
    border-right: 0;
    z-index: 1;
}

.campaignSms-flow-item::after {
	content: "";
    display: inline-block;
    position: absolute;
    right: -5px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 23px solid transparent;
    border-bottom: 23px solid transparent;
    border-left: 7px solid #f2f2f2;
    border-right: 0;
    z-index: 2;
}

.campaignSms-flow-item__active{
	color: #fff;
	background: #e63416;
	padding: 10px 0 8px 10px;
}

.campaignSms-flow-item__active::after{
	border-left: 7px solid #e63416;
	right: -7px;
}

.campaignSms-flow-item span{
	display: inline-block;
}

.campaignSms-flow-item-number{
	font-size: 17px;
    margin-right: 5px;
    line-height: 1;
}

/* --------------------------------
SMS認証
-------------------------------- */
.campaignSms-error {
	font-size: 15px;
    line-height: 1.4;
    font-weight: bold;
    color: #f00;
    padding: 20px 0;
    text-align: center;
    margin: 30px 25px;
    border: 1px solid;
}

.campaignSms-text {
	font-size:16px;
	line-height:1.4;
	padding:0 20px;
	margin-bottom: 10px;
}

.campaignSms-notice {
	padding:0 20px;
	margin-bottom: 30px;
}

.campaignSms-notice p,
.campaignSms-notice ul li{
	color:#f00;
	font-size:12px;
	line-height:1.4;
}

.campaignSms-notice ul li {
	padding-left: 1em;
	text-indent: -1em;
}

.campaignSms-code,
.campaignSms-tel {
	display:table;
	width:94%;
	height:80px;
	box-sizing:border-box;
	margin: 0 auto 30px auto;
	border:1px solid #ccc;
}

.campaignSms-telTxt,
.campaignSms-codeTxt,
.campaignSms-telInput,
.campaignSms-codeInput {
	display:table-cell;
}

.campaignSms-telTxt,
.campaignSms-codeTxt {
	font-size:14px;
	line-height:1.3;
	font-weight:bold;
	width:30%;
	background:#e9f7f5;
	text-align:center;
	vertical-align:middle;
}

.campaignSms-telTxt span,
.campaignSms-codeTxt span {
	font-size:12px;
	font-weight:normal;
}

.campaignSms-codeInput,
.campaignSms-telInput {
	width:70%;
	vertical-align:middle;
	text-align:center;
}

.campaignSms-telInput-inner{
	display: flex;
    padding: 20px;
    align-items: center;
    box-sizing: border-box;
}

.campaignSms-telInput input {
	font-size: 15px;
    padding: 8px;
    width: 152px;
	border:1px solid #ccc;
}

.campaignSms-codeInput input {
	font-size: 15px;
    padding: 8px;
    width: 460px;
	border:1px solid #ccc;
}

.campaignSms-telInput-hyphen{
	margin: 0 3px;
}

.campaignSms-telInput-conf{
	text-align:left;
	padding-left: 30px;
	font-size: 22px;
	font-weight: bold;
}

.campaignSms-telBtn,
.campaignSms-codeBtn {
	display:block;
	margin:0 auto 30px auto;
	text-align:center;
	background:#fff;
	border:none;
	cursor: pointer;
}

.campaignSms-notice02 {
	background:#f6f6f6;
	padding:20px 20px 0;
}

.campaignSms-notice02In {
	font-size:12px;
	line-height:1.4;
}

.campaignSms-notice02-head {
	font-size:14px;
	font-weight:bold;
	line-height:1.4;
}

.campaignSms-notice02-txt {
	padding:0 0 20px;
}

.campaignSms-notice02-txt ul li {
	font-size:12px;
	line-height:1.6;
	padding-left: 1em;
	text-indent: -1em;
}

/* --------------------------------
 clearfix
-------------------------------- */
.col-ninsyo-title:after,
.col-area td:after,
.grade-hyoka-tx:after,
.grade-hyoka-tx02:after,
.review-form th:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}