@charset "UTF-8"; /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } html { font-size: 62.5%; line-height: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; scroll-behavior: smooth; } html *::-moz-selection { background-color: #ffdb7c; } html *::selection { background-color: #ffdb7c; } body { font-family: "Noto Sans JP", sans-serif; font-size: 4.8vw; line-height: normal; color: #4c4c4c; } @media (min-width: 880px) { body { font-size: 1.8rem; } } @media (min-width: 880px) { body { font-size: 4.8vw; } } @media (min-width: 880px) and (min-width: 880px) { body { font-size: 1.8rem; } } img { width: 100%; } @media (min-width: 880px) { img { width: auto; } } .main p { line-height: 2; margin-bottom: 4.8vw; } @media (min-width: 880px) { .main p { line-height: 2.2; margin-bottom: 1.8rem; } } .main a { color: #0e357f; text-decoration: underline; } .cnt { width: auto; margin: 0 1.3333333333vw; } @media (min-width: 880px) { .cnt { width: 110rem; margin: 0 auto; } } .sp { display: block; } @media (min-width: 880px) { .sp { display: none; } } .pc { display: none; } @media (min-width: 880px) { .pc { display: block; } } .hide-text { overflow: hidden; text-indent: 100%; white-space: nowrap; } .cf { zoom: 1; } .cf:after { display: block; content: ""; clear: both; } .alignright { float: right; } .alignleft { float: left; } .text-left { text-align: left; } .text-right { text-align: right; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir=rtl] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Slider */ .slick-loading .slick-list { background: #fff url("/img/ajax-loader.gif") center center no-repeat; } /* Icons */ @font-face { font-family: "slick"; src: url("/css/fonts/slick.eot"); src: url("/css/fonts/slick.eot?#iefix") format("embedded-opentype"), url("/css/fonts/slick.woff") format("woff"), url("/css/fonts/slick.ttf") format("truetype"), url("/css/fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; } /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); padding: 0; border: none; outline: none; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; } .slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir=rtl] .slick-prev { left: auto; right: -25px; } .slick-prev:before { content: "←"; } [dir=rtl] .slick-prev:before { content: "→"; } .slick-next { right: -25px; } [dir=rtl] .slick-next { left: -25px; right: auto; } .slick-next:before { content: "→"; } [dir=rtl] .slick-next:before { content: "←"; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { color: black; opacity: 0.75; } .header { position: relative; z-index: 100; border-bottom: 1px solid #aaaaaa; } .header header { display: grid; align-items: center; grid-template-columns: auto auto; } @media (min-width: 880px) { .header header { grid-template-columns: 32.92028rem auto; } } @media (min-width: 1050px) { .header header { grid-template-columns: 32.92028rem auto 16.78242rem; } } .header a { display: block; font-size: 0; } .header .title a { display: block; width: 42.6666666667vw; margin: 2.6666666667vw; } @media (min-width: 880px) { .header .title a { width: 28.92028rem; margin: 2rem; } } .header .navigation a { margin: 0 1rem; } @media (min-width: 1145px) { .header .navigation a { margin: 0 2rem; } } .header .url { display: none; } @media (min-width: 1050px) { .header .url { display: block; width: 12.78242rem; margin: 0 2rem; } } .spmenubtn { display: block; width: 8vw; height: 8vw; float: right; background: url(/img/header-menu-btn.svg) no-repeat center center; } body.nav-open .spmenubtn { background: url(/img/header-menu-btn-close.svg) no-repeat center center; } body.nav-open .smoke { position: fixed; top: 0; left: 0; z-index: 50; width: 100vw; height: 100%; min-height: 100%; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background-color: rgba(255, 255, 255, 0.5); } nav > ul { font-size: 0; } nav > ul li { display: inline-block; } .global.navigation .aboutus a { width: 7.10503rem; } .global.navigation .technology a { width: 9.93676rem; } .global.navigation .performance a { width: 10.62695rem; } .global.navigation .recruiting a { width: 8.28418rem; } .global.navigation .contact a { width: 6.92238rem; } #drower .navigation img.aboutus { width: 35.45264vw; } #drower .navigation img.technology { width: 46.9109066667vw; } #drower .navigation img.performance { width: 49.70368vw; } #drower .navigation img.recruiting { width: 40.3112533333vw; } #drower .navigation img.contact { width: 34.98912vw; } #drower .navigation img.toppage { width: 18.9333333333vw; } .fnavi li { border-right: 1px solid #0e357f; } .fnavi li:last-child { border-right: none; } .fnavi a { color: #0e357f; font-size: 3.7333333333vw; line-height: 0.7777777778; margin: 0 1.8rem; } @media (min-width: 880px) { .fnavi a { font-size: 1.4rem; } } #drower { display: none; } body.nav-open #drower { display: block; } #drower { position: absolute; top: 14.4vw; left: 0; z-index: 100; width: 100vw; background-color: #fff; } #drower ul.navigation { font-size: 4.8vw; margin-top: 5.3333333333vw; margin-left: 8vw; } @media (min-width: 880px) { #drower ul.navigation { font-size: 1.8rem; } } #drower ul.navigation li { display: block; margin-bottom: 5.3333333333vw; } #drower ul.navigation li a { display: inline; font-size: 4.8vw; color: #0e357f; } @media (min-width: 880px) { #drower ul.navigation li a { font-size: 1.8rem; } } #drower .snsicons { margin-top: 5.3333333333vw; margin-bottom: 5.3333333333vw; margin-left: 8vw; } #drower .snsicons a { display: inline-block; margin: 0 2.6666666667vw 0 0; } #drower .snsicons a img { width: 13.3333333333vw; } #drower .telnum { background-color: #0e357f; padding: 5vw 0; } #drower .telnum .tel { display: block; width: 80vw; margin: 0 auto; } #drower .telnum ul { text-align: center; margin-top: 6vw; } #drower .telnum ul li { border-right: 1px solid #fff; } #drower .telnum ul li:last-child { border-right: none; } #drower .telnum ul a { font-size: 3.4666666667vw; color: #fff; } @media (min-width: 880px) { #drower .telnum ul a { font-size: 1.3rem; } } .eyecatch { margin: 1.5rem auto; width: min(100%, 1400px); height: clamp(0px, 53.3333333333vw, 200px); } @media (min-width: 880px) { .eyecatch { margin: 1.5rem auto; height: clamp(0px, 21.4285714286vw, 300px); } } .eyecatch h1 img { width: clamp(0px, 21.3333333333vw, 80px); margin-top: clamp(0px, 14.1333333333vw, 53px); margin-left: clamp(0px, 5.8666666667vw, 22px); } @media (min-width: 880px) { .eyecatch h1 img { width: clamp(0px, 14.2857142857vw, 200px); margin-top: clamp(0px, 3.5714285714vw, 50px); margin-left: clamp(0px, 4.2857142857vw, 60px); } } #home .eyecatch { background: url(/img/home/sp-top-hero-bg.jpg) no-repeat center center; background-size: cover; height: clamp(0px, 88vw, 330px); } @media (min-width: 880px) { #home .eyecatch { background: url(/img/home/top-hero-bg.jpg) no-repeat center center; background-size: cover; height: clamp(0px, 39.2857142857vw, 550px); } } #home .eyecatch h1 img { width: clamp(0px, 21.3333333333vw, 80px); margin-top: clamp(0px, 13.8666666667vw, 52px); margin-left: clamp(0px, 4vw, 15px); } @media (min-width: 880px) { #home .eyecatch h1 img { width: clamp(0px, 14.2857142857vw, 200px); margin-top: clamp(0px, 3.5714285714vw, 50px); margin-left: clamp(0px, 4.2857142857vw, 60px); } } #home .eyecatch h2 img { width: clamp(0px, 64vw, 240px); margin-top: clamp(0px, 3.2vw, 12px); margin-left: clamp(0px, 4.2666666667vw, 16px); } @media (min-width: 880px) { #home .eyecatch h2 img { width: clamp(0px, 42.8571428571vw, 600px); margin-top: clamp(0px, 5.5vw, 77px); margin-left: clamp(0px, 5.1428571429vw, 72px); } } #aboutus .eyecatch { background: url(/img/aboutus/sp-aboutus-bg.jpg) no-repeat center center; background-size: cover; } @media (min-width: 880px) { #aboutus .eyecatch { background: url(/img/aboutus/aboutus-bg.jpg) no-repeat center center; background-size: cover; } } #technology .eyecatch { background: url(/img/technology/sp-technology-bg.jpg) no-repeat center center; background-size: cover; } @media (min-width: 880px) { #technology .eyecatch { background: url(/img/technology/technology-bg.jpg) no-repeat center center; background-size: cover; } } #performance .eyecatch { background: url(/img/performance/sp-paerformance-bg.jpg) no-repeat center center; background-size: cover; } @media (min-width: 880px) { #performance .eyecatch { background: url(/img/performance/paerformance-bg.jpg) no-repeat center center; background-size: cover; } } #recruiting .eyecatch { background: url(/img/recruiting/sp-recruting-bg.jpg) no-repeat center center; background-size: cover; } @media (min-width: 880px) { #recruiting .eyecatch { background: url(/img/recruiting/recruting-bg.jpg) no-repeat center center; background-size: cover; } } #contact .eyecatch { background: url(/img/sp-hero-bg.jpg) no-repeat center center; background-size: cover; } @media (min-width: 880px) { #contact .eyecatch { background: url(/img/hero-bg.jpg) no-repeat center center; background-size: cover; } } #privacy-policy .eyecatch { background: url(/img/privacy-policy/sp-privacypolicy-bg.jpg) no-repeat center center; background-size: cover; } @media (min-width: 880px) { #privacy-policy .eyecatch { background: url(/img/privacy-policy/privacypolicy-bg.jpg) no-repeat center center; background-size: cover; } } .subhead { font-size: 3.7333333333vw; color: #0e357f; font-style: italic; line-height: 2; margin-top: 4vw; } @media (min-width: 880px) { .subhead { font-size: 1.4rem; } } @media (min-width: 880px) { .subhead { line-height: 2.2; margin-top: 1.5rem; } } main > section:not(:first-child) { margin-top: 4rem; } footer { margin-top: 6rem; } .mainhead { width: 20.02178rem; margin-bottom: 2rem; } #aboutus .mainhead { width: 14.20986rem; } #technology .mainhead { width: 20.02178rem; } #performance .mainhead { width: 21.35019rem; } #recruiting .mainhead { width: 16.70879rem; } #privacy-policy .mainhead { width: 22.7331rem; } #contact .mainhead { width: 16rem; } .footer .ftitle { padding: 2rem 0; background-color: #0e357f; display: grid; grid-auto-columns: 1fr; grid-auto-rows: 1fr; grid-template-columns: 6.43416rem 1fr 6.43416rem; gap: 0px 0px; } .footer .ftitle .i1 { justify-self: center; align-self: center; grid-area: 1/2/2/3; } .footer .ftitle .i2 { justify-self: start; align-self: center; grid-area: 1/3/2/4; } .footer .ftitle a { display: block; } .footer .ftitle a.contact { text-align: center; width: 56vw; } @media (min-width: 880px) { .footer .ftitle a.contact { width: 60.28731rem; } } .footer .ftitle a.pagetop { width: 8vw; } @media (min-width: 880px) { .footer .ftitle a.pagetop { width: 4.43416rem; } } .footer .fcopy { padding: 5.3333333333vw 0; } @media (max-width: 879px) { .footer .fcopy { text-align: center; } } @media (min-width: 880px) { .footer .fcopy { padding: 2rem 0; display: grid; grid-auto-columns: 1fr; grid-auto-rows: 1fr; grid-template-columns: 1fr 1fr 1fr; gap: 0px 0px; } } .footer .fcopy .copyright { width: 80%; } @media (max-width: 879px) { .footer .fcopy .copyright { margin: 0 auto; } } @media (min-width: 880px) { .footer .fcopy .copyright { width: 42.57491rem; } } .footer .fcopy .i1 { justify-self: start; align-self: center; grid-area: 1/1/2/2; } .footer .fcopy .i2 { justify-self: center; align-self: center; grid-area: 1/2/2/3; } #home .links p { padding: 2.6666666667vw 2.6666666667vw; } @media (min-width: 880px) { #home .links { display: grid; grid-template-columns: 1fr 1fr 1fr; } #home .links p { padding: 1rem 1rem; } } #home .sns-links .inner { display: grid; grid-template-columns: auto; place-content: center; width: clamp(0px, 85.7142857143vw, 1200px); height: clamp(0px, 42.8571428571vw, 600px); margin: 0 auto; } @media (min-width: 880px) { #home .sns-links .inner { width: clamp(0px, 85.7142857143vw, 1200px); height: clamp(0px, 21.4285714286vw, 300px); } } #home .sns-links { background: url(/img/home/banner-sns-bg.jpg) no-repeat center center; background-size: cover; height: clamp(0px, 42.8571428571vw, 600px); } @media (min-width: 880px) { #home .sns-links { height: clamp(0px, 21.4285714286vw, 300px); } } #home .sns-links img { width: clamp(0px, 21.4285714286vw, 300px); } @media (min-width: 880px) { #home .sns-links img { width: clamp(0px, 13.7142857143vw, 192px); } } #home .sns-links p { text-align: center; font-size: 1.4rem; line-height: 1.5; } #home .sns-links p a { color: #0e357f; text-decoration: none; } #home .snstxt { text-align: left; } @media (min-width: 880px) { #home .snstxt { text-align: center; } } .aboutus .googlemap { width: 100%; height: 100vw; margin-bottom: 5.3333333333vw; } @media (min-width: 880px) { .aboutus .googlemap { height: 35.5rem; padding-right: 10rem; margin-bottom: auto; } } @media (min-width: 880px) { .dlists { display: grid; grid-template-columns: auto 1fr; } } .dlists dt { margin-bottom: 1.3333333333vw; } @media (min-width: 880px) { .dlists dt { margin-right: 2rem; margin-bottom: 1.5rem; } } .dlists dd { margin-bottom: 5.3333333333vw; } @media (min-width: 880px) { .dlists dd { margin-bottom: 1.5rem; } } .exam-left { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; } @media (min-width: 880px) { .exam-left { grid-template-columns: 35rem auto; grid-template-rows: 1fr; } } .exam-left .photo { grid-row: 1/2; } @media (min-width: 880px) { .exam-left .photo { grid-column: 1/2; grid-row: 1/2; margin-right: 2rem; } } .exam-left .text { grid-row: 2/3; } @media (min-width: 880px) { .exam-left .text { grid-column: 2/3; grid-row: 1/2; } } .exam-left .text h3 { font-size: 6.4vw; } @media (min-width: 880px) { .exam-left .text h3 { font-size: 2.4rem; } } .exam-left { margin-top: 4rem; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; } @media (min-width: 880px) { .exam-left { grid-template-columns: 35rem auto; grid-template-rows: 1fr; } } .exam-left .photo { grid-row: 1/2; } @media (min-width: 880px) { .exam-left .photo { grid-column: 1/2; grid-row: 1/2; margin-right: 2rem; } } .exam-left .text { grid-row: 2/3; } @media (min-width: 880px) { .exam-left .text { grid-column: 2/3; grid-row: 1/2; } } .exam-left .text h3 { font-size: 6.4vw; } @media (min-width: 880px) { .exam-left .text h3 { font-size: 2.4rem; } } .exam-right { margin-top: 4rem; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; } @media (min-width: 880px) { .exam-right { grid-template-columns: auto 35rem; grid-template-rows: 1fr; } } .exam-right .photo { grid-row: 1/2; } @media (min-width: 880px) { .exam-right .photo { grid-column: 2/3; grid-row: 1/2; margin-left: 2rem; } } .exam-right .text { grid-row: 2/3; } @media (min-width: 880px) { .exam-right .text { grid-column: 1/2; grid-row: 1/2; } } .exam-right .text h3 { font-size: 6.4vw; } @media (min-width: 880px) { .exam-right .text h3 { font-size: 2.4rem; } } .subhead + .exam-left, .subhead + .exam-right { margin-top: 1rem; } @media (min-width: 880px) { .col2 { display: grid; grid-template-columns: 1fr 22rem; } } .rightimgs img { width: 40vw; margin: 3.2vw; } @media (min-width: 880px) { .rightimgs img { width: 100%; margin: 0 0 3rem 0; } } .aboutus .dlists dt::before, .performance .dlists dt::before, .recruiting .dlists dt::before { content: "● "; } @media (min-width: 880px) { .aboutus .dlists dt::before, .performance .dlists dt::before, .recruiting .dlists dt::before { content: none; } } @media (min-width: 880px) { .aboutus .dlists dt, .performance .dlists dt, .recruiting .dlists dt { -moz-text-align-last: justify; text-align-last: justify; } } .recruiting .main .mainhead + h2 { margin-bottom: 5.3333333333vw; } @media (min-width: 880px) { .recruiting .main .mainhead + h2 { margin-bottom: 2rem; } } .contact .formbody p { display: grid; grid-template-columns: 1fr; grid-gap: 4vw; margin: 10.6666666667vw 0; } @media (min-width: 880px) { .contact .formbody p { grid-template-columns: 22rem 1fr; grid-gap: 0 2rem; margin: 4rem 0; } } .contact .formbody .hissu { color: red; margin-left: 2.6666666667vw; } @media (min-width: 880px) { .contact .formbody .hissu { margin-left: 1rem; } } .contact .formbody label::before { content: "● "; } @media (min-width: 880px) { .contact .formbody label::before { content: none; } } .contact .formbody input:not([type=submit]), .contact .formbody select, .contact .formbody textarea { font-size: 4.8vw; border: 2px solid #326ec7; border-radius: 1.6vw; padding: 1.6vw 2.6666666667vw; width: 100%; } @media (min-width: 880px) { .contact .formbody input:not([type=submit]), .contact .formbody select, .contact .formbody textarea { font-size: 2rem; border-radius: 0.6rem; padding: 0.6rem 2rem; } } .contact .formbody .buttonarea { text-align: center; } .contact .formbody .buttonarea input, .contact .formbody .buttonarea .btn-blue { cursor: pointer; color: #fff; background: url(/img/parallelogram_320x60_1.svg) no-repeat center center; width: 32rem; height: 6rem; } .contact .formbody .buttonarea .btn-blue2 { background: url(/img/parallelogram_320x60_2.svg) no-repeat center center; } .contact .formbody .buttonarea .btn-red { background: url(/img/parallelogram_320x60_or.svg) no-repeat center center; }/*# sourceMappingURL=style.min.css.map */