@charset "UTF-8";

/*================================mainvisual================================*/
.mainvisual{
position: relative;
width: 100%;
max-width: 1920px;
margin: auto;
padding: 130px 0 0 0;
background: #fbebe8 ;
border-bottom: 1px solid #222;
}
.mainvisual .inner{
display: flex;
align-items: center;
height: 100%;
padding-right: 7%;
}
.mainvisual .catch{
display: flex;
align-items: center;
justify-content: center;
writing-mode: vertical-rl;
width: 6.5vw;
min-width:8.3rem;
font-size: 1.1rem;
}
.mainvisual video{
width:calc( 100% - 6vw);
border: 1px solid #222;
border-radius: 80px;
overflow: hidden;
}
.mainvisual .anime_car{
position: relative;
width: 100%;
padding-top:14%;
background: url(../images/parts-ohmiyajikyo.png) no-repeat top 18% center , url(../images/parts-line.svg) no-repeat bottom 30px center;
background-size:77.6% auto , 100% auto;
overflow: hidden;
}
.mainvisual .anime_car figure:nth-child(1){
aspect-ratio: 250/85;
width: 210px;
animation: animecar01 10s linear 0s infinite forwards;
}
@keyframes animecar01 {
0% {
position: absolute;
bottom: 42px;
left: -210px;
}
100% {
position: absolute;
bottom: 42px;
left: 100%;
}
}
.mainvisual .anime_car figure:nth-child(2){
aspect-ratio: 250/83;
width: 110px;
animation: animecar02 10s linear 0s infinite forwards;
}
@keyframes animecar02{
0% {
position: absolute;
bottom: 42px;
left: 100%;
}
100% {
position: absolute;
bottom: 42px;
left: -110px;
}
}
.mainvisual .anime_car figure img{
width: 100%;
height: auto;
}
@media  only screen and (max-width: 768px) {
.mainvisual{
width: 100%;
max-width: 100%;
margin: 70px auto 0;
padding: 0;
}
.mainvisual .inner{
display: block;
height: 100%;
padding: 16px 15px 0;
}
.mainvisual .catch{
display: block;
writing-mode: initial;
width: 100%;
min-width:100%;
font-size: 1.1rem;
line-height: 1.3;
padding: 0 0 16px;
text-align: center;
}
.mainvisual video{
width:100%;
border-radius: 6vw;
}
.mainvisual .anime_car{
position: relative;
width: 100%;
padding-top:25vw;
background:
url(../images/parts-ohmiyajikyo.png) no-repeat top 20% center ,
url(../images/parts-line.svg) no-repeat bottom 10% center;
background-size:calc(100% - 30px) auto , 240% auto;
overflow: hidden;
}
.mainvisual .anime_car figure:nth-child(1){
aspect-ratio: 250/83;
width: 100px;
animation: animecar01 10s linear 0s infinite forwards;
}
@keyframes animecar01 {
0% {
position: absolute;
bottom: 16%;
left: -100px;
}
100% {
position: absolute;
bottom: 16%;
left: 100%;
}
}
.mainvisual .anime_car figure:nth-child(2){
aspect-ratio: 250/83;
width: 65px;
animation: animecar02 10s linear 0s infinite forwards;
}
@keyframes animecar02{
0% {
position: absolute;
bottom: 16%;
left: 100%;
}
100% {
position: absolute;
bottom: 16%;
left: -65px;
}
}
.mainvisual .anime_car figure img{
width: 100%;
height: auto;
}
}

/*=============================== news ================================*/
.news{
position: relative;
width: 100%;
max-width: 1920px;
margin: auto;
padding: 150px 0 460px;
background: #fff url(../images/bg-news.png) no-repeat top center;
}
.news .inner{
position: relative;
width: 100%;
max-width: 1400px;
min-width: 1200px;
margin: auto ;
}
.news .inner h2{
width: 1200px;
margin: 0 auto 70px;
}
.news .inner h2 a{
text-decoration: none;
transition: 0.3s;
}
.news .inner h2 a:hover{
opacity: 0.7;
}
.news .inner h2 a > span:nth-child(1){
display: block;
color: #7ed485;
font-family: "Montserrat", sans-serif;
font-size: 11rem;
font-weight: 800;
letter-spacing: 3px;
margin-bottom: 20px;
}
.news .inner h2 a > span:nth-child(2){
display: inline-block;
color: #222;
font-size:2.5rem;
font-weight: 600;
}
.news .inner h2 a:hover{
color: #222;
opacity: 0.7;
}
.news .inner .slide{
padding: 0 80px;
}
.news .inner .slick-track{
display: flex;
gap: 30px;
}
.news .inner .slide li{
position: relative;
border-radius: 30px;
border: 1px solid #222;
overflow: hidden;
background: #fff;
}
.news .inner .slide li::after{
position: absolute;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
content: "MORE";
color: #fff;
font-family: "Montserrat", sans-serif;
font-size: 1.2rem;
width: 90px;
height: 30px;
padding-top: 2px;
border-radius: 30px 0 0;
background: #222;
}
.news .inner .slide li a{
text-decoration: none;
transition: 0.3s;
}
.news .inner .slide li a:hover{
opacity: 0.7;
color: #222;
}
.news .inner .slide li .wrap{
padding: 30px 40px 50px;
}
.news .inner .slide figure{
aspect-ratio: 368 / 280;
}
.news .inner .slide img{
object-fit: cover;
width: 100%;
height: 100%;
}
.news .inner .slide li p{
font-size: 2rem;
font-weight: 600;
height: auto;
line-height:1.6;
margin-bottom: 14px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
line-clamp: 2;
-webkit-line-clamp: 2;
}
.news .inner .slide li time{
font-family: "Montserrat", sans-serif;
color: #7ed485;
}
.news .inner .btn01{
position: absolute;
right: 90px;
top: 112px;
width: 190px;
margin: 0;
}
@media  only screen and (max-width: 768px) {
.news{
width: 100%;
max-width: 100%;
padding: 60px 0 50vw;
background: #fff url(../images/bg-lattice03.png) repeat top center;
}
.news .inner{
width: 100%;
max-width:100%;
min-width: 100%;
padding: 0 20px;
}
.news .inner h2{
width:100%;
margin: 0 0 30px;
}
.news .inner h2 a > span:nth-child(1){
font-size: 14vw;
margin-bottom:1vw;
}
.news .inner h2 a > span:nth-child(2){
font-size: 5vw;
}
.news .inner .slide{
width: calc(100% + 40px);
padding: 0;
margin-left: -20px;
}
.news .inner .slick-track{
display: flex;
gap: initial;
}
.news .inner .slide li{
border-radius: 20px;
}
.news .inner .slide .slick-slide{
margin: 0 5px;
}
.news .inner .slide li::after{
position: absolute;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
content: "MORE";
color: #fff;
font-family: "Montserrat", sans-serif;
font-size: 1.2rem;
width: 90px;
height: 30px;
padding-top: 2px;
border-radius: 30px 0 0;
background: #222;
}
.news .inner .slide li .wrap{
padding: 20px 20px 40px;
}
.news .inner .slide li p{
font-size: 1.3rem;
height: auto;
margin-bottom: 10px;
}
.news .inner .slide li time {
font-size: 1.2rem;
}
.news .inner .btn01{
width: 50vw;
position: initial;
margin: 40px auto 0;
}
}

/*=============================== reason ================================*/
.reason{
position: relative;
width: 100%;
max-width: 1920px;
margin: auto;
background: url(../images/bg-lattice02.png);
border-bottom: 1px solid #222;
}
.reason .inner{
position: relative;
top: -230px;
left: 50%;
transform: translateX(-50%);
width: 1600px;
background: #f7f3ee url(../images/bg-reason.svg) no-repeat top 200px center;
border: 1px solid #222;
border-radius: 80px;
padding: 150px 200px 150px;
}
.reason .inner h2{
text-align: center;
margin-bottom: 90px;
}
.reason .inner h2 a{
display: inline-block;
text-decoration: none;
transition: 0.3s;
}
.reason .inner h2 a:hover{
opacity: 0.7;
}
.reason .inner h2 a > span:nth-child(1){
display: inline-block;
color: #222;
font-size:3rem;
font-weight: 600;
margin-bottom: 26px;
}
.reason .inner h2 a > span:nth-child(2){
display: block;
color: #a9e1e1;
font-family: "Montserrat", sans-serif;
font-size: 16rem;
font-weight: 800;
letter-spacing: 3px;
}
.reason .inner h2 a:hover{
color: #222;
opacity: 0.7;
}
.reason .inner ol{
width: 1200px;
display: flex;
flex-wrap: wrap;
justify-content: center;
row-gap:70px;
}
.reason .inner ol li{
position: relative;
width: 270px;
}
.reason .inner ol li a{
text-decoration: none;
}
.reason .inner ol li p::before{
display: block;
aspect-ratio: 120/34;
content: "";
width: 130px;
height: auto;
position: absolute;
top: 4px;
left: -44px;
transform: rotate(-50deg);
}
.reason .inner ol li:nth-child(1) p::before{background: url(../images/reason-num01.svg) no-repeat; background-size: 100% auto;}
.reason .inner ol li:nth-child(2) p::before{background: url(../images/reason-num02.svg) no-repeat; background-size: 100% auto;}
.reason .inner ol li:nth-child(3) p::before{background: url(../images/reason-num03.svg) no-repeat; background-size: 100% auto;}
.reason .inner ol li:nth-child(4) p::before{background: url(../images/reason-num04.svg) no-repeat; background-size: 100% auto;}
.reason .inner ol li:nth-child(5) p::before{background: url(../images/reason-num05.svg) no-repeat; background-size: 100% auto;}
.reason .inner ol li:nth-child(6) p::before{background: url(../images/reason-num06.svg) no-repeat; background-size: 100% auto;}
.reason .inner ol li:nth-child(7) p::before{background: url(../images/reason-num07.svg) no-repeat; background-size: 100% auto;}
.reason .inner ol li:nth-child(2),.reason .inner ol li:nth-child(5),.reason .inner ol li:nth-child(7){
margin-top: 40px;
}
.reason .inner ol li:nth-child(1),.reason .inner ol li:nth-child(2){
margin-right: 76px;
}
.reason .inner ol li:nth-child(4),.reason .inner ol li:nth-child(5),.reason .inner ol li:nth-child(6){
margin-right: 40px;
}
.reason .inner ol li figure{
width: 270px;
height: 270px;
border-radius: 50%;
overflow: hidden;
background-color: #ddd;
border: 1px solid #222;
}
.reason .inner ol li figure img{
width: 100%;
height: auto;
}
.reason .inner ol li p{
font-size: 1.8rem;
font-weight: 600;
line-height: 1.5;
text-align: center;
margin-top: 20px;
}
.reason .inner ol li p span {
display: inline-block;
background: linear-gradient(transparent 60%, #fff100 40%);
}
.reason .inner .btn02{
position: absolute;
bottom: -43px;
left: 50%;
transform: translateX(-50%);
}
@media  only screen and (max-width: 768px) {
.reason{
width: 100%;
max-width:100%;
margin: auto;
background: url(../images/bg-lattice02.png);
}
.reason .inner{
position: relative;
top:-30vw;
width: calc(100% - 40px);
background: #f7f3ee url(../images/bg-reason.svg) no-repeat top 5vw center;
background-size: 100% auto;
border-radius: 30px;
padding: 70px 4vw 30px 4vw;
}
.reason .inner h2{
text-align: center;
margin-bottom: 50px;
}
.reason .inner h2 a > span:nth-child(1){
font-size: 5vw;
margin-bottom: 1vw;
}
.reason .inner h2 a > span:nth-child(2){
font-size: 14vw;
}
.reason .inner ol{
width: 100%;
display: block;
}
.reason .inner ol li{
width:100%;
}
.reason .inner ol li a{
display: flex;
align-items: center;
gap: 4vw;
margin-bottom: 5vw;
}
.reason .inner ol li:last-child{
margin-bottom: 0;
}
.reason .inner ol li:nth-child(2),.reason .inner ol li:nth-child(5),.reason .inner ol li:nth-child(7){
margin-top: 0;
}
.reason .inner ol li:nth-child(1),.reason .inner ol li:nth-child(2){
margin-right: 0;
}
.reason .inner ol li:nth-child(4),.reason .inner ol li:nth-child(5),.reason .inner ol li:nth-child(6){
margin-right: 0;
}
.reason .inner ol li figure{
aspect-ratio: 1/1;
width: 24vw;
height: 24vw;
}
.reason .inner ol li p{
position: relative;
flex: 1;
text-align: left;
font-size: 3.6vw;
line-height: 1.5;
margin-top: -5vw;
}
.reason .inner ol li p::before{
content: "";
aspect-ratio: 120/34;
width: 24vw;
height: auto;
position: initial;
transform: initial;
}
.reason .inner ol li:nth-child(1) p::before{background: url(../images/reason-num01.svg) no-repeat; background-size: 100% auto;}
.reason .inner ol li:nth-child(2) p::before{background: url(../images/reason-num02.svg) no-repeat; background-size: 100% auto;}
.reason .inner ol li:nth-child(3) p::before{background: url(../images/reason-num03.svg) no-repeat; background-size: 100% auto;}
.reason .inner ol li:nth-child(4) p::before{background: url(../images/reason-num04.svg) no-repeat; background-size: 100% auto;}
.reason .inner ol li:nth-child(5) p::before{background: url(../images/reason-num05.svg) no-repeat; background-size: 100% auto;}
.reason .inner ol li:nth-child(6) p::before{background: url(../images/reason-num06.svg) no-repeat; background-size: 100% auto;}
.reason .inner ol li:nth-child(7) p::before{background: url(../images/reason-num07.svg) no-repeat; background-size: 100% auto;}
.reason .inner ol li p br{
display: none;
}
.reason .inner .btn02{
position: absolute;
bottom: -6vw;
left: 50%;
transform: translateX(-50%);
width: 60%;
margin:auto;
}
}

/*=============================== course ================================*/
.course{
position: relative;
width: 100%;
max-width: 1920px;
margin: auto;
padding: 140px 0 840px;
background: url(../images/bg-course.jpg) no-repeat bottom center;
z-index: 1;
}
.course .inner{
position: relative;
width: 1200px;
margin: auto ;
}
.course .inner::before{
position: absolute;
right: 100px;
top:-460px;
content: "";
width: 130px;
height: 353px;
z-index: 1;
background: url(../images/parts-reason01.png) no-repeat;
pointer-events: none;
animation: animecourse01 3s linear 0s infinite forwards;
}
@keyframes animecourse01 {
0% {
position: absolute;
right: 100px;
top:-460px;
}
50% {
position: absolute;
right:100px;
top:-440px;
}
100% {
position: absolute;
right: 100px;
top:-460px;
}
}
.course .inner::after{
position: absolute;
left: -50px;
bottom:-270px;
content: "";
width: 129px;
height: 337px;
z-index: 1;
background: url(../images/parts-course03.png) no-repeat;
pointer-events: none;
animation: animecourse02 3s linear 0s infinite forwards;
}
@keyframes animecourse02 {
0% {
position: absolute;
left: -50px;
bottom:-270px;
}
50% {
position: absolute;
left: -50px;
bottom:-250px;
}
100% {
position: absolute;
left: -50px;
bottom:-270px;
}
}
.course .inner h2{
text-align: center;
margin-bottom: 50px;
}
.course .inner h2 a{
text-decoration: none;
transition: 0.3s;
}
.course .inner h2 a:hover{
opacity: 0.7;
}
.course .inner h2 a > span:nth-child(1){
display: inline-block;
color: #222;
font-size:3rem;
font-weight: 600;
margin-bottom: 26px;
}
.course .inner h2 a > span:nth-child(2){
display: block;
color: #fff06c;
font-family: "Montserrat", sans-serif;
font-size: 16rem;
font-weight: 800;
letter-spacing: 3px;
}
.course .inner h2 a:hover{
color: #222;
opacity: 0.7;
}
.course .inner .tag{
width: 1120px;
background: url(../images/bg-dotted.png);
padding: 35px 0;
margin: 0 auto 50px;
}
.course .inner .tag ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
width: 780px;
margin:auto;
}
.course .inner .tag ul li{
font-size: 1.6rem;
font-weight: 600;
background: #fff;
}
.course .inner .tag ul li a{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 40px;
height: 40px;
border: 1px solid #222;
padding: 0 20px;
transition: 0.3s;
pointer-events: none;
}
.course .inner .tag ul li a:hover{
color: #f67593;
border: 1px solid #f67593;
}
.course .inner .tag ul li a::before{
content: "#";
color: #f67593;
margin-right: 2px;
}
.course .inner .lessons_list{
display: flex;
justify-content: center;
}
.course .inner .lessons_list li{
position: relative;
width: 560px;
border: 1px solid #222;
background: #fff;
}
.course .inner .lessons_list li a{
color: #222;
display: block;
text-decoration: none;
transition: 0.3s;
padding-bottom: 110px;
background: #fff;
transition: 0.3s;
}
.course .inner .lessons_list li a:hover{
opacity: 0.7;
}
.course .inner .lessons_list li:nth-child(1) a{
background: #fff url(../images/parts-course01.png) no-repeat left 40px bottom 40px;
}
.course .inner .lessons_list li a::before{
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 272px;
color: #fff;
font-family: "Montserrat", sans-serif;
font-size: 1.5rem;
writing-mode: vertical-rl;
letter-spacing: 1px;
padding-top: 30px;
}
.course .inner .lessons_list li:nth-child(1) a::before{
position: absolute;
top: -1px;
left: -61px;
content: "Course Information 01";
border: 1px solid #222;
border-right: none;
border-radius: 10px 0 0 10px;
background: #6fa1db url(../images/icon/icon-course-check01.svg) no-repeat top 20px center;
}
.course .inner .lessons_list li:nth-child(2) a::before{
position: absolute;
top: -1px;
right: -61px;
content: "Course Information 02";
border: 1px solid #222;
border-left: none;
border-radius: 0 10px 10px 0;
background: #f67593 url(../images/icon/icon-course-check02.svg) no-repeat top 20px center;
}
.course .inner .lessons_list li:nth-child(2) a{
background: #fff url(../images/parts-course02.png) no-repeat left 40px bottom 40px;
}
.course .inner .lessons_list li .ttl{
display: block;
text-align: center;
width: 560px;
height: 170px;
padding-top: 40px;
}
.course .inner .lessons_list li .ttl span:nth-child(1){
display: block;
color: #6fa1db;
font-size: 5rem;
font-weight:700;
margin-bottom: 18px;
}
.course .inner .lessons_list li:nth-child(2) .ttl span:nth-child(1){
color: #f67593;
}
.course .inner .lessons_list li .ttl span:nth-child(2){
display: block;
font-family: "Montserrat", sans-serif;
font-size: 1.6rem;
font-weight:600;
}
.course .inner .lessons_list li figure{
aspect-ratio: 3/2;
width: 100%;
background: #ccc;
}
.course .inner .lessons_list li figure img{
width: 100%;
height: auto;
}
.course .inner .lessons_list li .more{
display: flex;
align-items: center;
height: 42px;
position: absolute;
right: 38px;
bottom: 30px;
font-family: "Montserrat", sans-serif;
font-size: 1.8rem;
font-weight: 600;
padding-right:58px ;
background: url(../images/icon/icon-arrow02.svg) no-repeat center right;
}
@media  only screen and (max-width: 768px) {
.course{
width: 100%;
max-width:100%;
padding: 60px 0 46vw;
background: url(../images/bg-course.jpg) no-repeat bottom center;
background-size: 150% auto;
}
.course .inner{
width: 100%;
padding: 0 20px;
}
.course .inner::before{
aspect-ratio: 130/353;
position: absolute;
right: 5px;
top:-72vw;
content: "";
width: 22vw;
height: auto;
background: url(../images/parts-reason01.png) no-repeat;
background-size: 100% auto;
}
@keyframes animecourse01 {
0% {
position: absolute;
right: 5px;
top:-76vw;
}
50% {
position: absolute;
right:5px;
top:-66vw;
}
100% {
position: absolute;
right: 5px;
top:-76vw;
}
}
.course .inner::after{
aspect-ratio: 129/337;
position: absolute;
left: 4px;
bottom:-60vw;
content: "";
width: 22vw;
height: auto;
background: url(../images/parts-course03.png) no-repeat;
background-size: 100% auto;
}
@keyframes animecourse02 {
0% {
position: absolute;
left: 4px;
bottom:-60vw;
}
50% {
position: absolute;
left: 4px;
bottom:-50vw;
}
100% {
position: absolute;
left: 4px;
bottom:-60vw;
}
}
.course .inner h2{
margin-bottom: 50px;
}
.course .inner h2 a > span:nth-child(1){
font-size: 5vw;
margin-bottom: 1vw;
}
.course .inner h2 a > span:nth-child(2){
font-size: 14vw;
}
.course .inner .tag{
width: 100%;
padding: 15px;
margin: 0 auto 80px;
}
.course .inner .tag ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
width: 100%;
margin:auto;
}
.course .inner .tag ul li{
width: calc((100% - 12px) / 3);
font-size: 3vw;
}
.course .inner .tag ul li a{
display: flex;
border-radius: 30px;
height: 24px;
padding: 0;
}
.course .inner .lessons_list{
display: block;
}
.course .inner .lessons_list li{
width: 100%;
margin-bottom: 70px;
}
.course .inner .lessons_list li a{
padding-bottom: 60px;
}
.course .inner .lessons_list li:nth-child(1) a{
background: #fff url(../images/parts-course01.png) no-repeat left 10px bottom 20px;
background-size: 30% auto;
}
.course .inner .lessons_list li a::before{
width: calc(100% + 2px);
height: 50px;
font-size: 3.6vw;
writing-mode: initial;
padding-top: initial;
}
.course .inner .lessons_list li:nth-child(1) a::before{
position: absolute;
top: -51px;
left: -1px;
border: 1px solid #222;
border-bottom: none;
border-radius: 10px 10px 0 0;
background: #6fa1db url(../images/icon/icon-course-check01.svg) no-repeat left 10px center;
}
.course .inner .lessons_list li:nth-child(2) a::before{
position: absolute;
top: -51px;
left: -1px;
border: 1px solid #222;
border-bottom: none;
border-radius: 10px 10px 0 0;
background: #f67593 url(../images/icon/icon-course-check02.svg) no-repeat left 10px center;
}
.course .inner .lessons_list li:nth-child(2) a{
background: #fff url(../images/parts-course02.png) no-repeat left 10px bottom 20px;
background-size: 30% auto;
}
.course .inner .lessons_list li .ttl{
display: block;
text-align: center;
width: 100%;
height: 30vw;
padding-top: 8vw;
}
.course .inner .lessons_list li .ttl span:nth-child(1){
font-size: 8vw;
margin-bottom: 3vw;
}
.course .inner .lessons_list li .ttl span:nth-child(2){
font-size: 3.6vw;
}
.course .inner .lessons_list li .more{
height: 24px;
position: absolute;
right: 15px;
bottom: 18px;
font-size: 4vw;
padding-right:40px;
background: url(../images/icon/icon-arrow02.svg) no-repeat center right;
background-size: 24px auto;
}
}

/*=============================== lessons ================================*/
.lessons{
position: relative;
width: 100%;
max-width: 1920px;
margin: auto;
background: url(../images/bg-lattice01.png);
z-index: 1;
}
.lessons .inner{
position: relative;
top: -80px;
width: 1200px;
margin: auto ;
padding-bottom: 80px;
}
.lessons .inner h2{
margin-bottom: 90px;
}
.lessons .inner h2 a{
text-decoration: none;
transition: 0.3s;
}
.lessons .inner h2 a:hover{
opacity: 0.7;
}
.lessons .inner h2 a > span:nth-child(1){
display: block;
color: #7ed485;
font-family: "Montserrat", sans-serif;
font-size: 16rem;
font-weight: 800;
letter-spacing: 3px;
}
.lessons .inner h2 a > span:nth-child(2){
display: inline-block;
color: #222;
font-size:3rem;
font-weight: 600;
}
.lessons .inner h2 a:hover{
color: #222;
opacity: 0.7;
}
.lessons .inner ol{
display: flex;
flex-wrap: wrap;
gap: 32px 20px;
}
.lessons .inner ol li{
width: 590px;
height: 155px;
transition: 0.3s;
}
.lessons .inner ol li:nth-child(1){background: url(../images/parts-lesson01.svg) no-repeat;}
.lessons .inner ol li:nth-child(2){background: url(../images/parts-lesson02.svg) no-repeat;}
.lessons .inner ol li:nth-child(3){background: url(../images/parts-lesson03.svg) no-repeat;}
.lessons .inner ol li:nth-child(4){background: url(../images/parts-lesson04.svg) no-repeat;}
.lessons .inner ol li:nth-child(5){background: url(../images/parts-lesson05.svg) no-repeat;}
.lessons .inner ol li a{
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #222;
font-size: 2.8rem;
font-weight: 600;
line-height: 1.5;
text-align: center;
background: url(../images/icon/icon-arrow03.svg) no-repeat center right 24px;
justify-content: flex-start;
width: 590px;
height: 155px;
padding-left: 46px;
text-align: left;
}
.lessons .inner ol li:hover{
opacity: 0.7;
}
.lessons .inner ol li:nth-child(1) a span{
display: block;
padding-left:80px;
background: url(../images/icon/icon-senior.svg) no-repeat left center;
}
.lessons .inner ol li:nth-child(2) a span{
display: block;
padding-left:80px;
background: url(../images/icon/icon-check.svg) no-repeat left center;
}
.lessons .inner ol li:nth-child(3) a span{
display: block;
padding-left:80px;
background: url(../images/icon/icon-handle.svg) no-repeat left center;
}
.lessons .inner ol li:nth-child(4) a span{
display: block;
padding-left:80px;
background: url(../images/icon/icon-drive.svg) no-repeat left center;
}
.lessons .slide .slick-track{
display: flex;
gap: 18px;
background: #fff;
padding: 20px 0 10px;
border-top: 1px solid #222;
}
.lessons .slide li{
padding-bottom: 80px;
background: url(../images/bg-lessons-slide.jpg) no-repeat bottom center;
}
@media  only screen and (max-width: 768px) {
.lessons{
position: relative;
width: 100%;
max-width: 100%;
margin: auto;
background: url(../images/bg-lattice01.png);
}
.lessons .inner{
position: relative;
top: -8vw;
width: 100%;
padding: 0 20px 7vw;
}
.lessons .inner h2{
margin-bottom: 60px;
}
.lessons .inner h2 a > span:nth-child(1){
font-size: 14vw;
}
.lessons .inner h2 a > span:nth-child(2){
font-size: 5vw;
margin-top: 1vw;
}
.lessons .inner ol{
display: block;
}
.lessons .inner ol li{
width: 100% ;
height: 24vw;
}
.lessons .inner ol li:nth-child(4),.lessons .inner ol li:nth-child(5){
width: 100%;
height: 24vw;
}
.lessons .inner ol li{
background-size: 100% auto;
margin-bottom: 8px;
}
.lessons .inner ol li:nth-child(1){background: url(../images/parts-lesson01-sp.svg) no-repeat; background-size: 100% auto;}
.lessons .inner ol li:nth-child(2){background: url(../images/parts-lesson02-sp.svg) no-repeat; background-size: 100% auto;}
.lessons .inner ol li:nth-child(3){background: url(../images/parts-lesson03-sp.svg) no-repeat; background-size: 100% auto;}
.lessons .inner ol li:nth-child(4){background: url(../images/parts-lesson04.svg) no-repeat; background-size: 100% auto;}
.lessons .inner ol li:nth-child(5){background: url(../images/parts-lesson05.svg) no-repeat; background-size: 100% auto;}
.lessons .inner ol li a{
justify-content: flex-start;
width: 100%;
height: 24vw;
font-size: 4vw;
text-align: left;
background: url(../images/icon/icon-arrow03.svg) no-repeat top 7.4vw right 4vw;
background-size: 6vw auto;
padding:0 0 2vw 6vw;
}
.lessons .inner ol li:nth-child(4) a,.lessons .inner ol li:nth-child(5) a{
justify-content: flex-start;
width: 100%;
height: 24vw;
padding-left:6vw;
}
.lessons .inner ol li:nth-child(1) a span{
background: url(../images/icon/icon-senior.svg) no-repeat left center;
}
.lessons .inner ol li:nth-child(2) a span{
background: url(../images/icon/icon-check.svg) no-repeat left center;
}
.lessons .inner ol li:nth-child(3) a span{
background: url(../images/icon/icon-handle.svg) no-repeat left center;
}
.lessons .inner ol li:nth-child(4) a span{
background: url(../images/icon/icon-drive.svg) no-repeat left center;
}
.lessons .inner ol li:nth-child(5) a span{
background: url(../images/icon/icon-operation.svg) no-repeat left center;
}
.lessons .inner ol li a span{
display: flex!important;
align-items: center!important;
height: 100%;
padding: 0 0 0 13vw!important;
background-size: 9vw auto!important;
}
.lessons .slide .slick-track{
display: flex;
gap: 8px;
background: #fff;
padding: 8px 0 0;
border-top: 1px solid #222;
}
.lessons .slide li{
padding-bottom: 8.5vw;
background: url(../images/bg-lessons-slide.jpg) no-repeat bottom center;
background-size: 100% auto;
}
.lessons .slide li img{
width: 100%;
height: auto;
}
}