@charset "utf-8"; /* ========================================================================== Foundation ========================================================================== */ /*! destyle.css v1.0.7 | MIT License | https://github.com/nicolas-cusan/destyle.css */ *{-webkit-box-sizing:border-box;box-sizing:border-box} ::before,::after{-webkit-box-sizing:inherit;box-sizing:inherit} html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent} body{margin:0} main{display:block} p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0} h1,h2,h3,h4,h5,h6{font-size:inherit;line-height:inherit;font-weight:inherit;margin:0} ul,ol{margin:0;padding:0;list-style:none} dt{font-weight:700} dd{margin-left:0} hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid;margin:0;clear:both} pre{font-family:monospace,monospace;font-size:inherit} address{font-style:inherit} a{background-color:transparent;text-decoration:none;color:inherit} abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted} b,strong{font-weight:bolder} code,kbd,samp{font-family:monospace,monospace;font-size:inherit} small{font-size:80%} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sub{bottom:-.25em} sup{top:-.5em} img{border-style:none;vertical-align:bottom} embed,object,iframe{border:0;vertical-align:bottom} button,/*input,*/optgroup,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;border:0;background:transparent;padding:0;margin:0;outline:0;border-radius:0;text-align:inherit} [type='checkbox']{-webkit-appearance:checkbox;-moz-appearance:checkbox;appearance:checkbox} [type='radio']{-webkit-appearance:radio;-moz-appearance:radio;appearance:radio} button,input{overflow:visible} button,select{text-transform:none} button,[type='button'],[type='reset'],[type='submit']{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none} button[disabled],[type='button'][disabled],[type='reset'][disabled],[type='submit'][disabled]{cursor:default} button::-moz-focus-inner,[type='button']::-moz-focus-inner,[type='reset']::-moz-focus-inner,[type='submit']::-moz-focus-inner{border-style:none;padding:0} button:-moz-focusring,[type='button']:-moz-focusring,[type='reset']:-moz-focusring,[type='submit']:-moz-focusring{outline:1px dotted ButtonText} fieldset{margin:0;padding:0;border:0;min-width:0} legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal} progress{vertical-align:baseline} textarea{overflow:auto} [type='checkbox'],[type='radio']{padding:0} [type='number']::-webkit-inner-spin-button,[type='number']::-webkit-outer-spin-button{height:auto} [type='search']{outline-offset:-2px} [type='search']::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} ::-webkit-input-placeholder{font:inherit} :-ms-input-placeholder{font:inherit} ::-ms-input-placeholder{font:inherit} ::-moz-placeholder{font:inherit} ::placeholder{font:inherit} label[for]{cursor:pointer} details{display:block} summary{display:list-item} table{border-collapse:collapse;border-spacing:0} caption{text-align:left} td,th{vertical-align:top} th{text-align:left;font-weight:700} template{display:none} [hidden]{display:none} html { font-size: 62.5%; } body { overflow-x: hidden; background: #f2f7f8; color: #333; font-family: Helvetica, "Helvetica Neue", Arial, "宋体", sans-serif; font-size: 1.4em; line-height: 2; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-touch-action: manipulation; touch-action: manipulation; } a { color: #003894; } a:focus, a:hover { color: rgb(0, 96, 255); } a:active { color: rgb(0, 19, 51); } /* Typography Base Setting */ p, ul, ol { margin-bottom: 1em; } ol, ul { padding-left: 2em; } ol { list-style: decimal outside none; } ul { list-style: square outside none; } li ol, li ul { margin-bottom: 0; } nav ol, nav ul { list-style: none; padding-left: 0; } em { font-style: normal; } rp, rt { line-height: 1; font-size: .688em; } table { empty-cells: show; font-size: 1em; } iframe { display: block; width: 100%; } img { height: auto; } img, iframe, button, input, select, textarea { max-width: 100%; } textarea { height: auto; resize: vertical; } /* ========================================================================== Layout ========================================================================== */ /* Header ----------------------------------------------------------------- */ .outer { padding-top: 60px; -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .header { position: fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 60px; background: rgba(255, 255, 255, 0.9); -webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .header__logo { width: 300px; } .navi-links { margin: 0 } .navi-links a, .navi-links span { color: inherit; } .navi-links > li { position: relative; } .navi-links > li > a { display: block; position: relative; } #index .outer { padding-top: 0!important; } /* */ /* Footer ----------------------------------------------------------------- */ .footer { width: calc(100% - 10px); margin: 80px auto 5px auto; padding-bottom: 50px; background: url(bg-footer.jpg) no-repeat center center; background-size: cover; color: #fff; } .pagetop { overflow: hidden; position: relative; top: -24px; width: 90%; max-width: 1080px; margin: 0 auto 20px } .pagetop a { display: block; height: 48px; padding-top: 18px; background: #003894; color: #003894; text-align: center; -webkit-transition: background 0.3s; transition: background 0.3s } .pagetop a::before { content: ""; display: block; width: 18px; height: 12px; margin: 0 auto 18px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE4IDEyIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMS45MyA5LjkxTDkgMy4wOWw3LjA3IDYuODIiLz48L3N2Zz4=) no-repeat left top; } .pagetop a:hover { background: #1f4fc8; } .footer__info { font-size: 1.3rem } .footer__info .footer-logo { width: 130px; margin-bottom: 10px; } .footer__info .footer-address { font-size: 1.2rem; } .footer__bottom { margin-top: 30px; padding-top: 30px; border-top: 1px dotted #5a5a5a; } .footer__link { list-style: none; margin: 0; padding: 0; font-size: 1.2rem; text-align: center } .footer__link li { display: inline-block; vertical-align: middle; white-space: nowrap; } .footer__link li::after { content: ""; display: inline-block; width: 1px; height: 1em; margin: 0 .5em 0 .75em; border-left: 1px solid #fff; vertical-align: middle; } .footer__link li:last-child::after { display: none; } .footer__link a { display: inline-block; color: #fff; vertical-align: middle; } .footer__copyright { margin-top: 10px; font-size: 1rem; text-align: center; } /* Main ----------------------------------------------------------------- */ .container { position: relative; width: 100%; max-width: 1230px; margin: 0 auto; padding: 0 15px; } .container-inner { position: relative; width: 90%; max-width: 1080px; margin: 0 auto; } /*------------------------------------*\ \*------------------------------------*/ .header2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 200px; margin-right: 5px; margin-left: 5px; margin-bottom: 40px; color: #fff; background-repeat: no-repeat; background-position: center center; background-size: cover; text-align: center } .header2 .subtitle { display: block; margin-bottom: 5px; font-size: 1.2rem; font-weight: bold; letter-spacing: 0.1em; } .header2 .title { display: block; font-size: 2.8rem; letter-spacing: 0.05em; } #news .header2 { background-image: url(../imgs/img-news.jpg); } #about .header2 { background-image: url(about/img-about.jpg); } #about2 .header2 { background-image: url(about/img-culture.jpg); } #about3 .header2 { background-image: url(about/img-shebei.jpg); } #about4 .header2 { background-image: url(about/img-honor.jpg); } #about5 .header2 { background-image: url(service/img-service.jpg); } #about6 .header2 { background-image: url(about/img-contact.jpg); } #about7 .header2 { background-image: url(about/img-news.jpg); } #about8 .header2 { background-image: url(about/img-pro.jpg); } #about9 .header2 { background-image: url(about/img-pro1.jpg); } #about10 .header2 { background-image: url(about/img-pro2.jpg); } #about11 .header2 { background-image: url(about/img-pro3.jpg); } #business1 .header2 { background-image: url(../imgs/img-business1.jpg); } #business2 .header2 { background-image: url(../imgs/img-business2.jpg); } #business3 .header2 { background-image: url(../imgs/img-business3.jpg); } #business4 .header2 { background-image: url(../imgs/img-business4.jpg); } #company .header2 { background-image: url(../imgs/img-company.jpg); } #people .header2 { background-image: url(../imgs/img-people.jpg); } #contact .header2 { background-image: url(../imgs/img-contact.jpg); } #privacy .header2 { background-image: url(../imgs/img-privacy.jpg); } #terms .header2 { background-image: url(../imgs/img-terms.jpg); } #notfound .header2 { background-image: url(../imgs/img-404.jpg); } /*------------------------------------*\ \*------------------------------------*/ .breadcrumbs ul { list-style: none; margin: 0; padding: 0; } .breadcrumbs li { display: inline-block; } .breadcrumbs li + li:before { display: inline-block; content: ""; width: 12px; height: 12px; } /*------------------------------------*\ \*------------------------------------*/ .h1 { line-height: 1.4; color: #666; font-size: 4.5rem; font-weight: 100; letter-spacing: 0; } .h2 { line-height: 1.4117; color: #4d4d4d; font-size: 3.4rem; letter-spacing: 0; } .h3 { line-height: 1.416; font-size: 2.4rem; letter-spacing: 0; } .h4 { line-height: 1.7647; font-size: 2.1rem; font-weight: 700; letter-spacing: .005em; } .h5 { line-height: 1.5294; font-size: 1.6rem; font-weight: 700; } /* ========================================================================== Object ========================================================================== */ /* Component ----------------------------------------------------------------- */ /* ----------------------------------- Flexbox Grid https://github.com/kristoferjoseph/flexboxgrid ----------------------------------- */ .container-fluid, .container { margin-right: auto; margin-left: auto; } .container-fluid { padding-right: 2rem; padding-left: 2rem; } .row { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -0.5rem; margin-left: -0.5rem; } .row.reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .col.reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: 0.5rem; padding-left: 0.5rem; } .col-xs { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-xs-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .col-xs-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .col-xs-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-xs-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .col-xs-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .col-xs-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-xs-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .col-xs-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .col-xs-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-xs-10 { -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .col-xs-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .col-xs-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .start-xs { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .center-xs { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .end-xs { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .top-xs { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .middle-xs { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bottom-xs { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .around-xs { -ms-flex-pack: distribute; justify-content: space-around; } .between-xs { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /*------------------------------------*\ Buttons \*------------------------------------*/ .btn1, .btn2, .btn3 { display: inline-block; overflow: visible; position: relative; max-width: 100%; font-weight: bold; text-align: center; text-decoration: none !important; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; outline: 0 !important; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .btn1 { width: 800px; max-width: 100%; height: 46px; line-height: 46px; margin-top: 20px; margin-bottom: 20px; background: #003894; color: #fff!important; font-size: 1.3rem; letter-spacing: 0.1em } .btn1:hover { background: #1f4fc8; } .btn2 { display: inline-block; width: 170px; max-width: 100%; height: 46px; line-height: 46px; margin-top: 15px; margin-bottom: 15px; border: 1px solid #003894; font-size: 1.2rem; font-weight: bold; letter-spacing: 0.1em; -webkit-transition: all 0.3s; transition: all 0.3s } .btn2:hover { background: hsl(217.2972972972973, 100%, 35%); color: #fff; } .btn3 { width: 100%; height: 60px; line-height: 60px; margin: 10px 0; background: #003894; color: #fff!important; font-size: 1.3rem; letter-spacing: 0.1em } .btn3:hover { background: #1f4fc8; } /*------------------------------------*\ Tables \*------------------------------------*/ .table { width: 100%; max-width: 100%; margin-bottom: 1 } .table th, .table td { padding: .75em 1em; border-bottom: 1px solid #ccc; } .table thead th { background: #eee; } /* */ .table-bordered th, .table-bordered td { border: 1px solid #ccc; } .table-bordered tbody th { background: #eee; } /* */ .table-condensed th, .table-condensed td { padding: .5em 1em; } /* */ /* ----------------------------------- Pagination ----------------------------------- */ .pagination { text-align: center } .pagination ul { list-style: none; margin: 0; padding: 0; } .pagination li { display: inline-block; position: relative; margin: 0 2px; padding: 0; } .pagination a { display:table; top: 0; left: 0; width: 36px; height: 36px; background: #fff; color: #003894; text-decoration: none; text-align: center; vertical-align: middle; } .pagination a span{ display:table-cell; vertical-align:middle; } .pagination a:hover { background: hsl(217.2972972972973, 100%, 95%); } .pagination a.current { border-color: #003894; background: #003894; color: #fff; } /* Project ----------------------------------------------------------------- */ /*------------------------------------*\ \*------------------------------------*/ .heading { line-height: 1.5; margin-bottom: 2rem; color: #003894; font-size: 1.8rem; font-weight: bold; letter-spacing: 0.1em; } .heading__sub { display: block; color: #333; font-size: 2.8rem; font-weight: bold; letter-spacing: 0.1em } .heading__sub:first-letter { color: #003894; font-size: 3.3rem; } .heading2 { margin-bottom: 2rem } .heading2 span { display: inline-block; line-height: 1.4; font-size: 2rem } .heading2 span::after { content: ""; display: inline-block; width: 60px; height: 0; margin-left: 10px; border-top: 1px solid #333; vertical-align: middle; } .heading3 { line-height: 1.5; margin-top: 1.5em; margin-bottom: 0.8em; font-size: 1.6rem; font-weight: bold; } .lead-text { line-height: 1.75; margin-bottom: 3rem; font-size: 2rem } .lead-text::after { content: ""; display: block; width: 26px; height: 0; margin-top: 1.4rem; border-bottom: 1px solid #003894; } /* ----------------------------------- ----------------------------------- */ #index .hero { position: relative; margin-top: 55px; margin-bottom: 20px } #index .hero::after { content: ""; display: block; position: absolute; left: 50%; top: 50%; max-width: 75%; width: 680px; padding-top: 87.7%; background: url(../../imgs/hero-bg.png) no-repeat center center; background-size: contain; -webkit-transform: translate(-50%, -48%); transform: translate(-50%, -48%); } #index .hero__lead { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 50%; left: 50%; width: 30%; max-width: 224px; z-index: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #index .hero__slide { padding: 5px; } #slide { position: relative; z-index: 0; height: 60vw; min-height: 460px; max-height: calc(100vh - 60px) } #slide .item { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; opacity: 0; -webkit-transition: opacity 1s; transition: opacity 1s; } #slide .item.current { opacity: 1; } #slide .slide1 { background-image: url(index/hero-img1.jpg); } #slide .slide2 { background-image: url(index/hero-img2.jpg); } #slide .slide3 { background-image: url(index/hero-img3.jpg); } #slide .slide4 { background-image: url(index/hero-img4.jpg); } #slide .slide5 { background-image: url(index/hero-img5.jpg); } #slide .slide5::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.3); } #video-slide { position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; height: 100%; } /* */ .blk-about1__text { padding-top: 40px; padding-bottom: 30px } .blk-about1__text p { line-height: 2; } .blk-about1__image img { width: 100%; } .blk-about2 { margin-top: -20px; padding: 0 15px } .blk-about2 .container { padding-top: 40px; padding-bottom: 20px; background: #fff; } .blk-about2__item { padding-top: 30px; padding-bottom: 10px; border-top: 1px dotted #ccc; text-align: center } .blk-about2__item:first-child { padding-top: 0; border-top: none; } .blk-about2__item a { display: block; color: #333; } .blk-about2__item img { display: block; width: 80px; margin: 0 auto 10px; } .blk-about2__heading { margin-bottom: 10px; font-weight: bold; } /* */ .blk-business { padding-top: 60px; } .blk-business__header { margin-bottom: 50px; } .blk-business__item { margin-bottom: 30px } .blk-business__item .item__image { padding-top: 50%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .blk-business__item .item__box { line-height: 2; margin-top: -30px; padding: 30px 15px 20px; background: #fff } .blk-business__item .item__box::before { display: block; color: #003894; font-size: 1.2rem; font-weight: bold; } .blk-business__item .item__box h3 { font-size: 3rem; } /* */ .blk-business2__item { margin-bottom: 30px; background: #fff } .blk-business2__item .item__image { padding-top: 61.2068%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .blk-business2__item .item__box { line-height: 2; padding: 30px 6.8965% 20px; background: #bedffc } .blk-business2__item .item__box::before { display: block; color: #003894; font-size: 1.2rem; font-weight: bold; } .blk-business2__item .item__box h3 { font-size: 3rem; } .blk-image { margin: 60px 0 } .blk-image img { display: block; width: 100%; } /*------------------------------------*\ \*------------------------------------*/ .blk-news { position: relative; z-index: 0; padding: 40px 0 } .blk-news::before { content: ""; position: absolute; top: 0; left: 50%; z-index: -1; width: calc(100% - 10px); height: 100%; background: #fff; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .blk-news .heading { font-size: 1.4rem; } .blk-news__more { display: inline-block; position: relative; width: 180px; height: 32px; line-height: 31px; border: 1px solid #ccc; color: #333; font-size: 1.3rem; text-align: center } .blk-news__more img { position: absolute; left: 12px; top: 9px; } /* */ .articles { margin-bottom: 30px } .articles .article-item { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px dotted #ddd } .articles .article-item a { position: relative; color: #333; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out } .articles .article-item a::after { display: block; position: absolute; right: 5px; top: 50%; width: 8px; height: 8px; border-top: 2px solid #333; border-right: 2px solid #333; -webkit-transform: translate(0, -50%) scaleX(0.9) rotate(45deg); transform: translate(0, -50%) scaleX(0.9) rotate(45deg); } .articles .article-item a:hover { color: #003894; -webkit-transform: translate(8px, 0); transform: translate(8px, 0); } .articles .article-date { font-size: 1.2rem; letter-spacing: 0.05em; } .articles .article-text { display: block; padding-top: 7px; letter-spacing: 0.075em; } /* */ .articles2 .article-item { position: relative; margin-bottom: 30px; } .articles2 a { display: block; color: #333; -webkit-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } .articles2 a:hover { opacity: 0.7; } .articles2 .article-thumb { position: relative; height: 0; padding-top: 61.016949%; background: #ddd; overflow: hidden } .articles2 .article-thumb img { position: absolute; top: 50%; left: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); width: 100%; } .articles2 .article-content { padding: 15px 15px 20px; background: #bedffc; } .articles2 .article-title { margin-bottom: 5px; font-size: 1.6rem; font-weight: bold; } .articles2 .article-text { font-size: 1.3rem; letter-spacing: 0.075em; } /* */ .news { margin-bottom: 40px; padding: 30px 0; background: #fff; } .news__header { padding-bottom: 15px; border-bottom: 1px dotted #ccc } .news__header .news-date { margin-bottom: 5px; font-size: 1.3rem; } .news__header .news-title { font-size: 1.8rem; font-weight: bold; } .news__content { padding-top: 30px; } .news__content figure { margin: 30px 0; } .news__content figure img { width: 100%; } .news__content figcaption { margin-top: 10px; font-size: 1.3rem; } /* */ .blk-people { position: relative; margin-top: 80px } .blk-people::before { content: ""; display: block; position: absolute; left: 50%; top: -40px; z-index: 1; width: 1px; height: 80px; border-left: 1px solid #003894; } .blk-people__text { position: relative; width: 90%; margin: 0 auto } .blk-people__text .heading { margin-top: -1.6em; } /*------------------------------------*\ \*------------------------------------*/ /* STORY */ .blk-story { margin-top: 80px; margin-bottom: 80px; } .blk-story__text { padding: 30px 20px; background: #fff } .blk-story__text h3 { position: relative; line-height: 1.4; margin-bottom: 2rem; padding-left: 6rem; font-size: 3rem; letter-spacing: 0.2em; } .blk-story__text h3::before { content: "STORY"; display: block; color: #003894; font-size: 1.2rem; font-weight: bold; letter-spacing: 0.1em; } .blk-story__num { position: absolute; top: 0; left: 0; width: 4.8rem; height: 4.8rem; line-height: 2.6666; background: #003894; color: #fff; font-size: 1.8rem; font-weight: bold; letter-spacing: 0; text-align: center; border-radius: 50%; } /* NUMBER */ .blk-number__item { position: relative; background: #fff; margin: 20px 0 0; padding: 20px } .blk-number__item::before { content: ""; display: block; position: absolute; left: 0; top: 0; border: 6px solid transparent; border-top-color: #003894; border-left-color: #003894; } .blk-number__item h3 { font-size: 1.8rem; font-weight: bold; text-align: center; letter-spacing: 0.1em; } .blk-number__item h3.smaller { font-size: 1.4rem; } .blk-number__item h3 span { color: #74b5e4; font-size: 3.6rem; } .blk-number__item h3::after { content: ""; display: block; width: 12px; height: 0; margin: 0 auto 15px; border-bottom: 2px solid #003894; } /*------------------------------------*\ \*------------------------------------*/ /* */ .blk-business-first { max-width: 960px; margin-left: auto; margin-bottom: 70px } .blk-business-first .image { margin-top: 50px; } .blk-business-second { margin-top: -100px; margin-bottom: 50px } .blk-business-second .image { width: 50%; margin-bottom: 30px; } .blk-business-second .text h3 { margin-bottom: 10px; font-size: 1.8rem; } /* */ .blk-feature { margin-bottom: 50px; } .blk-feature__item { margin-bottom: 40px } .blk-feature__item .item__image { position: relative; margin-bottom: 20px } .blk-feature__item .item__image span { display: block; position: absolute; top: 0; left: 0; padding: 0.2em 1.5em; background: #f2f7f8; color: #003894; -webkit-transform: translateY(-100%) rotate(90deg); transform: translateY(-100%) rotate(90deg); -webkit-transform-origin: left bottom; transform-origin: left bottom; } .blk-feature__item .item__image img { display: block; width: 100%; } .blk-feature__item h3 { margin-bottom: 10px; font-size: 1.8rem; letter-spacing: 0.075em; } /* */ .blk-business-outline { margin-bottom: 50px; padding: 30px 5%; background: #fff } .blk-business-outline1 { margin-bottom: 50px; padding: 30px 5%; background: #fff } .blk-business-outline table { width: 80%; } .blk-business-outline th { width: 18%; padding: 10px 0; } .blk-business-outline td { padding: 0px 0 10px 40px; } .blk-business-outline .half { width: 50%; padding-right: 10px; padding-left: 0; } .blk-business-outline th span { display: inline-block; line-height: 1.5; padding-bottom: 10px; border-bottom: 1px solid; color: #003894; font-size: 1.8rem; } .blk-business-outline ol { list-style: none; margin: 0; padding: 0; } .blk-business-outline li { display: table; width: 100%; } .blk-business-outline li:nth-of-type(odd) { background: #f6f6f6; } .blk-business-outline li span { display: table-cell; padding: 15px 30px; letter-spacing: 0.075em; } .blk-business-outline li span:first-of-type { position: relative; width: 130px; font-weight: bold; text-align: center } .blk-business-outline li span:first-of-type::after { content: ""; display: block; position: absolute; top: 20px; bottom: 20px; right: 0; width: 0; border-right: 1px solid #ccc; } .blk-business-outline .business-outline__heading { margin-bottom: 20px; } .blk-business-outline .business-outline__heading span { display: inline-block; line-height: 1.5; padding-bottom: 10px; border-bottom: 1px solid; color: #003894; font-size: 1.8rem; font-weight: bold; } /* */ .blk-contact { margin-bottom: 50px; padding: 30px 5% 50px; background: #fff } .blk-contact table { width: 100%; margin-top: 40px; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; } .blk-contact th { font-size: 1.6rem; font-weight: bold; letter-spacing: 0.1em; vertical-align: middle; } .blk-contact td { position: relative; vertical-align: middle; } .blk-contact .tel { font-size: 1.8rem; font-weight: bold; line-height: 1; } .blk-contact .tel a { color: #003894!important; font-size: 3rem; letter-spacing: 0.1em; } /* */ .blk-word1 { margin-bottom: 50px } .blk-word1 .image { margin: 0 -15px } .blk-word1 .image img { width: 100%; } .blk-word1 .text { position: relative; margin-top: -30px; padding: 30px 15px 20px; background: #fff; line-height: 1.7142 } .blk-word1 .text h3 { margin-bottom: 10px; color: #003894; font-size: 2rem; } .blk-word1 .btn1 { width: auto; margin: 0; padding: 0 20px; } .blk-word1.multiple-btn .btn1 { margin: 2px 4px; } /* */ .business1 dl { line-height: 1.7142; margin-bottom: 30px; background: #fff; } .business1 dt { padding: 10px; background: #74b5e4; color: #fff; font-size: 1.6rem; font-weight: bold; text-align: center; } .business1 dd { padding: 20px; text-align: left; } /* */ .blk-word2 { margin: 50px 0; padding: 20px; background: #fff } .blk-word2 .image { margin-bottom: 30px; padding-top: 50%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .blk-word2 h3 { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px dotted #ccc; font-size: 1.8rem; font-weight: bold; } /* */ .blk-environment ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .blk-environment li { -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; max-width: 50%; margin-bottom: 20px; padding-right: 20px } .blk-environment li span { display: block; padding: 15px; border-right: 1px solid #ccc; border-left: 1px solid #ccc; background: #e5f0f6; text-align: center; } .blk-word3 { margin: 50px 0; padding: 20px; background: #fff } .blk-word3 .image { margin-bottom: 30px; padding-top: 50%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .blk-word3 h3 { margin-bottom: 10px; color: #003894; font-weight: bold; } .blk-word3 .lead { line-height: 1.6666; margin-bottom: 20px; font-size: 1.6rem; font-weight: bold; letter-spacing: 0.2em; } /*------------------------------------*\ \*------------------------------------*/ .blk-message { position: relative; } .blk-message__text { margin-bottom: 30px; } .blk-message__image { text-align: right } .blk-message__image img { width: 100%; } .blk-philosophy { position: relative; margin-bottom: 50px; padding: 20px 30px 40px 30px; background: #fff } .blk-philosophy::before { content: ""; position: absolute; left: 0; bottom: 100%; z-index: -1; width: 100%; height: 50px; background: #fff; } .blk-philosophy .container-inner { width: 100%; } .blk-philosophy table { width: 100%; } .blk-philosophy th { padding: 10px 0; color: #003894; font-weight: bold } .blk-philosophy th span { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid; } .blk-philosophy td { padding: 10px 0; } .blk-philosophy dt { padding-top: 10px; color: #003894; } .blk-philosophy dd { padding-bottom: 10px; border-bottom: 1px dotted #d5d5d5; } .blk-company { margin-bottom: 50px; padding: 30px; background: #fff } .blk-company table { margin-bottom: 40px; } /*------------------------------------*\ \*------------------------------------*/ .blk-company th { width: 10%; padding: 10px 20px; border-bottom: 1px solid #003894; font-weight: normal; vertical-align: middle; } .blk-company td { padding: 10px 20px; border-bottom: 1px solid #e3e3e3; vertical-align: middle; } .blk-images { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 50px 0 } .blk-images div { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .blk-images img { width: 100%; max-width: 100%; } /*------------------------------------*\ \*------------------------------------*/ .blk-anchor-link { margin: 40px 0 70px } .blk-anchor-link ul { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; border: 1px solid #ccc; border-left: none; } .blk-anchor-link li { -webkit-box-flex: 1; -ms-flex: 1 0 33.3333%; flex: 1 0 33.3333%; max-width: 33.3333%; border-left: 1px solid #ccc; } .blk-anchor-link a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; height: 100px; color: #333; font-size: 1.2rem; -webkit-transition: background 0.2s; transition: background 0.2s } .blk-anchor-link a::after { content: ""; display: block; width: 8px; height: 8px; border-right: 2px solid #333; border-bottom: 2px solid #333; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .blk-anchor-link a:hover { background: #fff; } .blk-interview__item { position: relative; overflow: hidden; margin-bottom: 30px } .blk-interview__item::after { content: ""; display: block; clear: both; } .blk-interview__item + .blk-interview__item::before { content: "・・・"; display: block; margin-bottom: 30px; text-align: center; } .blk-interview__header { position: relative } .blk-interview__header .image { position: relative; z-index: -1; width: 90% } .blk-interview__header .image::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #fff; -webkit-transform: translate(50px, 50px); transform: translate(50px, 50px); } .blk-interview__header .image img { width: 100%; } .blk-interview__header .lead { margin-top: 20px; padding: 10px 0 10px 25px; padding-left: 25px; border-left: 5px solid #003894; font-weight: bold; } .blk-interview__header p { margin-bottom: 0.5em; } .blk-interview__text { padding: 20px 0 50px; } .blk-interview__image { position: relative } .blk-interview__image img { display: block; width: 54%; } .blk-interview__image img:first-child { margin-left: auto; } .blk-interview__image img:last-child { position: absolute; left: 0; top: -30px; } /* */ .blk-gallery { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -5px 60px } .blk-gallery div { -webkit-box-flex: 1; -ms-flex: 1 0 33.3333%; flex: 1 0 33.3333%; max-width: 33.3333%; margin-bottom: 10px; padding: 0 5px; } .blk-gallery a { display: block; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .blk-gallery a:hover { opacity: 0.7; } /* */ .blk-crosstalk__image { padding: 0 5px; } .blk-crosstalk__heading { position: relative; z-index: 1; height: 70px; line-height: 70px; margin-top: -35px; margin-bottom: 30px; background: rgba(116, 181, 228, 0.8); color: #fff; font-size: 2.4rem; text-align: center } .blk-crosstalk__heading img { width: 3em; margin-right: 20px; vertical-align: middle; } .blk-crosstalk__lead { margin-bottom: 30px; padding: 0 35px; color: #003894; font-size: 1.8rem; font-weight: bold; text-align: center } .blk-crosstalk__lead span { display: inline-block; position: relative; } .blk-crosstalk__lead span::before, .blk-crosstalk__lead span::after { content: ""; display: block; width: 25px; height: 0; border-top: 1px solid #003894; } .blk-crosstalk__lead span::before { position: absolute; top: 50%; right: calc(100% + 10px); } .blk-crosstalk__lead span::after { position: absolute; top: 50%; left: calc(100% + 10px); } .blk-crosstalk__text { max-width: 1080px; margin: 0 auto; } .blk-crosstalk__lead ~ .blk-crosstalk__lead { margin-top: 50px; } .blk-crosstalk__a, .blk-crosstalk__b { position: relative; margin: 20px 0 } .blk-crosstalk__a::before, .blk-crosstalk__b::before { content: ""; display: block; position: absolute; top: 50%; width: 60px; height: 60px; margin-top: -30px; background-size: cover!important; } .blk-crosstalk__a p, .blk-crosstalk__b p { position: relative; width: calc(100% - 90px); line-height: 1.7142; padding: 20px 4%; border-radius: 5px } .blk-crosstalk__a p::before, .blk-crosstalk__b p::before { content: ""; display: block; position: absolute; top: 50%; width: 0; height: 0; margin-top: -12px; border-style: solid; border-color: transparent; } .blk-crosstalk__a::before { left: 0; background: url(../../people/images/img11.png) no-repeat left top; } .blk-crosstalk__a p { margin-left: auto; background: #e5f0f6 } .blk-crosstalk__a p::before { right: 100%; border-width: 12px 16px 12px 0; border-right-color: #e5f0f6; } .blk-crosstalk__b { margin-left: auto } .blk-crosstalk__b::before { right: 0; background: url(../../people/images/img12.png) no-repeat left top; } .blk-crosstalk__b p { background: #fff } .blk-crosstalk__b p::before { left: 100%; border-width: 12px 0 12px 16px; border-left-color: #fff; } /* ----------------------------------- Form ----------------------------------- */ input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { height: 38px; padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #D1D1D1; border-radius: 4px; -webkit-box-shadow: none; box-shadow: none; background-color: #fff; color:inherit; font-size: 1.6rem; vertical-align:middle; -webkit-appearance:none; -moz-appearance:none; appearance:none; outline:0; } /* Removes awkward default styles on some inputs for iOS */ input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea { width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; } textarea { width: 100%; height: 140px; padding-top: 6px; padding-bottom: 6px; } select::-ms-expand { display: none; } .select { position: relative; display: inline-block; margin: 10px 0 } .select select { width: 100%; padding-right: 40px; } .select::after { content: ""; position: absolute; top: 1.1em; right: 0.9em; width: 0; height: 0; padding: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #666666; pointer-events: none; } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border: 1px solid #90baeb; outline: 0; } fieldset { padding: 0; border-width: 0; } input[type="checkbox"], input[type="radio"] { display: inline; vertical-align: middle; } /* */ .form { margin: 40px 0 } .form table { width: 100%; border-top: 1px solid #ddd; background: #fff; } .form th, .form td { padding: 10px 15px; border-bottom: 1px solid #ddd; } .form th { position: relative; width: 25%; background: #e7f1f7; } .form th .label-required { margin-left: 5px; vertical-align: middle; } .form input[type="checkbox"], .form input[type="radio"] { position: relative; top: -2px; margin-right: 5px; } .form .input-zip { width: 10em; } .label-required { display: inline-block; padding: 1px 8px; background: #003894; color: #fff; font-size: 1.2rem; font-weight: bold; } .form-btn { display: block; width: 80%; max-width: 400px; margin: 40px auto 0; } .contact-info { max-width: 800px; line-height: 1.5; margin: 40px auto 60px; padding: 20px 10px; background: #fff; color: #003894; text-align: center; } /* Utility ----------------------------------------------------------------- */ /* Clearing */ .clr { clear: both;} .clearfix:after { content: ""; display: block; clear: both; } /* Float */ .left { float: left;} .right { float: right;} .center { margin-right: auto; margin-left: auto; } /* Text Align & Font style */ .tal { text-align: left; } .tac { text-align: center; } .tar { text-align: right; } .taj { text-align: justify; } .fz-xl { font-size: 2em;} .fz-l { font-size: 1.1em; } .fz-m { font-size: 1.14em; } .fz-s { font-size: 1.2rem; } .fz-16 { font-size: 1.6rem;} .bold { font-weight: bold;} .c1 { color: #003894; } .w100 { width: 100%; } /* Display Utility */ .hidden { display: none; } [class^="u-visible"] { display: none; } .inline { display: inline; } .ib { display: inline-block; } .block { display: block; } @media (max-width: 35em) { .blk-company table, .blk-company tbody, .blk-company tr, .blk-company th, .blk-company td { display: block; width: 100%; } .blk-company th { padding: 5px 0; color: #003894 } .blk-company td { padding: 10px 0 20px; border-bottom: none; }} @media (min-width: 35.001em) { .footer__link { } .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: 0.5rem; padding-left: 0.5rem; } .col-sm { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-sm-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .col-sm-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .col-sm-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-sm-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .col-sm-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .col-sm-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-sm-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .col-sm-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .col-sm-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-sm-10 { -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .col-sm-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .col-sm-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .start-sm { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .center-sm { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .end-sm { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .top-sm { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .middle-sm { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bottom-sm { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .around-sm { -ms-flex-pack: distribute; justify-content: space-around; } .between-sm { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .blk-business2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .blk-business2__item { -webkit-box-flex: 1; -ms-flex: 1 0 48.3333%; flex: 1 0 48.3333%; max-width: 48.3333%; margin-bottom: 40px; } .hidden-sm { display: none!important; } .visible-sm { display: block!important; } .visible-sm--inline { display: inline!important; } .visible-sm--ib { display: inline-block!important; }} @media (max-width: 45em) { .blk-business-outline table, .blk-business-outline tbody, .blk-business-outline tr, .blk-business-outline th, .blk-business-outline td { display: block; width: 100%!important; padding: 0!important; } .blk-business-outline th { margin-bottom: 20px; } .blk-philosophy { margin-right: -10px; margin-left: -10px } .blk-philosophy table, .blk-philosophy tbody, .blk-philosophy tr, .blk-philosophy th, .blk-philosophy td { display: block; width: 100%; } .blk-philosophy th { text-align: center; } .blk-company { margin-right: -10px; margin-left: -10px; } .form table, .form thead, .form tbody, .form tr, .form th, .form td { display: block; width: 100%; border: none; } .form th { padding: 10px; border-bottom: 1px solid #ccc; } .form td { padding: 15px 10px 20px; }} @media (min-width: 45.001em) { .footer { width: calc(100% - 40px); margin-top: 150px; margin-bottom: 20px; } .pagetop { top: -38px; margin: 0 auto 40px } .pagetop a { height: 68px; padding-top: 30px; } .pagetop a::before { margin-bottom: 26px; } .footer__info { position: relative; padding-left: 180px; font-size: 1.3rem; } .footer__info .footer-logo { position: absolute; left: 0; top: 0; width: 160px; } .footer__bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .footer__link { text-align: left; } .footer__copyright { margin-top: 0; text-align: right; } .header2 { height: 300px; margin-bottom: 60px } .header2 .subtitle { font-size: 1.4rem; } .header2 .title { font-size: 3rem; } .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: 0.5rem; padding-left: 0.5rem; } .col-md { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-md-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .col-md-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .col-md-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-md-4 { -ms-flex-preferred-size: 32%; flex-basis: 32%; max-width: 32%; } .col-md-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .col-md-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-md-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .col-md-8 { -ms-flex-preferred-size: 68%; flex-basis: 68%; max-width: 68%; } .col-md-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-md-10 { -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .col-md-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .col-md-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .start-md { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .center-md { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .end-md { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .top-md { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .middle-md { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bottom-md { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .around-md { -ms-flex-pack: distribute; justify-content: space-around; } .between-md { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .blk-about2 .container-inner { display: -webkit-box; display: -ms-flexbox; display: flex; border-left: 1px dotted #ccc; } .blk-about2__item { -webkit-box-flex: 1; -ms-flex: 1 0 33.3333%; flex: 1 0 33.3333%; max-width: 33.3333%; border-top: none; border-right: 1px dotted #ccc; padding: 0 15px; text-align: center; } .blk-image { margin: 100px 0; } .articles .article-item { display: table; width: 100%; padding-top: 15px; padding-bottom: 15px; border-bottom: 1px dotted #ddd; } .articles .article-date, .articles .article-text { display: table-cell; vertical-align: top; } .articles .article-date { width: 118px; height: 33px; line-height: 33px; border: 1px solid #ccc; text-align: center; } .articles .article-text { padding-left: 50px; } .articles2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .articles2 .article-item { -webkit-box-flex: 1; -ms-flex: 1 0 48.5%; flex: 1 0 48.5%; max-width: 48.5%; margin-bottom: 40px; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .articles2 .article-item:hover { -webkit-transform: translate(0, -10px); transform: translate(0, -10px); } .news { padding: 60px 0; } .news__header .news-title { font-size: 2.4rem; } .blk-story__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 0; margin: 150px 0 } .blk-story__item::before { content: ""; display: block; position: absolute; top: -50px; bottom: -50px; left: 0; width: 58.3333%; z-index: -1; background: #fff; } .blk-story__item:nth-of-type(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .blk-story__item:nth-of-type(even)::before { right: 0; left: auto; } .blk-story__text { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; padding: 0 25px; } .blk-story__image { -webkit-box-flex: 1; -ms-flex: 1 0 48.3333%; flex: 1 0 48.3333%; max-width: 48.3333%; } .blk-number { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .blk-number__item { -webkit-box-flex: 1; -ms-flex: 1 0 48%; flex: 1 0 48%; max-width: 48%; } .blk-business-second { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: -130px; margin-bottom: 70px } .blk-business-second .image { -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; max-width: 50%; margin-bottom: 0; } .blk-business-second .text { padding-top: 10%; padding-left: 5% } .blk-business-second .text h3 { font-size: 3rem; } .blk-feature { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 70px; } .blk-feature__item { -webkit-box-flex: 1; -ms-flex: 1 0 30.5%; flex: 1 0 30.5%; max-width: 30.5%; margin-bottom: 0 } .blk-feature__item .item__image { margin-bottom: 30px; } .blk-business-outline { margin-bottom: 100px; padding: 40px 5% } .blk-business-outline1 { margin-bottom: 100px; padding: 40px 20% } .blk-business-outline .business-outline__heading { margin-bottom: 40px; } .blk-business-outline .business-outline__heading span { font-size: 2.4rem; } .blk-word1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 70px } .blk-word1 .image { -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; max-width: 50%; margin: 0; } .blk-word1 .text { position: relative; -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; max-width: 50%; margin: 0; padding: 50px 5% 50px 0 } .blk-word1 .text::before { content: ""; display: block; position: absolute; top: 0; right: 100%; bottom: 0; width: 10%; background: #fff; } .blk-word1 .text h3 { font-size: 3rem; } .blk-word1 .btn1 { position: absolute; right: 10%; bottom: 0; margin: 0; -webkit-transform: translateY(50%); transform: translateY(50%); } .blk-word1.multiple-btn .btn-wrap { position: absolute; right: 10%; bottom: 0; margin: 0; -webkit-transform: translateY(50%); transform: translateY(50%); } .blk-word1.multiple-btn .btn-wrap .btn1 { display: inline-block; position: static; margin: 2px 4px; padding: 0 10px; font-size: 1.2rem; -webkit-transform: none; transform: none; } .business1 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .business1 dl { -webkit-box-flex: 1; -ms-flex: 1 0 30.5%; flex: 1 0 30.5%; max-width: 30.5%; } .blk-word2 { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 70px 0; padding: 0 } .blk-word2 .image { -webkit-box-flex: 1; -ms-flex: 1 0 30.5%; flex: 1 0 30.5%; max-width: 30.5%; min-height: 300px; margin-bottom: 0; padding-top: 0; } .blk-word2 .text { padding: 40px 5% 30px 5%; } .blk-word2 h3 { font-size: 2.4rem; } .blk-environment { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .blk-environment .blk-environment__column { -webkit-box-flex: 1; -ms-flex: 1 0 47.5%; flex: 1 0 47.5%; max-width: 47.5%; } .blk-word3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 70px 0; padding: 0 } .blk-word3 .image { -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; max-width: 50%; min-height: 400px; margin-bottom: 0; padding-top: 0; } .blk-word3 .text { padding: 40px 5% 30px 5%; } .blk-word3 .lead { font-size: 1.8rem; } .blk-message__text { width: 62.5%; } .blk-message__image { position: absolute; top: 0; right: 0; z-index: -1; width: 50%; text-align: right; } .blk-philosophy { padding: 20px 0 80px } .blk-philosophy th { font-size: 1.8rem; white-space: nowrap; } .blk-philosophy td { padding-left: 5%; } .blk-philosophy dl { display: table; width: 100%; } .blk-philosophy dt { display: table-cell; width: 13em; padding: 10px 0; border-bottom: 1px dotted #d5d5d5; color: #003894; } .blk-philosophy dd { display: table-cell; padding: 10px 0; border-bottom: 1px dotted #d5d5d5; } .blk-company { margin-bottom: 100px; padding: 40px 20px; } .blk-images { margin: 80px 0; } .blk-anchor-link a { height: 160px; font-size: 1.4rem; } .blk-interview__header .image { position: relative; z-index: -1; width: 54.1666% } .blk-interview__header .image::before { -webkit-transform: translate(150px, 140px); transform: translate(150px, 140px); } .blk-interview__header .lead { position: absolute; top: 50%; right: 0; width: 54.1666%; margin-top: 0; padding-left: 45px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .blk-interview__text { float: left; width: 62.5%; padding: 60px 5% 0; } .blk-interview__image { float: right; width: 32.5%; margin-right: 5% } .blk-interview__image img { width: 87.1794%; } .blk-interview__image img:last-child { position: static; margin-top: -14.7%; } .blk-gallery { margin: 0 -8px 90px } .blk-gallery div { -webkit-box-flex: 1; -ms-flex: 1 0 25%; flex: 1 0 25%; max-width: 25%; margin-bottom: 16px; padding: 0 8px; } .blk-crosstalk__image { padding: 0 20px; } .blk-crosstalk__heading { height: 120px; line-height: 120px; margin-top: -60px; font-size: 3.2rem } .blk-crosstalk__heading img { width: 4.125em; margin-right: 30px; } .blk-crosstalk__lead { margin-top: 50px; padding: 0 60px; font-size: 2.4rem } .blk-crosstalk__lead span::before, .blk-crosstalk__lead span::after { width: 50px; } .blk-crosstalk__a, .blk-crosstalk__b { max-width: 850px } .blk-crosstalk__a::before, .blk-crosstalk__b::before { width: 100px; height: 100px; margin-top: -50px; } .blk-crosstalk__a p, .blk-crosstalk__b p { width: calc(100% - 140px); padding: 30px 50px; } .blk-crosstalk__b { margin-left: auto; } .fz-xl { font-size: 2.5em;} .fz-l { font-size: 1.28em; } .fz-m { font-size: 1.28em; } .hidden-md { display: none!important; } .visible-md { display: block!important; } .visible-md--inline { display: inline!important; } .visible-md--ib { display: inline-block!important; }} @media (max-width: 60em) { .blk-contact table, .blk-contact tbody, .blk-contact tr, .blk-contact th, .blk-contact td { display: block; width: 100%; padding: 0; } .blk-contact table { padding: 20px 0; text-align: center; } .blk-contact th { margin-bottom: 20px; text-align: center; }} @media (min-width: 60.001em) { .header2 { height: 500px; margin-right: 20px; margin-left: 20px; margin-bottom: 100px } .header2 .title { font-size: 3.6rem; } .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: 0.5rem; padding-left: 0.5rem; } .col-lg { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .col-lg-1 { -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .col-lg-2 { -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .col-lg-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-lg-4 { -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .col-lg-5 { -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .col-lg-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-lg-7 { -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .col-lg-8 { -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .col-lg-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-lg-10 { -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .col-lg-11 { -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .col-lg-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .start-lg { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .center-lg { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .end-lg { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .top-lg { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .middle-lg { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bottom-lg { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .around-lg { -ms-flex-pack: distribute; justify-content: space-around; } .between-lg { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .heading { margin-bottom: 30px; } .heading__sub { font-size: 3rem } .heading__sub:first-letter { font-size: 3.6rem; } .heading2 { margin-bottom: 3rem } .heading2 span { max-width: calc(100% - 120px); font-size: 3.2rem } .heading2 span::after { width: 100px; margin-left: 20px; } .heading3 { font-size: 1.8rem; } .lead-text { font-size: 3.2rem; } #index .hero { margin-top: 0; margin-bottom: 70px; } #index .hero__slide { padding: 20px 20px 0 20px; } #slide { min-height: 700px; } .blk-about1 { position: relative; z-index: 1; height: 560px; margin-top: -40px; margin-bottom: -40px; } .blk-about1__text { width: 50%; padding-top: 140px; } .blk-about1__image { position: absolute; right: 20px; top: 0; z-index: -1; width: 62.5vw; height: 560px; background: url(about-img01.jpg) no-repeat center center; background-size: cover } .blk-about1__image img { display: none; } .blk-about2 .container { padding-top: 120px; padding-bottom: 90px; } .blk-about2 .container-inner { display: -webkit-box; display: -ms-flexbox; display: flex; border-left: 1px dotted #ccc; } .blk-about2__item { -webkit-box-flex: 1; -ms-flex: 1 0 33.3333%; flex: 1 0 33.3333%; max-width: 33.3333%; border-right: 1px dotted #ccc; padding: 0 15px; text-align: center } .blk-about2__item img { width: 120px; } .blk-business { position: relative; padding-top: 100px } .blk-business::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 50%; z-index: -1; background: #e5f0f6; } .blk-business__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin-bottom: 50px } .blk-business__header .heading, .blk-business__header p { margin-bottom: 0; } .blk-business__header p { padding-left: 50px; } .blk-business__item { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 440px; margin-bottom: 60px } .blk-business__item .item__image { position: absolute; top: 0; width: 50%; height: 100%; padding-top: 0; } .blk-business__item:nth-of-type(odd) .item__image { right: 0; } .blk-business__item:nth-of-type(even) .item__image { left: 0; } .blk-business__item .item__box { width: 55%; margin-top: 0; padding: 40px 5%; } .blk-business__item:nth-of-type(even) .item__box { margin-left: auto; } .blk-news { padding: 100px 40px } .blk-news::before { width: calc(100% - 40px); } .blk-news .heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .blk-news .heading__sub { padding-right: 0.8em; } .blk-news__more { position: absolute; right: 0; top: 20px; } .articles2 { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-right: -16px; margin-left: -16px; } .articles2 .article-item { -ms-flex-preferred-size: 33%; flex-basis: 33%; max-width: 33%; padding: 0 16px; } .articles2 a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; background: #fff; } .blk-people { margin-top: 130px } .blk-people::before { top: -80px; height: 150px; } .blk-people__more { position: absolute; top: -12px; right: 0 } .blk-people__more .btn2 { background: #003894; color: #fff; } .blk-people__more .btn2:hover { background: #1f4fc8; } .blk-story__item { margin: 150px 0; } .blk-story__text { padding: 0 6.6666% } .blk-story__text h3 { padding-left: 8.4rem; } .blk-story__num { width: 6.4rem; height: 6.4rem; font-size: 2.4rem; } .blk-number__item { -webkit-box-flex: 1; -ms-flex: 1 0 32.1666%; flex: 1 0 32.1666%; max-width: 32.1666%; } .blk-contact { margin-bottom: 70px; padding: 40px 5% 70px } .blk-contact th, .blk-contact td { position: relative; padding: 30px 0; text-align: center; } .blk-contact td::before { content: ""; display: block; position: absolute; top: 20px; bottom: 20px; border-left: 1px dotted #ccc; } .blk-company { padding: 50px 5% 40px; } .form th .label-required { position: absolute; right: 0; top: 0; padding: 2px 15px; } .form th, .form td { padding: 20px; }} @media (max-width: 64em) { .header__logo { position: absolute; left: 10px; top: 10px; } .sp-navi-btn { position: fixed; right: 5px; top: 5px; z-index: 2; width: 54px; height: 50px; line-height: 1; background: #003894; -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out } .sp-navi-btn .icon { display: block; position: absolute; top: 20px; left: 14px; width: 28px; height: 1px; background: #fff; } .sp-navi-btn .icon::before, .sp-navi-btn .icon::after { display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 100%; background: #fff; content: ""; } .sp-navi-btn .icon::before { margin-top: -8px; } .sp-navi-btn .icon::after { margin-top: 6px; } .sp-navi-btn .label { position: absolute; bottom: 6px; left: 0; right: 0; color: #fff; font-size: 1rem; font-weight: bold; text-align: center; } .header__navi { position: fixed; top: 5px; right: 5px; bottom: 5px; left: 5px; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #003894; color: #fff; opacity: 0; visibility: hidden; -webkit-transform: scale(0.5); transform: scale(0.5) } .header__navi a { color: #fff; } .navi-links { width: 80%; max-width: 400px } .navi-links > li > a, .navi-links > li > span { display: block; padding: 0.3em 1em; font-size: 1.6rem; font-weight: bold; } .navi-sublinks { margin-bottom: 10px; padding-left: 20px } .navi-sublinks > li > a { display: block; position: relative; padding: 0.2em 1em } .navi-sublinks > li > a::before { content: ""; display: block; position: absolute; left: 0; top: 50%; margin-top: -2px; border: 2px solid transparent; border-left: 6px solid #fff; } .navi-contact { width: 80%; max-width: 400px; margin-top: 20px } .navi-contact a { display: block; width: 100%; height: 46px; line-height: 46px; background: #fff; color: #003894; font-weight: bold; text-align: center; border-radius: 23px; } .navi-open .sp-navi-btn .icon { background: transparent } .navi-open .sp-navi-btn .icon::before, .navi-open .sp-navi-btn .icon::after { margin-top: -2px; } .navi-open .sp-navi-btn .icon::before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .navi-open .sp-navi-btn .icon::after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .navi-open .header__navi { opacity: 1; visibility: visible; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.3s cubic-bezier(0.35, 0.79, 0.36, 1); transition: opacity 0.2s ease-out, -webkit-transform 0.3s cubic-bezier(0.35, 0.79, 0.36, 1); transition: transform 0.3s cubic-bezier(0.35, 0.79, 0.36, 1), opacity 0.2s ease-out; transition: transform 0.3s cubic-bezier(0.35, 0.79, 0.36, 1), opacity 0.2s ease-out, -webkit-transform 0.3s cubic-bezier(0.35, 0.79, 0.36, 1); } } @media (min-width: 64.001em) { #index .header { background: transparent; } #index .header.is-fixed { background: rgba(255, 255, 255, 0.9); } .outer { padding-top: 120px; } .header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; top: 0; height: 120px; padding: 0 30px; -webkit-transition: all 0.3s; transition: all 0.3s; font-size: 1.2rem; } .header__logo { position: static; -webkit-box-flex: 1; -ms-flex: 1 0 300px; flex: 1 0 300px; max-width: 300px; width: auto; } .header__navi { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .sp-navi-btn { display: none;} .navi-links { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around } .navi-links > li { margin-right: 20px; } .navi-links > li > a, .navi-links > li > span { display: block; position: relative; padding: 10px 0; font-weight: bold; } .navi-links > li > a::after { content: ""; display: block; position: absolute; right: 0; bottom: 0; left: 0; border-bottom: 2px solid; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: -webkit-transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } .navi-links > li > a:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); } .navi-sublinks { position: absolute; left: 0; top: 100%; width: 240px; margin: 0; padding: 10px; background: #003894; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) } .navi-sublinks a { display: block; line-height: 1; padding: 12px; border: 1px solid transparent; color: #fff; } .navi-sublinks a:hover { border: 1px solid rgba(255, 255, 255, 0.3); } .navi-links > li:hover .navi-sublinks { opacity: 1; visibility: visible; } .navi-contact { -webkit-box-flex: 1; -ms-flex: 1 0 180px; flex: 1 0 180px; max-width: 180px; -webkit-transition: all 0.3s; transition: all 0.3s } .navi-contact a { display: block; width: 100%; height: 46px; line-height: 46px; background: #003894; color: #fff; text-align: center; border-radius: 23px; } .navi-contact a:hover { background: #1f4fc8; } .header.is-fixed { height: 70px } .header.is-fixed .navi-links { color: #333; } .header.is-fixed .header__logo { -webkit-box-flex: 1; -ms-flex: 1 0 300px; flex: 1 0 300px; max-width: 300px; } .header.is-fixed .navi-contact { -ms-flex-preferred-size: 160px; flex-basis: 160px; max-width: 160px; } #index .header { top: 20px; } #index .navi-links { color: #fff; } #index .header.is-fixed { top: 0; } #index .is-fixed .navi-links { color: #333; } #news .navi-links > li:nth-of-type(2) a::after, #about .navi-links > li:nth-of-type(3) a::after, #works .navi-links > li:nth-of-type(4) a::after, #company .navi-links > li:nth-of-type(5) a::after, #people .navi-links > li:nth-of-type(6) a::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @media (max-width: 80em) {} @media (min-width: 80.001em) { .header { padding: 0 5%; font-size: 1.4rem; } .header__logo { -webkit-box-flex: 1; -ms-flex: 1 0 350px; flex: 1 0 350px; max-width: 350px; } .navi-links { padding-right: 20px; } .navi-contact { -ms-flex: 1 0 200px; flex: 1 0 200px; max-width: 200px; } } @media (min-width: 45.001em) and (max-width: 60em) { .navi-links > li > a, .navi-links > li > span { padding: 0.5em 1em; font-size: 1.8rem; } } @media screen and (max-width: 35em) { .table th, .table td { padding: .5em; } .table-scroller { display: block; width: 100%; overflow-x: auto } .table-scroller table { margin-bottom: 4px; } .table-scroller td, .table-scroller th { border: 1px solid #ccc; white-space: nowrap; } } @media (max-width: 40em){ .pagination li{ display: none; } .pagination li.prev, .pagination li.next{ display: inline-block; width: 40%; height: 40px; } .pagination li.prev a, .pagination li.next a{ width: 100%; height: 40px; border-color: var(--color-secondary); background: var(--color-secondary); color: #fff; } .pagination li.prev span::after{ } .pagination li.next span::before{ } }