/* ------------------------------------------------------------

	競馬ビギナー・はじめての方へ：トップページ

------------------------------------------------------------ */

/* ----- hero image ----- */
.hero_area .content { background: url(/kouza/_img/bg_top-hero.jpg) 0 0 no-repeat; }

.hero_area .content .info { max-width: 330px; }


/* --- category link --- */
.category_unit > .contents_header > h2 > span.txt a {
    text-decoration: none;
    color: #06a;
}

.category_unit > .contents_header > h2 > span.txt a i {
    margin-right: 0.3em;
    color: #188542;
}

/* ----- ビギナーズセミナー ----- */
#beginners_seminor {
    /*margin-top: 15px;*/
    background-color: #ebebeb;
    padding: 10px;
}

.link_list + #beginners_seminor { border-top: 1px dashed #ccc; }

#beginners_seminor a {
    display: block;
    text-decoration: none;
    color: #333;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
    border-radius: 3px;
    background-color: #fff;
}

.no-touch #beginners_seminor a:hover { background-color: #fff8e1; }

#beginners_seminor .grid {
    display: table;
    width: 100%;
}

#beginners_seminor .grid > .cell {
    display: table-cell;
    vertical-align: top;
    padding: 15px;
}

#beginners_seminor .grid > .cell.img { width: 478px; }
#beginners_seminor .grid > .cell.img img { vertical-align: top; }

#beginners_seminor .grid > .cell.txt .lv5 { font-size: 2rem; }
#beginners_seminor .grid > .cell.txt .lv5 + p { margin-top: 15px; }

#beginners_seminor .grid > .cell.txt .icon { margin-left: 0.5em; }
#beginners_seminor .grid > .cell.txt p { line-height: 1.6; }



/* ------------------------------------------------------------

	959px以下

------------------------------------------------------------ */
@media screen and ( max-width : 959px ) {
	
    .hero_area .content { background-position: center bottom; }
    
    #umaca ul.link_list.multi.div4 > li { width: 50%; }
    #smappy ul.link_list.multi.div3 > li { width: 50%; }
    #beginner ul.link_list.multi.div3 > li { width: 50%; }
    
	#beginners_seminor .grid {
        display: block;
        padding: 15px;
    }
	
    #beginners_seminor .grid > .cell {
        display: block;
        padding: 0;
    }
    
    #beginners_seminor .grid > .cell.img {
        text-align: center;
        width: auto;
    }
    
    #beginners_seminor .grid > .cell.txt {
        max-width: 448px;
        margin: 0 auto;
        margin-top: 10px;
    }
	

    #pp10 ul.link_list.multi.div4 > li { width: 33.333%; }
}


/* ------------------------------------------------------------

	767px以下

------------------------------------------------------------ */
@media screen and ( max-width : 767px ) {
    
    .hero_area .content .info {
		height: auto;
        width: 100%;
        max-width: 100%;
        padding: 10px;
	}
    
    .hero_area .content { background-position: left center; }
    
    
    #hatsuharai ul.link_list.multi.div4 > li { width: 50%; }
    
    #pp10 ul.link_list.multi.div3 > li { width: 50%; }
    #pp10 ul.link_list.multi.div4 > li { width: 50%; }
}



/* ------------------------------------------------------------

	639px以下

------------------------------------------------------------ */
@media screen and ( max-width : 639px ) {
    
    .hero_area .content { background-position: center center; }
    
    #umaca ul.link_list.multi.div4 > li { width: 100%; }
    #smappy ul.link_list.multi.div3 > li { width: 100%; }
    #beginner ul.link_list.multi.div3 > li { width: 100%; }
    #beginners_seminor .grid > .cell.txt .lv5 + p { margin-top: 10px; }
    
    #pp10 ul.link_list.multi.div3 > li { width: 100%; }
    #pp10 ul.link_list.multi.div4 > li { width: 100%; }
}


/* ------------------------------------------------------------

	479px以下

------------------------------------------------------------ */
@media screen and ( max-width : 479px ) {
    
    #beginners_seminor .grid > .cell.txt .lv5 { font-size: 1.6rem; }
    
    #hatsuharai ul.link_list.multi.div4 > li { width: 100%; }
}

/* ------------------------------------------------------------

	359px以下

------------------------------------------------------------ */
@media screen and ( max-width : 359px ) {
    
    #beginners_seminor .grid > .cell.txt .lv5 { font-size: 1.5rem; }
    
}