@charset "utf-8"; /* /////////////////////////////////////////// CSS FOR Common Made by Ngoc Thuy (ゴックトゥイ) ///////////////////////////////////// */ html { overflow-y: scroll; } html { visibility: hidden; } html.wf-active { visibility: visible; } .break-word { word-break: break-all; } .wf-loading { /* here's a background image (at a meer 723bytes) to indicate something's happening */ /* just to make sure the element shares the same dimensions as the browser window when loading (and not the potentially elongated page) */ height: 100%; overflow: hidden; } /*/ ////BODY//// /*/ body { font-size: 12px; line-height: 1.4; font-family: 'Noto Serif JP', serif; color: #fff; overflow: hidden; } img { vertical-align: top; max-width: 100%; height: auto; margin: 0 auto; text-align: center; } a { text-decoration: underline; color: #2219da; } a:hover { text-decoration: none; } .sp { display: none; } /* /////////////////// HEADER /////////////////// */ #Header.load-video.pc { background: transparent; } #Header.load-video.pc #Nav { display: none; } #Header.load-video.pc .header-inner { background: transparent; } #Header.load-video.pc .spMenuHomeFirstLoad { display: block; } #Header { position: relative; z-index: 9999; background: #010733; width: 100%; } #Header .header-inner { background: #010733; } #Header .header-inner .inner-item { position: relative; height: 100px; display: flex; align-content: center; align-items: center; justify-content: space-between; } #Header #Logo { position: relative; z-index: 999999; display: inline-block; padding: 10px 0; } #Header .globalNavi { position: absolute; right: 0; z-index: 9999; top: 0; } #Header #Nav { display: flex; justify-content: space-between; overflow: hidden; position: relative; z-index: 999999; } #Header #Nav .nav-cont a { padding-right: 0; } #Header #Nav .nav-cont a:after { margin-left: -15px; } #Header #Nav .nav-note a:after { margin-left: -15px; } #Header #Nav a { text-align: center; text-transform: uppercase; font-size: 14px; font-family: 'Abel', sans-serif; display: block; color: #fff; padding: 28px 15px; position: relative; text-decoration: none; } #Header #Nav a:after { position: absolute; bottom: 10px; content: ''; width: 50px; left: 50%; margin-left: -25px; height: 3px; background: #fff; transform: scale(0, 1); transform-origin: center top; transition: transform 0.3s; text-decoration: none; } #Header #Nav a:hover { text-decoration: none; } #Header #Nav a:hover:after { transform: scale(1, 1); } #Header #Nav .current:after { transform: scale(1, 1); } #Header #Nav span { display: block; font-size: 18px; font-family: 'Sawarabi Mincho', sans-serif; } #Header #Nav .nav-note { position: relative; } #Header #Nav .nav-note span { font-family: 'Noto Serif JP', serif; font-size: 18px; text-transform: uppercase; } #Header #Nav .nav-note a { font-family: 'Noto Serif JP', serif; font-size: 12px; padding: 25px 15px 20px 30px; text-transform: none; } #Header #Nav .nav-note:after { background: #b11b48; content: ''; width: 100%; height: 100%; position: absolute; top: 0; padding: 30px 40px; right: -5px; z-index: -1; transform-origin: bottom left; -ms-transform: skew(-20deg, 0deg); -webkit-transform: skew(-20deg, 0deg); transform: skew(-20deg, 0deg); } #Header.pc.fixed-header { background: #010733; top: 0; height: auto; position: fixed; width: 100%; z-index: 99999; } #Header.pc.fixed-header:after { display: none; -webkit-transition: all 0.3s 0s ease; -o-transition: all 0.3s 0s ease; transition: all 0.3s 0s ease; } #Header.pc.fixed-header, #Header.fixed-header { background: #010733; top: 0; height: auto; position: fixed; width: 100%; z-index: 99999; } #Header.pc.fixed-header:after, #Header.fixed-header:after { display: none; -webkit-transition: all 0.3s 0s ease; -o-transition: all 0.3s 0s ease; transition: all 0.3s 0s ease; } /*/ /// Contents ./// /*/ .ttl-headline01 { text-align: center; font-size: 48px; color: #000; font-family: 'Abel', 'Sawarabi Mincho', 'Noto Serif JP', serif; padding-bottom: 35px; text-transform: uppercase; letter-spacing: 1px; line-height: 40px; font-weight: bold; } .ttl-headline01 span { font-size: 24px; font-family: 'Sawarabi Mincho', sans-serif; line-height: 32px; display: block; font-weight: bold; } .ttl-headline02 { font-family: 'Abel', 'Sawarabi Mincho', 'Noto Serif JP', serif; font-size: 30px; position: relative; padding-bottom: 10px; border-bottom: 2px solid #ccc; color: #000; margin-bottom: 20px; font-weight: bold; } .ttl-headline02:after { font-weight: bold; position: absolute; bottom: -2px; left: 0; z-index: 2; content: ''; width: 20%; height: 3px; background-color: #b11b48; } .block-about { background: #010733 url('../images/common/bg_football.png') 100% 0 no-repeat; padding: 50px 0; } .block-about .container { position: relative; } .block-about .ttl-headline01 { color: #fff; } .block-about .ttl-about { position: absolute; right: -60px; top: 120px; } .block-about .text-inner { font-size: 18px; padding-bottom: 25px; line-height: 30px; } .block-concept { padding-bottom: 50px; } .block-area ul { display: flex; justify-content: space-between; text-align: center; } .block-area ul li { width: 50%; } .m-button { position: relative; display: inline-flex; color: #000; line-height: 1; font-size: 18px; padding: 20px 45px; text-decoration: none; } .m-button:hover { text-decoration: none; } .m-button span { display: block; position: relative; z-index: 2; font-weight: bold; line-height: 14px; } .m-button span img { vertical-align: middle; padding-left: 20px; } .m-button:hover { text-decoration: none; color: #000; } .m-button.m-button-skew:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: skewX(-15deg); -ms-transform: skewX(-15deg); transform: skewX(-15deg); z-index: 1; background: #fff; -webkit-transition: all 0.3s 0s ease; -o-transition: all 0.3s 0s ease; transition: all 0.3s 0s ease; } .m-button.m-button-skew:hover::before { background: #fcf8e3; } .m-button01 { color: #fff; } .m-button01.m-button-skew:hover { color: #fff; } .m-button01.m-button-skew:hover::before { color: #fff; background: #b11b48; } .m-button01.m-button-skew:before { background: #036; color: #fff; } .m-button02 { color: #fff; } .m-button02.m-button-skew:before { background: #b11b48; } .m-button02.m-button-skew:hover { color: #fff; } .m-button02.m-button-skew:hover::before { color: #fff; background: #036; } .block-area ul li:last-child .text-des { background: url('../images/common/bg_hn.jpg') no-repeat 0 0; background-size: cover; } .text-des { text-align: left; background: url('../images/common/bg_hcm.jpg') no-repeat 0 50%; background-size: cover; margin: 0 0 25px; } .text-des div { min-height: 360px; background: rgba(0, 0, 0, 0.5); position: relative; padding-bottom: 70px; } .text-des h4 { font-size: 24px; font-weight: bold; padding: 15px 35px 10px; display: inline-block; position: relative; z-index: 10; color: #fff; } .text-des h4:after { content: ''; position: absolute; bottom: 5px; left: 0; background: rgba(255, 55, 80, 0.7); height: 10px; width: 100%; z-index: -1; } .text-des p { padding: 10px 15px; font-size: 18px; line-height: 22px; } .text-des .btn-des { position: absolute; bottom: 10px; width: 100%; text-align: center; padding: 0; } .bg-group { background: url('../images/common/bg_paper.png') 0 0; background-size: cover; } /* block-lesson */ .block-lesson { color: #000; padding: 50px 0; } .block-lesson .ttl-headline01 { color: #000; } .block-lesson .block-list li span { min-height: 300px; } .block-lesson .block-list-vn li span { min-height: 490px; } .block-lesson .block-list-vn li span .group p { font-size: 15px; } .block-lesson ul { padding-bottom: 20px; } .block-lesson ul li span { background: #fff; padding: 5px; margin-bottom: 10px; -webkit-box-shadow: 0 0 5px 0 #d4d2d0; box-shadow: 0 0 5px 0 #d4d2d0; color: #000; display: block; text-decoration: none; position: relative; min-height: 390px; } .block-lesson ul li span:before { background: #036; bottom: 0; content: ''; height: 2px; left: 0; position: absolute; right: 100%; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: right; -moz-transition-property: right; transition-property: right; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; transition-timing-function: ease-out; z-index: 0; } .block-lesson ul li span:hover:before { right: 0; } .block-lesson ul .list01 { border-top: 5px solid #f3cadc; } .block-lesson ul .list02 { border-top: 5px solid #000; } .block-lesson ul .list03 { border-top: 5px solid #f69679; } .block-lesson ul .list04 { border-top: 5px solid #1b1464; } .block-lesson .group { padding: 10px 5px; } .block-lesson .group h4 { font-size: 20px; text-align: center; padding-bottom: 10px; font-weight: bold; } .block-lesson .group p { font-size: 15px; line-height: 20px; } .block-lesson .slider { width: 50%; margin: 100px auto; } .block-lesson .slick-slide { margin: 0px 10px; } .block-lesson .slick-slide img { width: 100%; } .block-lesson .slick-prev:before, .block-lesson .slick-next:before { color: black; } .block-lesson .slick-prev { background: url('../images/common/icon_prev.png') no-repeat 0 0; height: 30px; } .block-lesson .slick-next { background: url('../images/common/icon_next.png') no-repeat 0 0; height: 30px; } /* block-link */ .block-link { background: #dbd9d9 url('../images/common/bg_flag02.png') no-repeat 100% 0; padding: 50px 0; } .block-link p { font-size: 20px; text-align: center; color: #000; } .block-link .list-link { display: flex; flex-wrap: wrap; } .block-link .list-link li { padding: 30px 5px 0; width: 25%; } .block-link .list-link a:hover { opacity: 0.7; } /* block-contact */ .group-contact { background: #b11b48; padding: 20px 5px; } .group-contact h3 { font-size: 24px; padding-bottom: 10px; text-align: center; font-weight: bold; } .group-contact p { font-size: 18px; text-align: center; } .group-contact p span { padding: 0 20px; } .group-contact ul { display: flex; justify-content: center; align-content: center; padding-top: 15px; flex-wrap: wrap; } .group-contact ul li { display: flex; justify-content: space-between; align-content: center; align-items: center; padding: 0 30px; } .group-contact ul li span { padding: 0 5px; font-size: 16px; } .group-contact ul li span a { font-size: 20px; color: #fff; text-decoration: underline; } .group-contact ul li span a:hover { text-decoration: none; } .block-contact { padding: 50px 0; } .block-contact .txt-info { color: #000; font-size: 16px; padding-bottom: 30px; line-height: 25px; } .block-contact .block-inner { width: 90%; text-align: center; margin: 0 auto; } .block-contact .block-inner .contact-link { border: 2px solid #000; padding: 30px 10px; display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; margin-top: 30px; flex-wrap: wrap; } .block-contact .block-inner .contact-link:after { content: ''; position: absolute; left: 50%; width: 1px; background: #000; height: 70px; top: -50px; } .block-contact .block-inner .contact-link .contact-inner { color: #000; } .block-contact .block-inner .contact-link .contact-inner h3 { font-family: 'Abel', sans-serif; font-size: 48px; font-weight: bold; padding-bottom: 15px; } .block-contact .block-inner .contact-link .contact-inner p { font-size: 14px; padding-bottom: 10px; } .block-contact .block-inner .contact-link_2 { background-color: #161a44; padding: 30px 10px; display: flex; justify-content: space-around; align-content: center; align-items: center; position: relative; margin-top: 30px; flex-wrap: wrap; } .block-contact .block-inner .contact-link_2:after { content: ''; position: absolute; left: 50%; width: 1px; background: #000; height: 70px; top: -50px; } .block-contact .block-inner .contact-link_2 .contact-inner { color: #fff; } .block-contact .block-inner .contact-link_2 .contact-inner h3 { font-family: 'Abel', sans-serif; font-size: 24px; font-weight: normal; padding-bottom: 15px; } .block-contact .block-inner .contact-link_2 .contact-inner p { font-size: 18px; padding-bottom: 10px; } .block-contact .block-inner .contact-link_2 .contact-inner a { color: #fff; } /*block-social */ .block-social { background: url('../images/common/bg_line.png') no-repeat 100% 10px; padding: 50px 0 0px; } .block-social .list-social { display: flex; justify-content: center; } .block-social .list-social li { padding: 0 10px; width: 520px; } .block-social .list-social li img { width: 100%; } .block-social .list-social li h3 { font-family: 'Abel', sans-serif; text-align: center; font-size: 24px; background: #4267b2; text-transform: uppercase; padding: 10px 0; margin-bottom: -1px; } .block-social .list-social li .bg-tw { background: #1da1f2; color: #fff; } .block-social .list-social .instafeed .instadiv { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; } .block-social .list-social .instafeed .instadiv a { width: 137px; padding: 0; } .block-social .list-social .instafeed .instadiv a img { width: 100%; } /* Sub-visual */ #Sub-visual { background: url('../images/contact/bg_visual.png') no-repeat 50% 0; background-size: cover; position: relative; z-index: 30; } #Sub-visual .visual-detail { display: flex; align-content: center; justify-content: center; justify-items: center; align-items: center; height: 360px; } #Sub-visual h2 { min-width: 400px; font-size: 40px; text-align: center; border: 2px solid #fff; padding: 20px 30px; font-family: 'Abel', 'Sawarabi Mincho', sans-serif; display: inline-block; } .group-right .list-link li { padding-bottom: 20px; } .group-right .list-link li a:hover { opacity: 0.7; } /*page-top*/ #Pagetop { position: fixed; bottom: 15px; right: 25px; cursor: pointer; z-index: 9999; vertical-align: middle; text-align: center; } /* Footer */ #Footer { text-align: center; padding: 90px 0 15px; font-family: 'Abel', sans-serif; font-size: 24px; position: relative; overflow: hidden; } #Footer:after { position: absolute; content: ''; width: 100%; height: 160px; left: 0; top: 70px; background: #010733; -moz-transform: skew(0deg, 4deg); -webkit-transform: skew(0deg, 4deg); -o-transform: skew(0deg, 4deg); -ms-transform: skew(0deg, 4deg); transform: skew(0deg, 4deg); z-index: -1; } .spMenu { display: none; } #Header.load-video.pc .spMenuHomeFirstLoad { display: none; position: relative; top: 0px; right: 10px; width: 40px; line-height: 10px; color: #fff; z-index: 99999; display: block; text-align: center; } #Header.load-video.pc .spMenuHomeFirstLoad .panelBtn { display: inline-block; position: relative; width: 35px; height: 30px; } #Header.load-video.pc .spMenuHomeFirstLoad .panelBtn .panelBtnIcon { display: block; position: absolute; width: 35px; height: 4px; background: #fff; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } #Header.load-video.pc .spMenuHomeFirstLoad .panelBtn .panelBtnIcon:before, #Header.load-video.pc .spMenuHomeFirstLoad .panelBtn .panelBtnIcon:after { display: block; content: ''; position: absolute; top: 15px; left: 0; width: 35px; height: 4px; background: #fff; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } #Header.load-video.pc .spMenuHomeFirstLoad .panelBtn .panelBtnIcon:before { margin-top: -5px; } #Header.load-video.pc .spMenuHomeFirstLoad .panelBtn .panelBtnIcon:after { margin-top: 5px; } #Breadcrumbs a span { color: #000; padding-right: 5px; } .contact-form { padding: 50px 0; } .contact-form .form-contact { margin: 0 auto; float: none; } .contact-form .form-contact .text-contact-des { font-size: 16px; color: #000; text-align: center; padding-bottom: 30px; } .contact-form .text-info { font-size: 14px; color: #000; padding-bottom: 15px; line-height: 24px; } .contact-form .text-info a { text-decoration: underline; } .contact-form .text-info a:hover { text-decoration: none; } .contact-form .form-item-inner { padding: 0 20px; } .block-form { width: 90%; margin: 0 auto; } .block-form table { width: 100%; } th, td { text-align: left; border-bottom: 1px solid #ddd; } .block-form table th { font-size: 16px; width: 30%; color: #000; font-weight: bold; padding: 15px; } .block-form table tr:last-child th, .block-form table tr:last-child td { padding-bottom: 0; border-bottom: none; } .block-form table td { padding: 15px; min-height: 45px; color: #000; font-size: 14px; } .block-form table td .text-inner { padding-top: 5px; } .block-form table td textarea { width: 100%; background: #fff f; border-radius: 5px; padding: 10px 10px; font-size: 14px; height: 130px; resize: none; border-bottom: 1px solid #ddd; } .txt-check label span { height: 22px; width: 22px; display: inline-block; position: relative; vertical-align: middle; margin-right: 10px; } .block-button { text-align: center; } .block-button p { margin: 0 auto 10px; font-size: 16px; } .txt-check label { vertical-align: middle; cursor: pointer; } .group-content { display: grid; grid-template-columns: repeat(12, 1fr); } .group-content .group-left { grid-column: span 9; margin-right: 45px; } .group-content .group-right { grid-column: span 3; text-align: right; } .table-common { width: 100%; background: #fff; } .table-common th { background: #f8f8f8; color: #000; padding: 15px 15px 15px 25px; width: 150px; font-size: 14px; font-weight: bold; } .table-common td { font-size: 14px; color: #000; padding: 15px 25px; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { border-color: #000; background-color: #003663; } .video video { margin-top: -100px; margin-bottom: 50px; max-width: 100%; } .main-thumb video { margin-top: 0; margin-bottom: 0; } #accordion.panel-group .panel { border-radius: 0; } #accordion .panel-default > .panel-heading { padding: 0; border: 0; } @media screen and (max-width: 1199px) { .block-area ul { justify-content: center; } .block-area ul li { padding-bottom: 0; } .block-area ul .text-des { margin-bottom: 0; } .block-area ul p.align-center { background: rgba(0, 0, 0, 0.5); padding-bottom: 30px; } .Containers { width: 100%; margin: 0 auto; } #Header #Nav { display: block; margin-top: 75px; } #Header #Nav li a { background: #010733; padding: 10px; border-top: 1px solid #0a3317; } #Header #Nav li a:hover { background: #000; } #Header:after { position: relative; -webkit-transform: skewY(0deg); -moz-transform: skewY(0deg); -ms-transform: skewY(0deg); -o-transform: skewY(0deg); transform: skewY(0deg); } #Header #Nav .nav-note a { background: #b11b48; padding: 10px; } #Header .globalNavi { width: 100%; height: 100%; text-align: center; position: fixed; top: 0px; right: 0px; padding: 0px; display: none; z-index: 999; overflow: auto; } .globalNavi.open { width: 100%; height: 100%; text-align: center; position: relative; display: block; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } #Header .container { padding: 0; } .spMenu { position: relative; top: 0px; right: 10px; width: 40px; line-height: 10px; color: #fff; z-index: 99999; display: block; text-align: center; } #Header.load-video .spMenu { display: none; } #Header.pc .spMenuHomeFirstLoad { display: none; } .panelBtn { display: inline-block; position: relative; width: 35px; height: 30px; } .panelBtnIcon { display: block; position: absolute; width: 35px; height: 4px; background: #fff; transition: 0.2s; } .panelBtnIcon:before, .panelBtnIcon:after { display: block; content: ''; position: absolute; top: 15px; left: 0; width: 35px; height: 4px; background: #fff; transition: 0.3s; } .panelBtnIcon:before { margin-top: -5px; } .panelBtnIcon:after { margin-top: 5px; } .panelBtn .open { background: transparent; } .panelBtn .open:before, .panelBtn .open:after { margin-top: -5px; } .panelBtn .open:before { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); background: #fff; } .panelBtn .open:after { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); background: #fff; } #Sub-visual { margin-top: 0px; } } .vn .text-des p { font-size: 16px; } .block-lesson ul li span { min-height: 446.25px; } /* Medium devices (desktops, 992px and up) */ @media (max-width: 992px) { .block-about .ttl-about { display: none; } .block-contact .block-inner { width: 100%; } .block-contact .block-inner .contact-form { display: block; } .block-contact .block-inner .contact-form .contact-inner p { padding-bottom: 15px; } .block-contact h3 { font-size: 18px; } .block-area ul { justify-content: center; flex-wrap: wrap; } .block-social { background: none; padding: 30px 0 10px; } .contact-form, .block-about, .block-lesson, .block-link, .block-contact { padding: 30px 0; } .block-concept { padding-bottom: 30px; } .block-contact ul li span a { font-size: 18px; } #Footer { font-size: 16px; } #Header .header-inner .inner-item { height: 75px; } #Header #Logo { left: 0; top: 0; padding: 10px; } #Header #Logo img { max-width: 65%; } .block-lesson ul { padding-bottom: 0; } .block-link p { font-size: 16px; } .block-form { width: 100%; margin: 0 auto; } } @media (max-width: 992px) { .group-contact ul li { padding: 0 10px; min-width: 365px; padding-top: 5px; } .vn .group-contact ul li { padding: 0 10px; min-width: 375px; padding-top: 5px; } .group-contact ul { padding-top: 10px; } .group-contact ul li span.text-bottom { margin-left: -22px; } .group-contact ul li span.text-bottom-vn { margin-left: -60px; } } @media (max-width: 768px) { .pc { display: none; } .sp { display: block; } .block-lesson ul li span { min-height: unset; } #Header #Nav a:after { display: none; } #Header #Nav .current { background: #000; } .block-about { background: #010733 url(../images/common/bg_football.png) 100% 0 no-repeat; background-size: 50% auto; } .m-button span { text-align: center; } .ttl-headline01 { font-size: 30px; padding-bottom: 20px; line-height: 30px; } .ttl-headline01 span { font-size: 18px; } .m-button { font-size: 16px; padding: 20px 15px 20px; } .current:after { display: none; } .block-about .text-inner { font-size: 14px; line-height: 24px; } .block-link .list-link li { width: 50%; padding-top: 10px; text-align: center; } .block-form table th { width: 100%; display: block; border-bottom: none; padding: 15px 0 0; } .block-form table td { width: 100%; display: block; padding: 10px 0 15px; } .contact-form .form-item-inner { padding: 0 0; } .block-button p { font-size: 15px; } .block-concept .fl-right { float: none; text-align: center; } .block-social .list-social { display: block; width: 100%; } .block-social .list-social li { width: 520px; margin: 0 auto 10px; } .block-social .list-social li { margin: 0 auto 10px; width: auto; max-width: 450px; background: #fff; padding: 0.05rem; height: 550px; overflow: hidden; } .block-social .list-social li h3 { font-size: 18px; } .block-contact .block-inner .contact-link .contact-inner h3 { font-size: 30px; } #Pagetop { right: 0; } #Pagetop img { max-width: 80%; } #Footer { padding-top: 50px; margin-top: -20px; } #Footer:after { top: 30px; } #Header #Nav li a { font-size: 12px; } #Header #Nav li a span { font-size: 15px; } #Header #Nav .nav-note a { font-size: 12px; } #Header #Nav .nav-note a span { font-size: 15px; } .block-area ul li { padding-bottom: 20px; width: 100%; } .block-area ul li:last-child { padding-bottom: 0; } .text-des h4 { font-size: 20px; } .text-des p { font-size: 16px; } #Sub-visual .visual-detail { height: 165.89px; } #Sub-visual h2 { padding: 15px 25px; font-size: 26px; min-width: 250px; } .contact-form .form-contact .text-contact-des { padding-bottom: 10px; font-size: 15px; } .group-contact h3 { font-size: 18px; } .group-contact p { font-size: 16px; } .group-contact p span { display: block; } .group-contact ul li span a { font-size: 20px; } .ttl-headline02 { font-size: 18px; margin-bottom: 15px; } .contact-form .text-info { padding-bottom: 0; } .group-content .group-left { grid-column: span 12; margin-right: 0; } .group-content .group-right { grid-column: span 12; padding-top: 10px; } .group-content .group-right ul { flex-wrap: wrap; display: flex; } .group-content .group-right ul li { width: 50%; padding: 10px 5px 0; text-align: center; } .block-contact .txt-info { font-size: 14px; padding-bottom: 15px; } .spMenuHomeFirstLoad { display: none; } .block-lesson .slick-prev, .block-lesson .slick-next { background-size: 60%; } .slick-prev { left: -10px; } .slick-next { right: -20px; } .group-contact ul li span img { width: 66px; height: 44px; } .block-contact .ttl-headline01 { padding-bottom: 5px; } } @media screen and (max-width: 480px) { .block-area ul p.align-center a { width: 92%; margin: 0 auto; display: flex; justify-content: center; } } @media screen and (max-width: 380px) { .group-contact ul li span.text-top { margin-left: -16px; } .group-contact ul li span.text-bottom { margin-left: -27px; } .group-contact ul li span.text-top-vn { margin-left: -6px; } .group-contact ul li span.text-bottom-vn { margin-left: -45px; } .group-contact ul li, .vn .group-contact ul li { min-width: 100%; } .group-contact ul li span { font-size: 16px; padding: 0 3px; } .vn .group-contact ul li span a { font-size: 13px; } .vn .group-contact ul li span { font-size: 14px; } .group-contact ul li span a { font-size: 16px; } .group-contact ul li span img { width: 47px; height: 31px; } .group-contact ul li { padding: 0; padding-top: 5px; } .m-button { font-size: 14px; padding: 15px; line-height: 0.7; } #Pagetop img { max-width: 50%; } #Sub-visual h2 { padding: 15px 10px; } }