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

*, *::before, *::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}

img{
max-width: 100%;
height: auto;
vertical-align: bottom;
}

body{
background-color: #f2f2f0;
background-image: url("../images/bg.jpg");
font-family: sans-serif;
font-weight: bold;
overflow-x: hidden;
}

@media(min-width: 768px){
body{
background-color: #e63248;
background-image: none;
}
}

ul{
list-style-type: none;
}

a{
text-decoration: none;
}

@media(min-width: 768px){
.pc-width{
width: 500px;
background-image: url("../images/bg.jpg");
}
.pc-container{
width: 90%;
display: flex;
justify-content: flex-end;
}
}

/*全体を通してのクラス設定------------------------------------*/
.container{
width: 90%;
margin: 0 auto;
}

.font-size__large{
font-size: 2.1rem;
color: #e63248;
line-height: 1em;
}

.border-dotted{
border-top: 1px dotted #313131;
}

.lesson_btn a{
color: #fff;
font-size: 1.25rem;
display: block;
text-align: center;
background-color: #e63248;
border-radius: 20px;
padding: 1rem 0;
width: 20rem;
margin: 100px auto;
box-shadow: 5px 5px 0 0 #ac3248;
}

.reignite{
height: 50px;
vertical-align: middle;
}

.title_eng{
display: block;
text-align: right;
margin-top: 5px;
font-size: 1rem;
}

.title_eng img{
vertical-align: baseline;
padding-right: 3px;
width: 3%;
}


/*ヘッダー-----------------------------------------*/
h1 img{
height: 10vh;
padding: 20px 10px 0;
}

.pc_title{
display: none;
}

@media(min-width: 768px){
.pc_title{
display: block;
width: 500px;
position: fixed;
z-index: -1;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
}
}

/*メインビジュアル---------------------------------------*/
.main_img{
text-align: center;
padding-top: 2vh;
}

.main_img img{
height: 65vh;
}

.main-visual{
width: 95%;
height: 90vh;
margin: 0 auto;
}


/*solution-------------------------------------------------*/
#solution h3{
font-size: 1.5rem;
font-weight: 700;
text-align: center;
padding: 12% 0;
}

.solution-img{
margin: 0 2.5%;
}

/*雲が順番に出てくるアニメーション*/
.solution-img img:nth-child(1){
width: 90%;
display: block;

opacity: 0;
animation: solution-animaition 1s forwards;
animation-delay: 0.5s;
}

.solution-img img:nth-child(2){
width: 85%;
margin-left: 15%;
display: block;

opacity: 0;
animation: solution-animaition 1s forwards;
animation-delay: 0.8s;
}

.solution-img img:nth-child(3){
width: 85%;
display: block;

opacity: 0;
animation: solution-animaition 1s forwards;
animation-delay: 1.1s;
}

.solution-img img:nth-child(4){
width: 85%;
margin-left: 15%;
display: block;

opacity: 0;
animation: solution-animaition 1s forwards;
animation-delay: 1.4s;
}

.solution-img img:nth-child(5){
width: 20%;
margin-left: 80%;
display: block;

opacity: 0;
animation: solution-animaition 1s forwards;
animation-delay: 1.7s;
}

@keyframes solution-animaition{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
/*アニメーション------ここまで*/

.benefit{
background-image: url("../images/benefit_img.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: #fff;
}

.benefit .font-size__large{
font-weight: 900;
text-shadow: 3px 3px 0 #fff;
}

.mottainai-img img{
width: 80%;
display: block;
margin: 0 auto 10%;
}


/*reason------------------------------------------------*/
#reason .title_img{
width: 80%;
}

#reason h4{
width: 90%;
margin: 50px auto;
text-align: center;
}


/*lesson-----------------------------------------------------*/
#lesson h3{
text-align: right;
}

#lesson .title_eng{
text-align: left;
}

#lesson .title_img{
width: 28%;
}

.lesson_txt{
text-align: center;
margin: 135% 0 10%;
}

/*disk*/
.disk{
position: relative;
}

.disk01{
position: absolute;
width: 55%;
top: 22%;
}

.disk02{
position: absolute;
width: 70%;
top: 41%;
right: 0;
}

.disk03{
position: absolute;
width: 55%;
top: 66%;
}

.lesson_subtitle{
position: absolute;
top: 90px;
}

#lesson p{
font-size: 16px;
}

/*students--------------------------------------------------*/
#students{
text-align: center;
}

#students .title_img{
margin-top: 30px;
width: 65%;
}

.students-1, .students-2, .students-3{
margin-top: 60px;
}

.students-1 img, .students-2 img, .students-3 img{
width: 80%;
}

.voice{
position: relative;
height: 100%;
}

.mega-1{
position: absolute;
top: 5.5%;
left: 0%;
width: 50%;
}

.mega-2{
position: absolute;
top: 33%;
right: 0;
width: 40%;
}

.mega-3{
position: absolute;
top: 79%;
left: 0;
width: 50%;
}

/*question--------------------------------------------------*/
#question h3{
text-align: center;
}

#question .title_img{
width: 30%;
margin-top: 20px;
}

/*inputを非表示*/
input[type="checkbox"].on-off{
  opacity: 0;
}

/*開閉エリア*/
.open{
  padding: 0 1em;
  height: 0;
  opacity: 0;
  transition: .5s;
}

/*「開く」をタップで表示*/
.on-off:checked  ~ .open{
  padding: 0.5em 1em;
  height: auto;
  opacity: 1;
}

/*下の要素のクリック範囲に影響を与えない*/
#question li:nth-child(1){
position: relative;
z-index: 1;
}

#question li:nth-child(2){
position: relative;
z-index: 2;
}

#question li:nth-child(3){
position: relative;
z-index: 3;
}

#question li:nth-child(4){
position: relative;
z-index: 4;
}

#question li:nth-child(5){
position: relative;
z-index: 5;
}

/*close------------------------------------------------------*/
#close p{
font-size: 20px;
font-weight: 700;
padding: 8% 9% 0;
}

@media(min-width: 768px){
#close p{
padding: 8% 0 0 60px;
}
}

.font__red{
color: #e63248;
}

.font-size__large__black{
font-size: 28px;
line-height: 1.25em;
}

.close_img{
margin-top: 8%;
width: 100%;
}

#close .lesson_btn{
padding: 0;
}

/*footer-----------------------------------------------------*/
footer{
background-color: #e63248;
color: #fff;
text-align: center;
}

footer img{
width: 50%;
margin: 12% 0 5%;
}

footer nav{
text-align: left;
padding-bottom: 30px;
display: flex;
justify-content: space-between;
margin: 0 12% 10%;
line-height: 2em;
}

footer p{
padding: 0.5rem 0;
}

.footeer-dotted{
border-top: 1px dotted #fff;
}

footer a{
color: #fff;
}

/*.text-line-left{
	display: flex;
	align-items: center;
}

.text-line-left:before {
	content: "";
	flex-grow: 1;
	height: 1px;
}

.text-line-left:before {
	margin-left: .4em;
	background: #ffaaaa;
}*/