@charset "utf-8";
/* CSS Document */
.pt10 {
	padding-top: 10px;
}
.pt20 {
	padding-top: 20px;
}
#info .contents {
	width:auto;
	max-width:784px;
}
#info .contents-main {
	padding:0 25px;
	width:auto;
	float:none;
}
#info .contents-main img {
	max-width:100%;
}
#info .footer {
	width:auto;
	max-width:1024px;
}
#info .btn-cmn-pagetop {
	padding-right:30px;
}
/* #info .contents-sub {
	padding-right:10px;
} */
#info .btn-cmn-01 {
	width: 230px;
	display: block;
    margin: 0 auto;
}
.header{
	background:url(../common/img/mainimg_02.png);
	width:100%;
	padding-top:12px;
}

/*.header-mainimg*/
.header-mainimg-area{
	width:100%;
	max-width:1120px;
	margin: 0 auto;
	position: relative;
}
.header-mainimg {
	max-width:838px;
	width:100%;
	margin: 0 auto;
	background-repeat:no-repeat;
}
.header-mainimg h1 {
	max-width:838px;
	margin:0 auto;
}
.header-mainimg h1 img {
	width:100%;
}
.header-mainimg .btn-langeage-01 {
	position:absolute;
	top: 10px;
	right: 10px;
}
.header-mainimg .btn-langeage-01 .select-wrap{
	position:relative;
	overflow:hidden;
	display:inline-block;
	min-width:120px;
	height:40px;
	background-color:#ffffff;
	color:#333;
	border-radius:3px;
}
.header-mainimg .btn-langeage-01 .select-wrap select{
	position:relative;
	z-index:2;
	display:block;
	width:100%;
	height:44px;
	/*width:-webkit-calc(100% + 5em);*/
	margin:0;
	padding:8px 35px 11px 11px;
	background:transparent;
	border:0;
	outline:none;
	font-size:16px;
	line-height:1.5;
	-moz-line-height:1;
	-webkit-appearance: none;
	-moz-appearance:    none;
	-ms-line-height:2;
	appearance:         none;
	cursor:pointer;
	color:#474747;
	 /*Firefox用*/
	text-indent: .01px;
	text-overflow: "";
}

.header-mainimg .btn-langeage-01 select::-ms-expand {
	display: none;
}
.header-mainimg .btn-langeage-01 .btn-entypo:before{
	content:url(../img/ico_arrow_header_01.png);
	position:absolute;
	z-index:1;
	top:50%;
	right:12px;
	right:.75rem;
	margin-top:-8px;
	margin-top:-.5rem;
	line-height:1;
	cursor:pointer;
}

/*list-tabs*/
.list-tabs {
	margin:23px auto 54px;
	height:186px;
}
.list-tabs:after{content:".";display:block;height:0px;clear:both;visibility:hidden;}
.list-tabs li {
	width:33%;
	float:left;
}
.list-tabs li a {
	background-size:contain;
	background-position:left center;
	background-repeat:no-repeat;
	padding:0 5%;
	height:186px;
}
@media screen and (max-width: 780px) {
	.list-tabs,
	.list-tabs li a {
		height:140px;
	}
}
.list-tabs .tab-01 {
}
.list-tabs .tab-02 {
	width:34%;
}
.list-tabs .tab-03 {
}
/* japanese */
.list-tabs .tab-01 a{
	background-image:url(../img/btn_tab_01_off.png);
	display:block;
}
.list-tabs .tab-01:hover a{
	background-image:url(../img/btn_tab_01_on.png);
}
.list-tabs .tab-02 a{
	background-image:url(../img/btn_tab_02_off.png);
	display:block;
}
.list-tabs .tab-02:hover a{
	background-image:url(../img/btn_tab_02_on.png);
}
.list-tabs .tab-03 a{
	background-image:url(../img/btn_tab_03_off.png);
	display:block;
}
.list-tabs .tab-03:hover a{
	background-image:url(../img/btn_tab_03_on.png);
}
.list-tabs .tab-01 a.is-current{
	background-image:url(../img/btn_tab_01_on.png);
	display:block;
}
.list-tabs .tab-02 a.is-current{
	background-image:url(../img/btn_tab_02_on.png);
	display:block;
}
.list-tabs .tab-03 a.is-current{
	background-image:url(../img/btn_tab_03_on.png);
	display:block;
}
.list-tabs a {
	border: none;
}
/*#tab02{
	display: none;
}
#tab03{
	display: none;
}*/
.tab02{
	display: none;
}
.tab03{
	display: none;
	float:left;
}
/*english*/
.list-tabs.en .tab-01 a{
	background-image:url(../img/en/btn_tab_en_01_off.png);
	display:block;
}
.list-tabs.en .tab-01:hover a{
	background-image:url(../img/en/btn_tab_en_01_on.png);
}
.list-tabs.en .tab-02 a{
	background-image:url(../img/en/btn_tab_en_02_off.png);
	display:block;
}
.list-tabs.en .tab-02:hover a{
	background-image:url(../img/en/btn_tab_en_02_on.png);
}
.list-tabs.en .tab-03 a{
	background-image:url(../img/en/btn_tab_en_03_off.png);
	display:block;
}
.list-tabs.en .tab-03:hover a{
	background-image:url(../img/en/btn_tab_en_03_on.png);
}
.list-tabs.en .tab-01 a.is-current{
	background-image:url(../img/en/btn_tab_en_01_on.png);
	display:block;
}
.list-tabs.en .tab-02 a.is-current{
	background-image:url(../img/en/btn_tab_en_02_on.png);
	display:block;
}
.list-tabs.en .tab-03 a.is-current{
	background-image:url(../img/en/btn_tab_en_03_on.png);
	display:block;
}
/* esp */
.esp .list-tabs .tab-01 a{
	background-image:url(../img/esp/btn_tab_01_off.png);
	display:block;
}
.esp .list-tabs .tab-01:hover a{
	background-image:url(../img/esp/btn_tab_01_on.png);
}
.esp .list-tabs .tab-02 a{
	background-image:url(../img/esp/btn_tab_02_off.png);
	display:block;
}
.esp .list-tabs .tab-02:hover a{
	background-image:url(../img/esp/btn_tab_02_on.png);
}
.esp .list-tabs .tab-03 a{
	background-image:url(../img/esp/btn_tab_03_off.png);
	display:block;
}
.esp .list-tabs .tab-03:hover a{
	background-image:url(../img/esp/btn_tab_03_on.png);
}
.esp .list-tabs .tab-01 a.is-current{
	background-image:url(../img/esp/btn_tab_01_on.png);
	display:block;
}
.esp .list-tabs .tab-02 a.is-current{
	background-image:url(../img/esp/btn_tab_02_on.png);
	display:block;
}
.esp .list-tabs .tab-03 a.is-current{
	background-image:url(../img/esp/btn_tab_03_on.png);
	display:block;
}
/* ind */
.ind .list-tabs .tab-01 a{
	background-image:url(../img/ind/btn_tab_01_off.png);
	display:block;
}
.ind .list-tabs .tab-01:hover a{
	background-image:url(../img/ind/btn_tab_01_on.png);
}
.ind .list-tabs .tab-02 a{
	background-image:url(../img/ind/btn_tab_02_off.png);
	display:block;
}
.ind .list-tabs .tab-02:hover a{
	background-image:url(../img/ind/btn_tab_02_on.png);
}
.ind .list-tabs .tab-03 a{
	background-image:url(../img/ind/btn_tab_03_off.png);
	display:block;
}
.ind .list-tabs .tab-03:hover a{
	background-image:url(../img/ind/btn_tab_03_on.png);
}
.ind .list-tabs .tab-01 a.is-current{
	background-image:url(../img/ind/btn_tab_01_on.png);
	display:block;
}
.ind .list-tabs .tab-02 a.is-current{
	background-image:url(../img/ind/btn_tab_02_on.png);
	display:block;
}
.ind .list-tabs .tab-03 a.is-current{
	background-image:url(../img/ind/btn_tab_03_on.png);
	display:block;
}
/* tha */
.tha .list-tabs .tab-01 a{
	background-image:url(../img/tha/btn_tab_01_off.png);
	display:block;
}
.tha .list-tabs .tab-01:hover a{
	background-image:url(../img/tha/btn_tab_01_on.png);
}
.tha .list-tabs .tab-02 a{
	background-image:url(../img/tha/btn_tab_02_off.png);
	display:block;
}
.tha .list-tabs .tab-02:hover a{
	background-image:url(../img/tha/btn_tab_02_on.png);
}
.tha .list-tabs .tab-03 a{
	background-image:url(../img/tha/btn_tab_03_off.png);
	display:block;
}
.tha .list-tabs .tab-03:hover a{
	background-image:url(../img/tha/btn_tab_03_on.png);
}
.tha .list-tabs .tab-01 a.is-current{
	background-image:url(../img/tha/btn_tab_01_on.png);
	display:block;
}
.tha .list-tabs .tab-02 a.is-current{
	background-image:url(../img/tha/btn_tab_02_on.png);
	display:block;
}
.tha .list-tabs .tab-03 a.is-current{
	background-image:url(../img/tha/btn_tab_03_on.png);
	display:block;
}


/* vie */
.vie .list-tabs .tab-01 a{
	background-image:url(../img/vie/btn_tab_01_off.png);
	display:block;
}
.vie .list-tabs .tab-01:hover a{
	background-image:url(../img/vie/btn_tab_01_on.png);
}
.vie .list-tabs .tab-02 a{
	background-image:url(../img/vie/btn_tab_02_off.png);
	display:block;
}
.vie .list-tabs .tab-02:hover a{
	background-image:url(../img/vie/btn_tab_02_on.png);
}
.vie .list-tabs .tab-03 a{
	background-image:url(../img/vie/btn_tab_03_off.png);
	display:block;
}
.vie .list-tabs .tab-03:hover a{
	background-image:url(../img/vie/btn_tab_03_on.png);
}
.vie .list-tabs .tab-01 a.is-current{
	background-image:url(../img/vie/btn_tab_01_on.png);
	display:block;
}
.vie .list-tabs .tab-02 a.is-current{
	background-image:url(../img/vie/btn_tab_02_on.png);
	display:block;
}
.vie .list-tabs .tab-03 a.is-current{
	background-image:url(../img/vie/btn_tab_03_on.png);
	display:block;
}


/* chi */
.chi .list-tabs .tab-01 a{
	background-image:url(../img/chi/btn_tab_01_off.png);
	display:block;
}
.chi .list-tabs .tab-01:hover a{
	background-image:url(../img/chi/btn_tab_01_on.png);
}
.chi .list-tabs .tab-02 a{
	background-image:url(../img/chi/btn_tab_02_off.png);
	display:block;
}
.chi .list-tabs .tab-02:hover a{
	background-image:url(../img/chi/btn_tab_02_on.png);
}
.chi .list-tabs .tab-03 a{
	background-image:url(../img/chi/btn_tab_03_off.png);
	display:block;
}
.chi .list-tabs .tab-03:hover a{
	background-image:url(../img/chi/btn_tab_03_on.png);
}
.chi .list-tabs .tab-01 a.is-current{
	background-image:url(../img/chi/btn_tab_01_on.png);
	display:block;
}
.chi .list-tabs .tab-02 a.is-current{
	background-image:url(../img/chi/btn_tab_02_on.png);
	display:block;
}
.chi .list-tabs .tab-03 a.is-current{
	background-image:url(../img/chi/btn_tab_03_on.png);
	display:block;
}

/* fre */
.fre .list-tabs .tab-01 a{
	background-image:url(../img/fre/btn_tab_01_off.png);
	display:block;
}
.fre .list-tabs .tab-01:hover a{
	background-image:url(../img/fre/btn_tab_01_on.png);
}
.fre .list-tabs .tab-02 a{
	background-image:url(../img/fre/btn_tab_02_off.png);
	display:block;
}
.fre .list-tabs .tab-02:hover a{
	background-image:url(../img/fre/btn_tab_02_on.png);
}
.fre .list-tabs .tab-03 a{
	background-image:url(../img/fre/btn_tab_03_off.png);
	display:block;
}
.fre .list-tabs .tab-03:hover a{
	background-image:url(../img/fre/btn_tab_03_on.png);
}
.fre .list-tabs .tab-01 a.is-current{
	background-image:url(../img/fre/btn_tab_01_on.png);
	display:block;
}
.fre .list-tabs .tab-02 a.is-current{
	background-image:url(../img/fre/btn_tab_02_on.png);
	display:block;
}
.fre .list-tabs .tab-03 a.is-current{
	background-image:url(../img/fre/btn_tab_03_on.png);
	display:block;
}

/* por */
.por .list-tabs .tab-01 a{
	background-image:url(../img/por/btn_tab_01_off.png);
	display:block;
}
.por .list-tabs .tab-01:hover a{
	background-image:url(../img/por/btn_tab_01_on.png);
}
.por .list-tabs .tab-02 a{
	background-image:url(../img/por/btn_tab_02_off.png);
	display:block;
}
.por .list-tabs .tab-02:hover a{
	background-image:url(../img/por/btn_tab_02_on.png);
}
.por .list-tabs .tab-03 a{
	background-image:url(../img/por/btn_tab_03_off.png);
	display:block;
}
.por .list-tabs .tab-03:hover a{
	background-image:url(../img/por/btn_tab_03_on.png);
}
.por .list-tabs .tab-01 a.is-current{
	background-image:url(../img/por/btn_tab_01_on.png);
	display:block;
}
.por .list-tabs .tab-02 a.is-current{
	background-image:url(../img/por/btn_tab_02_on.png);
	display:block;
}
.por .list-tabs .tab-03 a.is-current{
	background-image:url(../img/por/btn_tab_03_on.png);
	display:block;
}

/*list-step*/
.list-step {
	margin-bottom: 33px;
}
.list-step .stepTxtWrap{clear:both;}
.list-step .stepTxt01{
	float: left;
	width: 45%;
	max-height: 999999px;
}
.list-step .stepTxt01 .indent {
	padding-left: 3.8em;
}
.list-step .stepTxt02{
	padding-left:50%;
	max-height: 999999px;
}

/*英語*/
.list-step.en .stepTxt01{
	width: 45%;
}
.list-step.en .stepTxt02{
	padding-left: 50%;
	padding-bottom:10px;
}

/* ind */
.list-step.ind .stepTxt01{
	width: 46%;
}
.list-step.ind .stepTxt02{
	padding-bottom:10px;
}

/* esp */
.list-step.esp .stepTxt02{
	padding-bottom:10px;
}

/*fre*/
.list-step.fre .stepTxt02{
	padding-bottom:10px;
}

/*por*/
.list-step.por .stepTxt02{
	padding-bottom:10px;
}

/*ft-box*/
.ft-box{
	overflow:auto;
	zoom:1;
	padding-top:20px;
}
.ft-box.en01, .ft-box.fre01{
	padding-top:10px;
}
.fig-fr{
	float:right;
	padding-left: 35px;
}
.fig-fl{
	float:left;
	padding-right: 30px;
}
/* sns-box */
.box-twitter,
.box-facebook{
	text-align: center;
	border: 1px solid #ebebeb;
	padding: 0 13px;
}
.box-facebook {
	margin: 10px auto 22px;
}
.sns-icon {
	margin: 22px auto;
}

/*box-btn-action*/
.box-btn-action {
	text-align:center
}
.btn-learn{
	border:none;
	background:url(../common/img/mainimg_02.png);
	border-radius: 6px;
	height: 69px;
	color: #FFF;
	font-size: 20px;
	line-height: 1.4;
	margin: 0 auto;
	display:inline-flex;
	-webkit-align-items: center;
	align-items: center;
	justify-content: center;
}
.tab01 .btn-learn {
	width: 360px;
	margin-bottom: 22px;
}
.tab02 .btn-learn {
	width: 437px;
}
.tab03 .btn-learn {
	width: 330px;
	margin-bottom: 22px;
}
.btn-learn img {
	margin-left: 20px;
}
.btn-text:hover,
.btn-learn:hover{
	-ms-filter: "alpha( opacity=80)";
	filter: alpha(opacity=80);
	opacity: 0.8;
	border:none;
}


#graph{
	position:relative;
	width: 734px;
}
#graph .graphWrap {
	background:url(../img/graph-stage.png) no-repeat 125px bottom;
	padding-bottom: 350px;
	margin-bottom: 2px;
}
#graph h3{
	margin-bottom: 8px;
}
/*color*/
#graph #level-a1 h3 span{
	color:#d85d93;
	font-size: 16px;
}
#graph #level-a2 h3 span{
	color:#db5325;
	font-size: 16px;
}
#graph #level-b1 h3 span{
	color:#389c38;
	font-size: 16px;
}
#graph #level-b2 h3 span{
	color:#68a3d7;
	font-size: 16px;
}
#graph #level-c1 h3 span{
	color:#64519f;
	font-size: 16px;
}
#graph #level-c2 h3 span{
	color:#761c75;
	font-size: 16px;
}
#graph ul li{
	text-align:left;
	position:relative;
}
#graph ul li:before{
	position:absolute;
	content: '\30fb';
	left:-10px;
}

#graph .content-level_description{
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	border-radius:10px;
	padding:1em;
	font-size:12px;
	display:none;
	padding: 22px 15px 22px 20px;
	box-sizing:border-box;
}
#graph .content-level_description.first {
	display: block;
}
#graph .content-level_description.level-a1{
	background-color:#ffe0ed;
}
#graph .content-level_description.level-a2{
	background-color:#ffe3d9;
}
#graph .content-level_description.level-b1{
	background-color:#d7ebd7;
}
#graph .content-level_description.level-b2{
	background-color:#e1edf7;
}
#graph .content-level_description.level-c1{
	background-color:#e0dcec;
}
#graph .content-level_description.level-c2{
	background-color:#e8d0e7;
}
#graph .btn-level{
	position:absolute;
	width:110px;
	height:73px;
	overflow:hidden;
	display:block;
	background-repeat:no-repeat;
	border:none;
}
#graph .btn-level.en{
	width:112px;
}
#graph .btn-level{
	background-image:url(../img/btns-jp.gif);
}
#graph.en .btn-level{
	background-image:url(../img/en/btns-en.png);
}
.esp #graph .btn-level{
	background-image:url(../img/esp/btns-level.png);
}
.ind #graph .btn-level{
	background-image:url(../img/ind/btns-level.png);
}
.tha #graph .btn-level{
	background-image:url(../img/tha/btns-level.png);
}
.vie #graph .btn-level{
	background-image:url(../img/vie/btns-level.png);
}
.chi #graph .btn-level{
	background-image:url(../img/chi/btns-level.png);
}
.fre #graph .btn-level{
	background-image:url(../img/fre/btns-level.png);
}
.por #graph .btn-level{
	background-image:url(../img/por/btns-level.png);
}
#graph #btn-level-a1{
	left:30px;
	bottom: 98px;
	background-position:0 0;
}
#graph #btn-level-a1:hover,
#graph #btn-level-a1.active{
	background-position:0 -78px;
}
 #graph #btn-level-a2{
	left:146px;
	bottom: 137px;
	background-position:-116px 0;
}
#graph #btn-level-a2:hover,
#graph #btn-level-a2.active{
	background-position:-116px -78px;
}
#graph #btn-level-b1{
	left:262px;
	bottom: 170px;
	background-position:-232px 0;
}
#graph #btn-level-b1:hover,
#graph #btn-level-b1.active{
	background-position:-232px -78px;
}
#graph #btn-level-b2{
	left:378px;
	bottom: 203px;
	background-position:-349px 0;
}
#graph #btn-level-b2:hover,
#graph #btn-level-b2.active{
	background-position:-349px -78px;
}
 #graph #btn-level-c1{
	left:492px;
	bottom: 234px;
	background-position:-466px 0;
}
#graph #btn-level-c1:hover,
#graph #btn-level-c1.active{
	background-position:-466px -78px;
}
#graph #btn-level-c2{
	left:610px;
	bottom: 261px;
	background-position:-583px 0;
}
#graph #btn-level-c2:hover,
#graph #btn-level-c2.active{
	background-position:-583px -78px;
}
#graph .human{
	position:absolute;
	left:135px;
	bottom: 62px;
}
#graph .graph-text{
	position:relative;
	left:123px;
	bottom:0px;
}
ul.indent{
	padding-left:1em;
}

.tableInfo {
	border-left: 1px solid #666;
	border-top: 1px solid #666;
	font-size: 14px;
	width: 100%;
}
.tableInfo th,
.tableInfo td{
	padding: 3px;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
}
.tableInfo td{
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
}
.tableInfo tr.gray th{
	background: #666;
	color: #fff;
	text-align: center;
	border-right: 1px solid #898989;
}
.tableInfo tr.gray th:last-of-type{
	border-right: 1px solid #666;
}
.tableInfo tr .pink{
	background: #d8137e;
	color: #fff;
	text-align: center;
}
.tableInfo tr .yellow{
	background: #fcc800;
	color: #fff;
	text-align: center;
}
.tableInfo tr .green{
	background: #96bf23;
	color: #fff;
	text-align: center;
}
.tableInfo .new {
	background: #d43535;
	padding: 1px 3px;
	color: #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	margin-left: 3px;
	font-size: 12px;
}
.tableInfo .center {
	text-align: center;
}