@charset "UTF-8"; /* include */ @import url('./popup.css'); /* common */ @media all and (min-width:769px){ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide, .swiper-wrapper{height:100% !important;} } .swiper-pagination{display:inline-block; position:relative; text-align:center;} .swiper-pagination-bullet{display:inline-block; position:relative; width:16px; height:16px; margin:0 5px; background:transparent; border:1px solid rgba(255,255,255,0); border-radius:50%; opacity:1; vertical-align:middle; transition:.3s;} .swiper-pagination-bullet:before{content:''; display:block; position:absolute; width:6px; height:6px; top:50%; left:50%; margin:-3px 0 0 -3px; background:#fff; border-radius:50%; opacity:.5; transition:.3s;} .swiper-pagination-bullet:focus, .swiper-pagination-bullet:hover{} .swiper-pagination-bullet:focus:before, .swiper-pagination-bullet:hover:before{opacity:1;} .swiper-pagination-bullet-active{border-color:rgba(255,255,255,.5);} .swiper-pagination-bullet-active:before{opacity:1;} .swiper-pagination-bullet-active:focus, .swiper-pagination-bullet-active:hover{} .swiper-button-prev, .swiper-button-next{display:inline-block; position:absolute; width:44px; height:44px; top:50%; left:auto; right:auto; margin:0; margin-top:-22px; padding:0; border:1px solid transparent; border-radius:50%; transition:.2s;} .swiper-button-prev.white{background:transparent url('../images/ico_arrow_left_white.png') no-repeat left 46% center / 26%;} .swiper-button-next.white{background:transparent url('../images/ico_arrow_right_white.png') no-repeat right 46% center / 26%;} .swiper-button-prev.gray{background:transparent url('../images/ico_arrow_left_gray.png') no-repeat left 46% center / 26%; border-color:#81878f;} .swiper-button-next.gray{background:transparent url('../images/ico_arrow_right_gray.png') no-repeat right 46% center / 26%; border-color:#81878f;} .swiper-button-prev:after, .swiper-button-next:after{font-family:inherit; font-size:0;} .swiper-button-prev.white:focus, .swiper-button-prev.white:hover{background-color:rgba(255,255,255,.1);} .swiper-button-next.white:focus, .swiper-button-next.white:hover{background-color:rgba(255,255,255,.1);} .swiper-button-prev.gray:focus, .swiper-button-prev.gray:hover{background-color:rgba(129,135,143,.1);} .swiper-button-next.gray:focus, .swiper-button-next.gray:hover{background-color:rgba(129,135,143,.1);} .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{background-color:transparent !important; opacity:.4;} .autoplay-progress{position:absolute; width:64%; height:2px; top:.75em; left:18%; background-color:rgba(255,255,255,.4); z-index:10;} .autoplay-progress svg{--progress:0; position:absolute; width:100%; top:0; left:0; z-index:10; stroke-width:4px; stroke:#fff; fill:none; stroke-dashoffset:calc(100 * (1 - var(--progress))); stroke-dasharray:100;} @keyframes marquee_origin{0%{transform:translateX(0);} 50%{transform:translateX(-100%);} 50.01%{transform:100%;} 100%{transform:translateX(0);}} @keyframes marquee_clone{0%{transform:translateX(0);} 100%{transform:translateX(-200%);}} .marquee.origin{animation: 6s linear 0s infinite normal forwards running origin_left;} .marquee.clone{animation: 6s linear 0s infinite normal none running clone_left;} .marqueeW:hover .marquee{animation-play-state:paused;} /* visual */ #mainVisual{position:relative; width:100%; height:100vh; max-height:980px; min-height:680px; margin:0 auto; background:#000; border-radius:4px; overflow:hidden;} #mainVisual:before{content:''; display:block; position:absolute; width:100%; height:200px; top:0; left:0; background:linear-gradient(0deg, rgba(36,37,40,0) 0, rgba(36,37,40,.5) 50%, rgba(36,37,40,1) 100%); opacity:.4; z-index:2;} #mainVisual:after{content:''; clear:both; display:block;} #mainVisual .inner{height:100%; padding:0;} #mainVisual .swiper-container{width:100%; height:100%; overflow:hidden;} #mainVisual .swiper-container .imgW{position:absolute; width:100%; height:100%; top:0; left:0;} #mainVisual .swiper-container .imgW img{position:absolute; min-width:100%; height:auto; min-height:100%; top:50%; left:50%; object-fit:cover; transform:translate(-50%, -50%) scale(1.1); transition:4s ease;} #mainVisual .swiper-container .txtW{display:inline-block; position:absolute; width:100%; top:50%; left:0; margin-top:-7.5%; transform:translateY(-50%); z-index:2;} #mainVisual .swiper-container .txtW p{line-height:1.5; color:#fff; text-align:center; word-break:keep-all;} #mainVisual .swiper-container .txtW p.mini{margin:0 auto .438em; font-size:1.25em; letter-spacing:.2em; opacity:.5;} #mainVisual .swiper-container .txtW p.ti{font-size:2.5em; font-weight:600;} #mainVisual .swiper-container .txtW p br{display:none;} #mainVisual .swiper-slide-active .imgW.scale-down-center img{transform:translate(-50%,-50%) scale(1.0);} #mainVisual .bgBox{position:absolute; width:100%; height:100%; right:0; bottom:0; text-align:center;} #mainVisual .bgBox .inner{width:100%; max-width:100%; height:100%;} #mainVisual .bgBox .searchW{position:absolute; width:100%; bottom:48.5%; padding:0 1em; z-index:1;} #mainVisual .bgBox .searchW form{position:relative; max-width:360px; margin:0 auto;} #mainVisual .bgBox .searchW input[type="text"]{position:relative; width:100%; height:auto; padding:.875em 3.5em .938em 1.25em; background:rgba(255,255,255,.2); border:1px solid transparent; border-radius:5em; box-shadow:none; color:#fff; vertical-align:middle; z-index:1;} #mainVisual .bgBox .searchW input[type="text"]::placeholder{color:#fff;} #mainVisual .bgBox .searchW input[type="text"]:focus, #mainVisual .bgBox .searchW input[type="text"]:hover{background:#fff; color:#242528;} #mainVisual .bgBox .searchW input[type="text"]:focus::placeholder, #mainVisual .bgBox .searchW input[type="text"]:hover::placeholder{color:#81878f;} #mainVisual .bgBox .searchW button{display:inline-block; position:absolute; width:auto; height:auto; top:.5em; right:.5em; padding:.625em 1em; background:#006edf; border-radius:5em; color:#fff; font-size:.938em; font-weight:500; word-break:keep-all; z-index:1;} #mainVisual .bgBox .searchW button i.ico{font-weight:normal; vertical-align:top;} #mainVisual .bgBox .searchW button span{} #mainVisual .bgBox .searchW button:focus, #mainVisual .bgBox .searchW button:hover{background:#0057b4;} #mainVisual .bgBox .control{position:absolute; width:100%; bottom:50%;} #mainVisual .bgBox .control .swiper-button-prev{display:inline-block; left:20px; filter:drop-shadow(0 0 2px rgba(0,0,0,.1));} #mainVisual .bgBox .control .swiper-button-next{display:inline-block; right:20px; filter:drop-shadow(0 0 2px rgba(0,0,0,.1));} #mainVisual .bgBox .pager{display:inline-block; position:absolute; width:100%; line-height:0; right:0; bottom:40%;} /* contents */ #mainContents{clear:both; position:relative; width:100%; min-width:1224px; margin:0 auto; padding:0; background:transparent; z-index:1;} #mainContents .layoutLeft{width:50%;} #mainContents .layoutRight{width:50%;} #mainContents .conTitle h3{margin:0 auto 1em; font-size:2.5em; font-weight:700; text-align:center;} #mainContents .tab{clear:both; display:block; position:relative; width:100%; max-width:1560px; margin:0 auto 2.5em;} #mainContents .tab > ul{display:inline-block; display:flex; flex-wrap:wrap; justify-content:center; gap:.625em; width:100%; margin:0 auto; padding:0; text-align:center;} #mainContents .tab > ul li{display:inline-block; /*float:left; width:25%;*/ flex:0 1 auto; margin:0; padding:1px 0 0 1px;} #mainContents .tab > ul li:last-child:after{content:''; clear:both; display:block;} #mainContents .tab > ul li .tabLink{display:block; position:relative; width:100%; line-height:1; padding:.6em 1em .7em; background:transparent; border-radius:5em; color:#575b63; font-size:1.25em; font-weight:500; text-align:center; cursor:pointer;} #mainContents .tab > ul li .tabLink:focus, #mainContents .tab > ul li .tabLink:hover{background:rgba(87,91,99,.1);} #mainContents .tab > ul li .tabLink.active{background:#dceeff; color:#006edf; font-weight:700; z-index:1;} #mainContents .tabCon{clear:both; display:block; position:relative; margin:0 auto;} #mainContents .tabCon .tabItem{clear:both; display:none; position:relative; margin:0 auto;} #mainContents .tabCon .tabItem.active{display:block;} #mainContents .btnBox{clear:both; margin:3.25em auto 0; text-align:center;} #mainContents .btnBox a.more{display:inline-block; position:relative; min-width:180px; margin:0 auto; padding:.556em 1.75em; border:1px solid #20a8ff; border-radius:5em; overflow:hidden; color:#20a8ff; font-size:1.125em; font-weight:300; text-align:center;} #mainContents .btnBox a.more:before{content:''; display:block; position:absolute; width:110%; height:110%; top:-5%; left:-5%; background:#006edf; background:linear-gradient(90deg, #20a8ff 5%, #006edf 95%); border-radius:0; opacity:0; transform:scaleX(0); transform-origin:left center; transition:.3s ease-in-out; z-index:-1;} #mainContents .btnBox a.more span.ico.more{display:inline-block; position:relative; width:12px; height:2px; margin-top:-2px; margin-left:.444em; background:#20a8ff; vertical-align:middle; transition:.3s;} #mainContents .btnBox a.more span.ico.more:after{content:''; display:block; position:absolute; width:2px; height:12px; top:50%; left:50%; margin:-6px 0 0 -1px; background:#20a8ff; transition:.3s;} #mainContents .btnBox a.more:focus, #mainContents .btnBox a.more:hover{border-color:transparent; color:#fff;} #mainContents .btnBox a.more:focus:before, #mainContents .btnBox a.more:hover:before{opacity:1; transform:scaleX(1);} #mainContents .btnBox a.more:focus span.ico.more, #mainContents .btnBox a.more:hover span.ico.more{margin-left:.888em; background:#fff; transform:rotate(180deg);} #mainContents .btnBox a.more:hover span.ico.more:focus, #mainContents .btnBox a.more:hover span.ico.more:after{background:#fff;} #mainVisual .area01, #mainContents .area02, #mainContents .area03, #mainContents .area04{clear:both; position:relative; width:100%; margin:0 auto; padding:0; overflow:hidden;} #mainVisual .area01{position:absolute; bottom:0; left:0; padding:0; overflow:visible;} #mainVisual .area01:before{content:''; display:block; position:absolute; width:100%; height:100%; bottom:0; left:0; background:linear-gradient(180deg, rgba(36,37,40,0) 0, rgba(36,37,40,.5) 50%, rgba(36,37,40,1) 100%); opacity:.5; z-index:0;} #mainVisual .area01 .quick{position:relative; padding:0 0 2.5em; z-index:1;} #mainVisual .area01 .quick ul{display:flex;} #mainVisual .area01 .quick ul li{flex:1; justify-content:center; text-align:center;} #mainVisual .area01 .quick ul li a{display:inline-block; color:#fff;} #mainVisual .area01 .quick ul li a .imgW{display:block; position:relative; width:100%; max-width:120px; height:auto; aspect-ratio:1/1; margin:0 auto 1.25em; background:rgba(255,255,255,.2); border-radius:50%; overflow:hidden; transition:.3s ease-in-out;} #mainVisual .area01 .quick ul li a .imgW:before{content:''; display:block; position:absolute; width:100%; height:100%; background:linear-gradient(135deg, #006edf 0, #cddc39 100%); border-radius:50%; opacity:0; transform:scale(0); transform-origin:center center; transition:.3s ease-in-out; z-index:-1;} #mainVisual .area01 .quick ul li a .imgW img{width:100%; max-width:fit-content; margin:0 auto;} #mainVisual .area01 .quick ul li a .txtW{} #mainVisual .area01 .quick ul li a .txtW p{color:inherit; font-size:1.25em;} #mainVisual .area01 .quick ul li a:focus, #mainVisual .area01 .quick ul li a:hover{color:#ffee5b;} #mainVisual .area01 .quick ul li a:focus .imgW, #mainVisual .area01 .quick ul li a:hover .imgW{background:transparent; box-shadow:0 2px 12px rgba(65,67,73,.2);} #mainVisual .area01 .quick ul li a:focus .imgW:before, #mainVisual .area01 .quick ul li a:hover .imgW:before{opacity:1; transform:scale(1);} #mainContents .area02{} #mainContents .area02 .scroll{display:block; position:absolute; width:6.25em; top:0; left:0; cursor:default;} #mainContents .area02 .scroll p.txt{display:inline-block; position:relative; width:max-content; top:9em; left:-1.25em; color:#eef7ff; font-size:2.5em; font-weight:700; letter-spacing:.4em; text-transform:uppercase; transform:rotate(-90deg) translate(25%,25%); transform-origin:25% 25%;} #mainContents .area02 .schedule{position:relative; float:right; width:calc(100% - 6.25em); height:auto; padding:5em 0; background:#eef7ff; border-radius:0 0 0 6.25em;} #mainContents .area02 .schedule .inner.w1400{max-width:1400px; padding:0; transform:translateX(-3.125em);} #mainContents .area02 .schedule .conTitle h3 span.year{color:#20a8ff;} #mainContents .area02 .schedule .tabCon, #mainContents .area02 .schedule .tabItem{position:static;} #mainContents .area02 .schedule .swiper-main-schedule{margin:-10px auto; padding:10px 0;} #mainContents .area02 .schedule .swiper-main-schedule ul{} #mainContents .area02 .schedule .swiper-main-schedule ul li{height:100%;} #mainContents .area02 .schedule .swiper-main-schedule ul li a{display:block; min-height:142px; padding:1.5em; background:#fff; border:1px solid #e5e6e8; border-radius:8px;} #mainContents .area02 .schedule .swiper-main-schedule ul li a p{display:block; display:-webkit-box; -webkit-box-orient:vertical; line-clamp:2; -webkit-line-clamp:2; height:2.8em; line-height:1.4; color:#242528; font-size:1.25em; font-weight:400; word-break:break-all; overflow:hidden; text-overflow:ellipsis;} #mainContents .area02 .schedule .swiper-main-schedule ul li a p.date{display:block; height:auto; line-height:1; margin:0 auto 1.25em; color:#20a8ff; font-size:1em; font-weight:700;} #mainContents .area02 .schedule .swiper-main-schedule ul li a:focus, #mainContents .area02 .schedule .swiper-main-schedule ul li a:hover{border-color:#575b63; box-shadow:0 2px 12px rgba(65,67,73,.1); transform:translateY(-10px);} #mainContents .area02 .schedule .bgBox{position:absolute; top:0; right:12px;} #mainContents .area02 .schedule .bgBox .control{display:flex; gap:.25em;} #mainContents .area02 .schedule .bgBox .control .swiper-button-prev{position:static; margin-top:0;} #mainContents .area02 .schedule .bgBox .control .swiper-button-next{position:static; margin-top:0;} #mainContents .area02 .schedule .bgBox .pager{} #mainContents .area02 .schedule p.empty{min-height:142px; padding:3.389em 0; border:1px solid #e5e6e8; border-radius:8px; font-size:1.125em; text-align:center;} #mainContents .area02 .schedule p.empty + .bgBox .swiper-button-prev, #mainContents .area02 .schedule p.empty + .bgBox .swiper-button-next{background-color:transparent !important; opacity:.4; cursor:default; pointer-events:none;} #mainContents .area03{padding:6.25em 0;} #mainContents .area03 .lecture{position:relative;} #mainContents .area03 .lecture .tabCon, #mainContents .area03 .lecture .tabItem{position:static;} #mainContents .area03 .lecture .swiper-main-lecture{margin:-10px auto; padding:10px 0; overflow:visible;} #mainContents .area03 .lecture .swiper-main-lecture ul{} #mainContents .area03 .lecture .swiper-main-lecture ul li{height:100%;} #mainContents .area03 .lecture .swiper-main-lecture ul li a{display:block; min-height:142px; padding:0;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW{position:relative; height:auto; aspect-ratio:16/9; margin:0 auto 1.5em; background:#fff; border:1px solid #e5e6e8; border-radius:8px; overflow:hidden; transition:.3s;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW:before{content:''; display:block; position:absolute; width:100%; height:100%; bottom:0; left:0; background:linear-gradient(0deg, rgba(0,0,0,1) 0, rgba(0,0,0,.9) 35%, rgba(0,0,0,.3) 100%); opacity:0; transition:.3s; z-index:1;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW span.tag{display:inline-block; position:absolute; min-width:68px; top:.8em; right:.8em; padding:.333em .666em; border-radius:5em; color:#fff; background:#242528; font-size:.938em; text-align:center; z-index:2;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW span.tag.waiting{background:rgba(87,91,99,.8);} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW span.tag.register{background:rgba(205,220,57,.8); color:#414349;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW span.tag.ongoing{background:rgba(0,110,223,.8);} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW span.tag.end{background:rgba(229,230,232,.8); color:#81878f;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW span.tag.end + img{filter:grayscale(100%);} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW img{position:relative; width:100%; max-width:fit-content; z-index:0;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW ul.dateW{position:absolute; width:100%; bottom:0; left:0; padding:1.438em 1.5em; opacity:0; transform:translateY(100%); transition:.3s; z-index:2;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW ul.dateW li{position:relative; margin:0 auto 1em; padding:0 0 0 1.25em;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW ul.dateW li:last-child{margin:0 auto;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW ul.dateW li:before{content:''; display:block; position:absolute; width:1em; height:1em; top:0; left:0} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW ul.dateW li.register{} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW ul.dateW li.register:before{background:url('../images/ico_register.png') no-repeat center / cover;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW ul.dateW li.ongoing{} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW ul.dateW li.ongoing:before{background:url('../images/ico_course.png') no-repeat center / cover;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW ul.dateW li p{color:#fff; font-size:.875em;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW ul.dateW li p.ti{line-height:1.142857; margin:0 auto .313em; font-weight:500;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW ul.dateW li p.date{font-weight:300;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .txtW{} #mainContents .area03 .lecture .swiper-main-lecture ul li a .txtW p.ti{display:block; display:-webkit-box; -webkit-box-orient:vertical; line-clamp:2; -webkit-line-clamp:2; height:2.8em; line-height:1.4; color:#242528; font-size:1.25em; font-weight:400; word-break:break-all; overflow:hidden; text-overflow:ellipsis; transition:.3s;} #mainContents .area03 .lecture .swiper-main-lecture ul li a:focus, #mainContents .area03 .lecture .swiper-main-lecture ul li a:hover{transform:translateY(-10px);} #mainContents .area03 .lecture .swiper-main-lecture ul li a:focus .imgW, #mainContents .area03 .lecture .swiper-main-lecture ul li a:hover .imgW{border-color:#575b63; box-shadow:0 2px 12px rgba(65,67,73,.1);} #mainContents .area03 .lecture .swiper-main-lecture ul li a:focus .imgW:before, #mainContents .area03 .lecture .swiper-main-lecture ul li a:hover .imgW:before{opacity:.7;} #mainContents .area03 .lecture .swiper-main-lecture ul li a:focus .imgW ul.dateW, #mainContents .area03 .lecture .swiper-main-lecture ul li a:hover .imgW ul.dateW{opacity:1; transform:translateY(0);} #mainContents .area03 .lecture .swiper-main-lecture ul li a:focus .txtW p.ti, #mainContents .area03 .lecture .swiper-main-lecture ul li a:hover .txtW p.ti{color:#006edf;} #mainContents .area03 .lecture .bgBox{display:flex; align-items:center; gap:1.25em; position:absolute; top:0; right:12px;} #mainContents .area03 .lecture .bgBox .pager{} #mainContents .area03 .lecture .bgBox .pager .swiper-pagination{position:static; color:#575b63; font-size:1em; text-align:right;} #mainContents .area03 .lecture .bgBox .pager .swiper-pagination .swiper-pagination-current{font-weight:700;} #mainContents .area03 .lecture .bgBox .pager .swiper-pagination .swiper-pagination-total{} #mainContents .area03 .lecture .bgBox .control{display:flex; gap:.25em;} #mainContents .area03 .lecture .bgBox .control .swiper-button-prev{position:static; margin-top:0;} #mainContents .area03 .lecture .bgBox .control .swiper-button-next{position:static; margin-top:0;} #mainContents .area03 .lecture p.empty{padding:7.222em 0; border:1px solid #e5e6e8; border-radius:8px; font-size:1.125em; text-align:center;} #mainContents .area03 .lecture p.empty + .bgBox .pager{display:none;} #mainContents .area03 .lecture p.empty + .bgBox .swiper-button-prev, #mainContents .area03 .lecture p.empty + .bgBox .swiper-button-next{background-color:transparent !important; opacity:.4; cursor:default; pointer-events:none;} #mainContents .area04{padding:0 0 6.25em;} #mainContents .area04 .banner.familysite{} #mainContents .area04 .banner.familysite .swiper-main-banner-familysite{} #mainContents .area04 .banner.familysite .swiper-main-banner-familysite ul{} #mainContents .area04 .banner.familysite .swiper-main-banner-familysite ul li{} #mainContents .area04 .banner.familysite .swiper-main-banner-familysite ul li a{display:block; background:#fff; border:1px solid #e5e6e8; border-radius:8px; text-align:center;} #mainContents .area04 .banner.familysite .swiper-main-banner-familysite ul li a img{width:100%; max-width:fit-content;} #mainContents .area04 .banner.familysite .swiper-main-banner-familysite ul li a:focus, #mainContents .area04 .banner.familysite .swiper-main-banner-familysite ul li a:hover{border-color:#575b63;} #mainContents .area04 .banner.familysite .bgBox{} #mainContents .area04 .banner.familysite .bgBox .control{} #mainContents .area04 .banner.familysite .bgBox .control .swiper-button-prev{left:calc(-44px - 2em);} #mainContents .area04 .banner.familysite .bgBox .control .swiper-button-next{right:calc(-44px - 2em);} @media all and (max-width:1740px){ #mainContents .area02 .schedule .tabItem{padding:0 12px 0 6.25em;} #mainContents .area04 .banner.familysite .inner.w1640{max-width:calc(100% - 88px - 4em);} #mainContents .area04 .banner.familysite .bgBox .control .swiper-button-prev{left:calc(-44px - 1em);} #mainContents .area04 .banner.familysite .bgBox .control .swiper-button-next{right:calc(-44px - 1em);} } @media all and (max-width:1440px){ #mainVisual .area01 .inner.w1400{padding:0 .5em;} #mainContents .area04 .banner.familysite .inner.w1640{max-width:calc(100% - 88px - 2em);} #mainContents .area04 .banner.familysite .bgBox .control .swiper-button-prev{left:-44px;} #mainContents .area04 .banner.familysite .bgBox .control .swiper-button-next{right:-44px;} } @media all and (max-width:1279px){ #mainVisual{min-width:auto;} #mainVisual .swiper-container .txtW{margin-top:-10.5%;} #mainContents{min-width:960px;} #mainVisual .area01 .quick ul li a .imgW{width:112px;} #mainVisual .area01 .quick ul li a .txtW p{font-size:1.063em;} #mainContents .area02 .scroll{width:5em;} #mainContents .area02 .scroll p.txt{left:-1.625em;} #mainContents .area02 .schedule{width:calc(100% - 5em)} #mainContents .area02 .schedule .tabItem{padding:0 12px 0 5em;} #mainContents .area02 .schedule .swiper-main-schedule ul li{min-width:calc(33.333% - 12px);} #mainContents .area02 .schedule .swiper-main-schedule ul li a{min-height:136px;} #mainContents .area02 .schedule .swiper-main-schedule ul li a p.date{margin:0 auto .875em;} #mainContents .area02 .schedule p.empty{min-height:136px; padding:3.223em 0;} #mainContents .area03 .lecture p.empty{padding:6.783em 0;} #mainContents .area04 .banner.familysite .inner.w1640{min-width:auto;} } @media all and (max-width:1023px){ .swiper-button-prev, .swiper-button-next{width:40px; height:40px; margin-top:-20px;} #mainVisual{min-height:580px;} #mainVisual:before{height:72px;} #mainVisual .swiper-container .txtW{width:80%; left:10%; margin-top:-12.5%;} #mainVisual .swiper-container .txtW p.ti{line-height:1.25;} #mainVisual .swiper-container .txtW p br{display:inline;} #mainVisual .bgBox .searchW{bottom:43.5%;} #mainVisual .bgBox .pager{bottom:36%;} #mainContents{min-width:100%;} #mainContents .tab > ul li .tabLink{padding:.6em .813em .7em;} #mainContents .area02 .scroll{width:3em;} #mainContents .area02 .scroll p.txt{left:-1.813em; font-size:2em;} #mainContents .area02 .schedule{width:calc(100% - 3em);} #mainContents .area02 .schedule .inner.w1400{transform:translateX(-1.5em);} #mainContents .area02 .schedule .tabItem{padding:0;} #mainContents .area02 .schedule .swiper-main-schedule ul li{min-width:calc(33.333% - 10px);} #mainContents .area02 .schedule .swiper-main-schedule ul li a p{line-clamp:3; -webkit-line-clamp:3; height:4.2em; font-size:1.063em;} #mainContents .area02 .schedule .swiper-main-schedule ul li a p.date{font-size:.875em;} #mainContents .area02 .schedule p.empty{min-height:147.67px; padding:3.75em 0; font-size:1.063em;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW{margin:0 auto 1.125em;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW span.tag{font-size:.875em;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW ul.dateW{padding:1.25em 1.313em;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .txtW p.ti{font-size:1.063em;} #mainContents .area03 .lecture p.empty{font-size:1.063em;} } @media all and (max-width:768px){ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide{height:auto;} .swiper-button-next, .swiper-button-prev{width:36px; height:36px; background-size:28%;} #mainVisual:before{height:54px;} #mainVisual .swiper-container .imgW img{width:100%; min-width:auto;} #mainVisual .swiper-container .txtW p.ti{font-size:2.25em;} #mainVisual .swiper-container .txtW{margin-top:-18.5%;} #mainVisual .bgBox .searchW{bottom:45.5%;} #mainVisual .bgBox .pager{bottom:34%;} #mainContents .conTitle h3{font-size:2.25em;} #mainContents .tab{margin:0 auto 2.25em;} #mainContents .tab > ul li .tabLink{padding:.6em 1em .7em; font-size:1.125em;} #mainContents .btnBox a.more{min-width:148px; padding:.75em 1.75em .6875em; font-size:1em;} #mainContents .btnBox a.more span.ico.more{width:10px;} #mainContents .btnBox a.more span.ico.more:after{height:10px; margin:-5px 0 0 -1px;} #mainVisual .area01 .quick ul li a .imgW{width:80px;} #mainVisual .area01 .quick ul li a .txtW p{font-size:1em;} #mainContents .area02 .schedule .tab > ul{display:block; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; white-space:nowrap;} #mainContents .area02 .schedule .tab > ul li{display:inline-block; margin:0 .125em;} #mainContents .area02 .schedule .swiper-main-schedule ul li{min-width:calc(50% - 6px);} #mainContents .area02 .schedule .swiper-main-schedule ul li a{min-height:116.25px;} #mainContents .area02 .schedule .swiper-main-schedule ul li a p{line-clamp:2; -webkit-line-clamp:2; height:2.8em;} #mainContents .area02 .schedule p.empty{min-height:116.25px; padding:3em 0;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW{margin:0 auto 1em;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW span.tag{min-width:58px; top:.5em; right:.5em; font-size:.813em;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW ul.dateW{padding:1em;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW ul.dateW li{margin:0 auto .75em; padding:0;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW ul.dateW li p.ti{padding:0 0 0 1.5em;} #mainContents .area03 .lecture .swiper-main-lecture ul li a .imgW ul.dateW li p.date{font-size:.8em;} #mainContents .area03 .lecture p.empty{padding:6.167em 0;} #mainContents .area04 .banner.familysite .inner.w1640{max-width:100%;} #mainContents .area04 .banner.familysite .bgBox{display:none;} } @media all and (max-width:580px){ #mainVisual{max-height:640px;} #mainVisual .swiper-container .txtW{margin-top:auto; top:21.5%; transform:translateY(0);} #mainVisual .swiper-container .txtW p.mini{font-size:1.063em;} #mainVisual .swiper-container .txtW p.ti{font-size:2em;} #mainVisual .bgBox .control{display:none;} #mainVisual .bgBox .searchW{bottom:49%; font-size:.875em;} #mainVisual .bgBox .pager{top:6em; bottom:auto;} #mainContents .conTitle h3{font-size:2em;} #mainContents .tab{margin:0 auto 2em;} #mainContents .btnBox{margin:2.75em auto 0;} #mainVisual .area01 .quick{max-width:480px; margin:0 auto;} #mainVisual .area01 .quick ul{flex-wrap:wrap; justify-content:center; gap:1em 4em;} #mainVisual .area01 .quick ul li{flex:1 1 calc(30% - 4em); max-width:calc(30% - 4em);} #mainVisual .area01 .quick ul li a .imgW{width:100%; margin:0 auto .75em;} #mainVisual .area01 .quick ul li a .txtW p{font-size:.938em; word-break:keep-all;} #mainContents .area02 .scroll{width:2em;} #mainContents .area02 .scroll p.txt{top:8.25em; left:-2em; font-size:1.75em;} #mainContents .area02 .schedule{width:calc(100% - 2em); padding:4em 0; border-radius:0 0 0 4em} #mainContents .area02 .schedule .inner.w1400{transform:translateX(-1em);} #mainContents .area02 .schedule .swiper-main-schedule ul li{min-width:calc(71% - 1px);} #mainContents .area03{padding:5em 0;} #mainContents .area03 .lecture p.empty{padding:6em 0;} #mainContents .area04{padding:0 0 5em;} } @media all and (max-width:480px){ #mainVisual{max-height:480px; min-height:480px;} #mainVisual .swiper-container .txtW p.mini{font-size:.938em; letter-spacing:0;} #mainVisual .bgBox .searchW{bottom:46%;} #mainVisual .bgBox .searchW form{max-width:248px;} #mainVisual .bgBox .pager{top:5.5em;} #mainContents .conTitle h3{font-size:2em;} #mainVisual .area01 .quick{max-width:288px;} #mainVisual .area01 .quick ul{gap:1.75em 2em;} #mainVisual .area01 .quick ul li{flex:1 1 calc(30% - 2em); max-width:calc(30% - 2em);} #mainVisual .area01 .quick ul li a .imgW{margin:0 auto .5em;} #mainVisual .area01 .quick ul li a .txtW{position:relative;} #mainVisual .area01 .quick ul li a .txtW p{position:absolute; left:50%; font-size:.875em; white-space:nowrap; transform:translateX(-50%);} #mainContents .area02 .schedule .swiper-main-schedule ul li a{padding:1.313em;} #mainContents .area02 .schedule .bgBox{position:relative; width:100%; right:auto; text-align:center;} #mainContents .area02 .schedule .bgBox .control{justify-content:center; margin:1em auto 0;} #mainContents .area03 .lecture .bgBox{position:relative; justify-content:center; width:100%; right:auto; margin:1em auto 0; text-align:center;} #mainContents .area03 .lecture p.empty{padding:5em 0;} } @media all and (max-width:319px){ #mainVisual .swiper-container .txtW p.mini{font-size:.813em;} #mainVisual .swiper-container .txtW p.ti{font-size:11.5vw;} #mainVisual .swiper-container .txtW p.ti br{display:none;} } /* ie hack */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px){ }