@charset "utf-8";

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

/* common
------------------------------ */
#beginner_guide { 
    color: #333;
    font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
body{ min-width: 1000px;}
a {
    color: #333;
    cursor: pointer;
    text-decoration: none;
}
a:hover {
    color: #333;
}
img {
    box-sizing: border-box;
    vertical-align: bottom;
}

/* header
------------------------------ */

.header{
    width:1000px;
    margin:8px auto;
    text-align:left;
}

/* title
------------------------------ */

.title{
    background:url(../img/bg_main.png) 0 0 repeat-x;
    text-align:center;
    margin:0 0 15px;
}
.title h1{
    width:950px;
    margin:0 auto;
    position:relative;
}
.title h1 .balloon{
    position:absolute;
    left:0;
    top:30px;
    -webkit-animation-name:fuwafuwa;
	-webkit-animation-duration:3s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease;
	-moz-animation-name:fuwafuwa;
	-moz-animation-duration:3s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:ease;
}
@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -10px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -10px);}
	100% {-moz-transform:translate(0, 0);}
}

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

.contents{
    padding:30px 0 20px;

}
.contents h2{
    width:950px;
    margin:0 auto;
    background:#fff;
    text-align:left;
    font-size:22px;
    border:1px solid #000;
    color:#424242;
    font-weight:bold;
    padding:8px 0 5px;
}
.contents h2 span{
    background:#000;
    color:#fff;
    padding:8px 14px 5px;
    margin:0 10px 0 0;
}
.contents ul{
    width:950px;
    overflow:hidden;
    margin:30px auto 0;
}
.contents li{
    float:left;
    margin:0 25px 0 0;
}
.contents li:last-child{
    margin:0;
}
.contents li a{
    display:inline-block;
    background:#000;
    width:300px;
    padding:20px 0;
    border-radius:5px;
    color:#fff;
    margin:0 0 20px;
}
.contents li a:hover{
    position:relative;
    top:7px;
    box-shadow:none;
}
.contents li .txt_area{
    text-align:left;
}
.contents li .txt_area p{
    font-size:14px;
}
.contents li .txt_area h3{
    font-weight:bold;
    font-size:26px;
}

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

.step1{
    background:#eafaf8;
}
.step1 li a{
   height:90px;
}
.step1 h2{
    border:#00ad9c 1px solid;
}
.step1 h2 span{
    background:#00ad9c;
}
.step1 li a{
    background:#00ad9c;
    box-shadow:0px 7px 0px 0px #008679;
}
.step1 li a:hover{
    background:#008679;
}
.step1 li:nth-child(1) .txt_area{
    padding:0 0 0 70px;
    background:url(../img/img_content1_1.png) 10px -2px no-repeat;
}
.step1 li:nth-child(2) .txt_area{
    padding:0 0 0 90px;
    background:url(../img/img_content1_2.png) 30px 0 no-repeat;
}
.step1 li:nth-child(3) .txt_area{
    padding:15px 0 0 80px;
    background:url(../img/img_content1_3.png) 20px 15px no-repeat;
}
.step1 .point{
    background:#fff;
    border-radius:50px;
    margin:8px 20px 0;
    color:#f53b50;
    padding:1px 0;
    font-size:18px;
    font-weight:bold;
}
.step1 .point span{
    padding:0 0 0 20px;
    background:url("https://www.chance.com/img/10/icon/ico-pt.gif") 3px 6px no-repeat;
}

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

.step2{
    background:#fcf8e7;
}
.step2 li a{
   height:60px;
}
.step2 h2{
    border:#f2a81a 1px solid;
}
.step2 h2 span{
    background:#f2a81a;
}
.step2 li a{
    background:#f2a81a;
    box-shadow:0px 7px 0px 0px #c58500;
}
.step2 li a:hover{
    background:#c58500;
}
.step2 li:nth-child(1) .txt_area{
    padding:0 0 0 90px;
    background:url(../img/img_content2_1.png) 30px 0px no-repeat;
}
.step2 li:nth-child(2) .txt_area{
    padding:0 0 0 90px;
    background:url(../img/img_content2_2.png) 30px 0 no-repeat;
}
.step2 li:nth-child(3) .txt_area{
    padding:5px 0 0 70px;
    background:url(../img/img_content2_3.png) 15px 0 no-repeat;
}
.step2 li:nth-child(3) .txt_area h3{
    font-size:24px;
}

/* step3
------------------------------ */

.step3{
    background:#f9ecec;
}
.step3 li a{
   height:60px;
}
.step3 h2{
    border:#f56464 1px solid;
}
.step3 h2 span{
    background:#f56464;
}
.step3 li a{
    background:#f56464;
    box-shadow:0px 7px 0px 0px #c94343;
}
.step3 li a:hover{
    background:#c94343;
}
.step3 li:nth-child(1) .txt_area{
    padding:5px 0 0 78px;
    background:url(../img/img_content3_1.png) 18px 4px no-repeat;
}
.step3 li:nth-child(2) .txt_area{
    padding:5px 0 0 70px;
    background:url(../img/img_content3_2.png) 15px 4px no-repeat;
}
.step3 li:nth-child(2) .txt_area h3{
    font-size:24px;
}
.step3 li:nth-child(3) .txt_area{
    padding:5px 0 0 70px;
    background:url(../img/img_content3_3.png) 15px 4px no-repeat;
}

/* -- footer
------------------------------ */

.to_top{
    font-size:16px;
    text-decoration:underline;
    margin:40px 0 0;
}
#beginner_guide #camp-guide-foot {
    height:320px;
    margin:100px 0 0;
}
iframe#camp-guide-foot {
    border: medium none;
    height: 200px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
}