*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}



body{
	font-size: 16px;
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	line-height: 2;
	background:#333333;
	font-weight: 500;
}
a{color: #fff;text-decoration: none;}
p{margin-bottom: 1.5em;}
.f12{font-size: 75%;}
.f32{font-size: 200%;}
.f22{font-size: 137.5%;}
.bold{font-weight: bold;}
.gold{  color: #c7bd37;}
.mt60{margin-top: 60px;}

header{
	background-image:url(/wp-content/themes/lightning_child_sample/img/tss/toeic_score_1.jpg);
	background-size: cover;
	background-position: bottom center;
	text-align: center;
	padding:70px 0 0;
}

header h1{
	font-size: 287.5%;
	margin-bottom: 1.5em;
	line-height: 1.4;
}
header h2{
	font-size: 200%;
	margin-bottom: 1em;
}

.inner{
	max-width: 840px;
	padding: 20px;
	margin: 0 auto;
}

.apply{
	background:#2e175d;
	border: 10px solid #fff;
	max-width: 840px;
	margin:0 auto;
	padding: 16px 20px 0;
	text-align: center;
}

.apply img{
	margin: 0 auto 10px;
}

.apply p:first-child{
  margin-bottom: 0.5em;
}

.apply p span{
  font-size: 60%;
}
.apply .line{
border-bottom: 3px double #2fff166e;
display: inline-block;
margin: 0 auto 0.5em;
color: #74f664;
}

.apply .tokuten{
background: #fff;
}

.tokuten p{
font-size: 150%;
background:linear-gradient(to bottom, #c7bd3700 40%, #c7bd3733 80%);
text-align: center;
color: #c7bd37;
font-weight: bold;
margin-bottom: 0.5em;
}
.tokuten li{
  text-align: left;
  list-style: none;
  position: relative;
  text-indent: -2em;
  margin-left: 2em;
}
.tokuten li::before{
  content:"";
  display: inline-block;
  vertical-align: middle;
  color: #c7bd37;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.2em solid #c7bd37;
  border-radius: 50%;
  box-sizing: content-box;
  margin-right: 10px;
}
.tokuten li::after{
  content:"";
  width: 14px;
  height: 8px;
  border: 0.2em solid #c7bd37;
  border-top: 0!important;
  border-right: 0!important;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(-45deg);
  position: absolute;
  top: 14px;
  left: calc(-2em + 5px);
}

section h2{
	font-size: 200%;
	border-bottom: 3px solid #c7bd37;
	text-align: center;
	padding-bottom:15px;
	margin-bottom:20px;
}

section.sec1{
	margin-top:100px;
}

section.sec1 p{
	text-align: center;
}

section.sec1 dl{
	background:#474747;
	padding:10px 20px 20px 10px;
	margin-bottom:1.5em;
}
section.sec1 dt{
	display: flex;
	align-items: center;
	gap:10px;
	font-size: 137.5%;
	font-weight: bold;
}

section.sec1 dt span.ex{
	display: inline-block;
	background: #7f7977;
	padding:0.8em 1em;
	margin-left: 1em;
	font-size: 14px;
	font-weight: 500;
	flex: 1;
}
section.sec1 dd{
	margin-left: 93px;
	font-size: 93.75%;
}

section.sec1 dl+img{
	margin: 20px auto 50px;
}

section.sec1 .outlink{
	display: block;
	background:#474747;
	border-radius: 10px;
	padding:15px 45px 15px 20px;
	position: relative;
	margin-bottom: 2em;
}
section.sec1 .outlink::after{
	content:"";
	position: absolute;
	top:calc( 50% - 7px );
	right: 20px;
	border-left: 10px solid #c1b736;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}
section.sec1 .outlink img{
	display: inline-block;
	vertical-align: middle;
	margin-right: 12px;
}
section.sec1 .outlink span{
	display: block;
	font-size: 81.25%;
	text-align: right;
	font-weight: 300;
}

section.sec2{
	background:#5b5b5b;
	padding:40px 0;
}

section.sec2 h2{
	border-bottom: 3px solid #ddd;
}

section.sec2 .flex{
	display: flex;
	margin-bottom: 20px;
}

section.sec2 .flex2,
section.sec2 .flex4{
	flex-direction: row-reverse;
}

section.sec2 .flex .txt{
	width:66.666666%;
	background:#333333;
	padding:30px 24px 5px;
	font-size: 93.75%;
}

section.sec2 .flex .txt h3{
	color:#c1b736;
	font-size: 137.5%;
	margin-bottom: 0.8em;
	text-align: center;
	line-height: 1.6;
}
section.sec2 .flex .imgs{
	width:33.333333%;
	background-size: cover;
	background-position: center;
}

section.sec2 .flex1 .imgs{background-image: url(/wp-content/themes/lightning_child_sample/img/tss/toeic_score_7.jpg);}
section.sec2 .flex2 .imgs{background-image: url(/wp-content/themes/lightning_child_sample/img/tss/toeic_score_8.jpg);}
section.sec2 .flex3 .imgs{background-image: url(/wp-content/themes/lightning_child_sample/img/tss/toeic_score_9.jpg);}
section.sec2 .flex4 .imgs{background-image: url(/wp-content/themes/lightning_child_sample/img/tss/toeic_score_10.jpg);}
section.sec2 .flex5 .imgs{background-image: url(/wp-content/themes/lightning_child_sample/img/tss/toeic_score_11.jpg);}

section.sec2 h4{
  text-align: center;
  font-size:18px;
  font-weight:bold;
  margin:3em 0 1em;
}

section.sec2 .voice{
  background:#fff;
  padding:10px;
  margin-bottom:10px;
  display: flex;
  gap:10px;
}
section.sec2 .voice img{
  margin:0 10px 10px 0;
  float: left;
  height: 200px;
  width:150px;
  margin: 0 auto;
}
section.sec2 .voice p{
  font-size:13px;
  font-weight: normal;
  color: #333;
  line-height: 1.6;
  margin-bottom: 0;
}
section.sec2 .voice p span{
  display: block;
  text-align: right;
}

section.sec2 .inner > h3{
	font-size:175%;
	text-align: center;
	margin:3em 0 1em;
	line-height: 1.6;
}

section.sec2 .inner > p{
	text-align: center;
}

section.sec2 .gold2{
	font-size: 125%;
	color: #f1e874;
	font-weight: bold;
	margin-bottom: 1em;
	margin-top: 2em;
}

section.sec2 .gold2 .free{
	background: #f1e874;
	color: #333;
	padding: 3px 15px 5px;
	border-radius: 5px;
	margin-left: 1em;
}

section.sec2 .tokuten p{
  color: #f1e874;
}

section.sec2 .tokuten li::before,
section.sec2 .tokuten li::after{
  border: 0.2em solid #f1e874;
}

section.sec3{
	padding: 40px 0 0;
}

section.sec3 h2{
	font-size: 125%;
}

section.sec3 .flex{
	display: flex;
	gap:40px;
	justify-content: center;
	align-items: flex-start;
	margin:40px 0 0;
}

section.sec3 .flex p img{
	margin:0.5em auto 0;
}

section.sec4{
	background-image: url(/wp-content/themes/lightning_child_sample/img/tss/toeic_score_13.jpg);
	background-size: cover;
	background-position: bottom center;
	text-align: center;
	padding:70px 0 15px;
}

section.sec4 .inner > p{
	font-size: 140%;
}

section.sec4 p.gold{
	font-size: 225%;
	border-bottom: 3px solid #c7bd37;
	display: inline-block;
	padding:0 8px;
}

section.sec4 p.ps{
	font-size:100%; 
}

section.sec4 > p{
  font-size: 70%;
  padding:2em 0 0;
  margin-bottom: 0;
}

footer p{
	text-align: center;
	padding: 1em 0 0;
}

.sp{display: none;}


@media screen and (max-width:767px){
	.pc{display: none;}
	.sp{display: inline;}
	.spcenter{text-align: center!important;}
	body{font-size: 14px;}

	header{
		padding:35px 0 0;
		background: url(/wp-content/themes/lightning_child_sample/img/tss/toeic_score_1_sp.jpg);
		background-size: contain;
		background-position: top center;
		background-repeat: no-repeat;
	}
	header h1{
		margin-bottom: 0.75em;
    font-size: 237.5%;
	}
	header h2{
    font-size: 150%;
  }
	header .f32{
		line-height: 1.6;
		font-size: 171.4%;
	}
	body > .apply{
		margin:0 20px;
	}
	
	section h2{
		font-size: 171.4%;
		line-height: 1.6;
	}
	section.sec1{
		margin-top: 30px;
	}
	section.sec1 p,
	section.sec2 .gold2 + p{
		text-align: left;
	}
	section.sec1 dd{
		margin:10px 0 0;
	}
	section.sec1 dt span.ex{
		max-width: 53%;
		margin-left: auto;
	}
	section.sec1 dl + img{
		margin:20px auto;
	}
	section.sec2,
	section.sec3{
		padding:20px 0;
	}
	section.sec2 .flex,
	section.sec3 .flex{
		flex-direction: column;
	}
	section.sec2 .flex .txt{
		width: 100%;
	}
	section.sec2 .flex .imgs{
		width: 100%;
		height: 268px;
	}
	section.sec2 .inner > h3{
		margin-top: 1.5em;
    font-size:150%;
	}
  section.sec2 .voice{
    flex-direction: column;
  }
	section.sec3 .flex{
		align-items: center;
	}
	section.sec3 .flex > img{
		height: 240px;
	}
	section.sec4{
		padding:10px 20px 0;
		background-image: url(/wp-content/themes/lightning_child_sample/img/tss/toeic_score_13_sp.jpg);
		background-size: contain;
		background-position: bottom center;
		background-repeat: no-repeat;
	}
	section.sec4 p.gold{
		margin-bottom: 1em;
	}
	footer p{
		margin:0;
		padding: 0;
	}
}

@media screen and (max-width:480px){
  section.sec1 dt{
    display: block;
  }
  section.sec1 dt img{
    display: inline-block;
    vertical-align: middle;
    margin-right:10px;
  }
  section.sec1 dt span.ex{
    display: block;
    width: 100%;
    max-width: none;
    margin-top:10px;
  }
  section.sec1 dt span br.sp{
    display: none;
  }
  .tokuten ul{
    padding-left: 0;
  }
  .tokuten li::after{
    width: 12px;
    height:7px;
    top:12px;
    left: calc(-2em + 4px);
  }
}