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

@media screen and (max-width: 1024px) {
    img {
        max-width: 100%;
    }
    #mainVisual h1,#intro div,#features dl,#link ul,.sectionYoutubeBox01,.sectionYoutube,#sectionLineZoom .sectionLineZoomBox01,#reservation,#sectionLineZoom {
        width: auto;
    }
    #intro div {
        padding: 70px 5%;
    }
    #link ul {
        margin: 0 2%;
    }
    #link ul li {
        width: 48%;
    }
    #link ul li p {
        font-size: 16px;
    }
    .sectionYoutubeLink01 li {
        width: 30%;
    }
    #sectionLineZoom h2 {
        font-size: 35px;
    }
    #sectionLineZoom h2 img {
        margin-right: 10px;
        height: 2.5rem;
    }
    #sectionLineZoom .sectionLineZoomBox02 {
        padding: 0 5%;
    }
    #sectionLineZoom .sectionLineZoomBox02 section {
        width: 47%;
    }
    #sectionLineZoom .sectionLineZoomBox02 section:first-child {
        padding: 0 3% 0 0;
    }
    #sectionLineZoom .sectionLineZoomBox02 section .flow ol li.date p {
        margin-left: 10px;
    }
    #reservation dl {
        width: 50%;
    }
    #reservation .photo01 {
        width: 52%;
    }

}

@media screen and (max-width: 599px) {
    #intro div {
        font-size: 3.85vw;
        letter-spacing: 0;
        padding: 4vh 6%;
        background: url(/online/images/introBg01.png) 100% 95% no-repeat;
        background-size: 35% auto;
    }
    #intro div p {
        line-height: 1.6;
        letter-spacing: -0.05em;
    }
    #features {
        padding: 3vh 3.5%;
    }
    #features dl {
        box-shadow: 1px 1px rgba(0,51,106,1);
    }
    #features dl dt {
        padding: 3vw 0;
        font-size: 4.25vw;
    }
    #features dl dd {
        padding: 4vw 0 5vw;
    }
    #features dl dd ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #features dl dd ul li {
        width: 43%;
        margin: 0 1.5%;
    }
    #features dl dd ul li:first-child {
        margin: 0 7% 4vw;
    }
    #features dl dd ul li strong {
        top: 3.2vw;
        font-size: 3.5vw;
    }
    #features dl dd ul li .baloon {
        right: -4vw;
        width: 30%;
    }
    #link {
        background: url(/online/images/linkBg01.png) 0 0 repeat-x;
        padding: 18vw 0 0;
        background-size: auto 9vw;
    }
    #link ul {
        display: block;
        margin: 0;
    }
    #link ul li {
        width: 85%;
        margin: 0 auto;
        background: url(/online/images/linkArrow01.png) 50% 86% no-repeat;
        padding-bottom: 15vw;
        background-size: 7.5% auto;
    }
    #link ul li dl {
        padding-top: 9vw;
        height: auto;
        box-shadow: 1px 1px rgba(0,51,106,1);
    }
    #link ul li dl dt img {
        width: 65%;
    }
    #link ul li dl dd {
        font-size: 5.4vw;
    }
    #link ul li:first-child dl dd span {
        font-size: 5vw;
    }
    #link ul li dl dd .linkLogo {
        position: static;
        width: 45%;
        margin: 4.5vw auto 6vw;
    }
    #link ul li p {
        font-size: 4.2vw;
        letter-spacing: 0;
        margin-top: 3.5vw;
        letter-spacing: -0.05em;
    }
    #link ul li dl dd .linkLogo img {
        width: auto;
        margin: 0 auto;
        height: 12vw;
        max-width: 100%;
    }
    #link ul li #linkBox01 {
        box-shadow: 1px 1px rgba(0,51,106,1);
    }
    #link ul li #linkBox01 dl:first-child{
        border-right: 1px solid #00336a;
    }
    #link ul li #linkBox01 dt img {
        width: 85%;
    }
    #link ul li #linkBox01 dd {
        font-size: 4.8vw;
        letter-spacing: 0;
        line-height: 1.3;
    }
    #link ul li #linkBox01 dd .linkLogo {
        margin: 3vw auto 5vw;
        width: auto;
    }
    .sectionYoutube .catch {
        top: -8px;
    }
    .sectionYoutube .catch img {
        width: 65%;
    }
    .sectionYoutube h2 {
        padding: 12vw 0 8vw;
        font-size: 5vw;
        letter-spacing: 0;
    }
    .sectionYoutube h2 img {
        margin-right: 7%;
        width: 33%;
        margin-bottom: 0.2em;
    }
    .sectionYoutubeBox01 {
        padding: 5vw 3.5% 15vw;
    }
    .sectionYoutube .sectionYoutubeLink01 {
        margin-top: 6vw;
    }
    .sectionYoutubeBox01 p {
        font-size: 3.75vw;
        letter-spacing: 0;
    }
    .sectionYoutube .sectionYoutubeLink01 li {
        width: 31%;
        box-shadow: 1px 1px rgba(0,51,106,1);
        background: url(/online/images/sectionYoutubeArrow01.png) 96% 50% no-repeat #fff;
        background-size: 9% auto;
        display: flex;
        align-items: center;
    }
    .sectionYoutube .sectionYoutubeLink01 li a {
        font-size: 3.6vw;
        padding: 3vw 14% 3vw 5%;
        letter-spacing: 0;
        width: 100%;
    }
    .sectionYoutube section {
        margin: 10vw auto 0;
    }
    .sectionYoutube section h3 {
        font-size: 4.5vw;
        padding: 1.5vw 0;
    }
    .sectionYoutube ul.video {
        margin-top: 2vw;
    }
    .sectionYoutube ul.video li {
        width: 44%;
        margin: 4vw 2.5% 0;
        font-size: 2.7vw;
        letter-spacing: 0;
    }
    .sectionYoutube ul.video li img {
        margin-bottom: 0;
    }
    .sectionYoutube ul.video li .playback {
        width: 9vw;
    }
    #sectionYoutube02.sectionYoutube ul.video li {
        margin: 5px 2.5% 0;
    }
    #sectionYoutube02.sectionYoutube ul.video li:first-child {
        margin: 5px 7% 4vw;
    }
    #sectionYoutube02.sectionYoutube ul.video li dl dt {
        font-size: 4vw;
    }
    #sectionYoutube02.sectionYoutube ul.video li dl dd {
        font-size: 3.1vw;
        margin-top: 0.5em;
    }
    #sectionYoutube .sectionYoutubeBnr01 {
        width: auto;
        margin: 4vw auto 0;
    }
    #sectionLineZoom .catch {
        top: -10px;
    }
    #sectionLineZoom .catch img {
        width: 70%;
    }
    #sectionLineZoom h2 {
        padding: 10vw 0 2vw;
        font-size: 5.5vw;
        text-align: left;
    }
    #sectionLineZoom h2 span {
        display: block;
        width: 55vw;
        margin: 0 auto 2.5vw;
    }
    #sectionLineZoom h2 img {
        margin-right: 4%;
        height: 10vw;
        display: inline-block!important;
    }
    #sectionLineZoom h2 img.pc {
        display: none!important;
    }
    #sectionLineZoom .sectionLineZoomBox01 {
        padding: 3.5vw 0 8vw;
    }
    #sectionLineZoom .sectionLineZoomBox01 p {
        font-size: 3.75vw;
        letter-spacing: -0.09em;
        line-height: 1.6;
    }
    #sectionLineZoom .sectionLineZoomBox02 section:first-child {
        padding: 0 0 7vw;
        border-bottom: 1px dotted #4D4D4D;
        border-right: none;
    }
    #sectionLineZoom .sectionLineZoomBox02 section:last-child {
        padding: 7vw 0 0;
        border-top: 1px dotted #4D4D4D;
        margin-top: 2px;
    }
    #sectionLineZoom .sectionLineZoomBox02 {
        margin-top: 4vw;
        display: block;
        padding: 0 3.5%;
    }
    #sectionLineZoom .sectionLineZoomBox02 h3 {
        width: 90%;
        margin: 0 auto;
    }
    #sectionLineZoom .sectionLineZoomBox02 section {
        width: auto;
    }
    #sectionLineZoom .sectionLineZoomBox02 section table {
        margin-top: 7vw;
        display: block;
        border-top: 1px dotted #4D4D4D;
    }
    #sectionLineZoom .sectionLineZoomBox02 section table tr, #sectionLineZoom .sectionLineZoomBox02 section table tbody {
        display: block;
    }
    #sectionLineZoom .sectionLineZoomBox02 section table th, #sectionLineZoom .sectionLineZoomBox02 section table td {
        font-size: 3.75vw;
        display: block;
        text-align: center;
        border-bottom: 1px dotted #4D4D4D;
    }
    #sectionLineZoom .sectionLineZoomBox02 section table tr:not(:last-child) th, #sectionLineZoom .sectionLineZoomBox02 section table tr:not(:last-child) td {
        border-bottom: 1px dotted #4D4D4D;
    }
    #sectionLineZoom .sectionLineZoomBox02 section .flow h4 {
        font-size: 4.2vw;
        padding: 2.5vw 0;
    }
    #sectionLineZoom .sectionLineZoomBox02 section .flow ol li {
        padding: 6vw 3.5% 5vw 16%;
    }
    #sectionLineZoom .sectionLineZoomBox02 section .flow ol li img.number {
        top: 4vw;
        left: 4%;
        width: 10%;
        margin: 0;
    }
    #sectionLineZoom .sectionLineZoomBox02 section .flow strong {
        font-size: 3.75vw;
    }
    #sectionLineZoom .sectionLineZoomBox02 section .flow p {
        margin-top: 3vw;
        padding: 0;
        font-size: 3.4vw;
    }
    #sectionLineZoom .sectionLineZoomBox02 section .flow p a {
        padding: 0;
    }
    #sectionLineZoom .sectionLineZoomBox02 section .flow p img.pc {
        display: none!important;
    }
    #sectionLineZoom .sectionLineZoomBox02 section .flow ol li img {
        height: 9vw;
        display: inline-block!important;
    }
    #sectionLineZoom .sectionLineZoomBox02 section:first-child .flow p.app {
        margin-left: 8.5%;
    }
    #sectionLineZoom .sectionLineZoomBox02 section .flow p a:not(:last-child) img {
        margin-right: 2%;
    }
    #sectionLineZoom .sectionLineZoomBox02 section .flow ol li img.arrow {
        bottom: -12px;
        height: 5.6vw;
    }
    #sectionLineZoom .btnLine01 {
        margin-top: 5vw;
    }
    #sectionLineZoom .sectionLineZoomBox02 section:last-child .flow p.app {
        margin-left: -10%;
    }
    #sectionLineZoom .sectionLineZoomBox02 section .flow ol li.date {
        display: block;
    }
    #sectionLineZoom .sectionLineZoomBox02 section .flow ol li.date p {
        margin-left: 0;
        margin-top: 3vw;
        letter-spacing: 0;
    }
    #reservation {
        padding: 10vw 0 0;
    }
    #reservation dl {
        width: auto;
    }
    #reservation dl dt {
        font-size: 3.5vw;
        letter-spacing: 0;
        text-align: center;
    }
    #reservation dl dt strong {
        font-size: 4.5vw;
        margin-bottom: 2.5vw;
    }
    #reservation dl dd {
        margin: 2.5vw 12% 4vw;
    }
    #reservation .photo01 {
        width: 62%;
        position: static;
        margin: 0 auto;
    }
    #snsOnline {
        padding: 10vw 0 12vw;
    }
    #snsOnline p.snsOnlineTxt01 {
        font-size: 3.5vw;
    }
    #snsOnline p.snsOnlineTxt01 span {
        font-size: 4vw;
    }
    #snsOnline p.snsOnlineTxt02 {
        font-size: 4.2vw;
        margin-top: 3vw;
    }
    #snsOnline ul {
        margin-top: 6vw;
    }
    #snsOnline ul li {
        margin: 0 3.5%;
        width: 9%;
    }

    /*******************************
    category
    *******************************/
    .faculty .category {
        margin-top: 3vw;
    }
    .faculty .category h4 {
        font-size: 4vw;
    }
    .faculty .category .video li {
        margin: 5px 2.5% 0;
    }
    .faculty .category .video li:nth-of-type(3n) {
        margin: 5px 2.5% 0;
    }




}