@charset "UTF-8";

/*----------------------------------------------------
	PC
----------------------------------------------------*/

@media screen and (min-width: 761px) {

#course .content {
padding: 80px 30px;
background: #e8e3d0;
}
#course .content .inner {
width: 1160px;
margin: 0 auto;
position: relative;
}
#course .content .block {
text-align: center;
display: none;
}
#course .content #block1 {
display: block;
}
#course .content .block img {
width: 100%;
}

#course .content .block a {
margin: 40px 0 0 0;
display: inline-block;
}
#course .content .block a img {
width: auto;
transition: all .2s;
}
#course .content .block a:hover img {
opacity: 0.7;
}

#course .content ul {
width: 278px;
position: absolute;
top: 0;
right: 0;
}
#course .content ul li {
width: 65px;
margin: 0 6px 6px 0;
float: left;
cursor: pointer;
}
#course .content ul li:nth-child(4n) {
margin: 0 0 6px 0;
}
#course .content ul li:nth-child(1) {
background: url(../images/course/no1_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(2) {
background: url(../images/course/no2_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(3) {
background: url(../images/course/no3_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(4) {
background: url(../images/course/no4_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(5) {
background: url(../images/course/no5_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(6) {
background: url(../images/course/no6_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(7) {
background: url(../images/course/no7_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(8) {
background: url(../images/course/no8_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(9) {
background: url(../images/course/no9_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(10) {
background: url(../images/course/no10_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(11) {
background: url(../images/course/no11_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(12) {
background: url(../images/course/no12_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(13) {
background: url(../images/course/no13_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(14) {
background: url(../images/course/no14_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(15) {
background: url(../images/course/no15_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(16) {
background: url(../images/course/no16_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(17) {
background: url(../images/course/no17_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(18) {
background: url(../images/course/no18_off.png) no-repeat center center / cover
}
#course .content ul li:nth-child(19) {
background: url(../images/course/all_off.png) no-repeat center center / cover
}
#course .content ul li img {
width: 100%;
opacity: 0;
}
#course .content ul li img.current,
#course .content ul li:hover img {
opacity: 1;
}

}

/*----------------------------------------------------
	SP
----------------------------------------------------*/

@media screen and (max-width: 760px) {

#course .content {
padding: 30px 15px;
background: #e8e3d0;
}
#course .content .inner {
width: 100%;
margin: 0 auto;
position: relative;
}
#course .content .block {
text-align: center;
display: none;
}
#course .content #block1 {
display: block;
}
#course .content .block img {
width: 100%;
}
#course .content .block a {
margin: 20px 0 0 0;
display: inline-block;
}
#course .content ul {
width: 100%;
}
#course .content ul li {
width: calc((100% / 6) - 5px);
margin: 0 6px 6px 0;
float: left;
cursor: pointer;
}
#course .content ul li:nth-child(6n) {
margin: 0 0 6px 0;
}
#course .content ul li:nth-child(1) {
background: url(../images/course/no1_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(2) {
background: url(../images/course/no2_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(3) {
background: url(../images/course/no3_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(4) {
background: url(../images/course/no4_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(5) {
background: url(../images/course/no5_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(6) {
background: url(../images/course/no6_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(7) {
background: url(../images/course/no7_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(8) {
background: url(../images/course/no8_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(9) {
background: url(../images/course/no9_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(10) {
background: url(../images/course/no10_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(11) {
background: url(../images/course/no11_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(12) {
background: url(../images/course/no12_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(13) {
background: url(../images/course/no13_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(14) {
background: url(../images/course/no14_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(15) {
background: url(../images/course/no15_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(16) {
background: url(../images/course/no16_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(17) {
background: url(../images/course/no17_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(18) {
background: url(../images/course/no18_off.png) no-repeat center center / cover;
}
#course .content ul li:nth-child(19) {
background: url(../images/course/all_off.png) no-repeat center center / cover;
}
#course .content ul li img {
width: 100%;
opacity: 0;
}
#course .content ul li img.current,
#course .content ul li:hover img {
opacity: 1;
}

}