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

	サラブレッド講座 - 共通

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

ul.nav.pills {
    display: block;
    font-size: 0;
}

ul.nav.pills > li {
    font-size: 1.3rem;
    display: inline-block;
    width: 33.33%;
    width: 25%;
}

ul.nav.pills > li a i.fa.fa-chevron-circle-down {
    display: none;
}

ul.nav.pills > li.current a i.fa.fa-chevron-circle-down {
    display: inline-block;
}


ul.nav.pills > li a i.fa.fa-chevron-circle-right {
    display: inline-block;
}

ul.nav.pills > li.current a i.fa.fa-chevron-circle-right {
    display: none;
}



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

.grid > .cell {
    display: table-cell;
    vertical-align: top;
}

.grid.intro > .cell.img {
    width: 400px;
}

.grid.intro > .cell.txt {
    padding-left: 30px;
}



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

	959px以下

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

@media screen and ( max-width : 959px ) {
	
    .beginner_menu ul.nav.pills > li { width: 50%; }
    
}


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

	767px以下

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

@media screen and ( max-width : 767px ) {
	
	.grid {
        display: block;
    }

    .grid > .cell {
        display: block;
    }

    .grid.intro > .cell.img {
        width: auto;
        text-align: center;
    }

    .grid.intro > .cell.txt {
        padding-left: 0;
    }
	
}


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

	639px以下

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

@media screen and ( max-width : 639px ) {
	
	ul.nav.pills > li { width: 50%; }
    
}




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

	479px以下

------------------------------------------------------------ */
@media screen and (max-width: 479px) {
    
}


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

	359px以下

------------------------------------------------------------ */
@media screen and ( max-width : 359px ) {
	
    ul.nav.pills > li {
        width: 100%;
        display: block;
    }
    
}