@charset "euc-jp";

/*-------------------------------------------------------------------
  * sp_mail.css
  * site name : GetMoney!
  * description : スマホメール
-------------------------------------------------------------------*/

/* setting */
.sp_mail{
    text-align:center;
    color:#3b3b3b;
    line-height:24px;
}
.sp_mail h2{
    padding: 8px 0 15px 44px;
    background-image:url(../img/15/icon/ico_mail.png);
    background-repeat:no-repeat;
    background-position:10px 7px;
    font-size: 17px;
    text-align:left;
}
.sp_mail p{
    font-size:16px;
}
.sp_mail .red{
    color:#f23d52;
}
.sp_mail > img{
    margin:20px 0 0 0;
}
.sp_mail .err-txt{
    display:inline-block;
    background: #f23d52 url(https://dietnavi.com/pc/img/15/icon/ico_error.png) 10px center no-repeat;
    border-radius:2px;
    color: #fff;
    padding:3px 0 0 30px;
    font-size:14px;
    width: 330px;
    margin:20px auto 0;
}
.sp_mail .error_txt{
     color:#f23d52;
     font-weight:bold;
     margin:0 0 10px;
}

/* step */
.sp_mail .step{
    overflow:hidden;
    width:950px;
    margin:20px auto 40px;
}
.sp_mail .step li{
    width:230px;
    text-align:center;
    height:28px;
    float:left;
    color:#bcbcbc;
    background:#f4f4f4;
    margin:0 0 0 10px;
    padding:16px 0 10px;
    font-size:16px;
    border-radius:3px;
}
.sp_mail .step li:first-child{
    margin:0;
}
.sp_mail .step li.active{
    background:#d5ebff;
    color:#173864;
}

/* form */
.sp_mail .form{
    width: 680px;
    box-sizing: border-box;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #5a9fdf;
    margin:10px auto;
    padding: 10px;
    text-align:center;
    color: #fff;
}
.sp_mail .form input[type="text"] {
  margin-right: 10px;
}
.sp_mail .form input,
.sp_mail .form select{
    width:300px;
    height:30px;
    border: #fff 1px solid;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding:0 0 0 8px;
    color: #131313;
}

/* 利用規約 */
.sp_mail .agreement{
    font-size:14px;
    border:1px #C1C1C1 solid;
    width:900px;
    height:300px;
    margin:50px auto;
    overflow:scroll;
    text-align:left;
}
.sp_mail .agreement{
     overflow-x: auto;
}
.sp_mail .agreement p{
    font-size:14px;
}
.sp_mail .agreement h3{
    font-size:16px;
    font-weight:bold;
    margin:20px 0;
    padding:0;
    background:none;
    border:none;
    color:#3B3B3B;
}
.sp_mail .agreement h4{
    font-weight:bold;
    margin:10px 0;
}
.sp_mail .agreement ul{
    padding:0 0 0 20px;
}
.sp_mail .agreement li{
    padding-left:1em;
    text-indent:-1em;
}
.sp_mail .agreement li:before{
    content:'・';
}

/* ポイント付与条件 */
.sp_mail .conditions, .caution{
  width: 820px;
    margin:40px auto 0;
    font-size:16px;
    text-align:left;
}
.sp_mail .conditions th{
  padding: 20px;
    width:140px;
  border: 1px solid #C1C1C1;
  line-height: 24px;
  background:#EFEFEF;
}
.sp_mail .conditions td{
    padding: 20px;
  border: 1px solid #C1C1C1;
}
.sp_mail .conditions li,.caution li{
    padding-left:1em;
  text-indent:-1em;
}

/* 注意事項 */
.sp_mail .caution{
    border:#C1C1C1  solid 1px;
    width: 780px;
    padding:20px;
}
.sp_mail .caution p{
    text-align:left;
    font-weight:bold;
    margin:0 0 10px;
}

/* 送信ボタン */
.sp_mail .button input{
    cursor:pointer;
    width:500px;
    box-sizing: border-box;
    display: block;
    margin: 20px auto 80px;
    padding:12px 0;
    border: #e3c815 1px solid;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #ffd861;
    background: -moz-linear-gradient(top, #fffdf4 0%, #ffefb2 3%, #ffd861 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffdf4), color-stop(3%,#ffefb2), color-stop(100%,#ffd861));
    background: -webkit-linear-gradient(top, #fffdf4 0%, #ffefb2 3%, #ffd861 100%);
    background: linear-gradient(to bottom, #fffdf4 0%, #ffefb2 3%, #ffd861 100%);
    box-shadow: 0 2px 2px #c3c2c1;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    color: #5d5d5d;
}
.sp_mail .button input:hover{
   opacity: 0.7;
}

/* 横並びのボタン */
.sp_mail .two_button{
    border:#C1C1C1  solid 1px;
    width:820px;
    padding:30px 0;
    margin:20px auto 0;
}
.sp_mail .two_button ul{
    overflow:hidden;
    margin:20px auto;
    width:504px;
}
.sp_mail .two_button ul li{
    float:left;
    margin:0 20px 0 0;
}
.sp_mail .two_button ul li a{
    display:inline-block;
    font-size:16px;
    text-decoration:none;
    color: #554943;
    width:230px;
    padding:10px 0;
    text-align:center;
    border: #b7b7b7 1px solid;
  border-radius: 5px;
  background: #A4A4A4;
    background: -moz-linear-gradient(top, #d4d5d7 0%, #d4d5d7 50%, #c4c5c6 50%, #c4c5c6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d4d5d7), color-stop(50%,#d4d5d7), color-stop(50%,#c4c5c6), color-stop(100%,#c4c5c6));
    background: -webkit-linear-gradient(top, #d4d5d7 0%, #d4d5d7 50%, #c4c5c6 50%, #c4c5c6 100%);
    background: linear-gradient(to bottom, #d4d5d7 0%, #d4d5d7 50%, #c4c5c6 50%, #c4c5c6 100%);
  text-shadow: 1px 1px 0 #e8ebed;
  font-weight: bold;
}
.sp_mail .two_button ul li a:hover{
    transition: .2s linear;
  -webkit-transition: .2s linear;
  -moz-transition: .2s linear;
  -o-transition: .2s linear;
  -ms-transition: .2s linear;
    color: #197fde;
}

/* 送信後 */
.sp_mail .send {
    overflow:hidden;
}
.sp_mail .send  img{
    float:left;
    margin:0 0 0 80px;
}
.sp_mail .send .send_txt{
    float:left;
    margin:40px 0 0;
}
.sp_mail .send .send_txt p{
    text-align:left;
    margin:40px 0 0 40px;
}

/* 現在のメールアドレス */
.sp_mail .now_mail{
    background:#FDFFCA;
    width:500px;
    padding:15px 10px 5px;
    margin:0 auto 30px;
}

/* 配信停止 */
.sp_mail .mail_stop{
    padding:40px 0 0;
}
.sp_mail .mail_stop > p{
    margin:0 0 20px;
}