@charset "UTF-8"; @font-face { font-family: 'damionregular'; src: url('../font/damion-regular-webfont.woff2') format('woff2'), url('../font/damion-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; box-sizing: border-box; } html{ line-height: 1; } .clearfix:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{ display: inline-table; } /* Hides from IE-mac \*/ * html .clearfix{ height: 1%; } .clearfix{ display: block; } /* End hide from IE-mac */ ol, ul{ list-style: none; } table{ border-collapse: collapse; border-spacing: 0; } .clear { clear: both; } caption, th, td{ text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote{ quotes: none; } q:before, q:after, blockquote:before, blockquote:after{ content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary{ display: block; } *, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body{ color: #000; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; line-height: 1.5; -webkit-text-size-adjust: 100%; } img{ height: auto; max-width: 100%; } a{ text-decoration: none; } @media screen and (max-width: 768px) { .hidden-sp{ display: none !important; } } @media screen and (min-width: 769px) { .hidden-pc{ display: none !important; } } /*------------------------------------------ サービス別レスポンシブ ------------------------------------------*/ /*youtube*/ .youtubeWrapper{ position: relative; width: 100%; padding-top: 56.25%; } .youtubeWrapper iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } /*googlemap*/ .ggmapWrapper{ position: relative; /*padding-bottom: 56.25%;*/ height: 390px; overflow: hidden; } .ggmapWrapper iframe, .ggmapWrapper object, .ggmapWrapper embed{ position: absolute; top: -200px; left: 0; width: 100%; height: 600px; } .ggmapWrapper iframe{ height: 800px; } /*------------------------------------------ cmn ------------------------------------------*/ img{ vertical-align: top; } .hoverBtn{ -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } .hoverBtn:hover{ } @media screen and (max-width: 768px) { img{ width: 100%; } } /*------------------------------------------ body ------------------------------------------*/ body{ min-width: 980px; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; } @media screen and (max-width: 768px) { body{ min-width: inherit; } } /*------------------------------------------ #mv ------------------------------------------*/ .mvWrapper{ position: relative; h1{ width: 490px; position: absolute; bottom: 20%; left: 50%; z-index: 2; transform: translate(-50%, 0); text-align: center; } .logoBox{ position: absolute; left: 20px; top: 20px; } .mv{ *{ vertical-align: top; } } } @media screen and (max-width: 1150px) { .mvWrapper{ h1{ bottom: 28%; } } } @media screen and (max-width: 768px) { .mvWrapper{ padding: 50px 0 0 0; h1{ width: 245px; position: absolute; bottom: inherit; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, 40%); text-align: center; } .logoBox{ position: fixed; left: 10px; top: 5px; width: 65px; z-index: 1001; } } } /*------------------------------------------ header nav ------------------------------------------*/ .menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; } .menu-trigger { position: relative; width: 30px; height: 22px; } .menu-trigger span { position: absolute; left: 0; width: 100%; height: 3px; background-color: #FFF; } .menu-trigger span:nth-of-type(1) { top: 0; } .menu-trigger span:nth-of-type(2) { top: 10px; width: 100%; } .menu-trigger span:nth-of-type(3) { bottom: 0; } .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg); top: -2px; } .menu-trigger.active span:nth-of-type(2) { left: 50%; opacity: 0; -webkit-animation: active-menu-bar02 .8s forwards; animation: active-menu-bar02 .8s forwards; } @-webkit-keyframes active-menu-bar02 { 100% { height: 0; } } @keyframes active-menu-bar02 { 100% { height: 0; } } .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-11px) rotate(45deg); transform: translateY(-11px) rotate(45deg); } /*PC*/ @media screen and (min-width: 769px) { header{ width: 100%; min-width: 980px; background: rgba(4,59,123,0.6); position: absolute; left: 0; bottom: 0; z-index: 1000; .headerTop{ display: none; } .inner{ width: 980px; margin: 0 auto; } nav{ ul{ display: -ms-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; li{ padding: 40px 0; a{ color: #FFF; font-weight: 700; &:hover{ text-decoration: underline; } } } } } &.fix{ height: 104px; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; } } } @media screen and (max-width: 980px) { header nav{ padding: 0 20px; } } /*SP*/ @media screen and (max-width: 768px) { header{ width: 100%; padding: 0; background: none; z-index: 1000; top: 0; left: 0; position: fixed; background: #FFF; nav{ padding: 0; } .headerTop{ height: 50px; } .logoBox{ float: left; width: 100px; padding: 10px 0 0 5%; } } .menuBtn{ width: 50px; height: 50px; padding: 14px 0 0 11px; background: #043b7b; float: right; right: 0; position: relative; top: 0; z-index: 1001; } nav{ width: 100%; height: 100vh; margin: 0 auto; padding: 0 0 0 0; display: none; background: rgba(0,0,0,0.8); position: fixed; left: 0; top: 50px; z-index: 1000; ul{ width: 100%; padding: 50px 0 0 0; background: #FFF; position: fixed; top: 0; li{ padding: 15px 5%; text-align: center; border-top: 1px solid rgba(0,0,0,0.5); a{ display: block; position: relative; font-size: 16px; color: #000; .icon{ img{ width: 50px; } } } } } } } @media screen and (max-width: 768px) { } /*------------------------------------------ #cmn ------------------------------------------*/ h2, .sTtl{ margin-bottom: 50px; text-align: center; font-family: 'Noto Serif JP', serif; font-size: 26px; font-weight: 400; line-height: 1.1; .en{ display: block; span{ width: 180px; display: inline-block; font-family: 'damionregular'; font-size: 16px; font-weight: 400; position: relative; &:before, &:after{ content: ""; width: 50px; height: 1px; display: block; background: #000; position: absolute; top: 50%; } &:before{ left: 0; } &:after{ right: 0; } } } &.big{ font-size: 36px; } &.blue{ color: #043b7b; .en{ span{ color: #1769c1; &:before, &:after{ background: #1769c1; } } } } } .innerBox{ width: 980px; margin: 0 auto; } @media screen and (max-width: 768px) { h2{ margin-bottom: 40px; img{ max-width: 375px; } } .innerBox{ width: 100%; } } /*------------------------------------------ #contents_01 ------------------------------------------*/ .contents_bg_01{ } .contents_01{ min-height: 770px; background: url("../img/bg_about.jpg") no-repeat center top / 100%; img.hidden-sp{ opacity: 0; } } @media screen and (max-width: 1600px) { .contents_01{ background: url("../img/bg_about.jpg") no-repeat center top / 1600px; } } @media screen and (max-width: 768px) { .contents_bg_01{ background: none; } .contents_01{ min-height: inherit; img.hidden-sp{ opacity: 1; } } } /*------------------------------------------ #contents_02 ------------------------------------------*/ .contents_bg_02{ background: #ebebeb; } .contents_02{ padding: 80px 0; h2{ margin-bottom: 35px; } .boxWrapper{ width: 980px; padding: 60px 20px 20px 20px; margin-bottom: 60px; background: #FFF; border: 1px solid #b6b6b6; .box{ &:not(:last-child){ margin-bottom: 75px; } } } .box_map{ border: none; max-width: 980px; padding: 0; form{ background: #dcdccf; } button[type="submit"]{ background: #000; } } .list{ display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; a{ width: 100%; height: 60px; color: #000; display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; -ms-align-items: center; align-items: center; background: url("../img/arrow_01.png") no-repeat center right 10px / 4px #dcdccf; &:hover{ opacity: 0.8; } } &.list_2{ li{ width: 450px; margin: 0 10px 10px 0; &:nth-child(2n){ margin-right: 0; } } } &.list_3{ li{ width: 300px; margin: 0 5px 5px 0; &:nth-child(3n){ margin-right: 0; } } } } } @media screen and (max-width: 768px) { .contents_02{ padding: 80px 0; h2{ margin-bottom: 35px; } .boxWrapper{ width: 90%; padding: 60px 5% 20px 5%; margin: 0 auto 60px auto; background: #FFF; border: 1px solid #b6b6b6; .box{ &:not(:last-child){ margin-bottom: 75px; } } } .box_map{ border: none; max-width: 980px; padding: 0; form{ background: #dcdccf; } button[type="submit"]{ background: #000; } } .list{ display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; a{ width: 100%; height: 60px; color: #000; display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; -ms-align-items: center; align-items: center; background: url("../img/arrow_01.png") no-repeat center right 10px / 4px #dcdccf; &:hover{ opacity: 0.8; } } &.list_2{ li{ width: 100%; margin: 0 0 5% 0; &:nth-child(2n){ margin-right: 0; } } } &.list_3{ li{ width: 100%; margin: 0 0 5px 0; &:nth-child(3n){ margin-right: 0; } } } } } } /*------------------------------------------ #contents_03 ------------------------------------------*/ .contents_bg_03{ background: #e1e8f0; } .contents_03{ padding: 75px 0; ul{ display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; li{ margin-right: 45px; -ms-flex: 1; flex: 1; &:last-child{ margin-right: 0; } h3{ margin-bottom: 30px; font-size: 22px; font-family: 'Noto Serif JP', serif; font-weight: 500; color: #043b7b; text-align: center; } .imgBox{ margin-bottom: 30px; text-align: center; } .txtBox{ p{ font-size: 15px; line-height: 1.8; } *:not(:last-child){ margin-bottom: 1em; } } .pdfLink{ margin-top: 10px; a{ display: inline-block; padding-left: 34px; position: relative; color: #000; font-size: 15px; transition: 0.3s; &:before{ content: ""; width: 24px; height: 28px; display: block; background: url("../img/icon_pdf.png") no-repeat center / 24px; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); } &:hove{ opacity: 0.8; } } } } } } @media screen and (max-width: 768px) { .contents_bg_03{ background: #e1e8f0; } .contents_03{ padding: 80px 0; ul{ width: 90%; margin: 0 auto; display: block; li{ margin: 0 0 50px 0; &:last-child{ margin-bottom: 0; } h3{ margin-bottom: 30px; font-size: 22px; font-family: 'Noto Serif JP', serif; font-weight: 500; color: #043b7b; text-align: center; } .imgBox{ margin-bottom: 30px; text-align: center; img{ max-width: 90px; } } .txtBox{ p{ font-size: 15px; line-height: 1.8; } *:not(:last-child){ margin-bottom: 1em; } } } } } } /*------------------------------------------ #contents_04 ------------------------------------------*/ .contents_bg_04{ } .contents_04{ padding: 80px 0 0 0; .boxWrapper{ .box{ padding-bottom: 80px; .boxLR{ display: -ms-flex; display: flex; min-height: 480px; margin-bottom: 65px; .imgBox{ width: 47.5%; } .txtBox{ width: 52.5%; padding: 70px 0; background: #043b7b; color: #FFF; font-family: 'Noto Serif JP', serif; font-weight: 400; .txt_01{ margin-bottom: 50px; font-size: 28px; line-height: 1.8; } .txt_02{ margin-bottom: 15px; font-size: 22px; } .txt_03{ font-size: 18px; } .txtBoxL{ width: 490px; float: right; } } } .interview{ width: 760px; margin: 0 auto; dl{ margin-bottom: 50px; dt{ margin-bottom: 20px; font-size: 22px; font-family: 'Noto Serif JP', serif; font-weight: 600; color: #043b7b; } dd{ line-height: 1.8; } } } .underBox{ width: 900px; padding: 22px 22px 22px 70px; margin: 0 auto; background: #d2deed; display: -ms-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; .txtBox{ -ms-flex: 1; flex: 1; h3{ margin-bottom: 20px; font-size: 22px; font-weight: 600; font-family: 'Noto Serif JP', serif; color: #043b7b; } p{ line-height: 1.8; } } .imgBox{ margin-left: 55px; } } &:nth-child(1){ .boxLR{ .imgBox{ background: url("../img/img_interview_01.jpg") no-repeat center top / cover; } .txtBox{ padding-left: 40px; } } } &:nth-child(2){ .boxLR{ .imgBox{ background: url("../img/img_interview_02.jpg") no-repeat center top / cover; -ms-order: 2; order: 2; } .txtBox{ padding-right: 40px; } } } } } } @media screen and (max-width: 1024px) { .contents_04{ padding: 80px 0 0 0; .boxWrapper{ .box{ .boxLR{ .txtBox{ .txtBoxL{ width: 100%; } } } } } } } @media screen and (max-width: 768px) { .contents_04{ padding: 80px 0 0 0; .boxWrapper{ .box{ padding-bottom: 80px; .boxLR{ display: block; min-height: inherit; margin-bottom: 50px; .imgBox{ width: 100%; } .txtBox{ width: 100%; padding: 30px 5%; background: #043b7b; color: #FFF; font-family: 'Noto Serif JP', serif; font-weight: 400; .txt_01{ margin-bottom: 50px; font-size: 22px; line-height: 1.8; } .txt_02{ margin-bottom: 15px; font-size: 18px; } .txt_03{ font-size: 16px; } .txtBoxL{ width: 100%; float: inherit; } } } .interview{ width: 90%; margin: 0 auto; dl{ margin-bottom: 50px; dt{ margin-bottom: 20px; font-size: 22px; font-family: 'Noto Serif JP', serif; font-weight: 600; color: #043b7b; } dd{ line-height: 1.8; } } } .underBox{ width: 100%; padding: 5%; margin: 0 auto; background: #d2deed; display: block; .txtBox{ margin-bottom: 20px; h3{ margin-bottom: 20px; font-size: 22px; font-weight: 600; font-family: 'Noto Serif JP', serif; color: #043b7b; } p{ line-height: 1.8; } } .imgBox{ margin-left: 0; text-align: center; img{ max-width: 190px; } } } &:nth-child(1){ .boxLR{ .imgBox{ background: none; } .txtBox{ padding-left: 5%; } } } &:nth-child(2){ .boxLR{ .imgBox{ background: none; } .txtBox{ padding-right: 5%; } } } } } } } /*------------------------------------------ #contents_05 ------------------------------------------*/ .contents_bg_05{ background: #ebebeb; } .contents_05{ padding: 100px 0 80px 0; h2{ margin-bottom: 60px; } .qaWrapper{ dl{ margin-bottom: 50px; border-bottom: 1px solid #000; dt{ padding: 0 90px 30px 85px; position: relative; font-size: 24px; font-weight: 400; font-family: 'Noto Serif JP', serif; cursor: pointer; &:before{ content: "Q"; font-size: 38px; font-weight: 300; font-family: 'Oswald', sans-serif; position: absolute; left: 20px; top: -4px; line-height: 1; } &:after{ content: ""; width: 40px; height: 40px; display: block; background: url("../img/icon_open.png") no-repeat center / 40px; position: absolute; right: 25px; top: 5px; transition: 0.3s; } &.active{ &:after{ transform: rotate(135deg); } } } dd{ padding: 15px 90px 45px 85px; font-size: 18px; font-weight: 300; line-height: 1.8; position: relative; display: none; &:before{ content: "A"; font-size: 38px; font-weight: 300; font-family: 'Oswald', sans-serif; position: absolute; left: 20px; top: 10px; line-height: 1; } } } } } @media screen and (max-width: 768px) { .contents_bg_05{ background: #ebebeb; } .contents_05{ padding: 80px 0 50px 0; h2{ margin-bottom: 40px; } .qaWrapper{ dl{ margin-bottom: 50px; border-bottom: 1px solid #000; dt{ padding: 20px 50px 20px 50px; position: relative; font-size: 20px; font-weight: 400; font-family: 'Noto Serif JP', serif; cursor: pointer; &:before{ content: "Q"; font-size: 30px; font-weight: 300; font-family: 'Oswald', sans-serif; position: absolute; left: 15px; top: 50%; transform: translate(0, -50%); line-height: 1; } &:after{ content: ""; width: 20px; height: 20px; display: block; background: url("../img/icon_open.png") no-repeat center / 20px; position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); transition: 0.3s; } &.active{ &:after{ transform: rotate(135deg); } } } dd{ padding: 15px 50px 15px 50px; font-size: 18px; font-weight: 300; line-height: 1.8; position: relative; display: none; &:before{ content: "A"; font-size: 30px; font-weight: 300; font-family: 'Oswald', sans-serif; position: absolute; left: 15px; top: 50%; transform: translate(0, -50%); line-height: 1; } } } } } } /*------------------------------------------ #contents_06 ------------------------------------------*/ .slick-slide:focus{ outline: none; } .contents_bg_06{ background: #e1e8f0; } .contents_06{ padding: 70px 0 0 0; .thumb{ width: 980px; .slick-track{ -ms-transform: translate3d(0px, 0px, 0px) !important; transform: translate3d(0px, 0px, 0px) !important; .slick-slide{ width: 20% !important; border-top: 1px solid #b6b6b6; border-left: 1px solid #b6b6b6; background: #FFF; padding: 20px 0; text-align: center; font-size: 18px; font-weight: 700; cursor: pointer; transition: 0.3s; &:last-child{ border-right: 1px solid #b6b6b6; } &.slick-current{ background: #1769c1; border-top: 1px solid #1769c1; border-left: 1px solid #1769c1; color: #FFF; &:last-child{ border-right: 1px solid #1769c1; } } } } } .slider{ background: #FFF; border: 1px solid #b6b6b6; .boxLR{ padding: 20px 70px 20px 100px; display: -ms-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; .txtBox{ width: 260px; padding: 20px 0 0 0; p{ margin-bottom: 1em; font-size: 18px; &:last-child{ margin-bottom: 0; } } } .mapBox{ width: 535px; .ggmapWrapper{ height: 260px; iframe, object, embed{ top: -260px; } } } } .slick-prev, .slick-next{ width: 35px; height: 35px; z-index: 2; } .slick-prev{ left: 10px; background: url("../img/arrow_l.png") no-repeat center / 35px; &:before{ content: ""; } } .slick-next{ right: 10px; background: url("../img/arrow_r.png") no-repeat center / 35px; &:before{ content: ""; } } } } .underSlide{ padding: 50px 0 70px 0; background: #e1e8f0; .wrapper{ position: relative; } .inSlide { width: 100%; height: 220px; position: relative; overflow-x: hidden; } .loopSliderWrap { top: 0; left: 0; height: 220px; position: relative; } .inSlide ul { float: left; } .inSlide ul li { width: 320px; height: 220px; float: left; } *{ vertical-align: top; } .inner{ padding: 0 5px; } } @media screen and (max-width: 768px) { .slick-slide:focus{ outline: none; } .contents_bg_06{ background: #e1e8f0; } .contents_06{ padding: 60px 0 0 0; .thumb{ width: 100%; .slick-track{ -ms-transform: !important; transform: !important; .slick-slide{ width: 20% !important; border-top: 1px solid #b6b6b6; border-left: 1px solid #b6b6b6; background: #FFF; padding: 20px 0; text-align: center; font-size: 14px; font-weight: 700; cursor: pointer; transition: 0.3s; &:last-child{ border-right: 1px solid #b6b6b6; } &.slick-current{ background: #1769c1; border-top: 1px solid #1769c1; border-left: 1px solid #1769c1; color: #FFF; &:last-child{ border-right: 1px solid #1769c1; } } } } } .slider{ background: #FFF; border: 1px solid #b6b6b6; .boxLR{ padding: 20px 50px 20px 50px; display: block; .txtBox{ width: 100%; padding: 0 0 0 0; margin-bottom: 20px; p{ margin-bottom: 1em; font-size: 16px; &:last-child{ margin-bottom: 0; } } } .mapBox{ width: 100%; .ggmapWrapper{ height: 260px; iframe, object, embed{ top: -260px; } } } } .slick-prev, .slick-next{ width: 30px; height: 30px; z-index: 2; } .slick-prev{ left: 10px; background: url("../img/arrow_l.png") no-repeat center / 30px; &:before{ content: ""; } } .slick-next{ right: 10px; background: url("../img/arrow_r.png") no-repeat center / 30px; &:before{ content: ""; } } } } .underSlide{ padding: 50px 0 70px 0; background: #e1e8f0; *{ vertical-align: top; } .inner{ padding: 0 5px; } } } /*------------------------------------------ #btnList ------------------------------------------*/ .btnList{ a{ width: 530px; height: 80px; margin: 0 auto; color: #FFF; font-size: 18px; font-weight: 700; display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; -ms-align-items: center; align-items: center; background: url("../img/arrow_02.png") no-repeat center right 10px / 4px #043b7b; &:hover{ opacity: 0.8; } } &.bottom{ padding-bottom: 70px; background: #e1e8f0; } } @media screen and (max-width: 768px) { .btnList{ a{ width: 90%; height: 80px; margin: 0 auto; color: #FFF; font-size: 18px; font-weight: 700; display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; -ms-align-items: center; align-items: center; background: url("../img/arrow_02.png") no-repeat center right 10px / 4px #043b7b; &:hover{ opacity: 0.8; } } &.bottom{ padding-bottom: 70px; background: #e1e8f0; } } } /* ------------------------------ トップへ戻る ------------------------------ */ #toTop{ position: fixed; right: 0; bottom: 0; display: none; z-index: 10; } #toTop a:hover{ opacity: 0.8; } @media screen and (max-width: 768px) { #toTop{ img{ width: 60px; } } } /*------------------------------------------ footer ------------------------------------------*/ footer{ padding: 20px 0 10px 0; background: url("../img/bg_bottom.jpg") no-repeat center / cover; .footerNav{ margin-bottom: 30px; display: -ms-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; a{ font-size: 14px; font-weight: 700; color: #1769c2; } } .logoBox{ margin-bottom: 25px; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; .imgBox{ width: 128px; } p{ margin-left: 10px; font-size: 15px; font-weight: 700; color: #1769c2; } } } footer .inner{ width: 980px; margin: 0 auto; } footer a{ color: #FFF; &:hover{ text-decoration: underline; } } footer #links{ float: left; font-size: 12px; font-weight: 700; color: #FFF; } footer #copy{ float: right; small{ font-size: 12px; font-weight: 700; color: #FFF; } } @media screen and (max-width: 768px) { footer{ padding: 20px 0 10px 0; background: url("../img/bg_bottom.jpg") no-repeat center / cover; .footerNav{ display: none; } .logoBox{ margin-bottom: 25px; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; .imgBox{ width: 100px; } p{ margin-left: 10px; font-size: 14px; font-weight: 700; color: #1769c2; text-align: left; } } } footer{ min-width: inherit; padding: 25px 5% 60px 5%;; text-align: center; } footer .inner{ width: 100%; } footer #links{ float: inherit; font-size: 12px; margin-bottom: 20px; float: inherit; a{ display: inline-block; } } footer #copy{ font-size: 12px; float: inherit; small{ padding: 0; } } }