@charset "UTF-8";
/* CSS Document */


/*■■■■■■■■■■
基本設定
*/
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?s2mx8w');
  src:  url('../fonts/icomoon.eot?s2mx8w#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?s2mx8w') format('truetype'),
    url('../fonts/icomoon.woff?s2mx8w') format('woff'),
    url('../fonts/icomoon.svg?s2mx8w#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-edit:before { content: "\e903" }
.icon-exam:before { content: "\e901" }
.icon-info:before { content: "\e900" }
.icon-result:before { content: "\e902" }
:root {
	--inSize: 1020px;	
	--keyRed: #e50012;
	--keyBrown: #bd8100;
    --keyBlue: #21435f;
    --keyGreen: #1f6664;
    --keyWine: #661c2a;
}
.goog-te-banner-frame {
    display: none;
}
html, body{
  min-height: 0!important;
  height: auto!important;
  position: inherit!important;
}
body {
	font-family: "Avenir Next", Verdana, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, Osaka, sans-serif;
	color: #000;
	text-align: justify;
	text-justify: inter-ideograph;
	line-height: 1.4;
    font-size: 16px;
    letter-spacing: .1em
}
p { text-align: justify }
a,input[type="submit"] { transition: .25s }
a:hover,input[type="submit"]:hover { opacity: .7 }
.txtBox p { margin-top: var(--w25) }
.txtBox p:first-child { margin-top: 0 }
.emergency { padding-bottom: 120px}
.ptNone {  display: none }
.englishName {
    font-family: var(--aFont);
    letter-spacing: .05em
}
#contents { margin: 0 auto }
.pcNone { display: none }
.tit {
    margin-bottom: 60px;
    color: var(--keyBrown);
    font-size: 32px;
    text-align: center
}
.txtBox .txt { margin-top: 50px }
.txtBox .txt:first-child { margin-top: 0 }
.rightTxt {
	text-align: right;
}
.leftTxt {
	text-align: left !important;
}
.btn {
    margin-top: 40px !important;
    text-align: center
}
.btn a,.btn input[type="submit"],.btn label {
	display: inline-block;
	padding: 10px 45px;
    border-radius: 40px;
	background: var(--keyBlue); 
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none
}
.list {
    width: 800px;
    margin: 0 auto;
	border-top: 1px solid #d7d7d7;
    font-size: 14px
}
.list dt {
    float: left;
    width: 140px;
    padding: 33px 0;
    line-height: 1.8;
	font-weight: bold;
	text-align: left;
	clear: left;
}
.list dd {
    padding: 33px 0 33px 140px;
    border-bottom: 1px solid #d7d7d7;
	text-align: left;
	line-height: 1.8
}
.list dd a {
	color: var(--keyBlue);
    text-decoration: none
}
.warning { color: var(--keyRed) }
.secondPage > div:first-child,.secondPage > nav:first-child { padding-top: 230px !important }
.lineLink {
    color: var(--keyBlue);
    text-decoration: underline;
}
.lineLink:hover {
	cursor: pointer;
	text-decoration: none;
}
.boldBorder {
	border-bottom: 2px solid #000;
}
.borderBox {
	padding: 20px;
	border: 2px solid #000;
}

.borderBoxB {/* add f */
	padding: 20px;
	border: 2px solid var(--keyRed);
}

.sentenceBeginning,.sentenceTxtbox {
    width: 1040px;
    margin: 0 auto
}
.sentenceBeginning { margin-bottom: 70px }
.sentenceTit {
    margin: 50px 0 20px 0;
    font-weight: bold;
    font-size: 16px
}
.sentenceTxt + .sentenceTxt {
	margin: 20px 0;
}
.sentenceTit:first-child { margin-top: 0 }
.sentenceTxt { line-height: 1.7 }
.sentenceLog {
    margin-top: 40px;
    text-align: right
}
.sentenceAside {
    margin-top: 60px;
    padding-top: 60px;
    border-top: 1px solid #c8c9ca
}




/*■■■■■■■■■■
ヘッダー
*/
#header {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	margin: 0 auto;
	padding: 22px 2% 24px 2%;
	transition: .4s;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end
}
/*#header.headerStart,#header.headerScond,#header.headerMypage {
    border-bottom: 1px solid #c8c9ca;
    background: rgba(255,255,255,.8)
}*/
#header {
    border-bottom: 1px solid #c8c9ca;
    background: rgba(255,255,255,.8)
}
/*#header.headerStart .headerGlobal a,#header.headerScond .headerGlobal a,#header.headerMypage .headerGlobal a { color: #000 }*/
.headerGlobal a { color: #000 !important }
#drawerHamburger { display: none }
.headerLogo { width: 260px }
.headerLogo img { width: 100% }
.headerLogin {
	position: absolute;
    right: 22%;
    top: 33px;
	margin-bottom: 20px;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
.headerLogout {
	justify-content: flex-end;
	margin-right: 220px;
}
.headerLogin li { margin-left: 17px }
.headerLogin li:first-child { margin-left: 0 }
.headerLogin a {
	display: inline-block;
	width: 170px;
	padding: 10px 0;
	border-radius: 20px;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
	text-align: center;
    text-decoration: none
}
.headerLoginNew,.headerLoginLogout { background: var(--keyRed) }
.headerLoginMypage { background: var(--keyBrown) }
.headerBtn101{background: var(--keyBlue)}
.headerLanguage {
	position: fixed;
    top: 32px;
    right: 2%;
	list-style-type: none;
	display:flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
.headerLanguage li { margin-left: 7px }
.headerLanguage li a {
	display: block;
	width: 40px;
	border-radius: 50%;
	border: 1px solid #888;
	padding: 7px 0;
	background: #fff;
	color: #888;
	font-weight:bold;
	font-size: 18px;
	text-decoration: none;
	text-align:center;
}
.headerLanguage li a.current { color: var(--keyRed) }
.headerGlobal {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
/* .headerGlobal li { margin-left: 40px } */
.headerGlobal li { margin-left: 20px }
.headerGlobal a {
	position: relative;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	text-decoration: none
}
.headerGlobal a:hover,.headerGlobal a.current {
	opacity: 1;
	color: var(--keyRed) !important
}
.headerGlobal a::before,.headerGlobal a.current::before {
	content: "";
	display: block;
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--keyRed);
	transform: scaleX(0);
	transform-origin: left center;
	transition: .25s
}
.headerGlobal a:hover::before,.headerGlobal a.current::before {
	transform: scaleX(1);
	transform-origin: right center
}
.headerID {
	font-size: 14px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
	align-self: center;
	font-weight: bold;
	margin-top: 15px;
}
.headerPerson {
	overflow: hidden;
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	margin-right: 10px;
	border-radius: 50%;
	border: 2px solid var(--keyBlue);
	box-sizing: border-box;
}
.headerPerson img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}








/*■■■■■■■■■■
フッター
*/
.footerAside {
    padding: 15px 0;
    background: var(--keyRed)
}
.footerAside a { color: #fff }
.footerAsideIn {
	width: var(--inSize);
    margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.footerAsideList {
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	list-style: none
}
.footerAsideList li { margin-right: 35px }
.footerAsideList a { text-decoration: none}
.footerTop {
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	text-decoration: none;
}
.footerTop span {
	margin-right: 5px;
}
.footerInfo {
	width: var(--inSize);
    margin: 0 auto;
    padding: 30px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-flow: row-reverse;
    align-items: center
}
.footerLogo { width: 132px }
.footerLogo img { width: 100% }
.footerCopy { font-weight: bold }










/*■■■■■■■■■■
トップページ
*/
#topMain a {
	transition: 0;
}
#topMain img {
    width: 100%;
    vertical-align: bottom
}
#beginning {
    position: relative;
    padding: 95px 0 110px 0;
    background: #eee
}
#beginning .tit {
    position: relative;
    z-index: 1
}
#beginning::before {
    content:"";
    display: block;
	position: absolute;
	top: 50%;
    left: 0;
    right: 0;
    z-index: 0;
    width: 42%;
	margin: auto;
    padding-top: calc(428 / 1020 * 100%);
    transform: translateY(-50%);
    background: url(../img/bg_jlcat.png) no-repeat;
	background-size: cover;
}
#beginning .txtBox {
    position: relative;
    z-index: 1;
    width: var(--inSize);
    margin: 0 auto
}
#beginning .txtBox .txt { line-height: 2.5 }
#news { padding: 85px 0 75px 0 }
#news .list dt { color: #888 }




/*■■■■■■■■■■
ABOUT
*/










#outline { padding: 110px 0 90px 0 }
#test {
    padding: 100px 0 150px 0;
    background: #eee
}
.testTxtBox {
    width: 400px;    
    padding: 40px;
    background: #fff;
    box-sizing: border-box
}
.testTable {
	margin: 0 auto;
	font-size: 14px;
    border-collapse: collapse;
	table-layout: fixed;
	background: #fff;
}
.testTable2Col {
	width: 56.4%;
}
.testTable6Col {
	width: 88%;
}
#testTypeRecognition .testTable thead th {
	background: var(--keyBlue);
}
#testTypeExpression .testTable thead th {
	background: var(--keyGreen);
}
.testTable thead th {
	font-size: 16px;
	color: #fff;
}
.testTable thead th {
	border: 1px solid #fff;
}
.testTable th,.testTable td {
	padding: 10px;
}
.testTable tr th:first-child {
	text-align: center;
}
.testTable tbody th {
	font-weight: bold;
}
.testTable th,.testTable td {
	white-space: initial;
	text-align: center;
}
.testTable tbody th,.testTable tbody td {
	border: 1px solid #d7d7d7;
}
.testTypeTit {
    color: #fff;
	padding: 15px 0;
	font-weight: bold;
	font-size: 32px;
	text-align: center;
}
.testInfoTit {
	font-weight: normal;
    font-size: 16px;
    text-align: center
}
.testInfoTit span {
    display: block;
    margin-bottom: 10px;
    font-style: italic;
    font-size: 36px;
    font-family: Georgia, "Times New Roman", Times, "serif"
}
.testInfoAbout {
    margin-bottom: 30px;
    font-weight: bold;
    font-size: 16px;
    text-align: center
}
.testTxt { line-height: 1.6 }
.testTypeDetailBox {
	position: relative;
	margin-bottom: 60px;
}
.testTxtBox {
    position: absolute;
    top: 50%;
	transform: translateY(-50%);
}
.testTypePhoto { width: 78.125% }
.testTypePhoto img {
	width: 100%;
	vertical-align:bottom; 
}
.testTypeDetails {
    margin-top: 120px
}
.testTypeDetails::after,.testTypeDetailBox::after {
	clear: both;
	display: block;
	content: "";
	height: 0;
	width: 0;
}
.testTypeList {
    margin-top: 60px;
}
.testTypeDetails:first-child { margin-top: 0 }
.testWrap .testType { margin-top: 175px }
.testWrap .testType:first-child { margin-top: 0 }
.testTypeDetails:nth-child(odd) .testTxtBox { left: 6.015625%; }
.testTypeDetails:nth-child(odd) .testTypePhoto { float: right}
.testTypeDetails:nth-child(even) .testTxtBox { right: 6.015625%; }
.testTypeDetails:nth-child(even) .testTypePhoto { float: left}
#testTypeRecognition .testTypeTit { background: var(--keyBlue); }
#testTypeExpression .testTypeTit { background: var(--keyGreen); }
#testTypeRecognition .testInfoTit,#testTypeRecognition .testInfoAbout { color: var(--keyBlue); }
#testTypeExpression .testInfoTit,#testTypeExpression .testInfoAbout { color: var(--keyGreen); }
#testTypeExpression .btn a { background: var(--keyGreen); }
#evaluation { padding: 110px 0 }
img[src*="about_img_evaluation"] {
	width: 290px;
	margin-top: 10px;
	border: 1px solid #d7d7d7;
}
#evaluation .list dd:last-child { text-align: left }
#cefr {
    padding: 110px 0 90px 0;
    background: #eee
}
#cefr .txtBox {
    width: 800px;
    margin: 0 auto
}
.cefrTableWrap {
    width: 800px;
    margin: 70px auto 0 auto
}
.cefrTit {
    font-weight: normal;
    font-size: 16px
}
.cefrTxt {
    margin-top: 15px;
    font-size: 14px;
    text-align: right
}
.cefrTable { margin-top: 15px }
.cefrTable th {
    vertical-align: middle;
    text-align: center
}
.cefrTable th {
    width: 128px;
    color: #fff
}
.cefrTable th.cefrTableNum { font-size: 20px }
.cefrTable td {padding: 15px;}
.cefrSkil th { background: var(--keyBlue) }
.cefrSkil th.cefrTableNum { background: #6fa0c1 }
.cefrSkil td { background: #d1e1ed }
.cefrIndependent th { background: var(--keyGreen) }
.cefrIndependent th.cefrTableNum { background: #76c1b3 }
.cefrIndependent td {background: #d3efeb; }
.cefrFoundational th { background: var(--keyWine); }
.cefrFoundational th.cefrTableNum { background: #c1708c }
.cefrFoundational td {background: #efd8df; }
/*■■■■■■■■■■
FAQ
*/
#question {
	padding-bottom: 115px;
	background: #eee
}
#question input { display: none }
.questionList {
	width: 800px;
	margin: 0 auto
}
.questionList dt,.questionList dd {
	position: relative;
	background: #fff
}
.questionList dt {
	margin-top: 15px;
	margin-bottom: 1px;
	font-weight: bold;
	font-size: 18px;
    cursor: pointer
}
.questionList dt:first-child { margin-top: 0 }
.questionList dt::before,.questionList dd::before {
	position: absolute;
	left: 17px;
	font-weight: bold;
	font-size: 32px
}
.questionList dt::before {
	content: 'Q.';
	top: 50%;
	color: var(--keyRed);
    transform: translateY(-50%)
}
.questionList dd::before {
	content: 'A.';
	top: 10px;
	color: #3fa9f5
}
.questionList dd {
	height: 0;
	transition: .15s;
    opacity: 0;
	visibility: hidden;
}
.questionList dt label {
    display: block;
	position: relative;
	padding: 20px 20px 20px 70px
}
.questionList dt label::after {
	display: block;
	content: "";
	position: absolute;
	top: 45%;
	right: 20px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #888;
    border-right: 2px solid #888;
    transform: translateY(-50%) rotate(45deg);
	transition: .8s
}
#qa1:checked ~ .questionList dd:nth-child(2),#qa2:checked ~ .questionList dd:nth-child(4),#qa3:checked ~ .questionList dd:nth-child(6),#qa4:checked ~ .questionList dd:nth-child(8),#qa5:checked ~ .questionList dd:nth-child(10),#qa6:checked ~ .questionList dd:nth-child(12),#qa7:checked ~ .questionList dd:nth-child(14),#qa8:checked ~ .questionList dd:nth-child(16),
#qa9:checked ~ .questionList dd:nth-child(18),#qa10:checked ~ .questionList dd:nth-child(20),#qa11:checked ~ .questionList dd:nth-child(22),#qa12:checked ~ .questionList dd:nth-child(24){
	height: auto;
	padding: 20px 20px 20px 70px;
    opacity: 1;
	visibility: visible;
}
#qa1:checked ~ .questionList dt:nth-child(1) label::after,#qa2:checked ~ .questionList dt:nth-child(3) label::after,#qa3:checked ~ .questionList dt:nth-child(5) label::after,#qa4:checked ~ .questionList dt:nth-child(7) label::after,#qa5:checked ~ .questionList dt:nth-child(9) label::after,#qa6:checked ~ .questionList dt:nth-child(11) label::after,
#qa7:checked ~ .questionList dt:nth-child(13) label::after,#qa8:checked ~ .questionList dt:nth-child(15) label::after,
#qa9:checked ~ .questionList dt:nth-child(17) label::after,#qa10:checked ~ .questionList dt:nth-child(19) label::after,
#qa11:checked ~ .questionList dt:nth-child(21) label::after,#qa12:checked ~ .questionList dt:nth-child(23) label::after,
{
    transform: rotate(135deg)
}










/*■■■■■■■■■■
FLOW
*/
#flowWrap {
    padding-bottom: 115px;
    background: #eee
}
.flowList {
    width: 800px;
    margin: 0 auto
}
.flowList dt,.flowList dd { background: #fff }
.flowList dt {
	position: relative;
	padding: 30px 70px 10px 70px;
    color: var(--keyRed);
	font-weight: bold;
    font-size: 28px
}
.flowList dt::before {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
	left: 3%;
    font-size: 32px
}
.flowList dt:nth-child(1)::before {content: '1.'}
.flowList dt:nth-child(3)::before {content: '2.'}
.flowList dt:nth-child(5)::before {content: '3.'}
.flowList dt:nth-child(7)::before {content: '4.'}
.flowList dt:nth-child(9)::before {content: '5.'}
.flowList dt:nth-child(11)::before {content: '6.'}
.flowList dt:nth-child(13)::before {content: '7.'}
.flowList dt:nth-child(15)::before {content: '8.'}
.flowList dd {
	padding: 0 50px 30px 70px;
	margin-bottom: 90px;
	line-height: 1.6
}
.flowList dt::after {
    content: "";
	display: block;
	position: absolute;
	top: -90%;
    right: 0;
	left: 0;
	margin: auto;
    width: 30px;
    height: 30px;
    border-top: 3px solid var(--keyBrown);
    border-right: 3px solid var(--keyBrown);
    transform: rotate(135deg);
	transition: .8s
}
.flowList dt:first-child::after { display: none }
#messageWrap,#organizerWrap,#sentence { padding-bottom: 115px }
#messageWrap .sentenceTit,.blkTit {
	position: relative;
	padding: 4px;
	font-style: italic;
	display: inline-block;
	background: #000;
	color: #fff;
}









/*■■■■■■■■■■
MYPAGE
*/
.mypage {
    padding: 180px 0 250px 0;
    background: #eee
}
.mypageWrap {
	position: relative;
    width: 890px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    flex-direction : row-reverse;
    align-items: flex-start
}
#mypageNav {
    width: 250px;
	padding: 40px 20px;
    background: #fff
}
.mypageTit,.mypageTit a {
    color: #000;
	text-decoration: none
}
.mypageTit {
    color: var(--keyBlue);
	font-weight: bold;
	font-size: 18px
}
.mypageBox .mypageTit {
	margin-bottom: 10px;
}
.mypageBox .mypageTit span[class*="icon-"] {
	position: relative;
	top: 5px;
	margin-right: 10px;
	font-size: 32px;
}
.mypageList {
	margin: 0 0 30px 0;
	list-style-type: none
}
.mypageList li {
	margin-top: 10px;
    font-size: 14px;
	text-align: left;
}
.mypageList li:first-child {
	margin-top: 10px;
}
.mypageList a {
	text-decoration: none;
    color: var(--keyBlue);
	font-weight: bold;
}

#mypageOutput { width: 600px }
.mypageTable {
	width: 100%;
    border-collapse: collapse;
	background: #fff
}
.mypageTable th {
    width: 200px;
        padding: 15px 15px;
    border-bottom: 1px solid #eee;
    background: var(--keyBlue);
    color: #fff;
	text-align: center;
   
}
.mypageTable td {
	font-size: 12px;
    padding: 15px 40px;
    border-bottom: 1px solid #eee;
    background: #fff;
    color: #231815;
	line-height: 1.6;
}
.mypageTable td.mypageTableTdFlex {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
#mypageOutput .mypageTit {
	margin: -10px 0 20px 0;
}
#mypageOutput .mypageTit span[class*="icon-"] {
	position: relative;
	top: 10px;
	margin-right: 10px;
	font-size: 36px
}
#mypageOutput .mypageChild {
	margin-bottom: 80px;
}
#mypageOutput .mypageChild:last-child {
	margin-bottom: 0;
}
#mypageOutput .mypageChildTit {
	font-size: 16px;
	padding-bottom: 10px;
	margin-bottom: 15px;
	border-bottom: 1px solid #d7d7d7;
}
.mypageBox.current .mypageList a { color: var(--keyRed) !important }
.mypageLogout {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -70px;
	width: 170px;
	margin: auto;	
	padding: 10px 0;
	border-radius: 20px;
    font-weight: bold;
    font-size: 15px;
	text-align: center;
    text-decoration: none;
	background: var(--keyRed);
}
.mypageLogout a {
	color: #fff;
	text-decoration: none;
}
.mypagePerson {
	display: none;
}
.mypageTableDeco {
    width: 15%;
    margin-right: 10px;
}
.mypageTableDeco img {
    width: 100%;
}
 .mypage_scoresSystem {
 	display: none;
 }
#mypageOutput .mypage_scoresTxt {
	margin-top: 20px;
}
#mypageOutput label {
	transition: .4s;
}
#mypageOutput label:hover {
	opacity: .7;
}
#mypageOutput .mypage_scoresSystem:checked ~ .btn {
	display: none;
}
#mypageOutput .mypage_scoresSystem:checked ~ .mypageTable,#mypageOutput .mypage_scoresSystem:checked ~ .mypageForm {
	display: block;
}

#mypageOutput .mypage_scoresSystem ~ .mypageTable,#mypageOutput .mypage_scoresSystem ~ .mypageForm {
	display: none;
}
#mypageOutput input[type="password"] { width: 48% }
.mypageFormList li {
	color: #888;
    margin-top: 20px;
    border-bottom: 1px solid #eee;
	list-style-type: none;
}
.mypageFormList li:first-child {
	margin-top: 0;
}
#mypageOutput input[type="text"],#mypageOutput input[type="email"],#mypageOutput input[type="password"],#mypageOutput select {
	display: block;
	padding: 5px;
	width: 100%;
	background: #fff;
}
.mypageTxtbox .mypageTxt {
	margin-bottom: 20px;
}	
.txtBox .txt { margin-top: 50px }
.txtBox .txt:first-child { margin-top: 0 }




/*■■■■■■■■■■
INPUT
*/
#input {
    padding-bottom: 115px;
    background: #eee
}
.inputForm {
    width: 800px;
    margin: 0 auto;
    padding: 80px 150px;
    background: #fff;
    box-sizing: border-box;
    font-size: 16px;
}
.inputFormList {
    list-style: none;
}
.inputFormList li {
    color: #888;
	margin-top: 40px; 
    padding: 0 0 5px 0;
    border-bottom: 1px solid #eee;
	text-align: left;
}
label[for*="parentsAgree"] {
	margin-top: 10px;
}
input[type*="file"] {
	margin-top: 10px;
}
.inputFormList li:first-child { margin-top: 0 }
.inputFormTwin,.inputFormFour {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	align-items: center;
}
.inputForm .inputFormTwin span[glot-model*="cmnInput"] {
	display: block;
    width: 100%;
}
.inputForm .inputFormTwin span[glot-model*="cmnInput"] input {
	display: inline-block;
}
.inputForm .inputFormTwin input[type="text"] { width: 48% }
.inputForm input[type="text"],.inputForm input[type="tel"],.inputForm input[type="email"],.inputForm input[type="number"],.inputForm input[type="password"],.inputForm textarea {
    padding: 5px;
}
.inputForm input[type="text"],.inputForm input[type="tel"],.inputForm input[type="email"],.inputForm input[type="password"],.inputForm textarea {
    display: block;
    width: 100%;
}
.inputForm input[type="number"] {
    display: inline-block;
    width: 70%;
}
.inputForm input[type="radio"] {
     opacity: 0;
  appearance: none;
  position: absolute;
}
label {
    display: inline-block;
}
label[for="sexMen"],label[for="sexWomen"],label[for="id"],label[for="password"] {
    width: 30%;
}
input[type="checkbox"] {
	position: relative;
	top: -2px;
	margin: 0 10px 0 2px
}
.inputForm .inputFormNewRadio {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 20px;
}
.inputForm .inputFormNewRadio::before,input[type="radio"]:checked ~ .inputFormNewRadio::after {
    content: '';
  position: absolute;
top: 50%;
  display: block;
  transform: translateY(-50%);
}
.inputForm .inputFormNewRadio::before {
  left: 0;
  width: 12px;
  height: 12px;
  border: 1px solid #888;
  transform: translateY(-50%);
}
#sexMen:checked ~ .inputFormNewRadio::after,input[type="radio"]:checked ~ .inputFormNewRadio::after {
    left: 2px;
  width: 8px;
  height: 8px;
 background: #888;

}
.inputForm textarea { margin-top: 10px }
.inputFormUnderstood,.inputForgot {
    padding-top: 60px;
    line-height: 1.6;
    margin-bottom: 40px;
}
.inputForgot {
    text-align: center;
}
.inputForm .btn input[type="submit"] {
    width: 256px;
    border-radius: 40px;
    font-size: 23px;
}
.inputForm input:placeholder {
    color: #888;
}
.inputForm input {
    color: #000;
}
.inputForm .inputFormList li .inputFormListTit {
    display: inline-block;
    width: 40%;
    padding-left: 5px;
}
.inputForm select {
    width: 40%;
    padding: 5px;
}
.inputForm #textarea {
    min-height: 200px;
    color: #000;
    font-size: 16px;
}
.ymdYear,.ymdMonth,.ymdDay {
    width: 19%;
}
.inputForm li {
	position: relative;
}

.inputForm .required {
	position: absolute;
	top: 0;
	left: -65px;
	padding: 5px 10px;
	border-radius: 6px;
	color: #fff;
	font-weight: bold;
	background: var(--keyRed);
}
.inputForm .inputFormList li.inputFormQualifications .inputFormListTit {
    width: 100%;
    margin-bottom: 10px;
}
.forgot .inputForgot {
	text-align: left;
}
.forgot .inputForm .inputForgot:first-child {
	margin-bottom: 60px;
	padding-top: 0;
}
.forgotContent {
    margin-right: 60px;
}
.qualificationsGroup label {
    width: 10%;
    font-size: 12px;
    margin-right: 5px;
}
.qualificationsGroup {
    margin-bottom: 10px;
}
.qualificationsTit {
    display: inline-block;
    font-weight: bold;
    width: 20%;
    padding-left: 5px;
}
.inputForm .inputFormList li.inputFormLearningHistory .inputFormListTit {
    width: 65%;
}
.inputForm .inputFormList li.inputFormLearningHistory .learningHistory input[type="number"] {
    width: 30%;
}
.inputForm .inputFormList li.inputFormQualificationsTime {
    text-align: right;
}
.inputForm .inputFormList li.inputFormQualificationsTime .inputFormListTit {
    display: block;
    text-align: left;
    width: 100%;
    margin-bottom: 10px;
}
.inputForm .inputFormList li.inputFormQualificationsTime .qualificationsTimeY input[type="number"] {
    width: 15%;
}
.inputForm .inputFormList li.inputFormQualificationsTime .qualificationsTimeM input[type="number"] {
    width: 10%;
}
/*■■■■■■■■■■
SAMPLE
*/
.sampleTryTxt {
	width: var(--inSize);
	text-align: center;
	margin: 0 auto 40px auto;
}
.sampleNavList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	list-style-type: none;
}
.sampleNavList li {
	width: 50%;
	padding: 0 5px;
	box-sizing: border-box;
}
.sampleNavList li img{
	width: 100%;
}
.sampleNavList li a {
	display: block;
	position: relative;
}
#sampleNavRecognition {
	background: var(--keyBlue);
}
#sampleNavRecognition a {
	color: var(--keyBlue);
}
#sampleNavExpression {
	background: var(--keyGreen);
}
#sampleNavExpression a {
	color: var(--keyGreen);
}
#expression .btn a {
	background: var(--keyGreen);
}
.sampleNavTit {
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 24px;
	padding: 15px 0;
}
.sampleNavATit {
	display: inline-block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-style: italic;
	font-weight: normal;
    font-size: 3.125vw;
    font-family: Georgia, "Times New Roman", Times, "serif";
}
.sampleNavList li a:nth-of-type(odd) .sampleNavATit {
	right: 8%;
}
.sampleNavList li a:nth-of-type(even) .sampleNavATit {
	left: 8%;
}

.exerciseWrap {
	padding-top: 175px;
}
.exerciseTit {
	color: #fff;
	padding: 15px 0;
	font-weight: bold;
	font-size: 32px;
	text-align: center;
}
#recognition .exerciseTit {
	background: var(--keyBlue);
}
#expression .exerciseTit {
	background: var(--keyGreen);
}
.exerciseBox {
	padding-top: 136px;
}
.exercisePhoto {
	position: relative;
	margin: 0 auto 50px auto;
}
.exercisePhoto img {
	width: 100%;
}
.exercisePhotoTit {
	display: inline-block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-style: italic;
	font-weight: normal;
    font-size: 6.25vw;
    font-family: Georgia, "Times New Roman", Times, "serif";
}
#recognition .exercisePhotoTit {
	color: var(--keyBlue)
}
#expression .exercisePhotoTit {
	color: var(--keyGreen)
}
.sample > section:last-child {
	padding-bottom: 125px;
}
.exerciseWrap .exerciseBox:nth-of-type(odd) .exercisePhotoTit {
	right: 3.125%;
}
.exerciseWrap .exerciseBox:nth-of-type(even) .exercisePhotoTit {
	left: 3.125%;
}
.sampleList {
	width: 800px;
	margin: 0 auto 60px auto;
	list-style: none;
}
.sampleList > li {
	position: relative;
	font-size: 14px;
	margin-top: 33px;
	padding: 0 0 80px 100px;
    border-bottom: 1px solid #d7d7d7;
	line-height: 1.8
}
.sampleList > li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.sampleList > li::before,.sampleList > li .sampleAnswer::before {
	position: absolute;
	font-weight: bold;
	font-size: 32px;
}
.sampleList > li::before {
	top: 0;
	left: 0;
	color: var(--keyRed);
}
.sampleList > li .sampleAnswer {
	position: relative;
	padding-top: 20px;
	font-weight: bold;
	height: 0;
	transition: .15s;
    opacity: 0;
	visibility: hidden;
	display: none;
}
input[name="sampleAnswer"] {
	display: none;
}
#listeningA1:checked ~ .sampleList > li:nth-child(1) .sampleAnswer,#listeningA2:checked ~ .sampleList > li:nth-child(2) .sampleAnswer,#listeningA3:checked ~ .sampleList > li:nth-child(3) .sampleAnswer,#listeningA4:checked ~ .sampleList > li:nth-child(4) .sampleAnswer,#listeningA5:checked ~ .sampleList > li:nth-child(5) .sampleAnswer,#listeningA6:checked ~ .sampleList > li:nth-child(6) .sampleAnswer,#listeningA7:checked ~ .sampleList > li:nth-child(7) .sampleAnswer,#listeningA8:checked ~ .sampleList > li:nth-child(8) .sampleAnswer,#readingA1:checked ~ .sampleList > li:nth-child(1) .sampleAnswer,#readingA2:checked ~ .sampleList > li:nth-child(2) .sampleAnswer,#readingA3:checked ~ .sampleList > li:nth-child(3) .sampleAnswer,#readingA4:checked ~ .sampleList > li:nth-child(4) .sampleAnswer,#readingA5:checked ~ .sampleList > li:nth-child(5) .sampleAnswer,#readingA6:checked ~ .sampleList > li:nth-child(6) .sampleAnswer,#readingA7:checked ~ .sampleList > li:nth-child(7) .sampleAnswer,#readingA8:checked ~ .sampleList > li:nth-child(8) .sampleAnswer,#readingA9:checked ~ .sampleList > li:nth-child(9) .sampleAnswer,#readingA10:checked ~ .sampleList > li:nth-child(10) .sampleAnswer,#readingA11:checked ~ .sampleList > li:nth-child(11) .sampleAnswer,#readingA12:checked ~ .sampleList > li:nth-child(12) .sampleAnswer,#speakingA1:checked ~ .sampleList > li:nth-child(1) .sampleAnswer,#speakingA2:checked ~ .sampleList > li:nth-child(2) .sampleAnswer,#speakingA3:checked ~ .sampleList > li:nth-child(3) .sampleAnswer,#speakingA4:checked ~ .sampleList > li:nth-child(4) .sampleAnswer,#writingA1:checked ~ .sampleList > li:nth-child(1) .sampleAnswer,#writingA2:checked ~ .sampleList > li:nth-child(2) .sampleAnswer,#writingA3:checked ~ .sampleList > li:nth-child(3) .sampleAnswer {
  height: auto;
  opacity: 1;
  display: block;
  visibility: visible;
}
.sampleList > li .sampleAnswer::before {
	color: var(--keyBlue);
	top: 10px;
	left: -100px;
}
.sampleList > li .sampleVoice {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 150px;
	transition: .4s;
}
.sampleList > li .sampleVoiceImgOn::after {
	content: url("../img/deco_play.png");
	opacity: .4;
	position: absolute;
	top: 0;
	right: 0;
	width: 150px;
	transition: .4s;
}
.sampleList > li .sampleVoice:hover {
	opacity: .7;
}
.sampleList > li .sampleVoiceImgOn:hover::after {
	opacity: 0;
}
.sampleList li .sampleVoice img {
    width: 100%;
}
.sampleList li .sampleVoice img {
		vertical-align: bottom;
	}
.sampleList > li.voiceNone {
        padding-top: 0;
        padding-right: 0;
    }
.sampleFigure {
	margin-top: 10px;
	width: 375px;
}
.sampleFigure img {
	width: 100%;
}
.sampleNumList,.sampleDialogueList {
	margin-top: 20px;
	list-style-type: none;
}
.sampleTxtBox .sampleTxt {
    margin-top: 20px;
}
.sampleTxtBox .sampleTxt:first-child {
    margin-top: 0;
}
.sampleTable + .sampleTit {
	margin-top: 40px;
}
.sampleNumListFlex {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
.sampleNumListFlex li {
	margin-right: 15px;
}
.audiojs {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../img/sample_img_hear_stop.gif");
	background-size: cover;
	opacity: 0;
	transition: .4s;
}
.audiojs.playing {
	opacity: 1;
} 
.audiojs .play-pause {
    width: 100%;
    height: 100%;
	border-right: none;
}
.audiojs .play-pause p {
	display: none;
}
.audiojs .scrubber {
	display: none;
}
.sampleList > li:nth-child(1)::before { content: 'Q1.' }
.sampleList > li:nth-child(2)::before { content: 'Q2.' }
.sampleList > li:nth-child(3)::before { content: 'Q3.' }
.sampleList > li:nth-child(4)::before { content: 'Q4.' }
.sampleList > li:nth-child(5)::before { content: 'Q5.' }
.sampleList > li:nth-child(6)::before { content: 'Q6.' }
.sampleList > li:nth-child(7)::before { content: 'Q7.' }
.sampleList > li:nth-child(8)::before { content: 'Q8.' }
.sampleList > li:nth-child(9)::before { content: 'Q9.' }
.sampleList > li:nth-child(10)::before { content: 'Q10.' }
.sampleList > li:nth-child(11)::before { content: 'Q11.' }
.sampleList > li:nth-child(12)::before { content: 'Q12.' }
.sampleList > li:nth-child(13)::before { content: 'Q13.' }
.sampleList > li:nth-child(14)::before { content: 'Q14.' }
.sampleList > li:nth-child(15)::before { content: 'Q15.' }
.sampleList > li:nth-child(16)::before { content: 'Q16.' }
.sampleList > li:nth-child(17)::before { content: 'Q17.' }
.sampleList > li:nth-child(18)::before { content: 'Q18.' }
.sampleList > li:nth-child(19)::before { content: 'Q19.' }
.sampleList > li:nth-child(20)::before { content: 'Q20.' }

.sampleList > li:nth-child(1) .sampleAnswer::before { content: 'A1.' }
.sampleList > li:nth-child(2) .sampleAnswer::before { content: 'A2.' }
.sampleList > li:nth-child(3) .sampleAnswer::before { content: 'A3.' }
.sampleList > li:nth-child(4) .sampleAnswer::before { content: 'A4.' }
.sampleList > li:nth-child(5) .sampleAnswer::before { content: 'A5.' }
.sampleList > li:nth-child(6) .sampleAnswer::before { content: 'A6.' }
.sampleList > li:nth-child(7) .sampleAnswer::before { content: 'A7.' }
.sampleList > li:nth-child(8) .sampleAnswer::before { content: 'A8.' }
.sampleList > li:nth-child(9) .sampleAnswer::before { content: 'A9.' }
.sampleList > li:nth-child(10) .sampleAnswer::before { content: 'A10.' }
.sampleList > li:nth-child(11) .sampleAnswer::before { content: 'A11.' }
.sampleList > li:nth-child(12) .sampleAnswer::before { content: 'A12.' }
.sampleList > li:nth-child(13) .sampleAnswer::before { content: 'A13.' }
.sampleList > li:nth-child(14) .sampleAnswer::before { content: 'A14.' }
.sampleList > li:nth-child(15) .sampleAnswer::before { content: 'A15.' }
.sampleList > li:nth-child(16) .sampleAnswer::before { content: 'A16.' }
.sampleList > li:nth-child(17) .sampleAnswer::before { content: 'A17.' }
.sampleList > li:nth-child(18) .sampleAnswer::before { content: 'A18.' }
.sampleList > li:nth-child(19) .sampleAnswer::before { content: 'A19.' }
.sampleList > li:nth-child(20) .sampleAnswer::before { content: 'A20.' }
.sampleAnswerExample > div {
	position: relative;
	width: 150px;
}
.sampleAnswerExample > div img {
		width: 100%;
	}
.sampleAnswerExample + .sampleTable {
	margin-bottom: 60px;
}
.sampleAnswerExample + .sampleTable:last-child {
	margin-bottom: 0;
}
.sampleDialogueList dt {
    float: left;
}
.sampleDialogueList dd {
    margin-left: 2em;
}
.sampleTable {
	width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
	table-layout: fixed;
	background: #fff
}
.sampleTypeTable {
    margin-bottom: 20px;
    border-collapse: collapse;
	table-layout: fixed;
	background: #fff
}
.sampleTable thead th {
    border-right: 1px solid #eee;
}
.sampleTable th,.sampleTypeTable th {
    padding: 15px;
    border-bottom: 1px solid #eee;
    color: #fff;
    text-align: center;
}
.sampleTypeTable tr th:first-child {
	border-right: 1px solid #fff;
}
.sampleTable tbody th {
    width: 100px;   
}
.sampleTable td,.sampleTypeTable td {
	font-size: 12px;
    border-right: 1px solid #eee;
    padding: 15px;
    border-bottom: 1px solid #eee;
    background: #fff;
    color: #231815;
	line-height: 1.6;
    text-align: center;
}
.sampleTypeTable tr td:first-child {
	border-left: 1px solid #eee;
}
#recognition .sampleTable th,#recognition .sampleTypeTable th {
	background: var(--keyBlue);
}
#expression .sampleTable th,#expression .sampleTypeTable th {
	background: var(--keyGreen);
}
#payFlow {
	padding-bottom: 115px;
}
.payFlowStep {
  list-style-type: none;
  position: relative;
  list-style: none;
  margin: 0 auto 75px auto;
  text-align: center;
  width: var(--inSize);
  overflow: hidden;
  font-weight: bold;
    font-size: 18px;
}
.payFlowStep li {
  position: relative;
  float: left;
  display: inline-block;
  width: 50%;
  line-height: 40px;
  padding: 15px 40px 15px 20px;
  background: #eee;
  box-sizing: border-box;
}
.payFlowStep li:before, .payFlowStep li:after {
  position: absolute;
  left: -15px;
  display: block;
  content: '';
  background-color: #eee;
  border-left: 4px solid #FFF;
  width: 35px;
  height: 35px;
}
.payFlowStep li:after {
  top: 0;
  transform: skew(30deg);
}
.payFlowStep li:before {
  bottom: 0;
  transform: skew(-30deg);
}
.payFlowStep li:first-child:before,.payFlowStep li:first-child:after {
  content: none;
}
.payFlowStep li.current {
  background: #bde0f4;
}
.payFlowStep li.current:before,.payFlowStep li.current:after {
  background: #bde0f4;
}
.payFlowStep li span {
    position: relative;
    z-index: 1;
}
.payForm {
    width: 700px;
    margin: 0 auto;
}
.payFormDo {
    margin-bottom: 75px;
}
.payFormList {
    display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
}
.payFormList li {
    position: relative;
    overflow: none;
    width: 32%;
    text-align: center;
    list-style: none;
}
.payFormList li img {
    display: block;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 10px;
}
.payFormList li input {
    position: absolute;
    top: 10%;
    left: 0;
}
.payFormCard {
	width: 250px;
	margin: 0 auto;
}
.payFormCard img{
	width: 100%;
}


/*■■■■■■■■■■
EVALUTION
*/
.evaluation {
    background: #eee;
}
#evaluation_writing,#evaluation_speaking {
    padding-bottom: 115px;
}
.evaluationTit {
    color: #fff;
	padding: 15px 0;
	font-weight: bold;
	font-size: 32px;
	text-align: center;
}
.evaluationTable {
    width: var(--inSize);
    margin: 25px auto 80px auto;
}
.evaluationTable th {
    text-align: center
}
.evaluationOneQuarter01 {
    width: 200px;
}
.evaluationOneQuarter02 {
    width: 100px;
    vertical-align: middle;
}
.evaluationOneThird01 {
    width: 302px;
}
.evaluationTable th,.evaluationTable td {padding: 15px;}
.evaluationOneQuarter01,.evaluationOneQuarter02,.evaluationOneQuarter03,.evaluationOneThird01,.evaluationOneThird02 {
    color: #fff;
	font-size: 20px;
}
.evaluationOneQuarter03,.evaluationOneThird02 {
	font-size: 16px;
}
.evaluationOneQuarter01,.evaluationOneQuarter02,.evaluationOneThird01,.evaluationOneQuarter03,.evaluationOneThird02 {
    font-weight: bold;
}
.evaluationOneQuarter03,.evaluationOneQuarter04,.evaluationOneThird02,.evaluationOneThird03 {}
#evaluation_speaking .evaluationOneQuarter01,#evaluation_speaking .evaluationOneQuarter02,#evaluation_speaking .evaluationOneThird01,#evaluation_writing .evaluationOneQuarter01,#evaluation_writing .evaluationOneQuarter02,#evaluation_writing .evaluationOneThird01 {   
    background: var(--keyGreen);
}
#evaluation_speaking .evaluationOneQuarter03,#evaluation_speaking .evaluationOneThird02,#evaluation_writing .evaluationOneQuarter03,#evaluation_writing .evaluationOneThird02 {
    background: #76c1b3
}
#evaluation_speaking .evaluationOneQuarter04,#evaluation_speaking .evaluationOneThird03,#evaluation_writing .evaluationOneQuarter04,#evaluation_writing .evaluationOneThird03 {
    background: #d3efeb; 
}
#evaluation_speaking .evaluationTit,#evaluation_writing .evaluationTit {
    background: var(--keyGreen);
}
#newsWrap {
	padding-bottom: 115px;
}
#evaluation_reading, #evaluation_listening {
    padding-bottom: 115px;
}
#evaluation_reading .evaluationHalf01,#evaluation_listening .evaluationHalf01 {
    background: #6fa0c1;
    font-weight: bold;
    font-size: 16px;
}
#evaluation_reading .evaluationHalf02,#evaluation_listening .evaluationHalf02 {
    background: #d1e1ed; 
}
#comparisonWrap {
    padding-bottom: 115px;
    background: #eee
}
.comparisonTableWrap {
    width: 800px;
    margin: 70px auto 0 auto
}
.comparisonTable {
	width: 100%;
    font-size: 14px;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
}
.comparisonTable thead th:not(first-child) {
	text-align: center;
}
.comparisonTable td {
	text-align: center;
}
.comparisonTableAFirst {
	background: var(--keyWine);
}
.comparisonTableBFirst {
	background: var(--keyGreen);
}
.comparisonTableCFirst {
	background: var(--keyBlue);
}
.comparisonTableAFirst,.comparisonTableBFirst,.comparisonTableCFirst,.comparisonTableASecond,.comparisonTableBSecond,.comparisonTableCSecond {
	color: #fff;
}
.comparisonTableASecond {
	background: #c1708c;
}
.comparisonTableBSecond {
	background: #76c1b3;
}
.comparisonTableCSecond {
	background: #6fa0c1;
}
.comparisonTableAThird {
	background: #efd8df;
}
.comparisonTableBThird {
	background: #d3efeb;
}
.comparisonTableCThird {
	background: #d1e1ed;
}
.comparisonTable th, .comparisonTable td {
	padding: 10px;
	border: 1px solid #d7d7d7;
}
.comparisonTxt {
margin-top: 15px;
    font-size: 14px;
}
.comparisonCefrN {
    display: inline-block;
    margin: 0 2px; 
    color: #fff;
    padding: 4px 16px;
    background: var(--keyBrown);
}
.comparisonCefrNText {
	position: absolute;
    top: 75%;
	left: 4%;
    transform: translateY(-50%);
    z-index: 10;
	width: 400px;
	font-size: 10px;
	text-align: left;
	letter-spacing: -.01em;
}
.comparisonCefrNPar {
    position: relative;
	height: 80px;
}
.comparisonCefrN5,.comparisonCefrN4,.comparisonCefrN3,.comparisonCefrN2,.comparisonCefrN1 {
    position: absolute;
    top: 25%;
    transform: translateY(-50%);
    z-index: 10;
}
.comparisonCefrNPar .comparisonCefrN5 { left: 3%; }
.comparisonCefrNPar .comparisonCefrN4 { right: -23%; }
.comparisonCefrNPar .comparisonCefrN3 { left: 23%; }
.comparisonCefrNPar .comparisonCefrN2 { left: -19%; padding: 4px 34px; }
.comparisonCefrNPar .comparisonCefrN1 { left: -23%; }
#lawWrap { padding-bottom: 115px }
.sitemapList li:last-child { width: 100% }
.comparisonCefrNText{ z-index: 1 }
.comparisonCefrN5,.comparisonCefrN4,.comparisonCefrN3,.comparisonCefrN2,.comparisonCefrN1{
	z-index:1;
	width: 50px
}
.comparisonCefrNPar .comparisonCefrN1 {
	left: -37px;
	width: 130px;
}
.comparisonCefrNPar .comparisonCefrN2 {
	left: -17px;
	width: 70px;
	padding: 4px 0
}
.comparisonCefrNPar .comparisonCefrN3 { left: 24px }
.comparisonCefrNPar .comparisonCefrN4 { right: -20px }
.comparisonCefrNPar .comparisonCefrN5 { left: 5px }
.examination .tit {
	margin-bottom: 0;
}
#examinationWrap {
	padding-bottom: 140px;
	background: #eee;
}
.examinationTxtBox {
	width: 800px;
	margin: 0 auto;
}
.examinationTxt,.examinationTableTit,.examinationFlowTit,.examinationOtherTit {
	line-height: 1.6em;
}
.examinationTableTit,.examinationFlowTit,.examinationOtherTit {
	margin-top: 40px;
	font-weight: bold;
	font-size: 16px;
}
.examinationTxt {
	margin-top: 20px;
}
.examinationTxt:first-child,.examinationTableTit:first-child,.examinationOtherTit:first-child {
	margin-top: 0;
}
.examinationWrapIn .examinationBox {
	padding-top: 100px;
}
.examinationTit {
    color: #fff;
	margin-bottom: 40px;
	padding: 15px 0;
	background: var(--keyRed);
	font-weight: bold;
	font-size: 32px;
	text-align: center;
}
.examinationTableBox {
	overflow: auto;
    width: 100%;
	margin-top: 10px; 
}
.examinationTableBox + .examinationTableTit {
	margin-top: 40px;
}
.examinationTable {
	width: 100%;
	font-size: 14px;
    border-collapse: collapse;
	background: #fff;
}
.examinationTable thead th {
	border: 1px solid #fff;
	background: var(--keyBrown);
	font-size: 16px;
	color: #fff;
}
.examinationTable th,.examination td {
	padding: 10px;
}
.examinationTable tr th:first-child {
	text-align: center;
}
.examinationTable th {
	text-align: center;
}
.examinationTable td {
	text-align: left;
}
.examinationTable tbody th,.examinationTable tbody td {
	border: 1px solid #d7d7d7;
}
.examinationFlowList {
    width: 800px;
    margin: 10px auto 0 auto;
}
.examinationFlowList dt, .examinationFlowList dd {
	background: #fff;
}
.examinationFlowList dt {
	position: relative;
    padding: 40px 40px 20px 40px;
    color: var(--keyRed);
    font-weight: bold;
    font-size: 28px;
}
.examinationFlowStep {
	display: block;
	font-size: 50%;
}
.examinationFlowList dt::after {
    content: "";
	display: block;
	position: absolute;
	top: -65px;
    right: 0;
	left: 0;
	margin: auto;
    width: 30px;
    height: 30px;
    border-top: 3px solid var(--keyBrown);
    border-right: 3px solid var(--keyBrown);
    transform: rotate(135deg);
	transition: .8s
}
.examinationFlowList dt:first-child::after { display: none }
.examinationFlowList dd {
	margin-bottom: 90px;
	padding: 0 40px 40px 40px;
    line-height: 1.6
}
.examinationFlowList dd:last-child { margin-bottom: 0 }
.examinationFlowList .examinationFlowTit:first-child { margin-top: 0 }
.examinationCheckSystem {
	display: none;
}
.examinationCheckBtn {
	position: relative;
	padding-right: 20px;
}
.examinationCheckBtn:hover {
	cursor: pointer;
}
.examinationCheckBtn::after {
	display: block;
    content: "";
    position: absolute;
    top: 45%;
    right: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid #888;
    border-right: 2px solid #888;
    transform: translateY(-50%) rotate(45deg);
    transition: .8s;
}
.examinationCheckSystem:checked ~ .examinationCheckBtn::after {
	transform: translateY(-70%) rotate(135deg);
}
.examinationCheckBox {
	display: none;
	margin-top: 10px
}
.examinationCheckSystem:checked ~ .examinationCheckBox {
	display: block;
}


/*■■■■■■■■■■
デバイス1020px以上の設定
*/
@media screen and (min-width: 1020px) {
    #beginning::before {
        width: 428px;
        padding-top: 428px
    }
}
@media screen and (max-width: 1300px) {
.headerGlobal li {
	margin-left: 15px;
}
}
@media screen and (max-width: 1200px) {
    .testTypePhoto {
        float: none !important;
        width:　var(--inSize);
        margin: 0 auto
    }
    .testTxtBox {
        position: relative;
        top: inherit;
        left: inherit !important;
        right: inherit !important;
        width: calc(var(--inSize) - 10%);
        margin: 0 auto;
        transform: translateY(-15%)
    }
    .testTypeDetails { margin-top: 20vw }
	.testTypeDetailBox { margin-bottom: 0 }
    .testWrap .testType { margin-top: 10vw }
	.testTable2Col {
	width: calc(var(--inSize) - 10%);
}
.testTable6Col {
	width: calc(var(--inSize) - 10%);
}
}
#sitemapWrap {
	padding-bottom: 115px;
}
.sitemapList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	width: 900px;
	margin: 0 auto;
	list-style: none;
	font-weight: bold;
	margin-bottom: 70px;
	padding-bottom: 70px;
	border-bottom: 1px solid #d7d7d7
}
.sitemapList br {
    display: none;
}
.sitemapList:last-child {
margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none
}
.sitemapList > li:nth-child(-n+3) {
	margin-top: 0
}
.sitemapList > li {
	width: 30%;
	text-align: left;
	margin-top: 60px;
}
.sitemapList a {
	color: var(--keyBlue);
	text-decoration: none;
}
.sitemapListChild {
	list-style-type: none;
}
.sitemapListChild {
	margin-left: 3em;
}
.sitemapListChild li {
	margin-top: 20px;
}
.sitemapList > li a:before {
    content: "■";
} 
.sitemapList > li a:first-child::before {
    content: none;
}
.sitemapListChild > li a::before {
    content: '▶︎';
}
.sitemapList span[class*="icon-"] {
position: relative;
	top: 10px;
	margin-right: 10px;
	font-size: 36px
}
.mypageTable .registeredNone {
font-weight: bold;
	color: #d7d7d7;
}
.mypageTable td {
	position: relative;
}
.mypage_registeredSystem {
	display: none;
}
.mypage_registeredSystem + label {
	display: inline-block;
    padding: 6px 15px;
    border-radius: 20px;
    background: var(--keyBlue);
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
}
.mypage_registeredSystem:checked + label {
	display: none;
}
.mypage_registeredSystem ~ input,.mypage_registeredSystem ~ select {
	border: 1px solid #d7d7d7;
	padding: 5px;
	font-size: 15px;
	width: 80%;
}
.mypage_registeredSystem ~ span,.mypage_registeredSystem ~ select {
	display: none !important;
}
.mypage_registeredSystem ~ input + input {
	margin-top: 10px;
}
.mypage_registeredSystem:checked ~ span,.mypage_registeredSystem:checked ~ select {
	display: block !important;
}
#payFlow .btn a {
	margin-top: 60px;
	font-size: 22px;
	padding-left: 0;
	padding-right: 0;
	width: 220px;
}
#payFlow .btn.payLastBtn a {
	margin-top: auto;
	font-size: inherit;
}
.payFormInputList {
	width: 500px;
	margin: 0 auto;
	color: #888;
	font-size: 14px
}
.payFormInputList dt {
    float: left;
    width: 160px;
    padding: 35px 0 10px 0;
    line-height: 1.8
}
.payFormInputList dd {
	text-align: right;
    padding: 30px 0 5px 175px;
    border-bottom: 1px solid #d7d7d7;
	line-height: 1.8
}
.payFormInputListCofilm dd {
	padding-top: 35px;
	padding-bottom: 10px;
	color: #000;
	font-weight: bold;
	text-align: left
}
.cardMonth { width: 40% }
.cardMonth input,.cardYear input {
	width: 50px !important;
	margin-right: 2%
}
.cardYear {
	margin-right: 10%;
	margin-left: 5%;
	width: 40%
}
.payFormInputList dd input {
	width: 100%;
	padding: 5px;
	text-align: right
}
.payFormInputList dd input:valid { color: #000 }
.payFormInputList dd input[name="cardSecurity"] { width: 40% }
.payBtnList {
	width: 540px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style: none
}
.payBtnList li:first-child { opacity: .5 }
.manageFlow { list-style: none }
.manageFlow li {
	margin-bottom: 40px
}
.manageFlow .mypageTable {
	margin-top: 20px;
}
.manageFlowSystemBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px
}
.flatpickr {
    width: 40% !important;
	padding: 5px;
	background: #fff;
	font-weight: bold;
	text-align: center
}
.flatpickr-calendar.inline { margin: 0 auto }

/*■■■■■■■■■■
デバイス1180px以下の設定
*/
@media screen and (max-width: 1220px) {
    .headerID { display: none }
	.mypagePerson {
		overflow: hidden;
		position: relative;
		display: inline-block;
		width: 50px;
		height: 50px;
		margin-right: 10px;
		border-radius: 50%;
		border: 2px solid var(--keyBlue);
		box-sizing: border-box;
}
.mypagePerson img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
}










/*■■■■■■■■■■
デバイス1040px以下の設定
*/
@media screen and (max-width: 1040px) {
    .sentenceBeginning,.sentenceTxtbox {
        width: 93.75%;
        margin: 0 auto
    }
}










/*■■■■■■■■■■
デバイス1020px以下の設定
*/
@media screen and (max-width: 1020px) {
    :root { --inSize: 93.75% }
    #header {
        padding-right: 3.125%;
        padding-left: 3.125%;
        background: rgba(255,255,255,.8)
    }
	.headerLogin {
		position: inherit;
		top: inherit;
		right: inherit;
	}
    .headerGlobal a { color: #fff !important }
    .headerLanguage {
        top: 3.8%;
        right: 10%;
        z-index: 11
    }
    .drawer {
        z-index: 100000;
        width: 10%;
        padding: 10px;
        box-sizing: border-box
    }
    .drawerContent {
        opacity: 0;
        visibility: hidden;
        height: 0;
        position: relative;
        z-index: 11;
        transition: .25s
    }
    #drawerHamburger { display: none }
    .drawerHamburgerIcon {
        position: fixed;
        top: 5.2%;
        right: 3.125%;
        z-index: 1000000000
    }
    .drawerHamburgerIcon span {
        display: block;
        position: relative;
        z-index: 1000000000;
        top: -8px;
        width: 30px;
        height: 24px;
        border-top: solid 2px #000;
        box-sizing: border-box;
        cursor: pointer;
        transition: .2s
    }
    .drawerHamburgerIcon span::before,.drawerHamburgerIcon span::after {
        content: "";
        position: absolute;
        z-index: 1000000000;
        width: 100%;
        height: 2px;
        background: #000;
        transition: .2s
    }
    .drawerHamburgerIcon span::before {
        top: 45%;
        transform: translateY(-50%)
    }
    .drawerHamburgerIcon span::after { bottom: 0 }
    #drawerHamburger:checked~.drawerHamburgerIcon span {
        transform: translateY(-10%) rotate(45deg);
        border-top: 0;
        border-bottom: #fff
    }
    #drawerHamburger:checked~.drawerHamburgerIcon span:before {
        transform: translateY(250%) rotate(90deg);
		top: 56%;
        background: #fff
    }
    #drawerHamburger:checked~.drawerHamburgerIcon span:after {
        transform: translateY(-200%) rotate(-180deg);
        background: #fff
    }
    #drawerHamburger:checked~.drawerContent {
        opacity: 1;
        visibility: visible;
        height: auto;
        margin-top: 27px
    }
    #drawerClose {
        display: none;
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0
    }
    #drawerContent {
        overflow: auto;
        position: fixed;
        z-index: 200000;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        padding: 5px;
        transition: .3s;
        box-sizing: border-box;
        background: #FFF;
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
    #drawerHamburger:checked~#drawerContent {
        padding-bottom: 20vw;
        -webkit-transform: translateY(78px);
        transform: translateY(78px)
    }
    #drawerHamburger:checked~#drawerClose {
        display: block;
        opacity: .7
    }
	.evaluationTable {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center
	}
	.evaluationTable tr {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2px solid #fff
	}
	#evaluation_speaking .evaluationTable tr,#evaluation_writing .evaluationTable tr { background: #76c1b3 }
	.evaluationOneQuarter01 { width: 100% }
	.evaluationOneQuarter02,.evaluationOneThird01 {
		width: 100%;
		border-bottom: 2px solid #fff
	}
	.evaluationOneQuarter03,.evaluationOneThird02 { width: 15% }
	.evaluationOneQuarter04,.evaluationOneThird03 { width: 85% }
	#evaluation_reading .evaluationTable tr,#evaluation_listening .evaluationTable tr { background: #6fa0c1 }
	#evaluation_reading .evaluationHalf01,#evaluation_listening .evaluationHalf01 { width: 15% }
	#evaluation_reading .evaluationHalf02,#evaluation_listening .evaluationHalf02 { width: 85% }
}










/*■■■■■■■■■■
デバイス1000px以下の設定
*/
@media screen and (max-width: 1000px) {
    .testTypePhoto { width: 100% }
}





/*■■■■■■■■■■
デバイス950px以下の設定
*/
@media screen and (max-width: 950px) {
    .payFlowStep { width: 100% }
    .payFlowStep li {
    	padding: 1.5789473684vw 4.2105263158vw 1.5789473684vw 2.1052631579vw;
    	font-size: 1.894vw
    }
}
@media screen and (max-width: 900px) {
    .payFlowStep { width: var(--inSize) }
    .payFlowStep li {
        width: 50%;
        margin-top: .5vw
    }
    .payFlowStep li:nth-child(-n+2) { margin-top: 0 }
	.sitemapList { width: var(--inSize) }
}

/*■■■■■■■■■■
デバイス890px以下の設定
*/
@media screen and (max-width: 890px) {
    .mypage + #footer .footerAside { display: none }
    .mypage + #footer .footerLogo { display: none }
    .mypage + #footer .footerInfo {
        width: 100%;
        padding: 0
    }
    .mypage + #footer .footerInfo .footerCopy {
        width: 100%;
        position: fixed;
		z-index: 100;
        bottom: 0;
        left: 0;
        padding: 2vw 0;
        background: var(--keyRed);
        color: #fff
    }
    .mypageWrap { width: var(--inSize) }
    #mypageOutput { width: 100% }
    #mypageNav {
        position: fixed;
        z-index: 100;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 0;
        border-top: 2px solid #c8c9ca;
        background: #c8c9ca;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center
    }
    .mypageLogout { display: block }
    .mypageBox {
        width: calc((100% / 4) - 1px);
        background: #fff
    }
    .mypageBox .mypageTit {
        font-size: 16px;
        text-align: center
    }
	.mypageTit::before { content: none }
    .mypageBox .mypageTit a {
        display: block;
        padding: 2vw 0 8vw 0;
        color: #888
    }
    .mypageBox.current .mypageTit a { color: var(--keyBlue) }
    .mypageBox .mypageTit span[class*="icon-"] {
        display: block;
        margin: 0 0 2vw 0;
        font-size: 200%
    }
    .mypageList { display: none }
    .mypageList li { width: 25% }
	
}










/*■■■■■■■■■■
デバイス800px以下の設定
*/
@media screen and (max-width: 800px) {
    .list { width: var(--inSize) }
	.testWrap { padding-bottom: 20vw }
	.testTableBox {
		overflow: auto;
		width: 100%;
		white-space: nowrap
	}
   .testTable2Col { width: 85% }
  .testTable6Col {
  		width: 800px;
		margin: 0 8%
  }
    #cefr .txtBox { width: var(--inSize) }
    .cefrTableWrap { width: var(--inSize) }
    .cefrTable {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center
    }
    .cefrTable tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center
    }
    .cefrTable tr:last-child { border-top: 2px solid #fff }
    .cefrSkil tr { background: #6fa0c1; }
    .cefrIndependent tr { background: #76c1b3; }
    .cefrFoundational tr { background: #c1708c; }
    .cefrTable th {
		width: 100%;
        padding: 10px;
        border-bottom: 2px solid #fff
    }
    .cefrTable td { border-left: 2px solid #fff }
    .cefrTable th br { display: none }
    .cefrTable th.cefrTableNum {
        width: 60px;
        border-bottom: 0;
        color: #fff
    }
    .cefrTable td { width: calc(100% - 60px) }
    .cefrTable th.cefrTableNum {
        font-size: 20px;
        align-items: center
    }
    .cefrTable td { padding: 15px;}
    .cefrSkil th { background: var(--keyBlue) }
    .cefrSkil th.cefrTableNum { background: #6fa0c1 }
    .cefrSkil td { background: #d1e1ed }
    .cefrIndependent th:first-child { background: var(--keyGreen) }
    .cefrIndependent th.cefrTableNum { background: #76c1b3 }
    .cefrIndependent td {background: #d3efeb; }
    .cefrFoundational th:first-child { background: var(--keyWine) }
    .cefrFoundational th.cefrTableNum { background: #c1708c }
    .cefrFoundational td {background: #efd8df }
    .questionList { width: var(--inSize) }
    .flowList { width: var(--inSize) }
    .inputForm {
        width: var(--inSize);
        padding: 10vw 5vw
    }
	.inputForm .inputFormList li .inputFormListTit { width: 30% }
	.inquiry .inputForm {
		padding: 10vw 5vw 10vw 5vw;
		box-sizing: border-box
	}
	.inquiry .inputForm .inputFormList li { padding-left: 15vw }
	.inputForm .required { left: 0 }
	.inputForm .inputFormList li:last-child .inputFormListTit { width: 100% }
	.sampleList { width: var(--inSize) }
	.ymdYear, .ymdMonth, .ymdDay { width: 23% }
	.sampleList > li { padding-bottom: 33px }
	.sampleList > li::after {
		width: 20vw;
		padding-top: 13vw
	}
	.sampleList > li .sampleAnswer::before { left: -20vw }
    .inputForm select {
    	width: auto;
    	border: 1px solid #d7d7d7;
    	font-size: 2.66vw
    }
    .forgotContent {
    	display: block;
		margin-right: 0;
		margin-bottom: 2vw
    }
    .forgotContent ~ label { width: 49% !important }
	.comparisonTableWrap { width: var(--inSize) }
	.comparisonTable { width: 800px }
	.comparisonTableBox {
		overflow: auto;
    	white-space: nowrap;
    	width: 100%
	}
	#lawWrap { padding-bottom: 12.5% }
	.examinationTxtBox { width: 100% }
	.examinationTxt,.examinationTableTit,.examinationOtherTit,.examinationFlowTit {
		width: var(--inSize);
		margin-left: auto;
		margin-right: auto
	}
	.examinationFlowList .examinationTxt { width: 100% }
	.examinationTableBox { margin-left: 3.125% }
	.examinationTable { width: 800px }
	.examinationFlowList { width: var(--inSize) }
}







/*■■■■■■■■■■
デバイス700px以下の設定
*/
@media screen and (max-width: 700px) {
	.payForm { width: var(--inSize) }
	.payFormList li img { margin-left: 20% }
	.payFormList { font-size: 3.22vw }
}










/*■■■■■■■■■■
デバイス640px以下の設定
*/
@media screen and (max-width: 640px) {
    body { letter-spacing: 0 }
    .pcNone { display: block }
	.spNone { display: none }
    .tit {
        margin-bottom: 8.125vw;
        font-size: 6.25vw
    }
    .btn { margin-top: 10vw !important }
    .btn a,.btn input[type="submit"],.btn label {
        padding: 4.5% 4vw;
        border-radius: 10vw;
        font-size: 4.6875vw
    }
    .secondPage > div:first-child,.secondPage > nav:first-child { padding: 29.6875vw 0 14.84375vw 0 !important }
    .list {
        border-top: 1px solid #d7d7d7;
        font-size: 14px
    }
    .list dt {
        float: none;
        width: 100%;
        padding: 4.375vw 0
    }
    .list dd {
        padding: 0 0 6vw 0;
        border-bottom: 1px solid #d7d7d7
    }
    #header { padding: 2.34375% 3.125% }
    .headerLogo { width: 36.565% }
	.headerLogout { margin-right: 0 }
    .headerLogin { display: block }
    .headerLogin li { margin-left: 0 }
    .headerLogin a {
        display: block;
		width: 80%;
		margin-left: auto;
		margin-right: auto;
        padding: 4.5% 7.8vw;
        border-radius: 10vw;
        font-weight: bold;
        font-size: 4.6875vw
    }
    .headerLoginNew,.headerLoginLogOut,.headerLoginMypage { margin-bottom: 4vw }
    .headerLanguage {
        position: fixed;
        top: 3.9vw;
        right: 14%
    }
    .headerLanguage li { margin-left: 1.5625vw }
    .headerLanguage li a {
        width: 9.375vw;
        padding: 1.4vw 0;
        font-size: 4.21875vw
    }
    .drawerHamburgerIcon { top: 7.2vw }
    .drawerHamburgerIcon span {
        width: 8vw;
        height: 7vw
    }
    .headerGlobal { width: 100% }
    .headerGlobal li {
        width: 100%;
        margin-left: 0;
        text-align: center
    }
    .headerGlobal li a {
        display: block;
		font-size: 4.2667vw;
        /* padding: 6vw; */
        padding: 3vw;
        border-bottom: 1px solid #fff
    }
    .footerAside { padding: 4% 0 }
    .footerAsideIn { position: relative }
    .footerAsideList { line-height: 1.6 }
    .footerAsideList li { margin-right: 9% }
    .footerAsideList a { font-size: 3.125vw }
    .footerTop {
        position: absolute;
        top: 50%;
        right: 3.125%;
        font-size: 3.75vw;
        text-align: center;
        transform: translateY(-50%)
    }
    .footerTop span {
        display: block;
        margin-right: 0
    }
    .footerInfo {
        display: block;
        padding: 7% 0 2% 0
    }
    .footerLogo {
        width: 37.5%;
        max-width: 240px;
        margin: 0 auto 5% auto
    }
    .footerCopy {
        font-size: 2.8125vw;
        text-align: center
    }
    #beginning { padding: 11vw 0 }
    #beginning::before {
        width: 81.6875%;
        padding-top: calc(519 / 640 * 100%)
    }
    #beginning .txtBox {
        position: relative;
        z-index: 1;
        width: var(--inSize);
        margin: 0 auto
    }
    #beginning .txtBox .txt { line-height: 1.8 }
    #news { padding: 14vw 0 }
    #outline { padding: 14.6875% 0 21.40625% 0 }
    #test { padding: 17.65625% 0 0 0;}
    img[src*="about_img_evaluation"] {
        display: block;
        width: 78.125%;
        margin: 4vw auto 0 auto
    }
    #evaluation .list dd { font-size: 3.6vw }
	.testTable thead th { font-size: 3.75vw }
  .testTable th,.testTable td { padding: 2vw }
  .testTable tbody th,.testTable tbody td { font-size: 3.22vw }
    #cefr { padding: 15.625% 0 }
    #question{ padding-bottom: 12.5% }
    .questionList dt label { padding-right: 40px }
    #flowWrap { padding-bottom: 12.5% }
    .flowList dt {
        padding: 10vw 5vw 5vw 15vw;
        font-size: 6.5vw
    }
    .flowList dd { padding: 0 5vw 10vw 15vw }
    .flowList dt::after { top: -18vw }
    #messageWrap,#organizerWrap,#sentence { padding-bottom: 12.5% }
	#messageWrap .sentenceTit,.blkTit {
		padding: 2vw;
		font-size: 4.6vw
	}
	.mypage { padding: 25vw 0 60vw 0 }
	.mypageBox .mypageTit { font-size: 3.22vw }
	.mypageTable th,.mypageTable td { padding: 6vw 2vw }
	.mypageTable th {
        width: 30vw;
		font-size: 3.22vw
	}
	.mypageTable td { font-size: 3.22vw }
    #input { padding-bottom: 12.5% }
	.sampleNavList li {
		width: 100%;
		padding: 0 3.125% 3.125% 3.125%
	}
	#sampleNav { padding-bottom: 0 !important }
	.sampleNavList li > a { padding-bottom: 3.125% }
	.sampleNavATit { font-size: 6.2vw }
    .sampleList > li { padding-left: 20vw }
    .sampleList li::before { font-size: 6.4vw }
	.sampleList > li {
		padding-top: 40vw;
        padding-right: 0
	}
    .sampleList > li .sampleVoice {
        width: 40vw;
        left: 0;
        right: 0;
        margin: auto
    }
	#payFlow { padding-bottom: 12.5% }
    .payForm { width: var(--inSize) }
    .payFlowStep { margin-bottom: 10vw }
    .payFormDo { margin-bottom: 10vw }
    .payFlowStep li {
        width: 100%;
        margin-top: 4vw;
        padding-bottom: 4vw; 
        font-size: 4vw
    }
    .payFlowStep li:before, .payFlowStep li:after {
        top: -9vw;
        bottom: inherit;
		left: inherit;
		width: 0%;
        border-left-width: 50vw
    }
    .payFlowStep li:before {
        left: -6vw;
		transform: skew(85deg)
    }
	.payFlowStep li:after {
        right: -6vw;
		transform: skew(-85deg)
    }
    .payFlowStep li:nth-child(2) { margin-top: 4vw !important }
    .payFlowStep li:last-child { padding-bottom: 1.5789473684vw }
    #evaluation_writing,#evaluation_speaking { padding-bottom: 12.5%}
	#newsWrap { padding-bottom: 12.5% }
	#sitemaWrap { padding-bottom: 12.5% }
	.sitemapList { border-bottom: 0 }
	.sitemapList:nth-of-type(2) > li { width: 100% }
	.sitemapList > li {
		width: 100%;
		padding: 0 0 2vw 2vw;
		border-bottom: 1px solid #d7d7d7
	}
    .sitemapList > li:nth-child(2),.sitemapList > li:nth-child(3) {
        margin-top: 60px;
    }
	.mypage_registeredSystem + label {
		display: block;
		position: static;
		top: inherit;
		margin-top: 2vw;
		transform: none
	}
	.mypage_registeredSystem ~ input, .mypage_registeredSystem ~ select { width: 100% }
/*PAY 4PAGE SETTING*/
	.payFormList li {
		position: relative;
		width: 80%;
		margin: 0 auto 10vw auto;
		padding-bottom: 5vw
	}
	.payFormList li img { margin: 0 auto 1vw auto }
	.payFormList li input {
		position: absolute;
		top: inherit;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto
	}
	.flatpickr {
		display: block;
		width: 100% !important;
		margin: 0 auto 2vw auto
	}
/*SAMPLE PAGE*/
    .sampleTable th { padding: 2vw }
    .sampleTable tbody th {
        width: 20vw;
        font-size: 3.22vw
    }
    .sampleTable tbody td {
        padding: 2vw;
        font-size: 2.66vw
    }
    .sampleTable {
		width: 93.75vw;
		margin-left: -20vw
    }
	.examinationWrapIn .examinationBox:first-child { padding-top: 10vw }
	.examinationWrapIn .examinationBox { padding-top: 20vw }
	.examinationWrap { padding-bottom: 12.5% }
	.examinationFlowList dt {
		padding: 10vw 5vw 5vw 5vw;
		font-size: 7vw
	}
	.examinationFlowList dd { padding: 0 5vw 10vw 5vw }
	.examinationTit { font-size: 7vw }
}
/*■■■■■■■■■■
デバイス540px以下の設定
*/
@media screen and (max-width: 540px) {
/*PAY 4PAGE SETTING*/
    .payBtnList { width: var(--inSize) }
	.payBtnList li { width: 48% }
    #payFlow .payBtnList .btn { margin-top: 5vw }
    #payFlow .payBtnList .btn a { width: 100% }
}










/*■■■■■■■■■■
デバイス500px以下の設定
*/
@media screen and (max-width: 500px) {
/*PAY 4PAGE SETTING*/
	.payFormInputList { width: 100% }
	.payFormInputList dt {
        width: 30vw;
		font-size: 3.22vw
	}
	.payFormInputList dd {
        padding-left: 35vw;
		font-size: 3.22vw
	}
	.payFormInputList dd input[name="cardSecurity"] { width: 100% }
	#payFlow .btn a { font-size: 4.8vw }
/*SAMPLE PAGE*/
	.sampleFigure {
	    width: 100%;
        margin-right: auto;
	    margin-left: auto
	}
}







@media screen and (max-width: 800px) {
	
}
@media screen and (max-width: 640px) {
	
}