/* 1. まずベースとして「PC大画面・固定」を指定（1500px以上のときはこれが適用） */
html {
  font-size: 10px;
}


/* 2. 1499px以下になったら、PC・タブレット可変用に上書き */
@media (max-width: 1200px) {
  html {
    font-size: 0.8333333vw;
  }
}

/* 3. 599px以下になったら、スマホ用にさらに上書き */
@media (max-width: 600px) {
  html {
    font-size: 1.666667vw;
  }
}


#header .content{
max-width: 120rem;
margin: auto auto 5rem auto;
padding: 0 2rem;
}

#footer .content{
max-width: 120rem;
}

.elearning main > article > h1{
max-width: 120rem;
padding: 0 2rem;
margin: auto auto 5rem auto;
}

.elearning main > article > h1 span{
display: block;
background-color: #1256AC;
color: #fff;
border-radius: 7px;
padding-left: 0.9em;
line-height: 7rem;
font-size: 2.4rem;
}


#single main > article > section{
max-width: 120rem;
padding: 0 5rem 10rem 5rem;
margin: auto;
}

#single section h3{
background-color: #E2EDFB;
color: #334;
border-radius: 7px;
margin-bottom: 3rem;
padding-left: 0.9em;
line-height: 5rem;
font-size:1.8rem;
}

/*
HOME
*/

#home main > article > h1{
margin-bottom: 4rem;
}

#home main > article > h1 span{
background-color: #E2EDFB;
color: #334;
}

#home main > article > h1 + p{
max-width: 120rem;
padding:0 5rem 0 5rem;
margin:0 auto 8rem auto;
line-height: 1.8;
font-size: 2.4rem;
}

#home main > article > section{
max-width: 120rem;
padding: 0 2rem 8rem 2rem;
}

#home main > article > section:nth-of-type(even){
background-color: #fff;
max-width: 120rem;
padding: 0 2rem 8rem 2rem;
}

#home main > article > section h2{
margin-bottom: 4rem;
font-size: 2.4rem;
}

#home main > article > section h2 span{
display: block;
color: #fff;
border-radius: 7px;
padding-left: 0.9em;
line-height: 7rem;
font-size: 2.4rem;
}

#home main > article > section:nth-of-type(1) h2 span{
background-color: #1256AC;
}
#home main > article > section:nth-of-type(2) h2 span{
background-color: #02AB52;
}
#home main > article > section:nth-of-type(3) h2 span{
background-color: #F8883C;
}

#home main > article > section .content{
padding: 0 9rem;
}

#home main > article > section .content p{
line-height: 1.8;
font-size: 2rem;
letter-spacing: 0.1em;
}

#home main > article > section .content p:last-of-type{
margin-top: 6rem;
font-size: 2.4rem;
text-align: center;
}

#home main > article > section .content p:last-of-type a,
#home section p:last-of-type label{
position: relative;
display: inline-block;
color: #fff;
border-radius: 7px;
width: 48rem;
padding: 2rem;
line-height: 1;
letter-spacing: 0.15em;
text-align: center;
cursor: pointer;
transition: all 0.3s ease-in-out;
}

#home main > article > section .content p:last-of-type a:link,
#home main > article > section .content p:last-of-type a:visited{
color:#fff
}

#home main > article > section:nth-of-type(1) .content p:last-of-type a:link,
#home main > article > section:nth-of-type(1) .content p:last-of-type a:visited{
background-color: #1256AC;
}
#home main > article > section:nth-of-type(2) .content p:last-of-type a:link,
#home main > article > section:nth-of-type(2) .content p:last-of-type a:visited{
background-color: #02AB52;
}
#home p:last-of-type label{
background-color: #F8883C;
}

#home main > article > section .content p:last-of-type a::after,
#home section label::after{
content: "";
position: absolute;
top: 50%;
right: 1em;
display: block;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
width: 7px;
height: 7px;
transition: all 0.3s ease-in-out;
}
#home main > article > section:nth-of-type(1) .content p:last-of-type a::after,
#home main > article > section:nth-of-type(2) .content p:last-of-type a::after{
transform: translateY(-50%) rotate(45deg);
}
#home section label::after{
transform: translateY(-50%) rotate(135deg);
}


#home main > article > section .content p:last-of-type a img,
#home main > article > section .content p:last-of-type label img{
margin-right: 1em;
}

#home section input{
display: none;
}

#home section input:checked + p label::after{
transform: translateY(-50%) rotate(-45deg);
}

#home section:nth-of-type(3) ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
overflow: hidden;
height: 0;
margin-top: 5rem;
font-size: 1.6rem;
letter-spacing: 0.15em;
list-style: none;
opacity: 0;
transition: all 0.3s ease-in-out;
}

#home section:nth-of-type(3) input:checked + p + ul{
height:28rem;
opacity: 1;
}

#home main > article > section:nth-of-type(3) ul li{
width: 18.36735%;
margin-bottom: 2rem;
}

#home main > article > section:nth-of-type(3) ul li a{
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
padding: 1em 0;
}

#home main > article > section:nth-of-type(3) ul li a:link,
#home main > article > section:nth-of-type(3) ul li a:visited{
background-color: #F9E7DB;
color: #334;
}

/*
MOVIE
*/

#movie main > article > section{
max-width: 120rem;
padding: 0 5rem 10rem 5rem;
margin: auto;
}

#movie main > article > section .content{
max-width: 110rem;
margin: auto;
}
#movie main > article > section .content > div{
display: flex;
align-items: center;
overflow: hidden;
border-width: 1px 1px 1px 5px;
border-style:solid;
border-radius: 7px;
padding: 4rem 4rem 4rem 0;
margin-bottom: 5rem;
}
#movie main > article > section .content > div:last-child{
margin-bottom: 0;
}

#movie main > article > section .content > div > p:first-child{
display: flex;
align-items: center;
justify-content: center;
width: 13.5rem;
font-size: 3rem;
font-weight: 700;
}

#movie main > article > section .content > div > div:first-child{
border-left-width:5px;
border-left-style: solid;
}

#movie main > article > section .content h2{
margin-bottom: 0.7rem;
line-height: 1.6;
font-size: 2.4rem;
}

#movie main > article > section .content .text{
border-left-width:1px;
border-left-style: solid;
width: 72rem;
padding: 0 7rem;
}

#movie main > article > section .content .text p{
font-size: 1.6rem;
line-height: 1.8;
}

#movie main > article > section .content .btn{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
width: 20rem;
}

#movie main > article > section .content .btn a{
display: block;
border-width: 1px;
border-style: solid;
border-radius: 7px;
width: 20rem;
padding: 1.3rem;
line-height: 1;
font-size: 1.8rem;
font-weight: 700;
text-align: center;
}

#movie main > article > section .content .btn a:first-child{
color: #f00;
border-color: #f00;
margin-bottom: 2rem;
}

#movie main > article > section .content .btn a:last-child{
color: #FABE00;
border-color: #FABE00;
}

#movie main > article > section .content .btn a img{
margin-left: 0.6em;
}


#movie main > article > section .content .movie-00 > p,
#movie main > article > section .content .movie-06 > p{
writing-mode:vertical-rl;
}

#movie .movie-00,
#movie .movie-06{
border-color:#B8CDE7;
border-left-color: #1256AC;
}
#movie .movie-00 p:first-child,
#movie .movie-00 h2,
#movie .movie-06 p:first-child,
#movie .movie-06 h2{
color:#1256AC;
}
#movie .movie-00 .text,
#movie .movie-06 .text{
border-left-color:#B8CDE7;
}

#movie .movie-01{
border-color:#CFE3FA;
border-left-color: #5FA1EE;
}
#movie .movie-01 p:first-child,
#movie .movie-01 h2{
color:#5FA1EE;
}
#movie .movie-01 .text{
border-left-color:#CFE3FA;
}


#movie .movie-02{
border-color:#DCECD2;
border-left-color: #8ABF66;
}
#movie .movie-02 p:first-child,
#movie .movie-02 h2{
color:#8ABF66;
}
#movie .movie-02 .text{
border-left-color:#DCECD2;
}

#movie .movie-03{
border-color:#FAD9E1;
border-left-color: #EE7E98;
}
#movie .movie-03 p:first-child,
#movie .movie-03 h2{
color:#EE7E98;
}
#movie .movie-03 .text{
border-left-color:#FAD9E1;
}

#movie .movie-04{
border-color:#D4D4E9;
border-left-color: #6F6EB5;
}
#movie .movie-04 p:first-child,
#movie .movie-04 h2{
color:#6F6EB5;
}
#movie .movie-04 .text{
border-left-color:#D4D4E9;
}

#movie .movie-05{
border-color:#FDDCC5;
border-left-color: #F8883C;
}
#movie .movie-05 p:first-child,
#movie .movie-05 h2{
color:#F8883C;
}
#movie .movie-05 .text{
border-left-color:#FDDCC5;
}

/*
CHALLENGE
*/

#challenge main > article > h1 span{
background-color: #02AB52;
}

#challenge main > article > section{
max-width: 120rem;
padding: 0 2rem 8rem 2rem;
}

#challenge main > article > section:nth-of-type(even){
background-color: #fff;
max-width: 120rem;
padding: 0 2rem 8rem 2rem;
}

#challenge main > article > section .content{
max-width: 110rem;
margin: auto;
}

#challenge main > article > section h2{
margin-bottom: 5rem;
font-size: 2.4rem;;
text-align: center;
}

#challenge main > article > section:nth-of-type(1) h2{
color:#5aa15a;
}

#challenge main > article > section:nth-of-type(2) h2{
color:#5a61a1;
}

#challenge section .content p:first-of-type,
#challenge table + p{
font-size: 1.8rem;
font-weight: 700;
text-align: center;
}

#challenge .content p:first-of-type{
margin-bottom: 1rem;
}

#challenge table + p{
color: #f00;
}

#challenge table{
width: 90%;
margin: auto  auto 1rem auto;
font-size: 1.6rem;
}

#challenge th,
#challenge td{
border: 1px solid #ddd;
padding: 0.5em;
text-align: center;
}

#challenge thead th{
background-color: #e4e4e4;
text-align: center;
}

#challenge th{
background-color: #f2f2f2;
}

#challenge section:nth-of-type(2) table thead th:first-child{
width: 60%;
}

#challenge table a{
display: block;
}

#challenge section:nth-of-type(1) tr:nth-child(1) td:first-child,
#challenge section:nth-of-type(1) tr:nth-child(1) td:nth-child(2){
background-color: #ecf5ff;
}

#challenge section:nth-of-type(1) tr:nth-child(5) td:first-child,
#challenge section:nth-of-type(1) tr:nth-child(5) td:nth-child(2){
background-color: #f3ffec;
}

#challenge section:nth-of-type(1) tr:nth-child(7) td:first-child,
#challenge section:nth-of-type(1) tr:nth-child(7) td:nth-child(2),
#challenge section:nth-of-type(1) tr:nth-child(9) td:first-child,
#challenge section:nth-of-type(1) tr:nth-child(9) td:nth-child(2){
background-color: #f1f1f8;
}

#challenge section:nth-of-type(1) tr:nth-child(11) td:first-child,
#challenge section:nth-of-type(1) tr:nth-child(11) td:nth-child(2){
background-color: #fff1f4;
}

#challenge section:nth-of-type(1) tr:nth-child(17) td:first-child,
#challenge section:nth-of-type(1) tr:nth-child(17) td:nth-child(2){
background-color: #fff5ed;
}