@charset "UTF-8"; /* Scss Document */ /* Scss Document */ /* ============================== global ============================== */ /* ============================== home ============================== */ /* Scss Document */ /* ----------------------------------------------------- Reset ----------------------------------------------------- */ /* 全要素の余白(margin, padding)削除 */ * { margin: 0; padding: 0; } /* HTML5以前からあるタグの初期設定 */ html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } /* HTML5で追加されたタグの初期設定 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /* リストタグの初期設定 */ ol, ul { list-style: none; } /* 表組みの枠線設定 */ table { border-collapse: collapse; border-spacing: 0; } /* 画像、ビデオ、iframeの埋め込み系の初期設定 */ img, .video { vertical-align: bottom; max-width: 100%; width: auto; height: auto; } iframe { vertical-align: bottom; } /* との初期設定 */ html { font-size: 87.5%; } body { line-height: 1.4; color: #000; font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳＰゴシック", "MS PGothic", Osaka, sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } /* Scss Document */ /* ================================================== base ==================================================*/ *, :before, :after { box-sizing: border-box; } a { color: #000; text-decoration: none; } a:hover { text-decoration: underline; } a { color: #000; text-decoration: none; } a:hover { text-decoration: underline; } a.link { color: #00e; text-decoration: none; } a.link:hover { text-decoration: underline; } sup { font-size: 75.5%; vertical-align: top; position: relative; top: -0.2em; } select { display: block; width: 100%; height: 34px; font-size: 14px; background: #fff; padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; } .bg-b { background: #1a4899; } .bg-db { background: #8da4cc; } .bg-lb { background: #f4f6fa; } .bg-lb2 { background: #d2d9e9; } .fresh-bg-lw { background: #ccffff; } .not-found { margin: 150px 0; } .not-found h2 { font-size: 200%; margin-bottom: 50px; } .clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; } /* ================================================== breadcrumb list ==================================================*/ .breadcrumb-list { background: #8da4cc; padding: 10px 0; line-height: 1.2em; margin-bottom: 100px; font-size: 85.7142857142%; /* // test start position: relative; .container { position: relative; z-index: 5; } // test end */ } .breadcrumb-list ul li { display: inline-block; } .breadcrumb-list ul li:before { content: "〉"; display: inline-block; padding: 0 10px; } .breadcrumb-list ul li:first-child:before { display: none; } /* ================================================== main-visual ==================================================*/ .main-visual { position: relative; } .main-visual video { width: 100%; } .main-visual .message { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); color: #fff; text-align: center; z-index: 1; } .main-visual .message .lg { font-size: 607.142857142%; } .main-visual .message .md { font-size: 357.142857142%; } .main-visual a { font-size: 16px; color: #fff; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; right: 0; bottom: 20px; margin: auto; width: 200px; height: 40px; background: rgba(0, 0, 0, 0.5); } .main-visual .image img{width:100%;} .main-visual .pt{ position: absolute; inset:0; color:#FFF; display: flex; flex-direction: column; justify-content: center; align-items: center; } .main-visual .pt h2{ font-size: calc(1vw * 50 / 12); font-weight: 700; text-shadow: 0 0 5px rgba(0,0,0,0.8); } .main-visual .pt h2 + *{ padding: 1em 1.5em 3em; border-top:solid 1px #FFF; font-size: calc(1vw * 13 / 12); font-weight: 700; text-shadow: 0 0 5px rgba(0,0,0,0.8); } /* ================================================== visible, hidden ==================================================*/ .hidden-md { display: block; } .visible-md { display: none; } /* ================================================== section ==================================================*/ .section h2 { font-size: 285.714285714%; margin-bottom: 40px; font-weight: bold; letter-spacing: 0.2em; } .section h2.underline { line-height: 1em; padding-bottom: 30px; border-bottom: 1px solid #1a4899; margin-bottom: 30px; } .section h3 { font-size: 214.285714285%; } .section h3.underline { padding-bottom: 5px; border-bottom: 1px solid #1a4899; } .section h4 { font-size: 142.857142857%; } .section h5 { font-size: 128.571428571%; font-weight: bold; line-height: 2em; } .section h6 { font-weight: bold; line-height: 2em; } .section p { line-height: 2em; } .section .image { margin: 10px; } .section .image img { width: 100%; } .section .image.no-space { margin: 0; } .section ol { list-style-type: decimal; margin-left: 1.3em; } .section .table { width: 100%; } .section .table th { text-align: left; width: 26%; } .section .table > tbody > tr > th, .section .table > tbody > tr > td { padding: 15px 0; } .section .table > tbody > tr > td .table { border: 0; } .section .table > tbody > tr > td .table th, .section .table > tbody > tr > td .table td { border: 0; } .section .table.table-bordered { border-bottom: 1px solid #1a4899; } .section .table.table-bordered > tbody > tr > th, .section .table.table-bordered > tbody > tr > td { border-top: 1px solid #1a4899; } .section .table.table-condensed > tbody > tr > th, .section .table.table-condensed > tbody > tr > td { padding: 3px 0; } .section .map-link a { color: #1a4899; } /* ================================================== container ==================================================*/ .container-fluid { width: 100%; } .container-wide, .container, .container-mini { margin: 0 auto; } .container-wide { max-width: 1366px; } .container { max-width: 990px; padding: 0 15px; } .container-mini { max-width: 600px; } /* ================================================== text-styles ==================================================*/ .text-top { text-align: top; } .text-right { text-align: right; } .text-bottom { text-align: bottom; } .text-left { text-align: left; } .text-center { text-align: center; } /* ================================================== margin ==================================================*/ .mt5 { margin-top: 5px !important; } .mt10 { margin-top: 10px !important; } .mt20 { margin-top: 20px !important; } .mt30 { margin-top: 30px !important; } .mt40 { margin-top: 40px !important; } .mt50 { margin-top: 50px !important; } .mt60 { margin-top: 60px !important; } .mt70 { margin-top: 70px !important; } .mt80 { margin-top: 80px !important; } .mt90 { margin-top: 90px !important; } .mt100 { margin-top: 100px !important; } .mt150 { margin-top: 150px !important; } .mt200 { margin-top: 200px !important; } .mb5 { margin-bottom: 5px !important; } .mb10 { margin-bottom: 10px !important; } .mb15 { margin-bottom: 15px !important; } .mb20 { margin-bottom: 20px !important; } .mb25 { margin-bottom: 25px !important; } .mb30 { margin-bottom: 30px !important; } .mb40 { margin-bottom: 40px !important; } .mb45 { margin-bottom: 45px !important; } .mb50 { margin-bottom: 50px !important; } .mb60 { margin-bottom: 60px !important; } .mb70 { margin-bottom: 70px !important; } .mb80 { margin-bottom: 80px !important; } .mb90 { margin-bottom: 90px !important; } .mb100 { margin-bottom: 100px !important; } .mb150 { margin-bottom: 150px !important; } .mb200 { margin-bottom: 200px !important; } .mr70 { margin-right: 70px !important; } .ml70 { margin-left: 70px !important; } /* ================================================== box ==================================================*/ .box { position: relative; padding: 15px 0; } .box small { display: block; font-size: 70%; margin-top: 10px; padding: 0 10px; line-height: 2em; } .box.box-default { background: #fff; } .box.box-bordered { border: 1px solid #1a4899; } .box.box-primary { border: 1px solid #8da4cc; background: #8da4cc; color: #fff; } .box.box-info { border: 1px solid #29abe2; background: #29abe2; } .box.box-link, .box.box-text { font-size: 130%; text-align: center; } .box.box-link { font-weight: bold; } .box.box-top-left-corner, .box.box-top-corner, .box.box-left-corner, .box.box-corner { -webkit-border-top-left-radius: 10px; /* Safari,Google Chrome用 */ -moz-border-top-left-radius: 10px; /* Firefox用 */ border-top-left-radius: 10px; /* CSS3草案 */ } .box.box-top-right-corner, .box.box-top-corner, .box.box-right-corner, .box.box-corner { -webkit-border-top-right-radius: 10px; /* Safari,Google Chrome用 */ -moz-border-top-right-radius: 10px; /* Firefox用 */ border-top-right-radius: 10px; /* CSS3草案 */ } .box.box-bottom-left-corner, .box.box-bottom-corner, .box.box-left-corner, .box.box-corner { -webkit-border-bottom-left-radius: 10px; /* Safari,Google Chrome用 */ -moz-border-bottom-left-radius: 10px; /* Firefox用 */ border-bottom-left-radius: 10px; /* CSS3草案 */ } .box.box-bottom-right-corner, .box.box-bottom-corner, .box.box-right-corner, .box.box-corner { -webkit-border-bottom-right-radius: 10px; /* Safari,Google Chrome用 */ -moz-border-bottom-right-radius: 10px; /* Firefox用 */ border-bottom-right-radius: 10px; /* CSS3草案 */ } /* ================================================== ボックスの左端、右端それぞれに三角形を表示するCSS ==================================================*/ .left-triangle:before, .right-triangle:after { content: ""; border: 30px solid transparent; margin-top: calc(15px * -1 - 1px); position: absolute; } .left-triangle:before { left: 0; border-top: 30px solid #1a4899; border-left: 30px solid #1a4899; } .right-triangle:after { right: 0; border-bottom: 30px solid #1a4899; border-right: 30px solid #1a4899; } /* ================================================== ボックス外に吹き出しを表示するCSS ==================================================*/ .balloon { position: relative; } .balloon-bottom { margin-bottom: 20px; } .balloon-bottom:before, .balloon-bottom:after { content: ""; border: 20px solid transparent; position: absolute; left: calc(50% - 20px); bottom: -40px; } .balloon-bottom:before { border-top: 20px solid #1a4899; } .balloon-bottom:after { border-top: 20px solid #fff; bottom: calc(-40px + 1px); } /* ================================================== ボックス内に矢印（くの字型）を表示するCSS ==================================================*/ .arrow { position: relative; } .arrow.arrow-right { padding-right: 15px; } .arrow-top:before { content: ""; width: 15px; height: 15px; border: 0; border-top: solid 2px #1a4899; border-left: solid 2px #1a4899; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 0; right: calc(50% - 7.5px); } .arrow-right:after, .arrow-right-lg:after, .arrow-right-end:after { content: ""; width: 15px; height: 15px; border: 0; border-top: solid 2px #1a4899; border-right: solid 2px #1a4899; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; } .arrow-left:after, .arrow-left-lg:after, .arrow-left-end:after { content: ""; width: 15px; height: 15px; border: 0; border-bottom: solid 2px #1a4899; border-left: solid 2px #1a4899; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; } .white.arrow-right:after, .white.arrow-right-lg:after, .white.arrow-right-end:after, .white.arrow-left:after, .white.arrow-left-lg:after, .white.arrow-left-end:after { border-color: #fff; } .arrow-right:after { width: 8px; height: 8px; border-top-width: 3px; border-right-width: 3px; top: 10%; right: 0; } .arrow-right-lg:after { top: 1.7em; } .arrow-right-end:after { top: 1.4em; right: 1.6em; } a.arrow-right:after { top: 20%; } /* ================================================== SWEEP ==================================================*/ /* */ .sweep.sweep-to-right { display: block; vertical-align: middle; position: relative; background: #29abe2; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: color; -moz-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -moz-osx-font-smoothing: grayscale; } .sweep.sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #1a4899; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .sweep.sweep-to-right:hover:before, .sweep.sweep-to-right:active:before, .sweep.sweep-to-right:focus:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* ================================================== card ==================================================*/ .card { position: relative; top: 0; left: 0; overflow: hidden; } .card .card-image { max-height: 300px; } .card .card-image img { width: 100%; } .card .card-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(26, 72, 153, 0.5); color: #fff; opacity: 0; } .card .card-cover .card-wrapper { position: relative; width: 100%; height: 100%; padding: 10px; } .card .card-cover .card-wrapper .card-tr { position: relative; width: 100%; height: 100%; } .card .card-cover .card-wrapper .card-tr:before, .card .card-cover .card-wrapper .card-tr:after { content: ' '; display: block; position: absolute; background-color: rgba(255, 255, 255, 0.5); } .card .card-cover .card-wrapper .card-tr:before { -webkit-transition-property: "width"; transition-property: "width"; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); top: 0; left: 0; width: 0%; height: 1px; } .card .card-cover .card-wrapper .card-tr:after { -webkit-transition-property: "height"; transition-property: "height"; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); top: 0; right: 0; width: 1px; height: 0%; } .card .card-cover .card-wrapper .card-tr .card-bl { position: relative; width: 100%; height: 100%; } .card .card-cover .card-wrapper .card-tr .card-bl:before, .card .card-cover .card-wrapper .card-tr .card-bl:after { content: ' '; display: block; position: absolute; background-color: rgba(255, 255, 255, 0.5); } .card .card-cover .card-wrapper .card-tr .card-bl:before { -webkit-transition-property: "width"; transition-property: "width"; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); bottom: 0; right: 0; width: 0%; height: 1px; } .card .card-cover .card-wrapper .card-tr .card-bl:after { -webkit-transition-property: "height"; transition-property: "height"; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); bottom: 0; left: 0; width: 1px; height: 0%; } .card .card-cover .card-wrapper .card-tr .card-bl .card-container { position: relative; width: 100%; height: 100%; } .card .card-cover .card-wrapper .card-tr .card-bl .card-container .card-caption { position: absolute; top: 50%; left: 50%; letter-spacing: 0.1em; font-size: 100%; font-weight: normal; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .card:hover .card-cover, .card:active .card-cover, .card:focus .card-cover { opacity: 1; transition: all 0.4s ease; } .card:hover .card-cover .card-wrapper .card-tr:before, .card:active .card-cover .card-wrapper .card-tr:before, .card:focus .card-cover .card-wrapper .card-tr:before { width: 100%; } .card:hover .card-cover .card-wrapper .card-tr:after, .card:active .card-cover .card-wrapper .card-tr:after, .card:focus .card-cover .card-wrapper .card-tr:after { height: 100%; } .card:hover .card-cover .card-wrapper .card-tr .card-bl:before, .card:active .card-cover .card-wrapper .card-tr .card-bl:before, .card:focus .card-cover .card-wrapper .card-tr .card-bl:before { width: 100%; } .card:hover .card-cover .card-wrapper .card-tr .card-bl:after, .card:active .card-cover .card-wrapper .card-tr .card-bl:after, .card:focus .card-cover .card-wrapper .card-tr .card-bl:after { height: 100%; } @media screen and (max-width: 959px) { /* ================================================== card ==================================================*/ .card .card-cover .card-wrapper .card-tr .card-bl .card-container .card-caption { font-size: 1.5vw; } } @media screen and (max-width: 599px) { /* ================================================== visible, hidden ==================================================*/ .hidden-md { display: none; } .visible-md { display: block; } /* ================================================== card ==================================================*/ .card .card-cover .card-wrapper .card-tr .card-bl .card-container .card-caption { font-size: 2.5vw; } } /* Scss Document */ /* ================================================== base ==================================================*/ /*body:before, body:after { content: ""; border: 40px solid transparent; position: absolute; }*/ /*body:before { left: 0; border-top: 40px solid #1a4899; border-left: 40px solid #1a4899; border-width: 120px; z-index: 3; } body:after { right: 0; border-bottom: 40px solid #1a4899; border-right: 40px solid #1a4899; margin-top: calc(40px * -2); } body.front-page:before { border-width: 212.5px; } body.front-page #header h1 { width: auto; top: 35px; left: 35px; }*/ .wrapper { padding-top: 50px; } *[id]:before { display: block; content: " "; margin-top: -75px; height: 75px; visibility: hidden; } /* ================================================== header ==================================================*/ #header h1 { position: fixed; z-index: 5; top: 10px; left: 15px; width: 100px; } #header .menu-container { position: fixed; z-index: 2; width: 100%; background: #fff; text-align: right; height: 50px; top: 0; } #header .menu-container .menu { position: absolute; right: 0; } #header .menu-container .menu .sp-only { display: none; } #header .menu-container .menu ul { display: inline-block; } #header .menu-container .menu ul li { display: inline-block; } #header .menu-container .menu ul li a, #header .menu-container .menu ul li.no-link .title { color: #000; text-decoration: none; display: inline-flex; width: 100%; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; height: 50px; padding-right: 20px; padding-left: 20px; font-weight: bold; } #header .menu-container .menu ul li.no-link:hover .sub-menu { display: block; } #header .menu-container .menu ul li.divider { width: 1em; color: #000; text-align: center; } #header .menu-container .menu ul li.english { margin-right: 15px; margin-left: 10px; width: auto; } #header .menu-container .menu ul li.english a { display: inline; color: #fff; background: #1a4899; padding: 3px 28px; } #header .menu-container .menu ul li .sub-menu { display: none; position: absolute; background: #29abe2; } #header .menu-container .menu ul li .sub-menu ul { display: block; } #header .menu-container .menu ul li .sub-menu ul li { display: block; width: 100%; border-top: 2px solid #1a4899; } #header .menu-container .menu ul li .sub-menu ul li:first-child { border-width: 0; } #header .menu-container .menu ul li .sub-menu ul li a { color: #fff; font-weight: bold; height: auto; padding: 10px 13px; } #header .menu-container .menu ul li .sub-menu ul li a:hover { background: #1a4899; } /* ================================================== breadcrumb list ==================================================*/ .breadcrumb-list { font-weight: bold; } /* ================================================== section ==================================================*/ .section h2 { margin-bottom: 30px; letter-spacing: 0.1em; } .section .box { padding: 12px 0 11px 0; } /* ================================================== footer ==================================================*/ #footer .to-top a { color: #1a4899; display: block; text-align: center; padding: 50px 0 30px; font-size: 114.285714285%; } #footer .to-top a .arrow { padding-top: 15px; } #footer .request-container { background: #8da4cc; padding: 50px 0; text-align: center; } #footer .request-container p { color: #fff; font-size: 142.857142857%; margin-bottom: 30px; line-height: 1.2em; } #footer .request-container .info { color: #1a4899; margin-bottom: 30px; } #footer .request-container .info .tel, #footer .request-container .info .work-time { display: inline-block; font-weight: bold; letter-spacing: 0.1em; } #footer .request-container .info .tel { background: transparent url(../images/icon-tel.png) no-repeat left center; padding-left: 40px; font-size: 357.142857142%; margin-right: 50px; } #footer .request-container .info .work-time { font-size: 178.571428571%; } #footer .request-container .request a { display: block; text-decoration: none; color: #1a4899; } #footer .footer-menu-container { background: #f4f6fa; } #footer .footer-menu-container h3 { font-weight: bold; padding-bottom: 2px; border-bottom: 1px solid #000; margin-bottom: 4px; } #footer .footer-menu-container .menu { margin-bottom: 50px; } #footer .footer-menu-container .menu a { display: block; padding: 5px 0; } #footer .footer { margin-top: 50px; margin-bottom: 30px; /* .flexrow { & > ul { -webkit-align-items: center; align-items: center; } } */ } #footer .footer .address, #footer .footer .access-map { margin-top: 5px; line-height: 40px; } #footer .footer .address { font-size: 114.285714285%; text-align: center; } #footer .footer .access-map { display: inline-block; font-size: 107.142857142%; background: #29abe2; color: #fff; padding: 0 53px; } #footer .footer .notice { text-align: center; font-size: 92.8571428571%; margin-bottom: 30px; } #footer .footer .notice span:first-child { border-right: 1px solid #000; padding-right: 30px; margin-right: 35px; } #footer .footer .copyright { text-align: center; font-size: 64.2857142857%; } /* スマートフォン用 */ @media screen and (max-width: 1110px) { body.front-page:before { border-width: 200px; } } @media screen and (max-width: 959px) { /* ================================================== base ==================================================*/ /*body.front-page:before { border-width: 120px; } body.front-page #header h1 { width: 100px; top: 10px; left: 15px; }*/ /* ================================================== header ==================================================*/ #header { /* h1 { width: 30%; top: 15px; left: 15px; } */ } #header .menu-container .menu { position: static; } #header .menu-container .menu .sp-only { display: block; position: absolute; top: 2.5px; right: 10px; } #header .menu-container .menu .sp-only .sp-menu { width: 45px; height: 45px; z-index: 100; transform: translateX(0); transition: linear 0.4s; background: #1a4899; text-align: center; font-size: 85.7142857142%; color: #FFF; padding-top: 5px; box-sizing: border-box; border-radius: 5px; margin-top: 0; cursor: pointer; } #header .menu-container .menu .sp-only span { width: 25px; height: 2px; background: #FFF; display: block; position: absolute; top: 30px; left: 0; right: 0; margin: auto; } #header .menu-container .menu .sp-only span:before { content: ''; height: 2px; width: 25px; background: #FFF; position: absolute; top: -7px; left: 0; right: 0; margin: auto; } #header .menu-container .menu .sp-only span:after { content: ''; height: 2px; width: 25px; background: #FFF; position: absolute; top: 7px; left: 0; right: 0; margin: auto; } #header .menu-container .menu.active span { -webkit-transform: translateY(20px) rotate(-45deg); transform: translateY(20px) rotate(-45deg); top: 10px; } #header .menu-container .menu.active span:before { opacity: 0; } #header .menu-container .menu.active span:after { -webkit-transform: translateY(-20px) rotate(-90deg); transform: translateY(-20px) rotate(-90deg); top: 20px; } #header .menu-container .menu.active ul { display: none; } #header .menu-container .menu ul { display: none; width: 105.2%; position: relative; top: 50px; z-index: 10; left: -2.6%; background: #b2cedf; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } #header .menu-container .menu ul li { width: 100%; border-top: 1px solid #1a4899; } #header .menu-container .menu ul li.no-link { border-top: 0; } #header .menu-container .menu ul li.no-link .title { display: none; } #header .menu-container .menu ul li.no-link:hover .sub-menu { display: inline-block; } #header .menu-container .menu ul li.divider { display: none; } #header .menu-container .menu ul li.english { width: 100%; text-align: center; background: #1a4899; margin: 0; } #header .menu-container .menu ul li.english a { display: flex; color: #fff; padding: 0; } #header .menu-container .menu ul li .sub-menu { display: inline-block; position: static; width: 100%; } #header .menu-container .menu ul li .sub-menu ul { width: 100%; top: 0; left: 0; } #header .menu-container .menu ul li .sub-menu ul li { width: 100%; border-top: 1px solid #1a4899; } #header .menu-container .menu ul li .sub-menu ul li:first-child { border-top: 1px solid #1a4899; } #header .menu-container .menu ul li .sub-menu ul li a { height: 60px; color: #000; font-weight: normal; } #header .menu-container .menu ul li .sub-menu ul li a:hover { background: #b2cedf; } /* ================================================== footer ==================================================*/ #footer .request-container .info .tel { margin-right: 0; margin-bottom: 10px; } #footer .footer .access-map { padding: 0 23px; } } @media screen and (max-width: 599px) { body:before { display: none; } .main-visual a { display: none; } body.front-page { /* #header { h1 { width: 145px; } } */ } /* ================================================== header ==================================================*/ #header h1 { position: fixed; width: 135px!important; top: 3.5px!important; } /* ================================================== footer ==================================================*/ #footer .request-container .info .tel { font-size: 235.714285714%; padding: 4px 0 4px 40px; } #footer .request-container .info .work-time { font-size: 142.857142857%; } #footer .footer-menu-container .row { text-align: center; } #footer .footer-menu-container .row .columns-2 { margin-bottom: 50px; } #footer .footer-menu-container .row .columns-2 .menu { margin-bottom: 0; } #footer .footer-menu-container .menu { letter-spacing: 0.1em; } #footer .footer { text-align: center; } } @media screen and (max-width: 414px) { /* ================================================== base ==================================================*/ body.front-page:before, body:before { border-width: 100px; } /* ================================================== footer ==================================================*/ #footer .request-container .info .tel { font-size: 200%; padding: 4px 0 4px 40px; } #footer .request-container .info .work-time { font-size: 142.857142857%; } #footer .footer-menu-container .menu { letter-spacing: 0.1em; } } /* Scss Document */ [class*="col-"] { padding-top: 1rem; padding-bottom: 1rem; } .no-space [class*="col-"] { padding-top: 0; padding-bottom: 0; } /* ================================================== row, col ==================================================*/ .row { display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: calc(15px * -1); margin-left: calc(15px * -1); } .row > .col-1, .row > .col-2, .row > .col-3, .row > .col-4, .row > .col-5, .row > .col-6 { width: 100%; padding-right: 15px; padding-left: 15px; } .row.no-space { margin-right: 0; margin-left: 0; } .row.no-space.about_flxpic{justify-content:center;} .row.no-space > .col-1, .row.no-space > .col-2, .row.no-space > .col-3, .row.no-space > .col-4, .row.no-space > .col-5, .row.no-space > .col-6 { padding-right: 0; padding-left: 0; } @media screen and (min-width: 600px) { /* ================================================== row, col ==================================================*/ .row.columns-1 > .col-1 { flex: 0 0 100%; max-width: 100%; } .row.columns-2 > .col-1 { flex: 0 0 50%; max-width: 50%; } .row.columns-2 > .col-2 { flex: 0 0 100%; max-width: 100%; } .row.columns-3 > .col-1 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row.columns-3 > .col-2 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .row.columns-3 > .col-3 { flex: 0 0 100%; max-width: 100%; } .row.columns-4 > .col-1 { flex: 0 0 25%; max-width: 25%; } .row.columns-4 > .col-2 { flex: 0 0 50%; max-width: 50%; } .row.columns-4 > .col-3 { flex: 0 0 75%; max-width: 75%; } .row.columns-4 > .col-4 { flex: 0 0 100%; max-width: 100%; } .row.columns-5 > .col-1 { flex: 0 0 20%; max-width: 20%; } .row.columns-5 > .col-2 { flex: 0 0 40%; max-width: 40%; } .row.columns-5 > .col-3 { flex: 0 0 60%; max-width: 60%; } .row.columns-5 > .col-4 { flex: 0 0 80%; max-width: 80%; } .row.columns-5 > .col-5 { flex: 0 0 100%; max-width: 100%; } .row.columns-6 > .col-1 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .row.columns-6 > .col-2 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .row.columns-6 > .col-3 { flex: 0 0 50%; max-width: 50%; } .row.columns-6 > .col-4 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .row.columns-6 > .col-5 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .row.columns-6 > .col-6 { flex: 0 0 100%; max-width: 100%; } } @media screen and (max-width: 599px) { /* ================================================== row, col ==================================================*/ .row.columns-sm-1 > .col-1 { flex: 0 0 100%; max-width: 100%; } .row.columns-sm-2 > .col-1 { flex: 0 0 50%; max-width: 50%; } .row.columns-sm-2 > .col-2 { flex: 0 0 100%; max-width: 100%; } } @media screen and (max-width: 414px) { /* ================================================== row, col ==================================================*/ /* .row { &.columns-1 { & > .col-1 { @include make-col(1, 1); } } &.columns-2 { & > .col-1 { @include make-col(1, 2); } & > .col-2 { @include make-col(2, 2); } } &.columns-3 { & > .col-1 { @include make-col(1, 3); } & > .col-2 { @include make-col(2, 3); } & > .col-3 { @include make-col(3, 3); } } &.columns-4 { & > .col-1 { @include make-col(1, 4); } & > .col-2 { @include make-col(2, 4); } & > .col-3 { @include make-col(3, 4); } & > .col-4 { @include make-col(4, 4); } } &.columns-5 { & > .col-1 { @include make-col(1, 5); } & > .col-2 { @include make-col(2, 5); } & > .col-3 { @include make-col(3, 5); } & > .col-4 { @include make-col(4, 5); } & > .col-5 { @include make-col(5, 5); } } &.columns-6 { & > .col-1 { @include make-col(1, 6); } & > .col-2 { @include make-col(2, 6); } & > .col-3 { @include make-col(3, 6); } & > .col-4 { @include make-col(4, 6); } & > .col-5 { @include make-col(5, 6); } & > .col-6 { @include make-col(6, 6); } } } */ } /* Scss Document */ /* ================================================== front-page ==================================================*/ #front-page .main-visual .message .lg, #front-page .main-visual .message .md { margin-bottom: 50px; } #front-page .main-visual { aspect-ratio: 16 / 9; } /* ================================================== slide ==================================================*/ .slick-slider { overflow: hidden; } .slick-slider .full-width img { width: 100%; } .slick-dotted.slick-slider { margin-bottom: 100px; } .slick-dots { position: static; margin-top: -40px; height: 40px; } .slick-dots li button:before { color: #ccc; font-size: 15px; /* display: block; content: normal; margin-top: auto; height: auto; */ margin-top: auto; height: auto; visibility: visible; } .slick-dots li.slick-active button:before { color: #fff; /* display: block; content: normal; margin-top: auto; height: auto; */ margin-top: auto; height: auto; visibility: visible; } /* ================================================== endless-river ==================================================*/ ul.newsticker li { margin: 0; } ul.newsticker li img { width: 267px; } /* ================================================== bn_area ==================================================*/ .bn_area { margin: 0 auto 100px; text-align: center; } .bn_area img { max-width: 500px; width: 90%; border: 1px solid #a9a9a9; padding: 10px 30px; } .bn_area a { margin-top: 30px; display: block; } .bn_area a + a img { border: none; padding: 0; } @media screen and (max-width: 599px) { .slick-dotted.slick-slider { margin-bottom: 50px; } .bn_area { margin-bottom: 50px; } } /* ================================================== news-box ==================================================*/ .news-box { color: #1a4899; } .news-box .box.box-link { font-size: 142.857142857%; } /* NEWSカテゴリー */ /* NEWS表示CSS */ .news-posts { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .news-posts dt, .news-posts dd { border-bottom: 1px solid #000; padding: 20px 0; } .news-posts dt { width: 29.4%; font-weight: bold; color: #000; } .news-posts dt:before { display: inline-block; background: #1a4899; color: #fff; padding: 8px 9px 5px; width: 9.5em; text-align: center; margin-right: 25px; font-weight: normal; } .news-posts dt.news:before { content: "ニュース"; } .news-posts dt.recruit:before { content: "採用"; } .news-posts dt.event:before { content: "コロナウイルス関連"; padding: 8px 0 5px; } .news-posts dt.activities:before { content: "社内活動"; } .news-posts dt.sdgs:before { content: "SDGs"; } .news-posts dd { width: 70.6%; -webkit-align-items: center; align-items: center; padding-top: 24px; line-height: 2em; } .news-posts dd a:hover { text-decoration: none; } .news-posts dt.event,.news-posts dt.event + dd,.news-posts dt.sdgs,.news-posts dt.sdgs + dd { display: none; } .news-list { margin-top: 20px; } .news-list a { color: #1a4899; font-weight: bold; font-size: 114.285714285%; } /* */ .spirit { background: #1a4899 url(../images/spirit.jpg) no-repeat center center; background-size: cover; margin-top: 100px; padding: 90px 0; } .spirit h2, .spirit p { color: #fff; } .spirit h2 { margin-top: 14px; margin-bottom: 20px; } .spirit h2 img { max-width: 380px; } .spirit p { font-size: 107.142857142%; line-height: 2em; letter-spacing: 0.03em; } .spirit .business-introduction { margin-top: 30px; } .spirit .business-introduction > ul > li { margin: 10px; } .spirit .business-introduction .business-01 a, .spirit .business-introduction .business-02 a, .spirit .business-introduction .business-03 a { display: block; margin: 0 auto; max-width: 250px; height: auto; overflow: hidden; } .spirit .business-introduction .business-01 a:before, .spirit .business-introduction .business-02 a:before, .spirit .business-introduction .business-03 a:before { display: block; content: ""; padding-top: 100%; } .spirit .business-introduction .business-01 a:hover, .spirit .business-introduction .business-02 a:hover, .spirit .business-introduction .business-03 a:hover { background-position: 0 100%; } .spirit .business-introduction .business-01 a { background: url(../images/business-introduction01.png) no-repeat; background-size: 100%; } .spirit .business-introduction .business-02 a { background: url(../images/business-introduction02.png) no-repeat; background-size: 100%; } .spirit .business-introduction .business-03 a { background: url(../images/business-introduction03.png) no-repeat; background-size: 100%; } .contents-menu { margin: 100px 0 100px; } .contents-menu .col-1 { padding-right: 10px; padding-left: 10px; } .contents-menu li { margin: 10px; } .contents-menu a .caption { font-size: 142.857142857%; font-weight: bold; text-align: center; color: #1a4899; padding-top: 10px; } .photos { margin-top: 100px; } @keyframes slideshow { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } 100% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-backface-visibility: hidden; backface-visibility: hidden; } } @-webkit-keyframes slideshow { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } } @-moz-keyframes slideshow { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } } @-o-keyframes slideshow { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } } #infinity-slide { margin-top: 100px; height: 200px; max-width: 100%; position: relative; overflow: hidden; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } #infinity-slide > .images { height: 200px; width: 2670px; position: absolute; top: 0; left: 0; height: 100%; font-size: 0; white-space: nowrap; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); animation: slideshow 50s linear 0s infinite; -webkit-animation: slideshow 50s linear 0s infinite; -moz-animation: slideshow 50s linear 0s infinite; -ms-animation: slideshow 50s linear 0s infinite; -o-animation: slideshow 50s linear 0s infinite; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #infinity-slide > .images img { display: inline-block; width: 267px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .recruit-wrap { margin-bottom: 100px; } .recruit-section .sweep, .request a { max-width: 600px; margin: 0 auto; } .recruit-section a { display: block; color: #fff; } .recruit-section a .box { padding: 30px 0; } .recruit-section a:hover { text-decoration: none; } .request-container .box.box-link { font-size: 142.857142857%; } @media screen and (max-width: 1210px) { #front-page .main-visual .message .lg, #front-page .main-visual .message .md { margin-bottom: 40px; } #front-page .main-visual .message .lg { font-size: 464.285714285%; } #front-page .main-visual .message .md { font-size: 214.285714285%; } } @media screen and (max-width: 959px) { #front-page .main-visual .message .lg, #front-page .main-visual .message .md { margin-bottom: 30px; } #front-page .main-visual .message .lg { font-size: 285.714285714%; } #front-page .main-visual .message .md { font-size: 178.571428571%; } } @media screen and (max-width: 599px) { #front-page .main-visual .message .lg, #front-page .main-visual .message .md { margin-bottom: 5px; } #front-page .main-visual .message .lg { font-size: 192.857142857%; } #front-page .main-visual .message .md { font-size: 142.857142857%; } .news-posts dt, .news-posts dd { width: 100%; } .news-posts dt { border-bottom: none; padding-bottom: 5px; } .news-posts dd { padding-top: 5px; } .spirit h2 { text-align: center; } } /* Scss Document */ /* ================================================== division ==================================================*/ .division hr { background-color: #1a4899; color: #1a4899; border: none; height: 1px; margin-top: 50px; margin-bottom: 50px; } .division hr.normal { background-color: #000; color: #000; margin: 0; } .division .caption { text-align: center; font-weight: bold; line-height: 2em; } .division .caption.normal { font-weight: normal; } .division .caption p { margin-top: 0; text-align: left; } .division .caption p:first-child { text-align: center; margin-top: 10px; margin-bottom: 10px; line-height: 1.5em; font-size: 18px; } .division .caption ul li { text-align: left; text-indent: -1em; padding-left: 1em; } .division .caption ul li:before { content: "・"; } .division .caption h3 { text-align: left; margin-top: 20px; } .division .caption h3.underline { margin-bottom: 15px; } .division .caption .table > tbody > tr > th, .division .caption .table > tbody > tr > td { padding: 5px 0; line-height: 1.5em; } .division .caption .table > tbody > tr > th { width: 5em; text-align: justify; -moz-text-align-last: justify; text-align-last: justify; } .division .caption .table > tbody > tr > td { text-align: left; } .division .caption .table > tbody > tr > td.with-divider:before { content: "："; } .division h2 { text-align: center; color: #1a4899; font-size: 25px; font-weight: bold; margin-bottom: 50px; line-height: 1.5em; } .division p { margin-top: 30px; line-height: 2em; } .division .row.no-space .image { margin: 5px; } .division .advantage { color: #fff; padding: 50px 15px; } .division .advantage h2 { color: #fff; margin: 0; padding-bottom: 30px; line-height: 1.5em; font-weight: bold; } .division .advantage h3 { font-size: 16px; text-align: center; line-height: 1.5em; letter-spacing: 0.1em; } .division .advantage p { margin: 0; } .division .advantage .row > div { padding: 10px 30px; border-left: 1px solid #fff; } .division .advantage .row > div:first-child { border: 0; } .division .advantage.ver2025 h3{ margin-bottom: 1em; min-height: 3em; display: flex; justify-content: center; align-items: center; } .division .advantage.ver2025 h3, .division .advantage.ver2025 h3 + *{white-space: pre-wrap;} .division .division-menu { padding: 50px 15px; text-align: center; } .division .division-menu a { display: block; max-width: 450px; max-height: 100%; overflow: hidden; } .division .division-menu a:hover { background-position: 0 100% !important; } .division .division-menu a:before { display: block; content: ""; padding-top: calc(100% / 450 * 100); } .division .division-menu a.arrow.arrow-right-lg:after { top: 1.3em; border-color: #fff; } .division .division-menu a.machine-menu1 { background: transparent url(../images/machine/menu01.jpg) no-repeat center top; background-size: 100%; margin-right: 10px; } .division .division-menu a.machine-menu2 { background: transparent url(../images/machine/menu02.jpg) no-repeat center top; background-size: 100%; margin-left: 10px; } .division .division-menu a.mold-menu1 { background: transparent url(../images/mold/menu01.jpg) no-repeat center top; background-size: 100%; margin-left: 10px; margin-right: 10px; } .division .division-menu a.mold-menu2 { background: transparent url(../images/mold/menu02.jpg) no-repeat center top; background-size: 100%; margin-right: 10px; margin-left: 10px; } .division .division-menu a.mold-menu3 { background: transparent url(../images/mold/menu03.jpg) no-repeat center top; background-size: 100%; margin-left: 10px; margin-right: 10px; } .division .division-menu a.part-menu1 { background: transparent url(../images/part/menu01.jpg) no-repeat center top; background-size: 100%; margin-right: 10px; } .division .division-menu a.part-menu2 { background: transparent url(../images/part/menu02.jpg) no-repeat center top; background-size: 100%; margin-left: 10px; } .division .division-menu.mold a { max-width: 310px; } .division .division-menu.mold a:before { padding-top: calc(100% / 310 * 100); } .division .division-menu.flow{padding-bottom: 0;} .division .division-menu.flow img{display: block; width: 690px; margin: auto;} .division.details h2 { font-size: 40px; color: #000; margin: 0; margin-bottom: 30px; } .division.details h3 { font-size: 25px; color: #1a4899; font-weight: bold; margin-bottom: 30px; } .division.details h3 > small { font-size: 75%; } .division.machine.details h3 { line-height: 1em; padding-bottom: 15px; } .division.machine.details#system .row > .col-1 { padding-right: 10px; padding-left: 10px; } .division.machine.details#system .row .image { margin: 0; } .division.machine.details#system .row .caption { font-size: 16px; font-weight: normal; } .division.machine.details#equipment .container { padding-top: 50px; padding-bottom: 50px; } .division.machine.details#equipment .row .image { text-align: center; } .division.machine.details#equipment .row .image img { width: 50%; height: 50%; } .division.machine.details#car-parts-equipment h2 { margin-bottom: 0; } .division.machine.details#car-parts-equipment select { width: 50%; margin: 0 auto; } .division.machine.details#car-parts-equipment #car-images { padding-top: 41.14583%; position: relative; top: 0; left: 0; } .division.machine.details#car-parts-equipment #car-images .car-image { position: absolute; top: 0; left: 0; right: 0; } .division.machine.details#car-parts-equipment .row > .col-1:first-child { padding-right: 25px; } .division.machine.details#car-parts-equipment .row > .col-1:last-child { padding-left: 25px; } .division.machine.details#car-parts-equipment .row > .col-1 p { font-size: 105%; } .division.mold.details.technology .container { padding-top: 50px; padding-bottom: 50px; } .division.mold.details.technology .container h3 { margin-bottom: 11px; } .division.mold.details#car-parts-mold h2 { margin-bottom: 0; } .division.mold.details#car-parts-mold select { width: 50%; margin: 0 auto; } .division.mold.details#car-parts-mold #car-images { padding-top: 41.14583%; position: relative; top: 0; left: 0; } .division.mold.details#car-parts-mold #car-images .car-image { position: absolute; top: 0; left: 0; right: 0; } .division.mold.details#equipment .row .col-1 { padding: 10px; } .division.mold.details#equipment .row .col-1 .bg-lb { padding: 30px; height: 100%; } .division.part.details h3 { margin-top: 65px; } .division.part.details .table > tbody > tr td { font-size: 18px; } .division.part.details.equipment { padding-top: 50px; padding-bottom: 60px; } .division.part.details.equipment .table > tbody > tr td { padding: 5px 0; } .division.part.details.equipment .row.columns-2 > .col-1:nth-child(even) { padding-left: 70px; } .division.part.details.sample .caption { background: #e8edf5; font-size: 14px; font-weight: normal; min-height: 100px; text-align: left; padding: 20px; } .division.part.details.other .table > tbody > tr td { padding: 20px 0; } @media screen and (max-width: 599px) { /* ================================================== division ==================================================*/ .division h2 { margin: 0 0 50px; } .division .advantage h3 { margin-bottom: 5px; } .division .advantage .row > div { padding: 0; border: 0; margin-top: 20px; padding-top: 10px; border-top: 1px solid #fff; } .division .advantage .row > div:first-child { margin: 0; padding: 0; } .division .division-menu a { margin: 0; max-width: 100%; } .division .division-menu a.machine-menu1 { margin: 0; margin-bottom: 15px; } .division .division-menu a.machine-menu2 { margin: 0; margin-top: 15px; } .division .division-menu a.mold-menu1 { margin: 0; margin-bottom: 15px; } .division .division-menu a.mold-menu2 { margin: 0; margin-top: 15px; margin-bottom: 15px; } .division .division-menu a.mold-menu3 { margin: 0; margin-top: 15px; } .division .division-menu a.part-menu1 { margin: 0; margin-bottom: 15px; } .division .division-menu a.part-menu2 { margin: 0; margin-top: 15px; } .division .division-menu.mold a { max-width: 100%; } .division.machine.details#car-parts-equipment select { width: 100%; margin: 0 auto; } .division.machine.details#car-parts-equipment .row > .col-1:first-child { padding-right: 15px; } .division.machine.details#car-parts-equipment .row > .col-1:last-child { padding-left: 15px; } .division.mold.details#car-parts-mold select { width: 100%; margin: 0 auto; } .division.part.details h3 { margin-top: 20px; } .division.part.details.equipment .row.columns-2 > .col-1:nth-child(even) { padding-left: 0; } } /* Scss Document */ /* ================================================== company info ==================================================*/ #company-info { margin-bottom: 215px; } #company-info .row .col-1 .image { margin: 0; } #company-info .row .col-1 .caption { font-size: 85.7142857142%; font-weight: normal; padding: 15px 0; line-height: 1.5em; } /* ================================================== president message ==================================================*/ #president-message { margin-bottom: 100px; } #president-message h3 { line-height: 1.5em; margin-bottom: 50px; } #president-message p { text-indent: 1em; line-height: 2em; } #president-message .president { margin-bottom: 50px; } #president-message .sign { margin-bottom: 50px; } /* ================================================== management philosophy ==================================================*/ #management-philosophy { margin-bottom: 150px; } #management-philosophy .steps .step { margin-bottom: 30px; } #management-philosophy .steps .step h4 { font-size: 128.571428571%; margin-bottom: 10px; font-weight: bold; } #management-philosophy .steps .step p { margin-left: 40px; } /* ================================================== policy ==================================================*/ .policy p { line-height: 1.5em; } .policy .box { line-height: 1em; padding: 15px 0 14px; } .policy .box.box-link, .policy .box.box-text { font-size: 178.571428571%; font-weight: bold; } .policy .box small { font-size: 14px; line-height: 1em; } .policy .row > div .caption { text-align: left; margin-left: 10px; line-height: 1em; } .policy .row > div .caption .kind, .policy .row > div .caption .date { font-size: 85.7142857142%; line-height: 1.5em; } .policy .row > div .caption .kind { font-weight: bold; } .policy ol { margin-bottom: 15px; } .policy ol > li { line-height: 2em; } .policy .hotline { padding: 30px; } .policy .hotline h5 { text-align: center; color: #1a4899; margin-bottom: 20px; } .policy .hotline p, .policy .hotline .row { line-height: 2em; } .policy .hotline .row > div { text-align: left !important; } .policy .hotline .row > div .front { text-indent: -1.1em; margin-left: 1.1em; } .policy .hotline .row > div .email, .policy .hotline .row > div .address, .policy .hotline .row > div .name { margin-left: 5.1em; text-indent: -4em; } .policy .hotline .row > div .name { text-indent: 0; } /* ================================================== spirit ==================================================*/ .spirits { margin-bottom: 150px; } #spirit .image img { width: 90%; } /* ================================================== core-competence ==================================================*/ #core-competence-content { padding: 50px 0; margin-bottom: 70px; } #core-competence-content .steps { margin-top: 20px; margin-bottom: 30px; } #core-competence-content .steps h5 { font-weight: bold; color: #1a4899; line-height: 1.5em; } #core-competence-content .steps p { margin-bottom: 2em; line-height: 2em; } #core-competence-content .elements { margin-bottom: 30px; } #core-competence-content .elements h5 { line-height: 1.5em; } #core-competence-content .elements img { width: auto; } #core-competence-content .elements > div { border-left: 1px solid #000; padding: 5px 30px; } #core-competence-content .elements > div:first-child { border-left-width: 0; } /* ================================================== corporate identity ==================================================*/ #corporate-identity .logo { max-width: 650px; margin: 0 auto; margin-bottom: 20px; margin-top: 70px; } #corporate-identity .logo img { width: auto; } #corporate-identity h5 { margin-bottom: 60px; } #corporate-identity .article { margin-bottom: 150px; } #corporate-identity .article > div p { line-height: 1.5em; } #corporate-identity .article > div .right-image { position: relative; height: 200px; } #corporate-identity .article > div .right-image img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: auto; } /* ================================================== outline, history ==================================================*/ #outline .zip, #outline .address, #outline .tel, #outline .fax, #history .zip, #history .address, #history .tel, #history .fax { display: inline-block; } #outline .zip, #outline .tel, #history .zip, #history .tel { margin-right: 1em; } /* ================================================== license ==================================================*/ .license p { font-size: 128.571428571%; margin-bottom: 50px; } .license .caption { font-size: 285.714285714%; color: #1a4899; font-weight: bold; line-height: 1.5em; letter-spacing: 0.05em; } .license .image img { width: auto; } .license .row { align-items: center; } /* ================================================== base ==================================================*/ .base .tel-and-fax .tel { padding-right: 1em; } .base .map a { display: block; background-color: #29abe2; text-align: center; color: #fff; padding: 5px 0 3px; } .base .map a:hover { text-decoration: none; } .base.domestic { padding: 50px 0 0; } .base.domestic h5, .base.domestic .address, .base.domestic .tel-and-fax, .base.domestic .contents { text-align: center; } .base.domestic .image { margin-bottom: 15px; } .base.domestic h5, .base.domestic .address { margin-bottom: 5px; } .base.domestic .address, .base.domestic .contents { line-height: 2em; } .base.domestic a { margin: 15px 60px; } .base.domestic .col-1 { margin-bottom: 50px; } .base.domestic .col-1:nth-child(odd) { padding-right: 15px; } .base.domestic .col-1:nth-child(even) { padding-left: 15px; } .base.domestic .table > tbody > tr > td { line-height: 2em; } .base.overseas .col-2 { padding-right: 15px; } .base.overseas .col-3 { padding-left: 15px; } .base.overseas .col-3 .info { padding-bottom: 30px; border-bottom: 1px solid #000; } .base.overseas .col-3 .info .table { font-size: 128.571428571%; } .base.overseas .themes { border-bottom: 1px solid #1a4899; } .base.overseas .themes ol > li { font-weight: bold; } .base.overseas .themes ol > li > p, .base.overseas .themes ol > li > table { font-weight: normal; } .base.overseas .themes ol > li > table > tbody > tr > th, .base.overseas .themes ol > li > table > tbody > tr > td { padding: 3px 10px 0 0; } @media screen and (max-width: 959px) { /* ================================================== outline, history ==================================================*/ #outline .table > tbody > tr > td > .table > tbody > tr > th, #outline .table > tbody > tr > td > .table > tbody > tr > td, #history .table > tbody > tr > td > .table > tbody > tr > th, #history .table > tbody > tr > td > .table > tbody > tr > td { display: block; } #outline .table > tbody > tr > td > .table > tbody > tr > th, #history .table > tbody > tr > td > .table > tbody > tr > th { width: 100%; padding-bottom: 0; } #outline .table > tbody > tr > td > .table > tbody > tr > td, #history .table > tbody > tr > td > .table > tbody > tr > td { padding-top: 0; } #outline .table > tbody > tr > td > .table > tbody > tr > td iframe, #history .table > tbody > tr > td > .table > tbody > tr > td iframe { width: 100%; } #outline .table > tbody > tr > td #oversea2 > tbody > tr > th, #outline .table > tbody > tr > td #oversea2 > tbody > tr > td, #outline .table > tbody > tr > td #oversea3 > tbody > tr > th, #outline .table > tbody > tr > td #oversea3 > tbody > tr > td, #history .table > tbody > tr > td #oversea2 > tbody > tr > th, #history .table > tbody > tr > td #oversea2 > tbody > tr > td, #history .table > tbody > tr > td #oversea3 > tbody > tr > th, #history .table > tbody > tr > td #oversea3 > tbody > tr > td { display: block; } #outline .table > tbody > tr > td #oversea2 > tbody > tr > th, #outline .table > tbody > tr > td #oversea3 > tbody > tr > th, #history .table > tbody > tr > td #oversea2 > tbody > tr > th, #history .table > tbody > tr > td #oversea3 > tbody > tr > th { width: 100%; padding-bottom: 0; } #outline .table > tbody > tr > td #oversea2 > tbody > tr > td, #outline .table > tbody > tr > td #oversea3 > tbody > tr > td, #history .table > tbody > tr > td #oversea2 > tbody > tr > td, #history .table > tbody > tr > td #oversea3 > tbody > tr > td { padding-top: 0; } #outline .table > tbody > tr > td #oversea2 > tbody > tr > td iframe, #outline .table > tbody > tr > td #oversea3 > tbody > tr > td iframe, #history .table > tbody > tr > td #oversea2 > tbody > tr > td iframe, #history .table > tbody > tr > td #oversea3 > tbody > tr > td iframe { width: 100%; } } @media screen and (max-width: 599px) { /* ================================================== spirit ==================================================*/ /* ================================================== core-competence ==================================================*/ #core-competence-content .elements { margin-bottom: 50px; } #core-competence-content .elements > div { border: 0; border-top: 1px solid #000; padding: 50px 5px; } #core-competence-content .elements > div:first-child { border-top-width: 0; } /* ================================================== corporate-identity ==================================================*/ /* ================================================== outline, history ==================================================*/ #outline .map-link a, #history .map-link a { display: block; border: 1px solid #1a4899; text-align: center; padding: 10px; font-weight: bold; } #outline .map-link a.arrow.arrow-right:after, #history .map-link a.arrow.arrow-right:after { display: none; } #outline .map-link a:hover, #history .map-link a:hover { text-decoration: none; } #outline .table > tbody > tr > th, #outline .table > tbody > tr > td, #history .table > tbody > tr > th, #history .table > tbody > tr > td { display: block; } #outline .table > tbody > tr > th, #history .table > tbody > tr > th { width: 100%; padding-bottom: 0; } #outline .table > tbody > tr > td, #history .table > tbody > tr > td { border: 0; padding-top: 0; } #outline .table > tbody > tr > td .table > tbody > tr > td, #history .table > tbody > tr > td .table > tbody > tr > td { padding-bottom: 0; } #outline .table > tbody > tr > td #business-place6 > tbody > tr > th, #outline .table > tbody > tr > td #business-place7 > tbody > tr > th, #history .table > tbody > tr > td #business-place6 > tbody > tr > th, #history .table > tbody > tr > td #business-place7 > tbody > tr > th { border-top: 1px solid #1a4899; } /* ================================================== license ==================================================*/ .license .caption { font-size: 30px; } .license .row { align-items: center; } /* ================================================== base ==================================================*/ .base .tel-and-fax .tel { padding-right: 0; } .base.domestic .col-1:nth-child(odd) { padding-right: 0; } .base.domestic .col-1:nth-child(even) { padding-left: 0; } .base.overseas .col-2 { padding-right: 0; } .base.overseas .col-3 { padding-left: 0; } } @media screen and (max-width: 414px) { /* ================================================== base ==================================================*/ .base.domestic .tel-and-fax .tel, .base.domestic .tel-and-fax .fax { display: block; } } /* Scss Document */ /* ================================================== contact ==================================================*/ .contact .message { font-size: 18px; font-weight: bold; } .contact form dl { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; border-bottom: 2px solid #1a4899; } .contact form dl dt, .contact form dl dd { border-top: 2px solid #1a4899; } .contact form dl dt { width: 200px; background: #d1daeb; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 14px; padding: 10px 1em 9px; } .contact form dl dt .require { background: #f00; color: #fff; box-sizing: border-box; padding: 3px 10px 1px; margin-left: 0.5em; } .contact form dl dd { width: calc(100% - 200px); padding: 5px 15px; } .contact form dl dd select, .contact form dl dd textarea, .contact form dl dd input[type="text"] { border: 1px solid #CCC; padding: 8px 16px; box-sizing: border-box; font-size: 16px; width: 100%; } .contact form dl dd select { background-color: #fff; height: 40px; } .contact form dl dd textarea { width: 100%; } .contact form dl dd .input-col-1 { max-width: calc(125px * 1); } .contact form dl dd .input-col-2 { max-width: calc(125px * 2); } .contact form dl dd .input-col-3 { max-width: calc(125px * 3); } .contact form dl dd .input-col-4 { max-width: calc(125px * 4); } .contact form dl dd .input-col-5 { max-width: calc(125px * 5); } .contact .btn { text-align: center; } .contact .btn button, .contact .btn a { display: inline-block; width: 200px; height: 50px; line-height: 50px; background: #b3b3b3; color: #fff; border: 0; font-size: 18px; cursor: pointer; margin: 0 15px; text-decoration: none; } .contact.confirm form dl dd { padding-top: 10px; padding-bottom: 9px; } .contact.complete .attention { text-align: center; line-height: 3em; font-size: 18px; } @media screen and (max-width: 599px) { .contact .step { display: none; } .contact form dl dt, .contact form dl dd { width: 100%; display: block; } .contact form dl dd { border: 0; padding: 10px 0; } .contact form dl dd select, .contact form dl dd textarea, .contact form dl dd input[type="text"], .contact form dl dd .input-col-1, .contact form dl dd .input-col-2, .contact form dl dd .input-col-3, .contact form dl dd .input-col-4, .contact form dl dd .input-col-5 { max-width: 100%; } .contact .btn button, .contact .btn a { margin: 15px; } } /* Scss Document */ /* ================================================== recruit ==================================================*/ .recruit { font-size: 14px; } .recruit.carrier h2, .recruit.carrier .box-text { font-weight: bold; } .recruit.carrier .about, .recruit.carrier .send, .recruit.carrier .email { margin-bottom: 30px; } .recruit.carrier .table.table-bordered > tbody > tr:first-child > th, .recruit.carrier .table.table-bordered > tbody > tr:first-child > td { border-top: 0; } .recruit.carrier .table.table-bordered > tbody > tr > th { width: 17%; letter-spacing: 0.2em; } @media screen and (max-width: 599px) { /* ================================================== recruit ==================================================*/ .recruit { font-size: 14px; } .recruit.carrier .table.table-bordered > tbody > tr > th, .recruit.carrier .table.table-bordered > tbody > tr > td { display: block; width: 100%; } .recruit.carrier .table.table-bordered > tbody > tr > th { padding-bottom: 0; } .recruit.carrier .table.table-bordered > tbody > tr > td { border-top: 0; } } /* Scss Document */ /* ================================================== news ==================================================*/ .section.news h2 { font-weight: bold; } .section.news .categories > .col-1 a { display: block; text-align: center; color: #999; background: #e6e6e6; height: 40px; line-height: 40px; margin: 1px; } .section.news .categories > .col-1 a:hover { text-decoration: none; } .section.news .categories > .col-1.active a { display: block; text-align: center; color: #000; background: #8da4cc; } .section.news .categories > .col-1:first-child a { margin-left: 0; } .section.news .categories > .col-1:last-child a { margin-right: 0; } .section.news.details h2 { font-size: 15px; } .section.news.details h2.underline { padding-bottom: 15px; margin-bottom: 15px; } .section.news.details .date { text-align: right; font-weight: bold; } .section.news.details .content { clear: both; } .section.news.details .content:after { clear: both; } .section.news.details .content p { margin: 0; line-height: 1.75em; } .section.news.details .content p a { color: #00f; text-decoration: underline; } .section.news.details .content p a:hover { text-decoration: none; } .section.news.details .content p:after { clear: both; } .section.news.details .content p .aligncenter { display: block; margin-left: auto; margin-right: auto; } .section.news.details .content p .alignright { float: right; margin: 0.5em 0 0.5em 1em; } .section.news.details .content p .alignleft { float: left; margin: 0.5em 1em 0.5em 0; } .section.news.details .box { width: 300px; margin: 0 auto; padding: 0; } .section.news.details .box a { display: block; padding: 12px 0 11px 0; } @media screen and (max-width: 599px) { /* ================================================== news ==================================================*/ .section.news .categories > .col-1 a { margin: 1px 0; } .section.news.details .box { width: 100%; } } /* Scss Document */ /* ================================================== privacy ==================================================*/ .privacy h2 + p { line-height: 1.5em; } .privacy ul li { margin-left: 3em; text-indent: -1em; line-height: 2em; } .privacy ul li:before { content: '●'; } .privacy .box { font-weight: bold; font-size: 18px; } /* Scss Document */ /* ================================================== terms ==================================================*/ .terms h2 + p { line-height: 1.5em; } .terms ol li { margin-left: 3em; line-height: 2em; } .terms .box { font-weight: bold; font-size: 18px; } /*一時テキスト校正用*/ form.post-password-form{position: relative;z-index:10;color:#fff;background:#aaa;}