/*------------------------------------------------------------------ [Index] ------------------------------------------------------------------*/ /* eg: @include user-select(none); */ /* eg: @include rotate(45deg); */ /* eg: @include translate3d(0,0,0); */ /* eg: @include border-radius(3px); */ #sliderBox { margin-top: 122px; position: relative; text-align: center; } #sliderBox #sliderSushi { padding: 0; padding-top: 80px; position: absolute; width: 100%; z-index: 1; } #sliderBox #sliderSushi li { margin: 0; padding: 0; list-style: none; display: inline-block; height: 100px; } #sliderBox #sliderSushi li img { width: auto; height: 100%; margin: 0 auto; } #sliderBox #sliderPerson { position: relative; display: inline-block; width: 819px; z-index: 2; } #sliderBox #sliderPerson img { width: 100%; } #BanaBox { margin: 0; margin-top: -1px; padding: 0; } #BanaBox #banaImg { margin: 0; padding: 0; width: 100%; } #BanaBox #banaImg img { margin: 0; padding: 0; width: 100%; height: auto; } h2 { margin: 50px auto 20px auto; text-align: center; } .top-arrow { text-align: center; position: relative; top: -29px; } .top-content { border: 1px transparent solid; position: relative; } .top-bg-gray { background: url(../img/bg_triangle_top.png) center top no-repeat, url(../img/bg_triangle_bottom.png) center bottom no-repeat; background-size: 100% 35%; } .footer-bg-gray { background: url(../img/bg_triangle_top.png) center top no-repeat; background-size: 100% 75%; } .top-bg-pink { background-color: rgba(240, 214, 231, 0.5); } .top-bg-1 { background-color: rgba(119, 0, 190, 0.3); } .top-bg-2 { background-color: rgba(198, 31, 80, 0.3); } .top-bg-3 { background-color: rgba(0, 136, 139, 0.4); } .top-bg-4 { background-color: rgba(45, 134, 255, 0.3); } .top-bg-5 { background-color: rgba(119, 0, 190, 0.3); } .top-bg-6 { background-color: rgba(119, 0, 190, 0.3); } .top-left-gold { background-image: url(../img/bg_triangle_top.png), url(../img/bg_triangle_bottom2.png); background-repeat: no-repeat, no-repeat; background-position: center top, center bottom; background-size: 100% 38%; } .top-right-gold { background-image: url(../img/bg_triangle_top2.png), url(../img/bg_triangle_bottom.png); background-repeat: no-repeat, no-repeat; background-position: center top, center bottom; background-size: 100% 38%; } .footer-right-gold { background: url(../img/bg_triangle_top2.png) center top no-repeat; background-size: 100% 75%; } .top-triangle-1 { background-image: url(../img/bg_triangle_top.png), url(../img/bg_triangle_bottom_1.png); background-repeat: no-repeat, no-repeat; background-position: center top, center bottom; background-size: 100% 38%; } .top-triangle-2 { background-image: url(../img/bg_triangle_top2.png), url(../img/bg_triangle_bottom_2.png); background-repeat: no-repeat, no-repeat; background-position: center top, center bottom; background-size: 100% 38%; } .top-triangle-3 { background-image: url(../img/bg_triangle_top.png), url(../img/bg_triangle_bottom_3.png); background-repeat: no-repeat, no-repeat; background-position: center top, center bottom; background-size: 100% 38%; } .top-triangle-4 { background-image: url(../img/bg_triangle_top2.png), url(../img/bg_triangle_bottom_4.png); background-repeat: no-repeat, no-repeat; background-position: center top, center bottom; background-size: 100% 38%; } .top-triangle-5 { background-image: url(../img/bg_triangle_top.png), url(../img/bg_triangle_bottom_5.png); background-repeat: no-repeat, no-repeat; background-position: center top, center bottom; background-size: 100% 38%; } .top-triangle-6 { background-image: url(../img/bg_triangle_top2.png), url(../img/bg_triangle_bottom_6.png); background-repeat: no-repeat, no-repeat; background-position: center top, center bottom; background-size: 100% 38%; } .top-triangle-7 { background-image: url(../img/bg_triangle_top.png), url(../img/bg_triangle_bottom_7.png); background-repeat: no-repeat, no-repeat; background-position: center top, center bottom; background-size: 100% 38%; } .top-search-box .search-mid-box { margin: 60px auto 150px auto; text-align: center; position: relative; } .top-search-box .search-mid-box ul { margin: 20px 0 0 0; padding: 0; list-style: none; height: 0; } .top-search-box .search-mid-box ul li { margin-bottom: 50px; } .top-search-box .search-mid-box ul li a { background-color: #B79A5A; color: #FFF; display: block; width: 100%; line-height: 80px; font-size: 140%; font-weight: 600px; } .top-search-box .search-mid-box .img-box { display: inline-block; width: 38%; margin: 0 0 200px; } .top-search-box .search-mid-box .img-box img { width: 100%; max-width: 558px; } .top-search-box .search-mid-box .menu-left { position: absolute; float: left; top: 0; left: 0; width: 30%; } .top-search-box .search-mid-box .menu-left li { text-align: right; } .top-search-box .search-mid-box .menu-left li a { padding-right: 20px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .top-search-box .search-mid-box .menu-left li ul li a { border-top-right-radius: 0; border-bottom-right-radius: 0; } .top-search-box .search-mid-box .menu-left li:last-child { margin-bottom: 0; } .top-search-box .search-mid-box ul.dropmenu-1 { display: none; position: absolute; width: 50%; margin: 0 0 0 50%; z-index: 11; } .top-search-box .search-mid-box ul.dropmenu-1 li { margin: 0; padding: 0; position: relative; } .top-search-box .search-mid-box ul.dropmenu-1 li ul.dropmenu-1-1 { position: absolute; width: 400px; z-index: 12; margin: 0; left: 100%; top: 0; display: none; } .top-search-box .search-mid-box ul.dropmenu-1 li a { text-align: center; background-color: #FFFFFF; color: #40200D; height: 45px; line-height: 45px; /*letter-spacing: 0.3em;*/ margin: 0; padding: 0; font-size: 18px; font-weight: bold; } .top-search-box .search-mid-box ul.dropmenu-1 li:hover > a { background-color: #E1C99F; } .top-search-box .search-mid-box ul.dropmenu-1 li:hover > ul.dropmenu-1-1 { display: block; } .top-search-box .search-mid-box ul.dropmenu-1 li:hover > ul.dropmenu-1-1 li { overflow: hidden; } .top-search-box .search-mid-box ul.dropmenu-1 li:hover > ul.dropmenu-1-1 li a { letter-spacing: 0.1em; } .top-search-box .search-mid-box ul.dropmenu-1 li:hover > ul.dropmenu-1-1 li:hover > a { color: #FFFFFF; background-color: #917642; } .top-search-box .search-mid-box ul.dropmenu-2 { display: none; position: absolute; width: 50%; margin: 0 50% 0 0; z-index: 11; } .top-search-box .search-mid-box ul.dropmenu-2 li { margin: 0; padding: 0; position: relative; } .top-search-box .search-mid-box ul.dropmenu-2 li a { text-align: center; background-color: #FFFFFF; color: #40200D; height: 45px; line-height: 45px; /*letter-spacing: 0.3em;*/ margin: 0; padding: 0; font-size: 18px; font-weight: 600; } .top-search-box .search-mid-box ul.dropmenu-2 li:hover > a { background-color: #E1C99F; } .top-search-box .search-mid-box .menu-right { position: absolute; float: right; top: 0; right: 0; width: 30%; } .top-search-box .search-mid-box .menu-right li { text-align: left; } .top-search-box .search-mid-box .menu-right li a { padding-left: 20px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .top-search-box .search-mid-box .menu-right li ul li a { border-top-left-radius: 0; border-bottom-left-radius: 0; } .top-search-box .search-mid-box .menu-right li:last-child { margin-bottom: 0; } .top-search-box .search-mid-box:before, .top-search-box .search-mid-box:after { content: " "; display: table; } .top-search-box .search-mid-box:after { clear: both; } .top-news-box .news-mid-box { padding-top: 30px; padding-bottom: 30px; padding-left: 15px; border-left: 3px solid #000000; border-right: 3px solid #000000; background-color: rgba(255, 255, 255, 0.7); overflow-x: auto; text-align: center; max-height: 800px; } .top-news-box .news-mid-box h3 { color: #000000; margin: 0; } .top-news-box .news-mid-box .news-mid-item { display: inline-block; width: 27%; margin: 10px 2.4%; vertical-align: top; } .top-news-box .news-mid-box .news-mid-item dl dt { text-align: center; } .top-news-box .news-mid-box .news-mid-item dl dt span { display: inline-block; padding: 2px 5px; } .top-news-box .news-mid-box .news-mid-item dl dd.item-img { width: 100%; } .top-news-box .news-mid-box .news-mid-item dl dd.item-img img { width: 100%; } .top-news-box .news-mid-box .news-mid-item dl dd.item-txt { margin: 5px 0; } .top-news-box .noticeListBox { margin-bottom: 180px; } .top-news-box .container ul.slider { margin: 0 0 100px; padding-bottom: 50px; } .top-news-box .container ul.slider dl { width: 320px; } .top-news-box .container .slider dd { font-size: 19px; } .top-news-box .container .slider dd.icon-space { margin: 10px 0; } .top-news-box .container .slider dd.icon-space p { background: #D31777; color: #FFF; font-size: 20px; padding: 2px; width: 80px; border-radius: 6px; display: block; margin: 0 auto; } .top-news-box .container .slider dd.title-design { display: table; width: 100%; border-bottom: 9px double #FFF; margin: 0 0 10px; } .top-news-box .container .slider dd.title-design div.title-design-content { color: #000; font-size: 20px; display: table-cell; vertical-align: middle; } .top-news-box .container .slider dd.title-description { font-weight: normal; color: #000; margin: 0 0 30px; } .top-news-box .container .slider dd.title-link a { background: #D31177; color: #FFF; border-radius: 5px; padding: 4px 20px; font-size: 20px; } .top-news-box .container .noticeListBox dl dt img { vertical-align: top; } .top-menu-box .menu-mid-box { margin-bottom: 150px; } .top-menu-box .menu-mid-box dl.menu-mid-item { margin-top: 50px; position: relative; text-align: center; margin-bottom: 80px; } .top-menu-box .menu-mid-box dl.menu-mid-item dt.menu-img { position: absolute; float: left; z-index: 1; } .top-menu-box .menu-mid-box dl.menu-mid-item dt.menu-img img { width: 100%; } .top-menu-box .menu-mid-box dl.menu-mid-item dt.menu-img .menu-img-pc { display: block; } .top-menu-box .menu-mid-box dl.menu-mid-item dt.menu-img .menu-img-sp { display: none; } .top-menu-box .menu-mid-box dl.menu-mid-item dt.link-arrow-sp { display: none; } .top-menu-box .menu-mid-box dl.menu-mid-item dd { display: inline-block; border: 2px solid #000000; position: relative; background: #FFF; opacity: .7; } .top-menu-box .menu-mid-box dl.menu-mid-item dd img.link-arrow-right { position: absolute; bottom: 0; right: -2px; } .top-menu-box .menu-mid-box dl.menu-mid-item dd img.link-arrow-left { position: absolute; bottom: 0; left: -2px; } .top-menu-box .menu-mid-box dl.menu-mid-item:before, .top-menu-box .menu-mid-box dl.menu-mid-item:after { content: " "; display: table; } .top-menu-box .menu-mid-box dl.menu-mid-item:after { clear: both; } .top-menu-box .menu-mid-box dl#topMenuID1 dt.menu-img { top: -140px; left: 50px; } .top-menu-box .menu-mid-box dl#topMenuID1 dd { width: 460px; text-align: right; padding-top: 20px; padding-bottom: 20px; padding-right: 6%; } .top-menu-box .menu-mid-box dl#topMenuID2 dt.menu-img { right: 10px; top: -110px; } .top-menu-box .menu-mid-box dl#topMenuID2 dd { width: 620px; padding-top: 20px; padding-bottom: 20px; padding-left: 7%; text-align: left; } .top-menu-box .menu-mid-box dl#topMenuID3 dt.menu-img { left: 60px; top: -120px; } .top-menu-box .menu-mid-box dl#topMenuID3 dd { width: 540px; text-align: right; padding-top: 20px; padding-bottom: 20px; padding-right: 7%; } .top-menu-box .menu-mid-box dl#topMenuID4 dt.menu-img { right: -20px; top: -120px; } .top-menu-box .menu-mid-box dl#topMenuID4 dd { width: 460px; padding-top: 35px; padding-bottom: 35px; padding-left: 4%; text-align: left; } .top-menu-box .menu-mid-box dl#topMenuID5 dt.menu-img { left: 60px; top: -120px; } .top-menu-box .menu-mid-box dl#topMenuID5 dd { width: 540px; text-align: right; padding-top: 35px; padding-bottom: 35px; padding-right: 4%; } .top-school-box { text-align: center; padding-bottom: 100px; } .top-school-box .school-mid-box { text-align: center; padding: 20px; } .top-school-box .school-sp { display: none; } .top-school-box .link-school-detail { display: inline-block; margin-top: 40px; } .top-recruit-box { text-align: center; padding-bottom: 100px; } .top-recruit-box .school-mid-box { text-align: center; padding: 20px; } .top-recruit-box .school-sp { display: none; } .top-recruit-box .link-school-detail { display: inline-block; margin: 40px 0 60px; } .top-recruit-box .recruit-mid-box img { width: 100%; padding: 30px 0 0; } .top-recruit-box .recruit-mid-box { text-align: center; margin: 50px auto 150px; max-width: 1000px; } .top-recruit-box .recruit-mid-box ul li { list-style: none; display: inline-block; border: 0; margin: 0; padding: 0; } .top-recruit-box .recruit-mid-box ul li:nth-child(odd) { width: 268px; } .top-recruit-box .recruit-mid-box ul li img { padding: 0; } .top-special-box { text-align: center; padding-bottom: 160px; } .top-special-box .special-mid-box { text-align: center; margin: 0 auto; padding: 20px; max-width: 806px; } .top-special-box .special-mid-box img { width: 100%; } .top-sns-box { padding-bottom: 80px; } .top-sns-box .sns-mid-box { text-align: center; } .top-sns-box .sns-mid-box .twitter-box { display: inline-block; width: 400px; margin-right: 40px; text-align: center; vertical-align: top; } /* .top-sns-box .sns-mid-box .twitter-box .twitter-timeline { width: 100%; } */ .top-sns-box .sns-mid-box .twitter-box .twitter-timeline { width: 100vw !important; } .top-sns-box .sns-mid-box .line-box { display: inline-block; width: 400px; text-align: center; vertical-align: top; } .top-sns-box .sns-mid-box .line-box .line-line img { width: 100%; } .top-sns-box .sns-mid-box #snsIconList { list-style: none; margin: 70px auto; padding: 0; } .top-sns-box .sns-mid-box #snsIconList li { display: inline-block; margin-left: 3px; margin-right: 3px; } .top-ad-box { padding-top: 100px; } .top-ad-box .ad-mid-box { text-align: center; } .top-ad-box .ad-mid-box a { display: inline-block; margin: 0 10px; width: 28%; text-align: center; vertical-align: middle; } .top-ad-box .ad-mid-box a img { width: 100%; } /* top susi img */ .top-show-img { position: absolute; } .top-show-img img { width: 100%; position: absolute; top: 50%; left: 0; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } #topShow0 { width: 34%; vertical-align: middle; bottom: 1vw; right: 26vw; z-index: 999; } #topShow00 { width: 20%; vertical-align: middle; bottom: 0vw; right: 26vw; z-index: 999; } #topShow000 { width: 20%; vertical-align: middle; bottom: 100%; right: -2%; z-index: 9999; } #topShow1 { width: 30%; height: 298px; vertical-align: middle; bottom: -22%; left: 26%; } #topShow2 { width: 44%; height: 429px; vertical-align: middle; bottom: -25%; right: 30%; } #topShow3 { width: 40%; height: 320px; vertical-align: middle; bottom: -22%; left: 24%; } #topShow4 { width: 32%; height: 493px; vertical-align: middle; bottom: -38%; right: 22%; } #topShow5 { width: 36%; height: 320px; vertical-align: middle; bottom: -25%; left: 16%; } #topShow6 { width: 36%; height: 420px; vertical-align: middle; bottom: -25%; right: 22%; } #topShow0-1 { width: 38%; bottom: 20%; left: 0%; z-index: 999; } #topShow1-1 { width: 36vw; bottom: -34vh; left: 64vw; } #topShow1-2 { width: 36vw; bottom: -34vh; left: 64vw; } #topShow1-3 { width: 36vw; bottom: -4vh; left: 64vw; } #topShow1-4 { width: 36vw; bottom: -38vh; left: 64vw; } #topShow2-1 { width: 42vw; bottom: -52vh; left: 4vw; } #topShow2-2 { width: 42vw; bottom: -44vh; left: 4vw; } #topShow2-3 { width: 42vw; bottom: 0vh; left: 4vw; } #topShow2-4 { width: 42vw; bottom: -26vh; left: 4vw; } #topShow3-1 { width: 65vw; bottom: -56vh; left: 68vw; } #topShow3-2 { width: 65vw; bottom: -44vh; left: 68vw; } #topShow3-3 { width: 65vw; bottom: -22vh; left: 68vw; } #topShow3-4 { width: 65vw; bottom: -62vh; left: 68vw; } #topShow4-1 { width: 42vw; bottom: -162vh; left: -6vw; } #topShow4-2 { width: 42vw; bottom: -92vh; left: -6vw; } #topShow4-3 { width: 42vw; bottom: -14vh; left: -6vw; } #topShow4-4 { width: 42vw; bottom: -58vh; left: -6vw; } #topShow5-1 { width: 36vw; bottom: -148vh; left: 68vw; } #topShow5-2 { width: 36vw; bottom: -112vh; left: 68vw; } #topShow5-3 { width: 36vw; bottom: -30vh; left: 68vw; } #topShow5-4 { width: 36vw; bottom: -72vh; left: 68vw; } #topShow6-1 { width: 46vw; bottom: -176vh; left: -14vw; } #topShow6-2 { width: 46vw; bottom: -148vh; left: -14vw; } #topShow6-3 { width: 46vw; bottom: -48vh; left: -14vw; } #topShow6-4 { width: 46vw; bottom: -126vh; left: -14vw; } #topShow7-1 { width: 36vw; bottom: -206vh; left: 68vw; } .effect-fade { opacity : 0; transform : translate(0, 45px); transition : all 1s; } .effect-fade.effect-scroll { opacity : 1; transform : translate(0, 0); } .bg-switcher { width: 100vw; height: 100vh; background-position: center center; background-size: cover; display: flex; align-items: center; justify-content: center; } .pc-none { display: none; } .sp-none { display: block; } .wrap { overflow: hidden; } .slideConts { width: 800px; height: 400px; margin: 40px auto; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; } .slideConts_ex { width: 500px; height: 400px; margin: 40px auto; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; } .slideConts_top1 { width: 500px; height: auto; margin: 40px auto; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; } .slideConts_top2 { width: 500px; height: auto; margin: 40px auto; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; } .slideContsL { transform: translate(-300%, 0); } .slideContsR { transform: translate(300%, 0); } .slideContsL.show { transform: translate(-78%, 0) !important; } .slideContsR.show { transform: translate(78%, 0) !important; } .slideConts_top1.show { transform: translate(78%, 0) !important; } .slideConts_top2.show { transform: translate(78%, 0) !important; } #animation { margin: 50px 0; font-size: 40px; font-weight: bold; color: #ff0000; } .fadeInDown { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1s; -ms-animation-duration:1s; animation-duration:1s; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; visibility: visible !important; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-300px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-300px); -ms-transform: translateY(-300px); transform: translateY(-300px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .swiper-slide-active .slide-img, .swiper-slide-duplicate-active .slide-img, .swiper-slide-prev .slide-img { /* animation: zoomUp 24s ease 2s 1 normal both;*/ } @keyframes zoomUp { 0% { transform: scale(1); } 100% { transform: scale(1.25); } } .slick-dots { width: 1060px; } .slick-dots li button:before { font-size: 16px; } .header-image { background: url(../img/image_bg_2.png) no-repeat bottom; background-size: 100%; height: 40vw; position: relative; margin-top: 144px; } .main-big { width: 54%; float: left; display: block; max-width: 60%; overflow: hidden; } .main-small { width: 40%; float: right; display: inline-block; } .main-text { width: 6%; float: left; display: inline-block; } .swiper-slide img { display: inline-block; width: 100%; } .slideMenuL { position: absolute; left: 20vw; } .slideMenuR { position: absolute; right: 20vw; } /* CustomScrollBar */ /* .mCS-inset-2-dark.mCSB_scrollTools { margin-right: 10px; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 16px; margin: 2px 2px; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail { width: 20px; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp { margin-left: 1px; background-position: -95px -72px; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown { margin-left: 1px; background-position: -95px -92px; } .mCS-inset-2-dark .mCSB_container { padding: 10px 0; } */ .swiper-wrapper { transition-timing-function:linear; } @media (max-width: 1700px) { #topShow0 { bottom: -1vw; right: 26vw; } #topShow00 { bottom: 0vw; right: 26vw; } } @media (max-width: 1600px) { #topShow0 { bottom: -1vw; right: 26vw; } #topShow00 { bottom: 0vw; right: 26vw; } } @media (max-width: 1500px) { #topShow0 { bottom: -1vw; right: 26vw; } #topShow00 { bottom: 0vw; right: 26vw; } } @media (max-width: 1400px) { #topShow0 { bottom: -1vw; right: 26vw; } #topShow00 { bottom: 0vw; right: 26vw; } } @media (max-width: 1300px) { #topShow0 { bottom: -2vw; right: 26vw; } #topShow00 { bottom: 0vw; right: 26vw; } } @media (max-width: 1200px) { #topShow0 { bottom: -2vw; right: 26vw; } #topShow00 { bottom: 0vw; right: 26vw; } } @media (max-width: 1600px) { #topShow1-1 { width: 36vw; top: 106vw; left: 64vw; } #topShow1-2 { width: 36vw; top: 102vw; left: 64vw; } #topShow1-3 { width: 36vw; top: 78vw; left: 64vw; } #topShow1-4 { width: 36vw; top: 96vw; left: 64vw; } #topShow2-1 { width: 42vw; top: 118vw; left: 4vw; } #topShow2-2 { width: 42vw; top: 118vw; left: 4vw; } #topShow2-3 { width: 42vw; top: 82vw; left: 4vw; } #topShow2-4 { width: 42vw; top: 98vw; left: 4vw; } #topShow3-1 { width: 65vw; top: 138vw; left: 68vw; } #topShow3-2 { width: 65vw; top: 120vw; left: 68vw; } #topShow3-3 { width: 65vw; top: 96vw; left: 68vw; } #topShow3-4 { width: 65vw; top: 122vw; left: 68vw; } #topShow4-1 { width: 42vw; top: 188vw; left: -6vw; } #topShow4-2 { width: 42vw; top: 152vw; left: -6vw; } #topShow4-3 { width: 42vw; top: 90vw; left: -6vw; } #topShow4-4 { width: 42vw; top: 120vw; left: -6vw; } #topShow5-1 { width: 36vw; top: 196vw; left: 68vw; } #topShow5-2 { width: 36vw; top: 164vw; left: 68vw; } #topShow5-3 { width: 36vw; top: 96vw; left: 68vw; } #topShow5-4 { width: 36vw; top: 128vw; left: 68vw; } #topShow6-1 { width: 46vw; top: 224vw; left: -14vw; } #topShow6-2 { width: 46vw; top: 190vw; left: -14vw; } #topShow6-3 { width: 46vw; top: 110vw; left: -14vw; } #topShow6-4 { width: 46vw; top: 162vw; left: -14vw; } #topShow7-1 { width: 36vw; top: 250vw; left: 68vw; } .top-search-box .search-mid-box ul li a { font-size: 130%; } .slideConts { width: 500px; } } @media (max-width: 1400px) { #topShow1-1 { width: 36vw; top: 114vw; left: 64vw; } #topShow1-2 { width: 36vw; top: 112vw; left: 64vw; } #topShow1-3 { width: 36vw; top: 88vw; left: 64vw; } #topShow1-4 { width: 36vw; top: 106vw; left: 64vw; } #topShow2-1 { width: 42vw; top: 124vw; left: 4vw; } #topShow2-2 { width: 42vw; top: 124vw; left: 4vw; } #topShow2-3 { width: 42vw; top: 88vw; left: 4vw; } #topShow2-4 { width: 42vw; top: 104vw; left: 4vw; } #topShow3-1 { width: 65vw; top: 150vw; left: 68vw; } #topShow3-2 { width: 65vw; top: 132vw; left: 68vw; } #topShow3-3 { width: 65vw; top: 108vw; left: 68vw; } #topShow3-4 { width: 65vw; top: 134vw; left: 68vw; } #topShow4-1 { width: 42vw; top: 200vw; left: -6vw; } #topShow4-2 { width: 42vw; top: 164vw; left: -6vw; } #topShow4-3 { width: 42vw; top: 102vw; left: -6vw; } #topShow4-4 { width: 42vw; top: 132vw; left: -6vw; } #topShow5-1 { width: 36vw; top: 220vw; left: 68vw; } #topShow5-2 { width: 36vw; top: 178vw; left: 68vw; } #topShow5-3 { width: 36vw; top: 110vw; left: 68vw; } #topShow5-4 { width: 36vw; top: 142vw; left: 68vw; } #topShow6-1 { width: 46vw; top: 250vw; left: -14vw; } #topShow6-2 { width: 46vw; top: 214vw; left: -14vw; } #topShow6-3 { width: 46vw; top: 124vw; left: -14vw; } #topShow6-4 { width: 46vw; top: 176vw; left: -14vw; } #topShow7-1 { width: 36vw; top: 286vw; left: 68vw; } } .youtube-area { width: 100%; background: #0E2A4F; height: 26vw; padding: .25vw 0vw 1vw 1vw; } .youtube-area .youtube-title img { width: 100%; } .youtube-area .youtube-next { float: left; height: 20vw; overflow-y: scroll; } .youtube-area .youtube-next ul { margin: 0; padding: 0; border: 0; padding: .5vw; background: #FFF; } .youtube-area .youtube-next ul li { list-style: none; } .youtube-area .youtube-now { float: left; padding: 0 1vw; } .movie-area { width: 100%; background: #CE1177; height: 26vw; } .movie-area .movie-left { float: left; width: 80%; margin: 0; padding: 0.5vw; border: 0; } .movie-area .movie-right { float: right; width: 20%; margin: 0; padding: 0; border: 0; } .movie-area .movie-next ul { margin: 0; padding: 0; border: 0; padding: .25vw; background: #FFF; height: 7vw; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } .movie-area .movie-next ul li { list-style: none; display: inline-block; overflow: auto; padding: .05vw; } .movie-area .movie-next ul li .movie-thumbnail { width: 9.75vw; height: 5.5vw; border: 1px solid #000; display: inline-block; vertical-align: baseline; overflow: hidden; position: relative; } .movie-area .movie-next ul li .movie-thumbnail .movie-thumbnail-image { width: 100%; height: 100%; background-color: #000; text-align: center; } .movie-area .movie-next ul li .movie-thumbnail .movie-thumbnail-image img { height: 100%; } .movie-area .movie-next ul li .movie-thumbnail .movie-thumbnail-play { position : absolute; display: none; text-align: center; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: #000; opacity: 0.7; } .movie-area .movie-next ul li .movie-thumbnail .movie-thumbnail-play .movie-thumbnail-play-icon { display: inline-block; top: 50%; margin: auto; position: relative; transform: translateY(-50%); cursor: pointer; background: url("../img/btn_float.png") no-repeat; background-size: contain; width: 3vw; height: 3vw; } .movie-area .movie-next ul li .movie-thumbnail:hover .movie-thumbnail-play, .movie-area .movie-next ul li .movie-thumbnail.active .movie-thumbnail-play { display: block; } .movie-area .movie-now { margin-bottom: .5vw; } .movie-area .movie-title img { width: 100%; } /* Media Queries below 1199px */ @media (max-width: 1199px) { .top-search-box .search-mid-box ul { margin-top: 40px; } .top-search-box .search-mid-box ul li { margin-bottom: 50px; } .top-search-box .search-mid-box ul li a { line-height: 50px; font-size: 110%; font-weight: 600px; } .top-menu-box .menu-mid-box dl#topMenuID1 dt.menu-img { left: 0px; top: -100px; } .top-menu-box .menu-mid-box dl#topMenuID2 dt.menu-img { right: -20px; top: -150px; } .top-menu-box .menu-mid-box dl#topMenuID3 dt.menu-img { left: -20px; top: -100px; } .top-menu-box .menu-mid-box dl#topMenuID4 dt.menu-img { right: -20px; top: -80px; } } /* Media Queries below 991px */ @media (max-width: 991px) { .header-image { margin-top: 137px; height: 120vw; } .main-big { float: none; width: 100%; max-width: 100%; } .main-small { float: none; width: 100%; } .main-text { display: none; } .top-show-img img { display: none; } .youtube-area { padding: 0; } .youtube-area .youtube-now { float: none; padding: 0; } .youtube-area .youtube-now iframe { width: 100vw !important; height: 56vw !important; } .youtube-area .youtube-next { display: none; } .movie-area { height: 62vw; } .movie-area .movie-left { padding: 0; } .movie-area .movie-now { padding: 0; } .movie-area .movie-now iframe { width: 100% !important; height: 62vw !important; } .movie-area .movie-next { display: none; } .top-search-box .search-mid-box .menu-left li a { border-radius: 5px; } .top-search-box .search-mid-box .menu-left { top: -400px; } .slideConts { width: 88vw; } .slideContsL.show { transform: none !important; } .slideMenuL { left: 3vw; } .top-search-box .search-mid-box .menu-right li a { border-radius: 5px; } .top-search-box .search-mid-box .menu-right { top: -220px; } .slideContsR.show { transform: none !important; } .slideMenuR { right: 3vw; } .slick-list { margin: 0 auto; width: 320px; } .slick-slider { padding: 0; } #sliderBox { margin-top: 102px; } #sliderBox #sliderSushi { padding-top: 30px; } #sliderBox #sliderSushi li { height: 50px; } #sliderBox #sliderPerson { width: 70%; } .top-arrow { display: none; } .top-bg-gray { background: none; } .footer-bg-gray { background: none; } .top-bg-pink { background: none; background-color: rgba(240, 214, 231, 0.5); } .top-search-box .search-mid-box { margin: 20px auto; } .top-search-box .search-mid-box ul li { margin-bottom: 20px; } .top-search-box .search-mid-box ul li a { line-height: 40px; font-size: 20px; font-weight: normal; } .top-search-box .search-mid-box .img-box { display: block; width: 100%; margin: 0 0 400px; } .top-search-box .search-mid-box .img-box img { width: 50%; } .top-search-box .search-mid-box .menu-left { position: relative; width: auto; } .top-search-box .search-mid-box .menu-left li a { text-align: center; padding: 0; } .top-search-box .search-mid-box .menu-right { position: relative; width: auto; } .top-search-box .search-mid-box .menu-right li a { text-align: center; padding: 0; } .top-search-box .search-mid-box .menu-left { left: 1vw; } .top-search-box .search-mid-box .menu-right { float: left; left: 95vw;} .top-news-box .news-mid-box { height: 800px !important; margin-left: 10px; margin-right: 10px; } .top-news-box .news-mid-box .news-mid-item { display: block; width: 80%; margin: 10px auto; vertical-align: top; text-align: center; } .top-news-box .news-mid-box .news-mid-item dl dt { text-align: center; } .top-news-box .news-mid-box .news-mid-item dl dt span { display: inline-block; padding: 2px 5px; } .top-news-box .news-mid-box .news-mid-item dl dd.item-img { width: 100%; } .top-news-box .news-mid-box .news-mid-item dl dd.item-img img { width: 100%; } .top-news-box .news-mid-box .news-mid-item dl dd.item-txt { margin: 5px 0; } .top-news-box .noticeListBox { margin-left: 10px; margin-right: 10px; margin-bottom: 120px; padding: 20px; padding-right: 0px; } .top-news-box .noticeListBox dl dt { float: none; width: 100%; font-size: 16px; } .top-news-box .noticeListBox dl dd { padding-left: 0; } .top-news-box .container ul.slider { margin: 0; padding-bottom: 0; } .top-menu-box .menu-mid-box { margin-bottom: 50px; margin-left: 40px; margin-right: 40px; } .top-menu-box .menu-mid-box dl.menu-mid-item { border: 2px solid #000000; height: 80px; margin-top: 10px; margin-bottom: 10px; left: 0 !important; } .top-menu-box .menu-mid-box dl.menu-mid-item dt { display: none; } .top-menu-box .menu-mid-box dl.menu-mid-item dt.menu-img { position: static; height: 100%; text-align: center; width: 35%; } .top-menu-box .menu-mid-box dl.menu-mid-item dt.menu-img .menu-img-pc { display: none; } .top-menu-box .menu-mid-box dl.menu-mid-item dt.menu-img .menu-img-sp { display: inline-block; margin: 1%; width: auto; height: 80%; } .top-menu-box .menu-mid-box dl.menu-mid-item dt.link-arrow-sp { display: inline-block; position: absolute; bottom: 0; right: -2px; } .top-menu-box .menu-mid-box dl.menu-mid-item dd { border: none; display: block !important; text-align: left !important; float: right; width: 100% !important; } .top-menu-box .menu-mid-box dl.menu-mid-item dd img.link-arrow-right, .top-menu-box .menu-mid-box dl.menu-mid-item dd img.link-arrow-left { display: none; } .top-menu-box .menu-mid-box dl#topMenuID1 dd { height: 100%; padding-top: 20px; padding-left: 6%; padding-right: 6%; text-align: left; } .top-menu-box .menu-mid-box dl#topMenuID1 dd img.title-img { height: 100%; } .top-menu-box .menu-mid-box dl#topMenuID2 dd { height: 100%; padding-top: 20px; padding-left: 6%; padding-right: 6%; text-align: left; } .top-menu-box .menu-mid-box dl#topMenuID2 dd img.title-img { height: 100%; } .top-menu-box .menu-mid-box dl#topMenuID3 dd { height: 100%; padding-top: 20px; padding-left: 6%; padding-right: 6%; text-align: left; } .top-menu-box .menu-mid-box dl#topMenuID3 dd img.title-img { height: 100%; } .top-menu-box .menu-mid-box dl#topMenuID4 dd { height: 100%; padding-top: 30px; padding-bottom: 30px; padding-left: 6%; padding-right: 6%; text-align: left; } .top-menu-box .menu-mid-box dl#topMenuID4 dd img.title-img { height: 120%; max-height: 26px; } .top-menu-box .menu-mid-box dl#topMenuID5 dd { height: 100%; padding-top: 30px; padding-bottom: 30px; padding-left: 6%; padding-right: 6%; text-align: left; } .top-menu-box .menu-mid-box dl#topMenuID5 dd img.title-img { height: 120%; max-height: 26px; } .top-menu-box .menu-mid-box dl#topMenuID1 dd img.title-img { margin: 0 auto; display: block; } .top-menu-box .menu-mid-box dl#topMenuID2 dd img.title-img { margin: 0 auto; display: block; } .top-menu-box .menu-mid-box dl#topMenuID3 dd img.title-img { margin: 0 auto; display: block; } .top-menu-box .menu-mid-box dl#topMenuID4 dd img.title-img { margin: 0 auto; display: block; } .top-menu-box .menu-mid-box dl#topMenuID5 dd img.title-img { margin: 0 auto; display: block; } .top-school-box { text-align: center; padding-bottom: 40px; } .top-school-box .school-mid-box { text-align: center; } .top-school-box .school-pc { width: 100%; } .top-school-box ul.sp_school_course { width: 100%; list-style: none; margin: 0; padding: 0; } .top-school-box ul.sp_school_course li { padding-left: 30px; padding-right: 30px; margin-bottom: 20px; } .top-school-box ul.sp_school_course li img { width: 100%; } .top-special-box { padding-bottom: 40px; } .top-sns-box { padding-bottom: 40px; } .top-sns-box .sns-mid-box .twitter-box { display: inline-block; width: 90%; margin-left: auto; margin-right: auto; text-align: center; vertical-align: top; } .top-sns-box .sns-mid-box .line-box { display: inline-block; width: 90%; margin-left: auto; margin-right: auto; text-align: center; vertical-align: top; } .top-ad-box { display: none; } .top-show-img { display: none; } #topShow0, #topShow1, #topShow2, #topShow3, #topShow4, #topShow5, #topShow6 { display: none; height: 0; } .top-recruit-box .recruit-mid-box ul li.sp-none { display: none; } .top-recruit-box .recruit-mid-box ul li { display: block; margin: 0 0 10px; } .top-recruit-box .recruit-mid-box ul li img { width: 80%; } .recruit-mid-box ul { margin: 0 auto; width: 268px; } } @media (max-width:770px) { .top-search-box .search-mid-box ul.dropmenu-1 li { display: none; } .top-search-box .search-mid-box ul.dropmenu-2 li { display: none; } } @media (min-width:771px) { .top-search-box .search-mid-box ul li a.iframe2 { pointer-events: none; } .top-search-box .search-mid-box ul li a.iframe4 { pointer-events: none; } } @media (max-width: 480px) { .pc-none { margin: 0 auto; display: inline-block; width: 100%; } .pc-none img { width: 200%; margin: 115px -50% 0; } .sp-none { display: none; } .h-two img { width: 50%; padding-top: 30px; } .top-triangle-1, .top-triangle-2, .top-triangle-3, .top-triangle-4, .top-triangle-5, .top-triangle-6, .top-triangle-7 { background-image: none; } .top-triangle-3 .h-two img, .top-triangle-7 .h-two img { width: 38%; } .top-news-box .container .slider dd.title-design { border-bottom: 6px double #FFF; } .top-search-box .search-mid-box .img-box img { width: 70%; } .link-school-detail img { width: 80%; } .top-school-box .school-mid-box { padding: 20px 0; } .top-news-box .noticeListBox { margin-bottom: 60px; } .top-recruit-box { padding-bottom: 40px; } .top-sns-box { padding-bottom: 0; } .top-news-box .container { width: 100%; padding-left: 0px; padding-right: 0px; } .top-recruit-box .recruit-mid-box { margin: 0 auto; } .top-search-box .search-mid-box { margin: 10px auto 20px; } .top-recruit-box .recruit-mid-box img { padding-top: 10px; } .top-special-box .special-mid-box { padding: 10px 20px 20px; } .top-sns-box .sns-mid-box { margin-top: 10px; } } @media (max-width: 1400px) { .home .container { width: 1060px; } .top-menu-box .menu-mid-box dl.menu-mid-item dt.menu-img img { width: 90%; } .top-menu-box .menu-mid-box dl#topMenuID1 dt.menu-img { top: -100px; } .top-menu-box .menu-mid-box dl#topMenuID2 dt.menu-img { top: -80px; } .top-menu-box .menu-mid-box dl#topMenuID3 dt.menu-img { left: 40px; top: -100px; } .top-menu-box .menu-mid-box dl#topMenuID4 dt.menu-img { right: -60px; top: -100px; } .top-menu-box .menu-mid-box dl#topMenuID5 dt.menu-img { left: 50px; top: -130px; } .top-menu-box .menu-mid-box dl#topMenuID1 dd { width: 420px; } .top-menu-box .menu-mid-box dl#topMenuID2 dd { width: 580px; } .top-menu-box .menu-mid-box dl#topMenuID3 dd { width: 460px; } .top-menu-box .menu-mid-box dl#topMenuID4 dd { width: 440px; } .top-menu-box .menu-mid-box dl#topMenuID5 dd { width: 530px; } } @media (max-width: 1000px) { .home .container { width: 100%; padding-left: 15px; padding-right: 15px; } }