@charset "UTF-8";



/***************************************************

	lesson

***************************************************/

#page_header{
	background-image: url('/lib/images/lesson/cont_header01.jpg');
}


#lesson{
	text-align: center;
}

#lesson .anchor_link01{
	margin: 0 0 110px;
	text-align: center;
}

#lesson .anchor_link01 ul li{
	display: inline-block;
	margin: 0 12px;
}

#lesson .anchor_link01 ul li a{
	display: inline-block;
	border: 1px solid #ddd;
	position: relative;
	font-size: 14px;
	line-height: 1;
	color: #3c3c3c;
	text-decoration: none;
	padding: 9px 45px 9px 10px;
}

#lesson .anchor_link01 ul li a::after{
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px #3c3c3c;
    border-right: solid 2px #3c3c3c;
    position: absolute;
    top: 29%;
    right: 15px;
    transform: rotate(135deg) translate(0, -50%);
}


#lesson .first_cont{
	margin: -60px 0 100px;
	padding-top: 60px;
}

#lesson .first_cont:last-child{
	margin-bottom: 0;
}

#lesson .first_cont h3{
	margin: 0 0 25px;
}

#lesson .first_cont h3 span{
	display: inline-block;
	border: 1px solid #b48845;
	line-height: 1;
	padding: 10px 16px;
	font-size: 26px;
	color: #b48845;
}

#lesson .first_cont .caption{
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 12px;
}

#lesson .first_cont .st_text{
	text-align: center;
}

#lesson .first_cont .st_text li{
	display: inline-block;
	line-height: 1;
	font-size: 16px;
	padding: 8px 26px;
	margin: 0 3px;
	background: #ededed;
}

#lesson .first_cont .note{
	margin: 14px 0 0;
}

#lesson .first_cont .note span{
	display: inline-block;
	padding-left: 30px;
	position: relative;
}

#lesson .first_cont .note span::before{
	content: '例：';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

.en #lesson .first_cont .note span{
	display: inline-block;
	padding-left: 75px;
	position: relative;
}

.en #lesson .first_cont .note span::before{
	content: 'example:';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

.zh #lesson .first_cont .note span{
	display: inline-block;
	padding-left: 40px;
	position: relative;
}

.zh #lesson .first_cont .note span::before{
	content: '示例：';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

.vi #lesson .first_cont .note span{
	display: inline-block;
	padding-left: 30px;
	position: relative;
}

.vi #lesson .first_cont .note span::before{
	content: 'VD:';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

#lesson .first_cont .note span::before{
	content: '例：';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}


#lesson .first_cont .table{
	margin: 28px 0 0;
}

#lesson .first_cont .table{

}

#lesson .first_cont .table tr td,
#lesson .first_cont .table tr th{
	border: 1px solid #a1a1a1;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	padding: 10px 0;
	vertical-align: middle;
}

#lesson .first_cont .table tr th{
	background: #a1a1a1;
	color: #fff;
	border-right: 1px solid #fff;
}

#lesson .first_cont .table tr th:last-child{
	border-right: 1px solid #a1a1a1;
}

#lesson .first_cont .table tr td.td01{
	width: 135px;
}



/********************************************************************************
	スマートフォン用 CSS
********************************************************************************/

@media(max-width:768px){


#lesson{

}

#lesson .anchor_link01{
	margin: 0 0 60px;
}

#lesson .anchor_link01 ul li{
	display: block;
	margin: 0 0 12px;
}

#lesson .anchor_link01 ul li:last-child{
	margin-bottom: 0;
}

#lesson .anchor_link01 ul li a{
	display: block;
	font-size: 12px;
	padding: 8px 0 8px 10px;
}

#lesson .anchor_link01 ul li a::after{
    top: 26%;
}

#lesson .first_cont{
	margin: -40px 0 60px;
	padding-top: 40px;
}

#lesson .first_cont h3{
	margin: 0 0 20px;
}

#lesson .first_cont h3 span{
	padding: 8px 12px;
	font-size: 4.8vw;
	line-height: 1.4;
}

#lesson .first_cont .caption{
	font-size: 3.733333vw;
	line-height: 1.6;
	margin: 0 0 12px;
}

#lesson .first_cont .st_text li{
	display: block;
	font-size: 3.466667vw;
	padding: 6px 14px;
	line-height: 1.4;
	margin: 0 0 12px;
}

#lesson .first_cont .st_text li:last-child{
	margin-bottom: 0;
}

#lesson .first_cont .note{
	margin: 14px 0 0;
}

#lesson .first_cont .note span{
	font-size: 12px;
	text-align: left;
	padding-left: 8%;
}

#lesson .first_cont .table{
	margin: 28px 0 0;
	overflow-x: scroll;
}

#lesson .first_cont .table table{
	width: 840px;
	white-space:nowrap;
}

#lesson .first_cont .table tr td,
#lesson .first_cont .table tr th{
	font-size: 13px;
	padding: 8px 0;
}

#lesson .first_cont .table tr td.td01{
	width: 100px;
}

#lesson .scroll_note{
	margin: 12px 0 0;
	text-align: center;
	font-size: 1.0rem;
}

.en #lesson .first_cont .note span{
	display: inline-block;
	padding-left: 55px;
	position: relative;
}

.zh #lesson .first_cont .note span{
	display: inline-block;
	padding-left: 40px;
	position: relative;
}

.vi #lesson .first_cont .note span{
	display: inline-block;
	padding-left: 30px;
	position: relative;
}


}