@charset "utf-8";
/* ----------------------------------
 base
---------------------------------- */
body {
  color: #222;
  font-family:"YakuHanJP", 'Helvetica Neue', 'Helvetica', 'Arial', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 
}
a {
	color: #222;
}
.img {
	height: auto;
	width: 100%;
}
.forPC{display:block;}
.forSP{display:none;}

body{
	overflow-x: hidden;
	}

/* ----------------------------------
 font-size
---------------------------------- */
body {
  font-size: 16px;
}
@media (min-width: 320px) {
  body {
    font-size: calc((16 - 14) * ((100vw - 320px) / (1000 - 320)) + 14px);
  }
}
@media (min-width: 1000px) {
  body {
    font-size: 16px;
  }
}
/* Safari 7.1+ に適用される */
_::-webkit-full-page-media, _:future, :root, body {
  -webkit-animation: safariFix 1s forwards infinite;
}
@-webkit-keyframes safariFix {
  100% {
    z-index: 1;
  }
}

/* ----------------------------------
 common
---------------------------------- */
.green{background-color:#54b666 }
.orange{background-color:#ff8519 }
.gray{background-color:#666 }
.light-gray{background-color:#ebebeb }
.pink{background-color: #e6506c}
.navy{background: #27393F }
.container{max-width: 1000px;margin: 0 auto;}

/* ----------------------------------
 No.1 日本語のテキスト
---------------------------------- */
body#ja-textbook{background: #f4f0e8;}
h2.g-title{color: #54b666;padding-left: 1rem;position: relative;margin-bottom: 1.25rem;letter-spacing: 0.05rem;font-size: 1.5rem}
h2.g-title::before{
	content: '';
	position: absolute;
	top:-2px;
	left: 0;
	width: 6px;
	height: 40px;
	border-radius: 3px;
	background-color: #54b666;
}
/* ----------------------------------
  No.1 header
---------------------------------- */
header#ja-text{
	border: 6px solid #54b666;
	border-right: none;
	border-left: none;
	text-align: center;
	background: url(../img/bg-pattern.png);
	padding: 40px 0;
}
header#ja-text h1{font-size: 3.5rem;color: #54b666;} 
header#ja-text h1 span:first-child{font-size: 2.25rem; color:#222;letter-spacing: 0.15rem;position: relative; top:-5px; }
header#ja-text h1 span:last-child{font-family: 'Noto Sans JP', sans-serif;}
.dlpages{max-width: 1000px;margin: 3rem auto ;}
.btn-inquiry.orange{width:100%;font-size:1.25rem; }
@media screen and (max-width: 768px){
	.forPC{display:none;}
	.forSP{display:block;}
	header#ja-text h1 {font-size: 2.75rem;} 
	header#ja-text h1 span:first-child{font-size: 1.875rem; }
}
@media screen and (max-width: 540px){
	header#ja-text{padding: 24px 0 20px;}
	header#ja-text h1{line-height:1.2;font-size: 1.875rem; }
	header#ja-text h1 span:first-child{display: block;font-size:1.25rem; }
	.dlpages{margin:2rem auto ;}
}

/* ----------------------------------
  No.1 table chart
---------------------------------- */
table.chart {
	table-layout: fixed;
	background-color: #fff;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 2rem 0 4.5rem ;
	box-sizing: border-box;
}
table.chart th, table.chart td {
	padding: .5em 1.1em;
	text-align: center
}

table.chart td{border:0px;border-bottom: 2px solid #d6edd8;vertical-align: top;}
/*table.chart th {background-color: #f9fafb;border: 2px solid #fff;border-left: none;}*/
table.chart td img{ width: 96px; height: auto; transition: transform 0.3s linear;box-shadow: 1px 1px 3px rgba(51,51,51,.35);display: inline-block;margin-right: 0.5rem;}
table.chart td img:hover{transform: scale(1.2);}

table.chart td img.kari:hover{transform: none;}

table.chart th.senior, table.chart th.middle,table.chart th.beginner{color:#fff; border: none;width: 29.3%}
table.chart th.senior{background:#5db866 }
table.chart th.middle{background:#7dc684 }
table.chart th.beginner{background:#9dd4a3}
table.chart tr:not( :first-child ) th{background-color: #d6edd8;color: #154a1a;vertical-align: middle;border-bottom: 2px solid #fff;; }
table.chart th.series{width: 12%;background:#d6edd8;border: none;}

.area2-1, .area8-1,.area9-1{text-align: right;position: relative;right:-60px}
.area9-2{text-align: left;position: relative;left:32px}
.area3-2, .area4-2,.area4-3{text-align: left;}

@media screen and (max-width: 1000px){
	.container,.dlpages{padding: 0 10px;}
}
@media screen and (max-width: 768px){
	.container,.dlpages{padding: 0 16px;}
	table.chart {
	  width: 100%;
	  border-collapse: separate;
	  border: 1px solid #dfe2e5;
	  box-sizing: border-box;
		}
	table.chart tr:first-child {
	  display: none;
	}
	table.chart th, table.chart td {
	  box-sizing: border-box;
	  display: table;
	  table-layout: fixed;
	  padding: .5em .8em;
	  width: 100%;
	  vertical-align: middle;
	  line-height: 1.2;
	}
	table.chart th {
		background-color: #f9fafb;
		padding: .4em 0.5em;
		border: none;
	}
	table.chart tr + tr + tr th, table.chart td {
		border-top: none;
	}
	table.chart td{border-bottom: 1px solid #d6edd8;text-align: left}
	table.chart td::before {
	  display: table-cell;
	  width: 3.6em;
	  content: attr(data-heading);
	  vertical-align: middle;
	  text-align: center;
	  border-radius: 4px;
	  color: #fff;
	  padding: 5px 0
	}
	table.chart td.senior::before{background:#5db866}
	table.chart td.middle::before{background:#7dc684}
	table.chart td.beginner::before{background:#9dd4a3;}
	table.chart td>div{margin-left: 10px;/*border: 1px dotted green;*/}

	.area2-1{position: relative; top:70px;left:0;text-align: left}
	.area2-2{height:80px;}
	.area8-1,.area9-1{text-align:left;position: relative;top:40px;left:0px;}
	.area8-2{position: relative;left:96px;}
	.area9-2{ position: relative;left: 0px; top:30px;padding-bottom: 30px;}
}
@media screen and (max-width: 340px){
	table.chart td::before {
	  width: 1.5em;padding: 0 0.2em;
	}
}

/* ----------------------------------
  No.1 coming soon
---------------------------------- */
#comingsoon .innercnt{display: flex;justify-content: space-between;margin-bottom:3.6rem;}
#comingsoon .innercnt dl{width: 47%;display: flex;}
#comingsoon .innercnt dt{max-width: 188px;margin-right: 24px;}
#comingsoon .innercnt dt img{border: 1px solid #fff;}
#comingsoon .innercnt dd h3{font-size: 1.125rem;margin-bottom: 24px;}
#comingsoon .innercnt dd li{font-size: 0.875rem;margin-bottom: 20px;}
#comingsoon .innercnt dd li:nth-child(3){margin-bottom: 5px;}
/* ----------------------------------
  No.1 inquiry-g
---------------------------------- */
#inquiry-g .innercnt{
	border-top: 6px solid #54b666;
	background: url(../img/bg-pattern.png);
	padding: 0 6% 3rem;
	margin-bottom: 3.5rem;
}
#inquiry-g h3{color:#54b666;font-size: 1.375rem;letter-spacing: 0.1em;text-align: center;margin:20px 0; }
#inquiry-g p{line-height: 2.0;margin-bottom: 1.5rem;}
#inquiry-g .innercnt p.privacy a{text-decoration: underline;color:#54b666; }

/* ----------------------------------
 No.2 音声ダウンロード
---------------------------------- */
figcaption{
    text-align: left;
}
audio { 
    width: 250px; 
}
header #keyVisual {
    width: 100%;
    background: #27393F;
}

#keyVisual h1 {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 2.5vw;
    color: #fff;
    padding: 48px 0;
}
.lede{margin-top: 48px;}
.lede a {text-decoration: underline;}
.select-language{display: flex;justify-content: center;font-size: 1.5rem;font-weight: bold;max-width: 866px;margin: 3.75rem auto 0; }
/*.select-language li+li{margin-left: 24px}
.select-language li{width: 48%;}*/

@media screen and (max-width: 1028px){
	#keyVisual h1 {
		padding-left:1.6rem;
	}
}
@media screen and (max-width: 768px){
	#keyVisual h1 {
        padding: 24px 0;
		font-size: 4.6vw;
		padding-left: 1rem;
		line-height: 1.3;
	}
}

@media screen and (max-width: 768px){
	#comingsoon .innercnt{display: flex;flex-wrap: wrap;}
	#comingsoon .innercnt dl{width: 100%;margin-bottom: 1.2rem;}
	
	#comingsoon .innercnt dl{display: flex;padding: 0 10px;justify-content: space-between}
	#comingsoon .innercnt dl dt{flex: 0 2 auto;width: 24%}
	#comingsoon .innercnt dl dd{flex: 0 1 auto;width: 72%}
	#comingsoon .innercnt dl dt img{width: 100%; border: 1px solid #cfcfcf; }
	
	/*[class^="topBtn-"], [class*=" topBtn-"]{}
	[class$="-topBtn"], [class*="-topBtn "] {}*/
	[class*=" topBtn-"]{text-align: right;padding:0 1rem 1rem 0;}
	.topBtn-green a{color: #54b666 }
	.topBtn-orange a{color: #ff8519 }
    .topBtn-navy a{color: #27393F }
}
@media screen and (max-width: 480px){
	#keyVisual h1 {font-size: 5.2vw;}
	.lede{margin-top:32px;}
	.lede p{margin-bottom:0.5rem }
	.select-language{font-size: 1.125rem;font-weight: bold;max-width: 866px;margin: 2rem auto 0; flex-direction: column; }
	/*.select-language li+li{margin-left: 12px}*/
	#comingsoon .innercnt dl{flex-direction: column}
	#comingsoon .innercnt dl dt{width: 100%;margin: 0 auto 1rem;}
	#comingsoon .innercnt dl dd{width: 100%}
	#comingsoon .innercnt dl:first-child{border-bottom: 2px dotted #54b666;}
	#comingsoon .innercnt{margin-bottom:1.6rem;}
}

/* ----------------------------------
 No.2 textbooks
---------------------------------- */
.language-type h2{color: #222;padding-left: 0.8rem;letter-spacing: 0.05em;}
.language-type{margin-top: 4.5rem;}

.textbooks > li{padding: 1.4rem 0 2rem;}
#japanese .textbooks > li{border-bottom: 2px solid #ebebeb;}
#korean .textbooks > li{border-bottom: 2px dotted #e6506c;}

.textbooks h3{margin-bottom: 1rem;font-size: 1.375rem}/*書籍名*/

.textbooks dl{display: flex;padding: 0 10px;justify-content: space-between;}
.textbooks dl dt{flex: 0 2 auto;width: 17%}
.textbooks dl dd{flex: 0 1 auto;width: 80%}
.textbooks dl dt img{width: 100%; border: 1px solid #cfcfcf; }

.textbooks dd ul{
	display: flex;
	flex-wrap: wrap;
	margin: -20px 0 0 -20px;
}
.textbooks dd ul li{
	box-sizing: border-box;
	flex: 0 0 33.33333%;
	padding: 20px 0 0 20px;
	max-width: 33.33333%;
	min-width: 0;
	word-wrap: break-word;
	text-align: center;
	line-height: 3rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	-webkit-justify-content: space-between;
	}
.textbooks dd ul li p{text-align: left;line-height:normal;margin-top: 0.5rem;}

.textbooks_p{margin-bottom:1.7rem;}

@media screen and (max-width: 767px){
	.textbooks dl dt{width: 20%}
	.textbooks dl dd{width: 77%}
	.textbooks dd ul li{
	flex: 0 0 50%;
	max-width: 50%;
	}
	.language-type h2{margin: 0 -16px;padding-top:4px;padding-bottom: 4px;}
	.textbooks_p{margin-bottom:0;}
}
@media screen and (max-width: 480px){
	.textbooks dl{flex-direction: column;}
	.textbooks dl dt{width: 60%;margin: 0 auto 1rem;}
	.textbooks dl dd{width: 100%}
	.textbooks dd ul{margin:0;}
	.textbooks dd ul li{
	flex: 0 0 100%;
	max-width: 100%;
	padding: 0;
	text-align: center;
	line-height: 3rem;
	margin-bottom: 1rem;
	}
	.textbooks h3{margin-bottom: 1rem;font-size: 1.1875rem;line-height: 1.4;}/*書籍名*/
	.textbooks dd ul li p{font-size: 0.875rem}
	.textbooks_p{margin-bottom:0;}
}

/* ----------------------------------
 No.2 btn
---------------------------------- */
.textbooks dd li a::before{position: relative;top:-3px;}

a[href$=".pdf"],a[href$=".mp3"],a[href$=".zip"]{color: #fff;text-decoration: none;display: block;border-radius: 4px; }
a[href$=".pdf"]{background-color:#ff8519;}
a[href$=".mp3"]{background-color:#1994ff;}
a[href$=".zip"]{background-color:#b654a4;}
a[href$=".pdf"]::before{width: 20px;height: 20px;background-image: url(../img/pdf.png);}
a[href$=".zip"]::before{width: 20px;height: 20px;background-image: url(../img/zip.png);}
a[href$=".mp3"]::before{width: 20px;height: 20px;background-image: url(../img/music.png);}
a[href$=".pdf"]::before,a[href$=".mp3"]::before,a[href$=".zip"]::before,.apply a::before{content: '';display: inline-block;background-size: contain;vertical-align: middle;margin-right: 8px;}

.form a{color: #fff;text-decoration: none;display: block;border-radius: 4px; }
.form a{background-color:#666;}
.form a::before{width: 20px;height: 20px;background-image: url(../img/mail.png);}
.form a::before,a[href$=".mp3"]::before,a[href$=".zip"]::before,.apply a::before{content: '';display: inline-block;background-size: contain;vertical-align: middle;margin-right: 8px;}

.apply a{color: #666;text-decoration: none;display: block;background-color:#fff;border-radius: 4px;border: 2px solid currentColor;line-height: calc(3rem - 4px);}
.apply a::before{width: 20px;height: 15px;background-image: url(../img/email.png);}

.btn-wrapper{max-width: 420px;margin: 0 auto;}
.btn-wrapper a{color: #fff}
.select-language > div {width: 48%; margin: 0 auto;}
.btn-inquiry,.btn-language{display: block;text-align: center; margin: 0 auto;line-height: 60px;width: 100%; color: #fff;position: relative;border-radius: 8px;letter-spacing: 0.05em; }
.btn-inquiry{color: #fff;font-size: 1.125rem; }
.btn-language.green{color: #54b666;border: 2px solid currentColor;background-color:#e6f4e8 }
.btn-language.pink{color: #e6506c;border: 2px solid currentColor;background-color:#faebee}
.btn-inquiry:after, .btn-language:after {
    position: absolute;
    right: 16px;
	font-weight: bold;
}
.btn-inquiry:after {
    font-family: "Font Awesome 5 Free";
	content: "\f0da";
	font-size: 1.6em;
}
.btn-language:after {
    font-family: "Font Awesome 5 Free";
	content: "\f0d7";
	font-size: 1.4em;
}

.menu {
	cursor: pointer;
}

.menu-list {font-size: 1rem;font-weight: normal;border-radius: 0 0 8px 8px; border-style:solid; border-width:2px;border-top: none;}
.green + .menu-list {border-color: #54b666;}
.green + .menu-list a {color:#54b666; border-bottom: dotted 1px #54b666;}
.pink + .menu-list {border-color: #e6506c;}
.pink + .menu-list a {color:#e6506c; border-bottom: dotted 1px #e6506c;}
.menu-list li a {padding:0.5rem 1rem 0.5rem 1.5rem;position: relative;display: block;}
.menu-list li a:before {content:'▪';display: block;position: absolute; left: 0.8rem;top: 0.4rem;}
.menu-list li:last-child a {border-bottom:none;}

.menu-up {border-radius: 8px 8px 0 0;}
.menu-up:after {content: "\f0d8";}

@media screen and (max-width: 480px){
	.language-type{margin-top: 2.4rem;}
	.btn-inquiry.orange{font-size:1rem; }
	.btn-inquiry.orange:after{right: 8px;}
	.select-language > div {width: 100%;}
	.select-language > div + div {margin-top: 1rem;}
}
@media screen and (max-width: 384px){
	/*.btn-language{
		text-align: left;padding-left: 20px; }*/
}
@media screen and (max-width: 355px){
	/*.btn-language{padding-left: 10px; }
	.btn-language:after {right: 8px;}*/
	.btn-inquiry.orange{font-size:0.9375rem; }
	.btn-inquiry.orange:after {font-size: 1.2em;}
}

/* ----------------------------------
 No.2 inquiry-o
---------------------------------- */
h3.gray{color: #fff;text-align: center;background: #666;font-size: 1.25rem;line-height: 36px;margin-top: 5rem;}
.grayarea{
	background: #e5e5e5;
	padding: 28px 6% 40px;
	margin-bottom: 3.5rem;
}
.grayarea h3 {
	color: #fff;
	text-align: center;
}
h3.about-sample{
	background: #ff8519;
	border-radius:16px 16px 0 0 ;
	font-size: 1.125rem;
	line-height: 34px;
	margin-top: 2.5rem;
}
#sample-request{
	border: 2px solid #ff8519;
	border-radius: 0 0 16px 16px;
	background-color: #fff;
	padding: 30px 3.4% 40px;
	margin-bottom:2rem ;
}
#sample-request h3{background:#ff8519;color: #fff;text-align: center;}
#sample-request h4, #sample-request h5,.required{color: #ff8519;}
#sample-request h4{font-size: 1.125rem;margin: 2rem 0 0.5rem;}
#sample-request h5{font-size: 1rem;margin: 1.5rem 0 0.5rem;}
#sample-request .notes li{display: table}
#sample-request .notes li::before{display:table-cell;padding-right: .2em;content: '◆';}
#sample-request small{font-size: 0.875rem;display: block;margin-top: 1rem;}
.policy{margin-top: 2rem;}
.policy a{text-decoration: underline;}

@media screen and (max-width: 480px){
	#inquiry-o .container{padding: 0;}
}

/* ----------------------------------
 footer
---------------------------------- */
footer .container{display: flex;color: #fff;height: 4.5rem;align-items: center}
footer a{color: #fff;}
footer .content{display: flex;margin-right: auto;align-items: center}
footer .content h3{font-size: 1.25rem;letter-spacing: 0.05em;padding-right: 1.5rem}
footer .content small{font-size: 0.75rem;letter-spacing: 0.05em;}
@media screen and (max-width: 480px){
	footer .content{display: flex;margin: 0 auto;flex-direction: column;align-items: center}
	footer .content h3{font-size: 1rem;letter-spacing: 0.05em;padding-right: 1.5rem}
	footer .content small{font-size: 0.75rem;letter-spacing: 0.05em;}
}