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

#mainVisual{
padding: 90px 0 50px;
overflow: hidden;
background-color: #45bdcf;
}
#mainVisual>div{
position: relative;
max-width: 1250px;
margin: 0 auto;
padding: 0 25px;
}
#mainVisualBox{
padding: 4% 20px 4%;
background-color: #fff33f;
border-radius: 40px;
background-image: url(../images/mainvisual_road.png);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 1200px auto;
overflow: hidden;
}
#mainVisualBox h2{
max-width: 800px;
margin: 0 auto;
}
#mainVisualBox figure{
max-width: 940px;
margin: 20px auto 0;
}
#mainVisualBox figure .sp{
display: none;
}
#mainVisualStart{
width: 190px;
position: absolute;
right: 0;
bottom: 0;
padding-bottom: 110px;
}

@media screen and (max-width: 1099px){
#mainVisualBox{
background-size: 110% auto;
}
#mainVisualStart{
width: 170px;
padding-bottom: 11%;
}
}/*1099*/

@media screen and (max-width: 999px){
#mainVisual{
padding: 60px 0 0;
}
#mainVisual>div{
max-width: 1240px;
margin: 0 auto;
padding: 0 20px;
}
#mainVisualBox{
padding: 6% 0 8%;
border-radius: 20px;
background-image: none;
}
#mainVisualBox h2{
padding: 0 10px;
}
#mainVisualBox figure{
max-width: none;
margin: 25px auto 0;
}
#mainVisualBox figure .pc{
display: none;
}
#mainVisualBox figure .sp{
display: block;
}
#mainVisualStart{
width: 28%;
padding-bottom: calc(40% - 20px);
}
}/*999*/





#aboutApp{
background-color: #45bdcf;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 0 100px;
}
#aboutApp h2{
position: relative;
font-size: 1.5rem;
line-height: 1.5;
width: 730px;
text-align: center;
color: #ffffff;
background-color: #45bdcf;
font-weight: 800;
padding: 15px 20px;
border: 4px solid #ffffff;
border-radius: 100rem;
transform: translateY(50%);
z-index: 2;
}
#aboutAppBox{
position: relative;
width: 1000px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #ffffff;
padding: 70px 20px 60px;
border-radius: 30px;
z-index: 1;
}
#aboutAppBox ul li{
position: relative;
padding-left: 16px;
font-weight: 600;
}
#aboutAppBox ul li::before{
content: '';
display: block;
width: 14px;
height: 14px;
position: absolute;
top: 0.9em;
left: 0;
transform: translateY(-50%);
border-radius: 50%;
background-color: #45bdcf;
}
#aboutAppBox ul li+li{
margin-top: 0.25em;
}

@media screen and (max-width: 999px){
#aboutApp{
padding: 0 20px 50px;
}
#aboutApp h2{
font-size: 1.125rem;
width: calc(100% - 50px);
padding: 10px;
border: 2px solid #ffffff;
}
#aboutAppBox{
width: 100%;
padding: 40px 20px 30px;
border-radius: 20px;
}
#aboutAppBox ul li{
font-size: 0.875rem;
}
}/*999*/





#mainContents>div{
padding: 100px 0;
display: flex;
flex-direction: column;
align-items: center;
}
#mainContents>div:nth-child(odd){
background-color: #ffffff;
background-image: url(../images/content_bg.png);
background-position: left top;
background-size: 50px auto;
}
#mainContents>div:nth-child(even){
background-color: #fff33f;
}
#mainContents .box{
width: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
#mainContents h2{
position: relative;
font-size: 3rem;
line-height: 1.5;
color: #45bdcf;
font-weight: 800;
text-align: center;
z-index: 1;
}
#mainContents h2::before{
content: '';
display: block;
width: 130px;
height: 130px;
position: absolute;
left: 0;
bottom: 0;
transform: translate(-50%, 10px);
z-index: -1;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
}

@media screen and (max-width: 999px){
#mainContents>div{
padding: 50px 20px;
}
#mainContents>div:nth-child(odd){
background-size: 40px auto;
}
#mainContents .box{
}
#mainContents h2{
font-size: 1.5rem;
}
#mainContents h2::before{
width: 65px;
height: 65px;
transform: translate(-50%, 5px);
}
}/*999*/





.photoSlide .flickity-viewport,
.photoSlide .flickity-slider{
height: 100% !important;
}
.photoSlide .flickity-viewport{
overflow: hidden;
}
.photoSlide .flickity-prev-next-button{
display: flex;
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);
}
.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;
}

@media screen and (max-width: 999px){
.photoSlide .flickity-prev-next-button{
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;
}
}/*999*/





#program h2::before{
background-image: url(../images/program_heading_icon.png);
}
#program ul.list{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: -10px 0 0 -40px;
}
#program ul.list>li{
width: 50%;
padding: 0 0 0 40px;
margin: 80px 0 0;
}
#program ul.list>li figure{
}
#program ul.list>li .txt{
margin-top: 1em;
}
#program ul.list>li .txt .attention{
margin-top: 0.5em;
font-size: 75%;
}
#program ul.list>li .txt .btn{
margin: 20px 15px 0 0;
}
#program ul.list>li .txt .btn a{
position: relative;
display: flex;
justify-content: center;
align-items: center;
color: #111111;
font-size: 1.375rem;
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;
}
#program 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;
}
#program 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%;
}
#program 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;
}

@media screen and (max-width: 999px){
#program ul.list{
display: block;
margin: -10px 0 0;
}
#program ul.list>li{
width: auto;
padding: 0;
margin: 50px 0 0;
}
#program ul.list>li .txt{
font-size: 0.875rem;
}
#program ul.list>li .txt .btn{
margin: 20px 10px 0 0;
}
#program ul.list>li .txt .btn a{
font-size: min(4.5vw, 1rem);
border: 2px solid #45bdcf;
height: 60px;
}
#program ul.list>li .txt .btn a::before{
width: 40px;
height: 40px;
right: -15px;
bottom: -15px;
background-image: url(../images/finger.png);
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
}
#program ul.list>li .txt .btn a::after{
width: 10px;
height: 16px;
}
}/*999*/





.fukidashiHeading{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.fukidashiHeading .fukidashi{
width: 160px;
position: absolute;
right: 0;
top: 0;
transform: translate(78%, -100%);
z-index: 0;
}

@media screen and (max-width: 999px){
.fukidashiHeading{
width: 100%;
}
.fukidashiHeading .fukidashi{
width: 100%;
max-width: 330px;
right: 50%;
padding: 0 0 0 0;
transform: translate(50%, -100%);
}
.fukidashiHeading .fukidashi img{
width: 80px;
margin-right: 0;
}
}/*999*/





#schoolLife h2::before{
background-image: url(../images/schoollife_heading_icon.png);
}
#schoolLife ul.list{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: -10px 0 0 -40px;
}
#schoolLife ul.list>li{
width: 50%;
padding: 0 0 0 40px;
margin: 80px 0 0;
}
#schoolLife ul.list>li figure{
}
#schoolLife ul.list>li .txt{
margin-top: 1em;
}
#schoolLife ul.list>li .txt .attention{
margin-top: 0.5em;
font-size: 75%;
}

@media screen and (max-width: 999px){
#schoolLife ul.list{
display: block;
margin: -10px 0 0;
}
#schoolLife ul.list>li{
width: auto;
padding: 0;
margin: 50px 0 0;
}
#schoolLife ul.list>li .txt{
font-size: 0.875rem;
}
}/*999*/





#cafeteria h2::before{
background-image: url(../images/cafeteria_heading_icon.png);
}
#cafeteria ul.list{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: -10px 0 0 -40px;
}
#cafeteria ul.list>li{
width: 50%;
padding: 0 0 0 40px;
margin: 80px 0 0;
}
#cafeteria ul.list>li figure{
}
#cafeteria ul.list>li .txt{
margin-top: 1em;
}
#cafeteria ul.list>li .txt .attention{
margin-top: 0.5em;
font-size: 75%;
}
#cafeteria ul.list>li #cafeteriaTxt01.txt{
position: relative;
padding-right: 175px;
}
#cafeteria ul.list>li #cafeteriaTxt01.txt #cafeteriaOff{
position: absolute;
top: -40px;
right: 0;
width: 164px;
}

@media screen and (max-width: 999px){
#cafeteria ul.list{
display: block;
margin: -10px 0 0;
}
#cafeteria ul.list>li{
width: auto;
padding: 0;
margin: 50px 0 0;
}
#cafeteria ul.list>li .txt{
font-size: 0.875rem;
}
#cafeteria ul.list>li #cafeteriaTxt01.txt{
padding-right: 115px;
}
#cafeteria ul.list>li #cafeteriaTxt01.txt #cafeteriaOff{
top: -30px;
width: 110px;
}
}/*999*/





#timeSchedule h2::before{
background-image: url(../images/timeschedule_heading_icon.png);
}
#timeSchedule p.lead{
text-align: center;
margin-top: 2em;
}
#timeSchedule>.box{
max-width: 1220px;
padding: 0 10px;
}
#timeSchedule .pc{
margin-top: 20px;
}
#timeSchedule .pc .attention{
font-size: 1.125rem;
text-align: center;
font-weight: 700;
margin-top: 3em;
}
#timeSchedule .pc .btn{
max-width: 600px;
margin: 50px auto 0;
}
#timeSchedule .pc .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: #ffffff;
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;
}
#timeSchedule .pc .btn a:hover{
background-color: #fff33f;
transform: translate(5px, 5px);
-webkit-box-shadow: 5px 5px 0 #45BDCF;
box-shadow: 5px 5px 0 #45BDCF;
}
#timeSchedule .pc .btn a::before{
content: '';
display: block;
width: 90px;
height: 90px;
position: absolute;
right: -35px;
bottom: -33px;
background-image: url(../images/finger.png);
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
}
#timeSchedule .pc .btn a::after{
content: '';
display: block;
width: 16px;
height: 28px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
margin-left: 20px;
}
#timeSchedule .sp{
display: none;
margin-top: 10px;
}
#timeSchedule .sp *+figure{
margin-top: 40px;
}
#timeSchedule .sp .btn{
margin-top: 20px;
}
#timeSchedule .sp .btn a{
position: relative;
display: flex;
justify-content: center;
align-items: center;
color: #111111;
font-size: min(4.5vw, 1rem);
line-height: 1.5;
font-weight: 800;
background-color: #ffffff;
text-align: center;
text-decoration: none;
border: 2px solid #45bdcf;
border-radius: 100rem;
height: 60px;
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;
}
#timeSchedule .sp .btn a:hover{
background-color: #fff33f;
transform: translate(3px, 3px);
-webkit-box-shadow: 3px 3px 0 #45BDCF;
box-shadow: 3px 3px 0 #45BDCF;
}
#timeSchedule .sp .btn a::before{
content: '';
display: block;
width: 40px;
height: 40px;
position: absolute;
right: -15px;
bottom: -15px;
background-image: url(../images/finger.png);
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
}
#timeSchedule .sp .btn a::after{
content: '';
display: block;
width: 10px;
height: 16px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
margin-left: 10px;
}
#timeSchedule .sp .attention{
margin-top: 1em;
font-size: 0.876rem;
padding-left: 1em;
text-indent: -1em;
}

@media screen and (max-width: 999px){
#timeSchedule p.lead{
font-size: 0.876rem;
text-align: left;
margin-top: 1.5em;
}
#timeSchedule>.box{
padding: 0;
}
#timeSchedule .pc{
display: none;
}
#timeSchedule .sp{
display: block;
}
}/*999*/





#voice{
overflow: hidden;
}
#voice h2::before{
background-image: url(../images/voice_heading_icon.png);
}
#voice p.lead{
text-align: center;
margin-top: 2em;
}
#voiceList{
position: relative;
width: 100%;
height: 335px;
overflow: hidden;
margin-top: 60px;
}
#voiceList ul{
height: 100%;
}
#voiceList ul li{
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 480px;
margin: 0 20px;
height: 220px;
padding: 30px;
background-color: #ededed;
border: 3px solid #3c3c3c;
border-radius: 30px;
}
#voiceList ul li::before{
content: '';
display: block;
position: absolute;
right: 14.5%;
bottom: 0;
width: 66px;
height: 40px;
transform: translateY(100%);
background-repeat: no-repeat;
background-position: center top;
background-size: 100% 100%;
z-index: 2;
}
#voiceList ul li:nth-child(even){
margin-top: 75px;
}
#voiceList ul li:nth-child(4n+1){
background-color: #fabe9d;
}
#voiceList ul li:nth-child(4n+2){
background-color: #aad8f0;
}
#voiceList ul li:nth-child(4n+3){
background-color: #aaf0b6;
}
#voiceList ul li:nth-child(4n+4){
background-color: #fff289;
}
#voiceList ul li:nth-child(4n+1)::before{
background-image: url(../images/voice_fukidashi_red.png);
}
#voiceList ul li:nth-child(4n+2)::before{
background-image: url(../images/voice_fukidashi_blue.png);
}
#voiceList ul li:nth-child(4n+3)::before{
background-image: url(../images/voice_fukidashi_green.png);
}
#voiceList ul li:nth-child(4n+4)::before{
background-image: url(../images/voice_fukidashi_yellow.png);
}
#voiceList ul li p.txt{
font-size: 1.25rem;
font-weight: 700;
}
#voiceList ul li p.signature{
font-size: 1.125rem;
text-align: right;
margin-top: 0.5em;
}
#voiceList .flickity-viewport,
#voiceList .flickity-slider{
height: 100% !important;
}
#voiceList .flickity-viewport{
height: 100%;
}
#voiceList .flickity-prev-next-button{
display: flex;
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;
}
#voiceList .flickity-prev-next-button.previous{
left: 50%;
transform: translate(-515px, calc(-50% - 20px)) rotate(180deg);
}
#voiceList .flickity-prev-next-button.next{
right: 50%;
transform: translate(515px, calc(-50% - 20px));
}
#voiceList .flickity-prev-next-button svg{
display: none;
}
#voiceList .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){
#mainContents #voice{
padding: 50px 0;
}
#voice p.lead{
font-size: 0.876rem;
text-align: left;
margin-top: 1.5em;
padding: 0 20px;
}
#voiceList{
height: 180px;
margin-top: 30px;
}
#voiceList ul li{
width: calc(100% - 40px);
margin: 0 7px;
height: 150px;
padding: 20px;
border: 2px solid #3c3c3c;
border-radius: 20px;
}
#voiceList ul li::before{
width: 45px;
height: 28px;
}
#voiceList ul li:nth-child(even){
margin-top: 0;
}
#voiceList ul li p.txt{
font-size: 0.875rem;
}
#voiceList ul li p.signature{
font-size: 0.75rem;
}
#voiceList .flickity-prev-next-button{
width: 30px;
height: 30px;
}
#voiceList .flickity-prev-next-button.previous{
left: 10px;
transform: translate(0, calc(-50% - 14px)) rotate(180deg);
}
#voiceList .flickity-prev-next-button.next{
right: 10px;
transform: translate(0, calc(-50% - 14px));
}
#voiceList .flickity-prev-next-button svg{
display: none;
}
#voiceList .flickity-prev-next-button::before{
width: 10px;
height: 16px;
}
}/*999*/





#movie h2::before{
background-image: url(../images/movie_heading_icon.png);
}
#movieBox{
position: relative;
width: 100%;
padding-top: 56.25%;
margin-top: 60px;
}
#movieBox iframe{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}

@media screen and (max-width: 999px){
#movieBox{
margin-top: 30px;
}
}/*999*/





#department h2::before{
background-image: url(../images/department_heading_icon.png);
}
.departmentBox{
margin-top: 100px;
}
.departmentBox:first-child{
margin-top: 60px;
}
.departmentBox h3{
position: relative;
font-size: 2.5rem;
line-height: 1.5;
font-weight: 800;
padding: 0 0 15px 180px;
pointer-events: none;
}
.departmentBox h3::before{
content: '';
display: block;
width: 160px;
padding-top: 80%;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% auto;
}
.departmentBox h3::after{
content: '';
display: block;
height: 3px;
position: absolute;
right: 0;
bottom: 0;
left: 120px;
background-color: #111111;
z-index: 1;
}
#department01.departmentBox h3{
color: #ec6a00;
}
#department02.departmentBox h3{
color: #00a28b;
}
#department03.departmentBox h3{
color: #009bdc;
}
#department01.departmentBox h3::before{
background-image: url(../images/department01_heading.png);
}
#department02.departmentBox h3::before{
background-image: url(../images/department02_heading.png);
}
#department03.departmentBox h3::before{
background-image: url(../images/department03_heading.png);
}
#department01.departmentBox h3::after{
background-color: #ec6a00;
}
#department02.departmentBox h3::after{
background-color: #00a28b;
}
#department03.departmentBox h3::after{
background-color: #009bdc;
}
.departmentBox h3 span{
display: block;
position: relative;
padding-right: 30px;
}
.departmentBox h3 span::before{
display: block;
width: 25px;
height: 25px;
position: absolute;
top: 50%;
right: 0;
border-radius: 50%;
background-color: #cdcdcd;
transform: translateY(-50%);
}
#department01.departmentBox h3 span::before{
background-color: #ec6a00;
}
#department02.departmentBox h3 span::before{
background-color: #00a28b;
}
#department03.departmentBox h3 span::before{
background-color: #009bdc;
}
.departmentBox h3 span::after{
display: block;
width: 25px;
height: 25px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%) rotate(90deg);
background-image: url(../images/slide_arrow.png);
background-repeat: no-repeat;
background-position: calc(50% + 1px) center;
background-size: 8px auto;
transition: transform 200ms ease;
}
.departmentBox h3.active span::after{
transform: translateY(-50%) rotate(-90deg);
}
.departmentBox ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: -20px 0 0 -40px;
}
.departmentBox ul li{
width: 50%;
padding-left: 40px;
margin-top: 60px;
}
.departmentBox ul li a{
display: block;
color: #111111;
text-decoration: none;
}
.departmentBox ul li figure{
overflow: hidden;
position: relative;
padding-top: 58%;
}
.departmentBox ul li figure img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}
.departmentBox ul li a:hover figure img{
transform: scale(1.1);
}
.departmentBox ul li .txt{
position: relative;
padding: 0.5em 100px 0 0;
}
.departmentBox ul li .txt::before{
content: '';
display: block;
width: 80px;
height: 80px;
position: absolute;
right: 5px;
top: -20px;
border-radius: 50%;
background-color: #cdcdcd;
transition: transform 200ms ease;
}
.departmentBox ul li a:hover .txt::before{
transform: scale(1.1);
}
#department01.departmentBox ul li .txt::before{
background-color: #ec6a00;
}
#department02.departmentBox ul li .txt::before{
background-color: #00a28b;
}
#department03.departmentBox ul li .txt::before{
background-color: #009bdc;
}
.departmentBox ul li .txt::after{
content: '';
display: block;
width: 80px;
height: 80px;
position: absolute;
right: 5px;
top: -20px;
background-image: url(../images/slide_arrow.png);
background-repeat: no-repeat;
background-position: calc(50% + 1px) center;
background-size: 12px auto;
}
.departmentBox ul li .txt p{
font-size: 1.25rem;
font-weight: 600;
}

@media screen and (max-width: 999px){
.departmentBox{
margin-top: 50px;
}
.departmentBox:first-child{
margin-top: 40px;
}
.departmentBox h3{
font-size: 1.25rem;
padding: 0 0 10px 90px;
pointer-events: all;
cursor: pointer;
}
.departmentBox h3::before{
content: '';
display: block;
width: 80px;
}
.departmentBox h3::after{
height: 2px;
left: 70px;
}
.departmentBox h3 span::before{
content: '';
}
.departmentBox h3 span::after{
content: '';
}
.departmentBox ul{
display: none;
margin: 0;
}
.departmentBox ul li{
width: auto;
padding-left: 0;
margin-top: 30px;
}
.departmentBox ul li:first-child{
margin-top: 20px;
}
.departmentBox ul li .txt{
padding: 0.3em 60px 10px 0;
}
.departmentBox ul li .txt::before{
width: 50px;
height: 50px;
top: -10px;
}
.departmentBox ul li .txt::after{
width: 50px;
height: 50px;
top: -10px;
background-position: calc(50% + 1px) center;
background-size: 8px auto;
}
.departmentBox ul li .txt p{
font-size: 0.875rem;
}
}/*999*/





.box99{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #fff33f;
}
#mainimage{
background-color: #ededed;
}
#box3{
display: block;
height: auto;
padding: 10% 0;
}
.box99:nth-child(odd){
background-color: #45bdcf;
}
/*.flickity-viewport,
.flickity-slider{
height: 100% !important;
}
.flickity-viewport{
overflow: hidden;
}
.flickity-prev-next-button{
position: absolute;
top: 50%;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #111111;
border: none;
padding: 0;
}
.flickity-prev-next-button.previous{
left: 0;
transform: translate(-20px, -50%);
}
.flickity-prev-next-button.next{
right: 0;
transform: translate(20px, -50%);
}
.flickity-prev-next-button svg{
display: none;
}*/
.syoku{
width: 40%;
padding-top: 24%;
position: relative;
}
.syoku ul{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.syoku ul li{
width: 100%;
height: 100%;
background-color: #ffffff;
overflow: hidden;
}
.syoku ul li:nth-child(even){
background-color: #45bdcf;
}
#gakkaWrap{
max-width: 1000px;
margin: 0 auto;
}
.gakka+.gakka{
margin-top: 100px;
}
.gakka h2{
font-size: 1.5rem;
line-height: 1.5;
color: #ffffff;
}
.gakka h2{
pointer-events: none;
}
.gakka input[type="checkbox"]{
display: none;
}
.gakka ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: -40px 0 0 -40px;
}
.gakka ul li{
width: 50%;
padding-left: 40px;
margin-top: 60px;
}
.gakka ul li a{
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
padding: 30% 0;
}

@media screen and (max-width: 999px){
#gakkaWrap{
padding: 0 20px;
}
.gakka h2{
pointer-events: all;
}
.gakka ul{
display: none;
margin: 0;
/*transition: height 200ms;*/
}
.gakka input[type="checkbox"]:checked+ul{
height: auto;
}
.gakka ul li{
width: auto;
padding-left: 0;
margin-top: 40px;
/*height: 0;
visibility: hidden;
opacity: 0;
transition: padding 200ms, height 200ms, visibility 0ms, opacity 200ms;*/
}
.gakka ul li:first-child{
margin-top: 0;
}
.gakka input[type="checkbox"]:checked+ul li{
height: auto;
visibility: visible;
opacity: 1;
}
}/*999*/





#access{
display: flex;
flex-direction: column;
align-items: center;
padding: 100px 0;
background-color: #fff33f;
overflow: hidden;
}
#access p.lead{
position: relative;
font-size: 2.5rem;
line-height: 1.5;
font-weight: 800;
text-align: center;
padding: 0 20px;
}
#access p.lead::before{
content: '';
display: block;
width: 3px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
background-color: #111111;
transform: rotate(-30deg);
transform-origin: center bottom;
}
#access p.lead::after{
content: '';
display: block;
width: 3px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
background-color: #111111;
transform: rotate(30deg);
transform-origin: center bottom;
}
#access .btn{
width: 100%;
max-width: 600px;
margin: 50px auto 0;
}
#access .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: #ffffff;
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;
}
#access .btn a:hover{
background-color: #fff33f;
transform: translate(5px, 5px);
-webkit-box-shadow: 5px 5px 0 #45BDCF;
box-shadow: 5px 5px 0 #45BDCF;
}
#access .btn a::after{
content: '';
display: block;
width: 40px;
height: 30px;
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
background-image: url(../images/arrow_blue.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
}

@media screen and (max-width: 999px){
#access{
padding: 50px 20px;
}
#access p.lead{
font-size: min(4.8vw, 1.5rem);
padding: 0 10px;
}
#access p.lead::before{
width: 2px;
}
#access p.lead::after{
width: 2px;
}
#access .btn{
max-width: none;
margin: 30px auto 0;
}
#access .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;
}
#access .btn a:hover{
transform: translate(3px, 3px);
-webkit-box-shadow: 2px 2px 0 #45BDCF;
box-shadow: 2px 2px 0 #45BDCF;
}
#access .btn a::after{
width: 20px;
height: 15px;
right: 15px;
}
}/*999*/