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

#classArea{
background-color: #ffffff;
background-image: url(../images/content_bg.png);
background-position: left top;
background-size: 50px auto;
}
#classArea #pageTitle{
background-image: url(../images/class_pagetitle.jpg);
}





#classTab{
margin-top: 75px;
padding: 0 0 6px;
}
#classTab>div{
max-width: 1000px;
margin: 0 auto;
}
#classTab ul{
display: flex;
justify-content: center;
margin: 0 0 0 -50px;
}
#classTab ul li{
width: 33.33%;
padding-left: 50px;
}
#classTab ul li a{
position: relative;
display: flex;
align-items: center;
font-size: 1.5rem;
line-height: 1.5;
font-weight: 700;
background-color: #ffffff;
text-decoration: none;
border-radius: 100rem;
height: 90px;
padding: 0 30px;
transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
#classTab ul li a::before{
content: '';
display: block;
width: 16px;
height: 10px;
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
}
#classTab ul li#tabFood a{
color: #ec6a00;
border: 3px solid #ec6a00;
-webkit-box-shadow: 6px 6px 0 #ec6a00;
box-shadow: 6px 6px 0 #ec6a00;
}
#classTab ul li#tabEducation a{
color: #00a28b;
border: 3px solid #00a28b;
-webkit-box-shadow: 6px 6px 0 #00a28b;
box-shadow: 6px 6px 0 #00a28b;
}
#classTab ul li#tabBusiness a{
color: #009bdc;
border: 3px solid #009bdc;
-webkit-box-shadow: 6px 6px 0 #009bdc;
box-shadow: 6px 6px 0 #009bdc;
}
#classTab ul li#tabFood a::before{
background-image: url(../images/class_arrow_orange.png);
}
#classTab ul li#tabEducation a::before{
background-image: url(../images/class_arrow_green.png);
}
#classTab ul li#tabBusiness a::before{
background-image: url(../images/class_arrow_blue.png);
}
#classTab ul li#tabFood a:hover{
background-color: #ffe6d6;
transform: translate(3px, 3px);
-webkit-box-shadow: 3px 3px 0 #ec6a00;
box-shadow: 3px 3px 0 #ec6a00;
}
#classTab ul li#tabEducation a:hover{
background-color: #d1f0eb;
transform: translate(3px, 3px);
-webkit-box-shadow: 3px 3px 0 #00a28b;
box-shadow: 3px 3px 0 #00a28b;
}
#classTab ul li#tabBusiness a:hover{
background-color: #dbeffd;
transform: translate(3px, 3px);
-webkit-box-shadow: 3px 3px 0 #009bdc;
box-shadow: 3px 3px 0 #009bdc;
}

@media screen and (max-width: 999px){
#classTab{
margin-top: 30px;
padding: 0 20px 4px;
}
#classTab ul{
margin: 0 0 0 -10px;
}
#classTab ul li{
padding-left: 10px;
}
#classTab ul li a{
justify-content: center;
font-size: min(4vw, 1rem);
text-align: center;
height: 50px;
padding: 0 0 5px;
}
#classTab ul li a::before{
width: 10px;
height: 6px;
top: auto;
right: auto;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
}
#classTab ul li#tabFood a{
border: 2px solid #ec6a00;
-webkit-box-shadow: 4px 4px 0 #ec6a00;
box-shadow: 4px 4px 0 #ec6a00;
}
#classTab ul li#tabEducation a{
border: 2px solid #00a28b;
-webkit-box-shadow: 4px 4px 0 #00a28b;
box-shadow: 4px 4px 0 #00a28b;
}
#classTab ul li#tabBusiness a{
border: 2px solid #009bdc;
-webkit-box-shadow: 4px 4px 0 #009bdc;
box-shadow: 4px 4px 0 #009bdc;
}
#classTab ul li#tabFood a:hover{
transform: translate(2px, 2px);
-webkit-box-shadow: 2px 2px 0 #ec6a00;
box-shadow: 2px 2px 0 #ec6a00;
}
#classTab ul li#tabEducation a:hover{
transform: translate(2px, 2px);
-webkit-box-shadow: 2px 2px 0 #00a28b;
box-shadow: 2px 2px 0 #00a28b;
}
#classTab ul li#tabBusiness a:hover{
transform: translate(2px, 2px);
-webkit-box-shadow: 2px 2px 0 #009bdc;
box-shadow: 2px 2px 0 #009bdc;
}
}/*999*/





.classBox{
margin-top: 60px;
padding: 100px 0 0;
overflow: hidden;
}
.classBox>div{
display: flex;
flex-direction: column;
align-items: center;
padding: 100px 0;
}
#classFood>div{
background-color: #ffccac;
}
#classEducation>div{
background-color: #a3e0d7;
}
#classBusiness>div{
background-color: #b6dffb;
}
.classBox h2{
position: relative;
font-size: 3rem;
line-height: 1.5;
font-weight: 800;
text-align: center;
}
#classFood h2{
color: #d45f00;
}
#classEducation h2{
color: #006056;
}
#classBusiness h2{
color: #005eae;
}
.classBox h2::before{
content: '';
display: block;
width: 200px;
height: 300px;
position: absolute;
top: -200px;
left: 0;
transform: translateX(calc(-100% - 30px));
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% auto;
}
#classFood h2::before{
background-image: url(../images/class_food_heading.png);
}
#classEducation h2::before{
background-image: url(../images/class_education_heading.png);
}
#classBusiness h2::before{
background-image: url(../images/class_business_heading.png);
}
.classContent{
max-width: 1000px;
margin: 0 auto;
}
.classContent ul.list{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 0 0 -40px;
}
.classContent ul.list>li{
width: 50%;
padding: 0 0 0 40px;
margin: 80px 0 0;
}
.classContent ul.list>li figure{
position: relative;
}
.classContent ul.list>li figure .classParent{
width: 29.16%;
position: absolute;
top: 12%;
right: -3%;
}
.classContent ul.list>li figure #classEducationParent.classParent{
top: 27%;
}
.classContent ul.list>li .txt{
margin-top: 1em;
}
.classContent ul.list>li .txt .title{
position: relative;
font-size: 1.5rem;
line-height: 1.3;
font-weight: 800;
height: 80px;
}
.classContent ul.list>li .txt .title.icon{
padding-right: min(calc(31.25% + 5px), 150px);
}
.classContent ul.list>li .txt .title span{
display: block;
font-size: 70%;
margin-top: 0.2em;
}
.classContent ul.list>li .txt .title small{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 31.25%;
max-width: 150px;
}
.classContent ul.list>li .txt .lecturer{
font-size: 1.125rem;
line-height: 1.5;
font-weight: 800;
border-bottom: 1px solid #111111;
padding-bottom: 0.5em;
}
.classContent ul.list>li .txt .explain{
text-indent: 1em;
margin-top: 0.7em;
}
.classContent ul.list>li .txt .attention{
margin-top: 0.5em;
font-size: 75%;
}
.classContent ul.list>li .txt .btn{
margin: 20px 15px 0 0;
}
.classContent ul.list>li .txt .btn a{
position: relative;
display: flex;
justify-content: center;
align-items: center;
color: #111111;
font-size: 1rem;
line-height: 1.5;
font-weight: 800;
background-color: #fff33f;
text-align: center;
text-decoration: none;
border: 4px solid #45bdcf;
border-radius: 100rem;
height: 80px;
padding: 0 20px;
-webkit-box-shadow: 6px 6px 0 #45BDCF;
box-shadow: 6px 6px 0 #45BDCF;
transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.classContent ul.list>li .txt .btn a:hover{
background-color: #ffffff;
transform: translate(3px, 3px);
-webkit-box-shadow: 3px 3px 0 #45BDCF;
box-shadow: 3px 3px 0 #45BDCF;
}
.classContent ul.list>li .txt .btn a::before{
content: '';
display: block;
width: 60px;
height: 60px;
position: absolute;
right: -15px;
bottom: -22px;
background-image: url(../images/finger.png);
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
}
.classContent ul.list>li .txt .btn a::after{
content: '';
display: block;
width: 12px;
height: 20px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
margin-left: 10px;
}
#classEducationExperience{
margin-top: 80px;
}
#classEducationExperience h3{
max-width: 500px;
}
#classEducationExperienceContent{
background-color: #ffffff;
padding: 30px;
}
#classEducationExperienceContent .photoSlide ul{
display: flex;
justify-content: space-between;
}
#classEducationExperienceContent .photoSlide ul li{
width: calc(50% - 5px);
}
#classEducationExperienceContent .txt{
margin-top: 1em;
}
#classEducationExperienceContent .txt .title{
position: relative;
font-size: 1.5rem;
line-height: 1.3;
font-weight: 800;
}
#classEducationExperienceContent .txt .lecturer{
font-size: 1.125rem;
line-height: 1.5;
font-weight: 800;
border-bottom: 1px solid #111111;
padding-bottom: 0.5em;
margin-top: 2em;
}
#classEducationExperienceContent .txt .explain{
margin-top: 0.7em;
}
#classEducationExperienceContent .txt .explain p{
text-indent: 1em;
}
#classEducationExperienceContent .txt .explain ul{
text-indent: 2em;
}

@media screen and (max-width: 999px){
.classBox{
margin-top: 30px;
padding: 50px 0 0;
}
.classBox>div{
padding: 50px 0;
}
.classBox h2{
font-size: 1.375rem;
}
.classBox h2::before{
width: 90px;
height: 134px;
top: -100px;
left: 0;
transform: translateX(calc(-100% - 10px));
}
.classContent{
padding: 0 20px;
}
.classContent ul.list{
display: block;
margin: 0;
}
.classContent ul.list>li{
width: auto;
padding: 0;
margin: 50px 0 0;
}
.classContent ul.list>li#classFood05{
margin-top: 0;
}
.classContent ul.list>li .txt{
font-size: 0.875rem;
}
.classContent ul.list>li .txt .title{
font-size: 1.125rem;
height: auto;
}
.classContent ul.list>li .txt .lecturer{
font-size: 1rem;
margin-top: 1em;
}
.classContent ul.list>li .txt .btn{
margin: 20px 10px 0 0;
}
.classContent ul.list>li .txt .btn a{
font-size: min(3.2vw, 1rem);
border: 2px solid #45bdcf;
height: 60px;
}
.classContent ul.list>li .txt .btn a::before{
width: 40px;
height: 40px;
right: -15px;
bottom: -15px;
}
.classContent ul.list>li .txt .btn a::after{
width: 10px;
height: 16px;
}
#classEducationExperience{
margin-top: 50px;
}
#classEducationExperienceContent{
padding: 15px;
}
#classEducationExperienceContent .photoSlide ul{
display: block;
}
#classEducationExperienceContent .photoSlide ul li{
width: 100%;
}
#classEducationExperienceContent .txt{
font-size: 0.875rem;
}
#classEducationExperienceContent .txt .title{
font-size: 1.125rem;
}
#classEducationExperienceContent .txt .lecturer{
font-size: 1rem;
}
}/*999*/





.photoSlide .flickity-viewport,
.photoSlide .flickity-slider{
height: 100% !important;
}
.photoSlide .flickity-viewport{
overflow: hidden;
}
.photoSlide .flickity-prev-next-button{
display: none;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #45bdcf;
border: none;
padding: 0;
cursor: pointer;
}
.photoSlide .flickity-prev-next-button.previous{
left: 0;
transform: translate(-15px, -50%) rotate(180deg);
}
.photoSlide .flickity-prev-next-button.next{
right: 0;
transform: translate(15px, -50%);
}
.photoSlide .flickity-prev-next-button svg{
display: none;
}
.photoSlide .flickity-prev-next-button::before{
content: '';
display: block;
width: 12px;
height: 20px;
background-image: url(../images/slide_arrow.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
transform: translateX(1px);
}

@media screen and (max-width: 999px){
.photoSlide .flickity-prev-next-button{
display: flex;
width: 30px;
height: 30px;
}
.photoSlide .flickity-prev-next-button.previous{
transform: translate(-10px, -50%) rotate(180deg);
}
.photoSlide .flickity-prev-next-button.next{
transform: translate(10px, -50%);
}
.photoSlide .flickity-prev-next-button::before{
width: 10px;
height: 16px;
}
.photoSlide{
padding-top: 60.4%;
position: relative;
}
.photoSlide ul{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.photoSlide li{
width: 100%;
height: 100%;
background-color: #ffffff;
overflow: hidden;
}
.photoSlide li img{
width: 100%;
height: 100%;
object-fit: cover;
}
}/*999*/





#prevBtn{
display: flex;
flex-direction: column;
align-items: center;
padding: 100px 0 30px;
overflow: hidden;
}
#prevBtn .btn{
width: 100%;
max-width: 600px;
margin: 0 auto;
}
#prevBtn .btn a{
position: relative;
display: flex;
justify-content: center;
align-items: center;
color: #3f3a39;
font-size: 1.875rem;
line-height: 1.5;
font-weight: 800;
background-color: #fff33f;
text-align: center;
text-decoration: none;
border: 4px solid #45bdcf;
border-radius: 100rem;
height: 100px;
padding: 0 80px;
-webkit-box-shadow: 10px 10px 0 #45BDCF;
box-shadow: 10px 10px 0 #45BDCF;
transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
#prevBtn .btn a:hover{
background-color: #ffffff;
transform: translate(5px, 5px);
-webkit-box-shadow: 5px 5px 0 #45BDCF;
box-shadow: 5px 5px 0 #45BDCF;
}
#prevBtn .btn a::after{
content: '';
display: block;
width: 40px;
height: 30px;
position: absolute;
top: 50%;
left: 30px;
transform: translateY(-50%);
background-image: url(../images/arrow_reverse_blue.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
}

@media screen and (max-width: 999px){
#prevBtn{
padding: 50px 20px 20px;
}
#prevBtn .btn{
max-width: none;
}
#prevBtn .btn a{
height: auto;
font-size: 1.125rem;
padding: 15px 20px;
border: 2px solid #45bdcf;
-webkit-box-shadow: 5px 5px 0 #45BDCF;
box-shadow: 5px 5px 0 #45BDCF;
}
#prevBtn .btn a:hover{
transform: translate(3px, 3px);
-webkit-box-shadow: 2px 2px 0 #45BDCF;
box-shadow: 2px 2px 0 #45BDCF;
}
#prevBtn .btn a::after{
width: 20px;
height: 15px;
left: 15px;
}
}/*999*/