@charset "utf-8";

/*-------------------------------------------*/
/*  2018 - 初心者案内
/*-------------------------------------------*/

/* common
------------------------------ */
#beginner_guide { 
    background: #fff;
    color: #333;
    font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    overflow-x: hidden;
    width: 100%;
}
#beginner_guide a {
    color: #333;
    cursor: pointer;
    text-decoration: none;
}

/* header
------------------------------ */
header {
    padding: 8px;
    text-align: left;
}
header a {
    display: block;
    width: 80px;
}
header a img {
    vertical-align: bottom;
    width: 100%;
}
.main img {
    width:100%;
    box-sizing: border-box;
    vertical-align: bottom;
}

/* contents
------------------------------ */

.contents{
    padding:30px 0;
}
.contents h2{
    width:94%;
    margin:0 auto;
    background:#fff;
    text-align:left;
    font-size:1.2rem;
    border:1px solid #000;
    color:#424242;
    font-weight:bold;
    display:block;
    padding:6px 0;
}
.contents h2 span.step_icon{
    color:#fff;
    margin:0 6px 0 0;
    padding:6px 10px;
}
.contents h2 span.step_txt{
    margin:0 6px 0 0;
    padding:6px 0;
}
.contents ul{
    margin:30px auto 0;
}
.contents li a{
    width:94%;
    display:inline-block;
    background:#000;
    padding:5px 0 12px;
    border-radius:5px;
    color:#fff;
    margin:0 0 20px;
}
.contents li .txt_area{
    text-align:left;
    padding:0 0 0 50px;
}
.contents li .txt_area h3{
    font-weight:bold;
    font-size:1.2rem;
    color:#fff;
    line-height: 2.5rem;
}
.contents li .txt_area p{
    font-size:1.0rem;
    color:#fff;
    line-height: 1.0rem;
}

/* step1
------------------------------ */

.step1{
    background:#eafaf8;
}
.step1 h2{
    border:#00ad9c 1px solid;
}
.step1 h2 span.step_icon{
    background:#00ad9c;
}
.step1 li a{
    background:#00ad9c;
    box-shadow:0px 5px 0px 0px #009c8d;
}
.step1 li:nth-child(1) .txt_area{
    background:url(../img/img_content1_1.png) 14px 10px no-repeat;
    background-size:25px auto;
}
.step1 li:nth-child(2) .txt_area{
    background:url(../img/img_content1_2.png) 14px 10px no-repeat;
    background-size:25px auto;
}
.step1 li:nth-child(3) .txt_area{
    background:url(../img/img_content1_3.png) 14px 10px no-repeat;
    background-size:25px auto;
}
.step1 .point{
    background:#fff;
    border-radius:50px;
    margin:10px 20px 0;
    color:#f53b50;
    padding:1px 0;
    font-size:1.0rem;
    font-weight:bold;
}
.step1 .point span{
    padding:0 0 0 20px;
    background:url("https://www.chance.com/sp/img/icon/ico-pt.gif");
    background-position: 4px 3px;
    -webkit-background-size: 12px 12px;
    -moz-background-size: 12px 12px;
    background-size: 12px 12px;
    background-repeat:no-repeat;
}

/* step2
------------------------------ */

.step2{
    background:#fcf8e7;
}
.step2 h2{
    border:#f2a81a 1px solid;
}
.step2 h2 span.step_icon{
    background:#f2a81a;
}
.step2 li a{
    background:#f2a81a;
    box-shadow:0px 5px 0px 0px #b17800;
}
.step2 li:nth-child(1) .txt_area{
    background:url(../img/img_content2_1.png) 14px 10px no-repeat;
    background-size:25px auto;
}
.step2 li:nth-child(2) .txt_area{
    background:url(../img/img_content2_2.png) 14px 10px no-repeat;
    background-size:25px auto;
}
.step2 li:nth-child(3) .txt_area{
    background:url(../img/img_content2_3.png) 14px 10px no-repeat;
    background-size:25px auto;
}
/* step3
------------------------------ */

.step3{
    background:#f9ecec;
    margin:0 0 30px;
}
.step3 h2{
    border:#f56464 1px solid;
}
.step3 h2 span.step_icon{
    background:#f56464;
}
.step3 li a{
    background:#f56464;
    box-shadow:0px 5px 0px 0px #c94343;
}
.step3 li:nth-child(1) .txt_area{
    background:url(../img/img_content3_1.png) 14px 10px no-repeat;
    background-size:25px auto;
}
.step3 li:nth-child(2) .txt_area{
    background:url(../img/img_content3_2.png) 14px 10px no-repeat;
    background-size:25px auto;
}
.step3 li:nth-child(3) .txt_area{
    background:url(../img/img_content3_3.png) 14px 10px no-repeat;
    background-size:25px auto;
}

/* TOPへボタン */ 
.to_top{
    background:#fff4e7;
    padding:20px;
    margin:0 0 100px;
}
.to_top a{
    background: #fff;
    color: #777;
    text-decoration:none;
    text-align:center;
    width:100%;
    margin:0 auto;
    padding:14px 0;
    display: block;
    font-size:1.0rem;
    font-weight:bold;
    -webkit-box-shadow: 0px 1px 3px #cec4b9;
    -moz-box-shadow: 0px 1px 3px #cec4b9;
    box-shadow: 0px 1px 3px #cec4b9;
    border-radius: 5px;
    position:relative;
}