body {
opacity: 0;
}@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@font-face {
font-family: "avenir-roman", sans-serif;
src: url(/fonts/avenir-roman-regular.otf) format("opentype");
}
@media screen and (max-width: 1139px) {
main#top .topKvPanel {
background: none;
padding: 0;
position: relative;
}
main#top .topKvPanel:before {
background-image: url(//eyelog-school.net/image/top/top_kv_sp01.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
content: "";
display: block;
height: 140px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
main#top .topKvPanel:after {
background-image: url(//eyelog-school.net/image/top/top_kv_sp02.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
bottom: 0;
content: "";
display: block;
height: calc(100% - 175px);
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
main#top .topKvPanel .topKvTitle .topTxt {
top: -15px;
max-width: 270px;
}
main#top .topKvPanel .slidePanel .slideTxt ul {
height: 35px;
}
main#top .topKvPanel .topKvEntry {
position: fixed;
z-index: 100;
}
main#top #section__problem .problemContainer .problemMvBox .title {
mix-blend-mode: screen;
}
main#top #section__point {
padding: 50px 0 80px 40px;
}
main#top #section__point .secBoxList .secBox + .secBox {
margin-top: 50px;
}
main#top #section__curriculum {
padding: 60px 20px;
}
main#top #section__curriculum .secPanel .pHead .pTtl span {
display: block;
}
main#top #section__curriculum .copy {
margin: 40px 0 0;
}
main#top #section__teacher .teacherContainer {
padding: 80px 20px 60px;
}
main#top #section__teacher .teacherListContainer {
margin: 0;
}
main#top #section__teacher .teacherListPanel .teacherList ul dl {
padding-top: 18px;
text-align: center;
}
main#top #section__teacher .teacherListPanel + .teacherListPanel {
margin-top: 0px;
}
main#top #section__teacher .teacherListPanel .teacherList--03 ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 0 0 28px 0;
}
main#top #section__teacher .teacherListPanel .teacherList--03 ul li {
align-items: center;
aspect-ratio: 1/1;
border: 2px solid #fff;
border-radius: 100px;
color: #fff;
display: flex;
font-size: 12px;
justify-content: center;
letter-spacing: 0.1em;
margin: 0 3px 10px;
text-align: center;
width: 31%;
}
main#top #section__teacher .teacherListPanel .pTtl {
border-bottom: none;
}
main#top #section__teacher .teacherListPanel .pTtl h4 {
font-size: 14px;
line-height: 1.7;
padding-bottom: 14px;
}
main#top #section__teacher .teacherListPanel .pTtl .desc01 {
font-size: 12px;
line-height: 1.8;
padding-bottom: 60px;
text-align: center;
}
main#top #section__teacher .teacherListPanel .pTtl h3 {
border-bottom: 2px solid #ffffff;
font-size: 14px;
margin-bottom: 30px;
padding-bottom: 16px;
}
main#top #section__teacher .teacherListPanel .pTtl .desc02 {
font-size: 12px;
line-height: 1.8;
text-align: center;
}
main#top #section__teacher .teacherListPanel .morePanel {
display: none;
}
main#top #section__case .titlePanel {
padding: 60px 20px 0;
}
main#top #section__case .caseContainer {
display: block;
overscroll-behavior-x: none;
scroll-snap-type: none;
}
main#top #section__info .secTtlBox .secTtl {
font-family: "avenir-roman", sans-serif;
}
main#top #section__recommend .recommendContainer .recommendMvBox .title {
mix-blend-mode: screen;
}
.footer .footBox .left .copy {
margin-right: 10px;
}
}
@media screen and (min-width: 1140px) {
body {
font-family: "avenir-roman", "Noto Sans JP", sans-serif;
font-size: 0.83vw;
font-size: clamp(11px, 0.83vw, 16px);
}
body header.header .logo {
width: 13.5vw;
}
body header.header .headTitle {
font-size: 0.94vw;
font-size: clamp(8px, 0.94vw, 18px);
}
body header.header .headItem ul li.insta, body header.header .headItem ul li.line {
width: 1.5vw;
}
body header.header .headItem ul li.youtube {
width: 1.9vw;
}
body main#top .topKvPanel .topKvTitle {
padding-top: 4vw;
}
body main#top .topKvPanel .topKvTitle .topTxt {
max-width: initial;
top: -2vw;
width: 28.8vw;
}
body main#top .topKvPanel .topKvTitle .logo {
margin-bottom: 2vw;
max-width: initial;
width: 42.5vw;
}
body main#top .topKvPanel .topKvTitle .title {
max-width: initial;
width: 27vw;
}
body main#top .topKvPanel .topKvEntry {
position: fixed;
right: 1.7vw;
z-index: 100;
}
body main#top .topKvPanel .topKvEntry a {
height: 21.4vw;
width: 4.1vw;
}
body main#top .topKvPanel .topKvEntry a em {
font-size: 1.46vw;
font-size: clamp(11px, 1.46vw, 28px);
margin-bottom: 0.7vw;
}
body main#top #section__about {
padding: 10vw 0;
}
body main#top #section__about .slidePanel {
min-height: auto;
}
body main#top #section__about .slidePanel .txtPanel .txtBox {
width: 55.7%;
}
body main#top #section__about .slidePanel .txtPanel .txtBox .secTtl {
font-size: 3.1vw;
font-size: clamp(24px, 3.1vw, 60px);
margin-bottom: 2.5vw;
}
body main#top #section__about .slidePanel .txtPanel .txt01 {
font-size: 1.46vw;
font-size: clamp(11px, 1.46vw, 28px);
}
body main#top #section__about .slidePanel .txtPanel .txt02 {
margin: 2vw 0 0;
}
body main#top #section__about .slidePanel .txtPanel .txt03 {
margin: 3vw 0 0;
}
body main#top #section__problem {
padding: 3.1vw;
}
body main#top #section__problem .problemContainer .problemTxtBox {
padding: 6.5vw 6.7vw 6.5vw 5.2vw;
}
body main#top #section__problem .problemContainer .problemTxtBox .title {
margin: 0 0 3.6vw;
max-width: initial;
width: 23.5vw;
}
body main#top #section__problem .problemContainer .problemTxtBox .checkList ul li .left {
height: 4.5vw;
min-height: auto;
width: 4.5vw;
}
body main#top #section__problem .problemContainer .problemTxtBox .checkList ul li .left .check {
width: 2.1vw;
}
body main#top #section__problem .problemContainer .problemTxtBox .checkList ul li .right {
align-items: center;
display: flex;
font-size: 1vw;
font-size: clamp(8px, 1vw, 20px);
padding: 0 1.5vw;
width: calc(100% - 4.5vw);
}
body main#top #section__problem .problemContainer .problemTxtBox:before {
bottom: -1px;
height: 4.4vw;
width: 4.4vw;
}
body main#top #section__problem .problemContainer .problemMvBox .mv {
height: 46.3vw;
min-height: auto;
}
body main#top #section__problem .problemContainer .problemMvBox .title {
max-width: initial;
mix-blend-mode: screen;
}
body main#top #section__point {
padding: 4.6vw 3.1vw 4.6vw 8.3vw;
}
body main#top #section__point:before {
width: 3.1vw;
}
body main#top #section__point .secBoxList .secBox .photo {
height: 20vw;
}
body main#top #section__point .secBoxList .secBox .txtBox {
padding: 1vw 0;
}
body main#top #section__point .secBoxList .secBox .txtBox .point {
margin: 0 0 3.1vw;
padding: 0.1vw 0.2vw;
font-size: 1vw;
font-size: clamp(8px, 1vw, 20px);
}
body main#top #section__point .secBoxList .secBox .txtBox .txt {
font-size: 1.3vw;
font-size: clamp(10px, 1.3vw, 25px);
}
body main#top #section__point .secBoxList .secBox + .secBox {
margin: 2vw 0 0;
}
body main#top #section__curriculum {
padding: 6.7vw 11vw 7.1vw 16.6vw;
}
body main#top #section__curriculum .secTtlBox {
display: none;
}
body main#top #section__curriculum .secWrap02 {
max-width: inherit;
width: 66.6vw;
}
body main#top #section__curriculum .secWrap02 .topTxt {
margin: 0 0 6vw;
font-size: 1.3vw;
font-size: clamp(10px, 1.3vw, 25px);
}
body main#top #section__curriculum .secWrap02 .secPanelList .secPanel .pHead {
padding: 1.2vw 3vw;
}
body main#top #section__curriculum .secWrap02 .secPanelList .secPanel .pHead .num {
font-size: 4.6vw;
font-size: clamp(36px, 4.6vw, 90px);
right: -5.2vw;
top: -1vw;
}
body main#top #section__curriculum .secWrap02 .secPanelList .secPanel .pHead .pTtl h3 {
font-size: 1.8vw;
font-size: clamp(14px, 1.8vw, 35px);
}
body main#top #section__curriculum .secWrap02 .secPanelList .secPanel .pHead .pTtl h3 span {
font-family: "avenir-roman", sans-serif;
font-size: 1.9vw;
font-size: clamp(14px, 1.9vw, 36px);
margin-right: 1.5vw;
}
body main#top #section__curriculum .secWrap02 .secPanelList .secPanel .pBody .ttlEn {
font-size: 0.73vw;
font-size: clamp(8px, 0.73vw, 14px);
right: 3.1vw;
top: 2.5vw;
}
body main#top #section__curriculum .secWrap02 .secPanelList .secPanel .pBody .ttl {
font-size: 1vw;
font-size: clamp(8px, 1vw, 20px);
margin: 0 0 2vw;
}
body main#top #section__curriculum .secWrap02 .secPanelList .secPanel .pBody .box dl dt {
font-size: 0.83vw;
font-size: clamp(8px, 0.83vw, 16px);
margin: 0 0 0.7vw;
}
body main#top #section__curriculum .secWrap02 .secPanelList .secPanel .pBody .box dl dd {
font-size: 0.83vw;
font-size: clamp(8px, 0.83vw, 16px);
}
body main#top #section__curriculum .copy {
margin: 6vw 0 0;
}
body main#top #section__teacher {
padding: 0 3.1vw;
}
body main#top #section__teacher:before {
width: 3.1vw;
}
body main#top #section__teacher .teacherContainer {
padding: 10vw 0 5vw;
}
body main#top #section__teacher .teacherContainer .secWrap02 {
max-width: initial;
width: 66.6vw;
}
body main#top #section__teacher .teacherContainer .secWrap02 .secTtlBox {
margin: 0 0 5vw;
}
body main#top #section__teacher .teacherContainer .secWrap02 .secTtlBox .secTtl {
font-size: 3.1vw;
font-size: clamp(24px, 3.1vw, 60px);
}
body main#top #section__teacher .teacherContainer .secWrap02 .secTtlBox .sub {
font-size: 1.3vw;
font-size: clamp(10px, 1.3vw, 25px);
}
body main#top #section__teacher .teacherContainer .secWrap02 .teacherListContainer .teacherListPanel + .teacherListPanel {
margin-top: 3vw;
}
body main#top #section__teacher .teacherContainer .secWrap02 .teacherListContainer .teacherListPanel .pTtl {
border-bottom: none;
margin: 0;
padding: 0;
}
body main#top #section__teacher .teacherContainer .secWrap02 .teacherListContainer .teacherListPanel .pTtl h4 {
font-size: 1.3vw;
font-size: clamp(10px, 1.3vw, 25px);
letter-spacing: 0.1em;
padding-bottom: 1.6vw;
}
body main#top #section__teacher .teacherContainer .secWrap02 .teacherListContainer .teacherListPanel .pTtl .desc01 {
font-size: 0.73vw;
font-size: clamp(8px, 0.73vw, 14px);
letter-spacing: 0.1em;
line-height: 2;
padding: 0 0 8vw 0;
}
body main#top #section__teacher .teacherContainer .secWrap02 .teacherListContainer .teacherListPanel .pTtl h3 {
border-bottom: 2px solid #ffffff;
font-size: 1.8vw;
font-size: clamp(14px, 1.8vw, 35px);
margin-bottom: 2.3vw;
padding-bottom: 1.7vw;
}
body main#top #section__teacher .teacherContainer .secWrap02 .teacherListContainer .teacherListPanel .pTtl .desc02 {
font-size: 0.73vw;
font-size: clamp(8px, 0.73vw, 14px);
letter-spacing: 0.1em;
line-height: 2;
padding: 0 0 2vw 0;
}
body main#top #section__teacher .teacherContainer .secWrap02 .teacherListContainer .teacherListPanel .teacherList.teacherList--01 ul {
margin: 0 auto;
justify-content: center;
}
body main#top #section__teacher .teacherContainer .secWrap02 .teacherListContainer .teacherListPanel .teacherList.teacherList--01 ul li {
margin: 0 1.35vw;
}
body main#top #section__teacher .teacherContainer .secWrap02 .teacherListContainer .teacherListPanel .teacherList.teacherList--01 ul li dl {
padding-top: 1.4vw;
}
body main#top #section__teacher .teacherContainer .secWrap02 .teacherListContainer .teacherListPanel .teacherList.teacherList--01 ul li dl dt {
font-size: 0.73vw;
font-size: clamp(8px, 0.73vw, 14px);
margin-bottom: 0.5vw;
}
body main#top #section__teacher .teacherContainer .secWrap02 .teacherListContainer .teacherListPanel .teacherList.teacherList--01 ul li dl dd {
font-size: 1.3vw;
font-size: clamp(10px, 1.3vw, 25px);
}
body main#top #section__teacher .teacherContainer .secWrap02 .teacherListContainer .teacherListPanel .teacherList.teacherList--03 ul {
display: flex;
justify-content: space-between;
padding: 2vw 0;
}
body main#top #section__teacher .teacherContainer .secWrap02 .teacherListContainer .teacherListPanel .teacherList.teacherList--03 ul li {
align-items: center;
border: 2px solid #fff;
border-radius: 12.3vw;
color: #fff;
display: flex;
font-size: 1vw;
font-size: clamp(8px, 1vw, 20px);
height: 12.3vw;
justify-content: center;
letter-spacing: 0.1em;
text-align: center;
width: 12.3vw;
}
body main#top #section__teacher .teacherContainer .secWrap02 .morePanel {
display: none;
}
body main#top #section__teacher .teacherContainer .secWrap02 .morePanel .txtBox .ttl01 {
font-size: 0.73vw;
font-size: clamp(8px, 0.73vw, 14px);
margin: 0 0 0.5vw;
}
body main#top #section__teacher .teacherContainer .secWrap02 .morePanel .txtBox .ttl02 {
font-size: 1.6vw;
font-size: clamp(12px, 1.6vw, 30px);
margin: 0 0 0.5vw;
white-space: nowrap;
}
body main#top #section__case .titlePanel {
padding: 9vw 0 4vw;
}
body main#top #section__case .titlePanel .secTtlBox .secTtl {
font-size: 3.1vw;
font-size: clamp(24px, 3.1vw, 60px);
}
body main#top #section__case .titlePanel .secTtlBox .sub {
font-size: 1vw;
font-size: clamp(8px, 1vw, 20px);
}
body main#top #section__case .caseContainer {
scroll-snap-type: none;
}
body main#top #section__case .caseContainer .casePanel {
height: 44.5vw;
}
body main#top #section__case .caseContainer .casePanel .secBox .left {
height: 12.6vw;
min-height: initial;
}
body main#top #section__case .caseContainer .casePanel .secBox .left dl dt {
font-size: 2vw;
font-size: clamp(16px, 2vw, 40px);
margin-right: 1.7vw;
}
body main#top #section__case .caseContainer .casePanel .secBox .right {
font-size: 1.3vw;
font-size: clamp(10px, 1.3vw, 25px);
height: 12.6vw;
min-height: initial;
padding: 0.7vw 0.5vw 0.6vw 1vw;
white-space: nowrap;
}
body main#top #section__case .caseContainer .casePanel.casePanel02 {
background-image: url(/image/top/case_bg_02.jpg);
}
body main#top #section__case .caseContainer .casePanel.casePanel03 {
background-image: url(/image/top/case_bg_03.jpg);
}
body main#top #section__info {
padding: 3.1vw;
}
body main#top #section__info .infoSection {
padding: 7vw;
}
body main#top #section__info .infoSection .secWrap02 {
max-width: initial;
}
body main#top #section__info .infoSection .secWrap02 .secTtlBox {
margin-bottom: 3vw;
padding-bottom: 2vw;
}
body main#top #section__info .infoSection .secWrap02 .secTtlBox:after {
width: 5.5vw;
}
body main#top #section__info .infoSection .secWrap02 .secTtlBox .secTtl {
font-family: "avenir-roman", sans-serif;
font-size: 3.1vw;
font-size: clamp(24px, 3.1vw, 60px);
}
body main#top #section__info .infoSection .secWrap02 .secTtlBox .sub {
font-size: 1vw;
font-size: clamp(8px, 1vw, 20px);
}
body main#top #section__info .infoSection .secWrap02 .txt {
margin-bottom: 3vw;
}
body main#top #section__info .infoSection .secWrap02 .link a {
margin-bottom: 1vw;
width: 6.7vw;
}
body main#top #section__follow {
padding: 5.2vw 3.1vw 6.7vw 8.3vw;
}
body main#top #section__follow .secWrap {
max-width: initial;
}
body main#top #section__follow .secWrap .secBox .txtBox {
padding: 0;
}
body main#top #section__follow .secWrap .secBox .txtBox .secTtlBox {
margin-bottom: 3vw;
}
body main#top #section__follow .secWrap .secBox .txtBox .secTtlBox .secTtl {
font-family: "avenir-roman", sans-serif;
font-size: 3.1vw;
font-size: clamp(24px, 3.1vw, 60px);
}
body main#top #section__follow .secWrap .secBox .txtBox .secTtlBox .sub {
font-size: 1vw;
font-size: clamp(8px, 1vw, 20px);
}
body main#top #section__follow .secWrap .secBox .txtBox .txt01 {
line-height: 1.8;
margin-bottom: 3vw;
}
body main#top #section__recommend {
padding: 0 3.1vw;
}
body main#top #section__recommend .recommendContainer .recommendMvBox .mv {
height: 46.3vw;
min-height: initial;
}
body main#top #section__recommend .recommendContainer .recommendMvBox .title {
max-width: initial;
mix-blend-mode: screen;
width: 56.2%;
}
body main#top #section__recommend .recommendContainer .recommendTxtBox {
padding: 0 5.2vw 0 6.7vw;
}
body main#top #section__recommend .recommendContainer .recommendTxtBox .inner {
max-width: initial;
}
body main#top #section__recommend .recommendContainer .recommendTxtBox .inner .overview {
top: -3vw;
}
body main#top #section__recommend .recommendContainer .recommendTxtBox .inner .title {
margin-bottom: 3.6vw;
width: 26.6vw;
}
body main#top #section__recommend .recommendContainer .recommendTxtBox .inner .checkList ul li .left {
height: 4.4vw;
min-height: initial;
width: 4.4vw;
}
body main#top #section__recommend .recommendContainer .recommendTxtBox .inner .checkList ul li .left .check {
width: 1.87vw;
}
body main#top #section__recommend .recommendContainer .recommendTxtBox .inner .checkList ul li .right {
align-items: center;
display: flex;
font-size: 1vw;
font-size: clamp(8px, 1vw, 20px);
width: calc(100% - 4.4vw);
padding: 0 1.5vw;
}
body main#top #section__recommend .recommendContainer .recommendTxtBox .inner .btnEntry {
margin-top: 3vw;
}
body main#top #section__recommend .recommendContainer .recommendTxtBox .inner .btnEntry a {
padding: 1.5vw 0;
}
body main#top #section__recommend .recommendContainer .recommendTxtBox .inner .btnEntry a em {
font-size: 1.46vw;
font-size: clamp(11px, 1.46vw, 28px);
margin-right: 1.5vw;
}
body main#top #section__recommend .recommendContainer .recommendTxtBox .inner .btnEntry a span {
font-size: 0.73vw;
font-size: clamp(8px, 0.73vw, 14px);
}
body footer.footer {
padding: 10vw 8.3vw 4vw;
}
body footer.footer .secWrap01 {
max-width: initial;
}
body footer.footer .secWrap01 .logoBox {
margin-bottom: 7.7vw;
max-width: initial;
width: 42.5vw;
}
body footer.footer .secWrap01 .logoBox .sub {
margin-top: 1.5vw;
width: 27vw;
}
body footer.footer .secWrap01 .footBox .left {
font-size: 0.94vw;
font-size: clamp(8px, 0.94vw, 18px);
}
body footer.footer .secWrap01 .footBox .left .copy {
margin-right: 4vw;
}
body footer.footer .secWrap01 .footBox .right ul li.insta, body footer.footer .secWrap01 .footBox .right ul li.line {
width: 1.5vw;
}
body footer.footer .secWrap01 .footBox .right ul li.youtube {
width: 1.9vw;
}
}