@charset "utf-8"; @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); /*—————————————————————— base ——————————————————————*/ html, :host { font-size: 10px; } body { margin: 0; font-size: 1rem; font-weight: 400; font-variation-settings: normal; -webkit-font-feature-settings: normal; font-feature-settings: normal; font-family: 'Noto Sans JP','Zen Kaku Gothic Antique', sans-serif,'Noto Serif JP','Zen Maru Gothic','Kiwi Maru', serif,"Source Sans 3", sans-serif; color: rgba(62,62,62,1); /* background-image: url("../img/top/23728699_s.jpg"); background-repeat: repeat; background-attachment: fixed; background-position:center center; background-size: 20% 20%; margin: auto; */ } * { margin: 0; padding: 0; } a, a:link, a:visited, a:active { text-decoration: none; color: #3E3E3E; } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ li, ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } [type="checkbox"] { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; } [type="radio"] { -webkit-appearance: radio; -moz-appearance: radio; appearance: radio; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } .body_wrapper{ overflow-x: clip; } /*—————————————————————— ———————————————————————— 全体設定 ———————————————————————— ——————————————————————*/ .display_flex,.display_flex-s,.display_flex-r{ display: flex; } .space._00{ height: 0.4rem; } .space._01{ height: 1rem; } .space._02{ height: 2rem; } .space._03{ height: 3rem; } .space._04{ height: 4rem; } .space._06{ height: 6rem; } .space._08{ height: 8rem; } .space._16{ height: 16rem; } .left-00,.left-01{ position: absolute; width: 114rem; margin: 0 auto; right: 0; left: 0; } /*—————————————————————— hタグフォント指定講習 hタグは基本そのままで使うこと hタグの前にclass名をつけない ——————————————————————*/ h1{ margin: 0 auto; } h2{ font-size: 6.6rem; } /*—————————————————————— tableの基礎設定 ——————————————————————*/ .tables_item td{ font-size: 1.8rem; font-weight: 300; padding: 1.6rem; } .tables_item._01 td,.tables_item._02 td{ border-bottom: solid #B7B7B7 1px; } /*表組の一番上に線 (複数下線をborder-bottomで指定している場合 border-topの場合はすべて逆指示+last-childに)*/ .tables_item._02 td:first-child{ border-top: solid #B7B7B7 1px; } .photo_te{ font-size: 1.6rem; font-weight: 500; } .photo_te._01{ width: 31rem; height: 4rem; text-align: center; font-size: 1.6rem; display: table-cell; vertical-align: middle; } /*—————————————————————— メインBOX指定 ——————————————————————*/ /*—————————————————————— section BOX指定 ——————————————————————*/ .element{ width: 100%; height: 100vh; position: relative; top: 0; left: 0; background-attachment: fixed; transition: opacity 0.5s ease; z-index: -21; } .element._01{ background-image: url(../img/top/back-patt.jpg); background-repeat: repeat; background-position: center center; background-size: 20%; opacity: .1; } .element._02{ position: absolute; } .element._02 video{ width: 100%; height: 100vh; object-fit: cover; } .element._02::before{ position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%); background-size: 4px 4px; background-position: 0 0, 2px 2px; overflow: hidden; } .element._03{ width: 100%; height: 100%; } /*————————————————————————————————— field,.entry,.inner,.topicBOX指定 —————————————————————————————————*/ .field,.entry,.inner,.topic{ margin: 0 auto; } .entry._00,.field._00._a,.topic._00{ margin: initial; } /*----------------------------- fieldはセンター配置指示のみ field基本幅指定のみで使用する幅等の支持は._00〜を付与し指定すること -----------------------------*/ .field._01{ height: 100%; } .field._02{ background: rgba(255, 255, 255, 1.0); } /*———————————————————————————————— position:sticky ————————————————————————————————*/ .position_sticky{ position: -webkit-sticky; position: sticky; top: 0; z-index: -1; } .central{ width: 100%; height: 100%; display: flex; justify-content: center; } /*------------------------------------------- .entry,.innerは.field._01等で指示した幅(高)に対し色・写真等の配置、paddingの指定をする -------------------------------------------*/ .entry{ position: relative; } .entry._01{ width: 100rem; } .entry._02{ width: 56rem; display: flex; flex-flow: column; justify-content: center; align-items: center; } .entry._03{ width: 68rem; display: flex; flex-flow: column; justify-content: center; align-items: center; } .inner._01{ position: absolute; background: rgba(62, 134, 200, 1); z-index: -1; width: 100vw; top: 12rem; height: 55.4rem; margin: 0 calc(0% - 60vw); border-radius: 0rem 14rem 0rem 0rem; } .inner._02{ position: absolute; background: rgba(62, 134, 200, 1); z-index: -1; left: -100%; right: -100%; top: 14%; margin: auto; height: 80rem; } .inner._02::after{ position: absolute; content: ''; background-image: url(../img/top/back-img_01.jpg); background-repeat: no-repeat; width: 100%; height: 100%; mix-blend-mode: multiply; opacity: .2; overflow: hidden; } .inner._03{ position: absolute; background: rgba(226, 70, 75, 1); z-index: -1; width: 100vw; top: 56.8rem; height: 28rem; margin: 0 calc(20% - 0vw); border-radius: 14rem 0rem 0rem 14rem; } .inner._04{ position: absolute; z-index: -1; left: -100%; right: -100%; top: 46%; height: 60rem; } .topic{ position: absolute; background: rgba(236, 236, 236, 1.0); width: 76.7rem; } .topic._01{ height: 100vh; } .topic._02{ height: 100%; } .topic._03{ position: initial; height: 100%; } .content{ height: 100vh; height: calc(var(--vh, 1vh) * 100 * 2); min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100 * 2); } /*———————————————————————————————— border設定 ※基本的にmarginは入れない ————————————————————————————————*/ .border{ height: 0.1rem; background: rgba(62, 62, 62, 1); } .border._01{ width: 2.8rem; } .border._01._a{ margin-right: 1rem; } /*——————————————————————————————————————— fadeInアクションの一例 translateの()内で縦軸・横軸の移動量を指示する(.is-showのclass付与)でJQ発動 .inBoxはjQ発動前の位置 ————————————————————————————————————————*/ .fadeIn_up{ opacity: 0; transform: translate(0, 20%); transition: 3s; } .fadeIn_up.is-show { transform: translate(0, 0); opacity: 1; } .inBox { margin-top: 2.2rem 0; } /*—————————————————————— scroll_down ——————————————————————*/ @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap'); .scroll_down{ position:absolute; width: 3.6rem; height: auto; bottom:1%; right:4rem; animation: arrowmove 2s ease-in-out infinite; } @keyframes arrowmove{ 0%{bottom:1%;} 50%{bottom:3%;} 00%{bottom:1%;} } /*—————————————————————— ナビメニュー ——————————————————————*/ .fs-logo{ width: 100%; height: auto; text-align: center; } .logo{ position: relative; top: 0rem; left: 0.4rem; } .logo img{ width: 28rem; height: auto; } .header_inner{ position: relative; width: 100%; z-index: 1; } .navArea{ position: relative; width: 100%; margin: 0 auto; align-items: center; background: rgba(255, 255, 255, 0.9); height: 6.8rem; } /*—————————————————————————————————— 詳細はこちらbutton指示 ——————————————————————————————————*/ /*—————————————————————————————————— button指示 ——————————————————————————————————*/ .positions { width: 100%; bottom: 8rem; justify-content: center; } .itemss { position: relative; display: block; /*margin: 0 auto;*/ width: 100%; height: 100%; top: 0; bottom: 0; background: rgba(226, 70, 75, 1); border: solid rgba(226, 70, 75, 1)1.6px; border-radius: 3rem; filter: drop-shadow(8px 8px 20px rgba(62, 62, 62, 0.4)); cursor: pointer; transition: 0.3s; } .itemss:hover{ filter: drop-shadow(0px 0px 10px rgba(62, 62, 62, 1)); bottom:-0.4rem; background: rgba(255,255,255,1.0); } .moji_hover { position: relative; display: flex; align-items: center; height: 100%; padding: 2rem 3rem; } .moji_hover p,.moji_hover._a p { /*display: block;*/ overflow: hidden; color: transparent; font-size: 1.8rem; letter-spacing: 1.8px; font-weight: 600; text-shadow: 0 -2em 0 rgba(255, 255, 255, 1), 0 0 0 rgba(255, 255, 255, 1); transition: 0.3s; } .jidou-arrow{ width: 3.2rem; height: 3.2rem; } /*——————————————————————————————— テキストが上下に回転するアニメーション ※ナビメニュー含む ———————————————————————————————*/ .itemss:hover .moji_hover p,.itemss:hover .moji_hover._a p{ text-shadow: 0 0 0 rgba(226, 70, 75, 1), 0 2em 0 rgba(226, 70, 75, 1); /* 2つの影の位置を上方向に1.5emずつずらす */ } /*——————————————————————————————— モーダルウィンドウ設定 ———————————————————————————————*/ .openModal { text-align: center; } .openModal p, .modal_moji { /*font-size: 1.3rem;*/ transition: all 0.3s ease; } /*---------- 詳細を見る右横の+ ------------*/ .modalArea_01{ position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; } .modal_Bg { width: 100%; height: 100%; background-color: rgba(30,30,30,0.9); } .modal_Wrapper{ position: absolute; inset: 0; margin: auto; /*modal表示時の幅設定*/ width: 44.4rem; /*max-width: 76rem;*/ height: 80%; padding: 6rem 2rem 2rem 2rem; background-color: #fff; } .widths{ width: 100%; height: 66%; } .modal-plus { display: inline-block; vertical-align: middle; width: 1rem; height: 0.1em; background: currentColor; border-radius: 0.1em; position: relative; margin-bottom: 5px; margin-left: 5px; } .modal-plus::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; border-radius: inherit; transform: rotate(-90deg); transition: all 0.3s ease; } .openModal._a:hover p { opacity: 0.5; } .openModal._a:hover .modal-plus::before { transform: rotate(0deg); } /*-———————————————————————————————————————————— articleエリア設定 ————————————————————————————————————————————*/ .modal_ti._b { font-size: 2rem; padding: 2rem 0; } .modal_moji { line-height: 2.2rem; } .closeModal { position: absolute; top: 2rem; right: 2rem; cursor: pointer; } .closeModal p { font-size: 1.4rem; padding-top: 0.5rem; padding-right: 3rem; } .modalCloss01, .modalCloss02 { display: inline-block; position: absolute; top: 1.4rem; right: 0; width: 2.8rem; height: 1px; background-color: #3e3e3e; } .modalCloss01 { transform: rotate(30deg); } .modalCloss02 { transform: rotate(-30deg); } .movies { width: 100%; height: 100%; overflow: hidden; } .movies iframe{ width: 100%; height: 100%; } /*——————————————————矢印が左右に回転する———————————————————*/ .icon_arrow { position: absolute; right: 3rem; /*bottom: -1.6rem;*/ width: 3rem; height: 3rem; background-image: url(../img/top/icon_arrow_a.png); background-repeat: repeat-x; background-size: 30px 30px; transition: 0.3s cubic-bezier(0.33, 1, 0.68, 1) 0s; } .moji_hover:hover .icon_arrow { background-position-x: 3rem; background-image: url(../img/top/icon_arrow_b.png); } /*——————————————ここまで—————————————*/ /*——————————————————————————— 画面いっぱいfirst-view 設定の一例 ———————————————————————————*/ #first-wrap { position: relative; top: 0; width: 100%; height: 100vh; } #first-view_bg { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background-image: url(../img/top/first-view.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; transition: opacity 0.5s ease; z-index: -1; } /*—————————————————————— メインタイトル ——————————————————————*/ .top_pic{ position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; } .h1_title{ width: auto; height: 100%; animation: fluffy 2s infinite; } .h1_title img{ width: auto; height: 100%; padding: 12rem 0 8rem 0; } @keyframes fluffy { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } /*—————————————————————— ページ共通エリア ——————————————————————*/ .title-fonts{ font-family: "Source Sans 3", sans-serif; font-weight: 800; line-height: 6.4rem; letter-spacing: 1px; } .title-fonts p{ font-size: 2rem; letter-spacing: .3px; line-height: 3.2rem; margin-top: 1rem; } .title-fonts._01{ width: 100%; text-align: center; position: absolute; font-size: 4.6rem; color: rgba(190, 190, 190, 1.0); top: -6rem; } .title-fonts._02{ font-size: 6.6rem; color: rgba(190, 190, 190, 1.0); text-align: center; } .title-fonts._02 p{ color: rgba(92, 92, 92 ,1); } .title-fonts._03{ color: rgba(255, 255, 255, 1.0); } .moji_box{ font-size: 1.6rem; letter-spacing: .3px; line-height: 4.4rem; } .moji_box._01{ font-weight: 600; color: rgba(255, 255, 255, 1.0); width: 37rem; } .moji_box._02{ font-weight: 600; color: rgba(46, 46, 46, 1.0); /*width: 52.7rem;*/ } .moji_box._03{ color: rgba(255, 255, 255, 1.0); } .moji_box._04{ text-align: center; } .moji_box._05{ color: rgba(255, 255, 255, 1.0); line-height: 3.2rem; } .moji_box._06{ font-size: 2.2rem; font-weight: 600; color: rgba(32, 123, 194, 1); } .moji_box._07{ align-items: center; line-height: 2.4rem; } .moji_box._08{ font-size: 1.8rem; font-weight: 600; line-height: 3.6rem; text-align: center; } .moji_box._09{ text-align: center; line-height: 3.0rem; } .item_flex{ width: 100%; justify-content: space-between; } .item_flex._a{ margin-top: 6rem; } /*———————————ここまで———————————*/ /*—————————————————————— 画像BOX設定 ——————————————————————*/ .pic{ height: auto; filter: drop-shadow(4px 4px 4px rgba(62,62,62,0.2)); } .pic._01{ width: 55rem; height: auto; margin-top: 10rem; } .pic._03{ position: absolute; top: 0; transition: .3s; z-index: -1; } .pic._01 img{ width: 100%; height: auto; object-fit: cover; } .pic._02 img{ width: 64rem; height: auto; } .pic._03 img{ width: 26rem; height: auto; } .pic._04 img{ width: 48.8rem; height: auto; } .pic._05 img{ width: 30rem; height: auto; } /*—————————————————————— トップ項目エリア ——————————————————————*/ /*—————————————————————— TRANSPORTエリア ——————————————————————*/ .tohoku-jido-info{ position: relative; text-align: center; width: 64rem; } /*—————————————————————— ENVIRONMENTエリア ——————————————————————*/ .title-setup{ flex-flow: column; justify-content: center; } .works{ margin: 0 auto; width: 50.4rem; justify-content: space-between; flex-wrap: wrap; gap: 4rem; } .works_etc{ position: relative; width: 22.4rem; height: 33.2rem; background: rgba(255, 255, 255, 1.0); filter: drop-shadow(4px 4px 4px rgba(62,62,62,0.2)); top: 0; } .waku{ padding: 1.6rem; } .titless{ text-align: center; font-size: 1.4rem; line-height: 2.2rem; font-weight: 600; } .comments{ font-size: 1.2rem; line-height: 2.2rem; letter-spacing: .6px; } /*—————————————————————— SUPPORTエリア(Youtube) ——————————————————————*/ .item_flex._b{ display: flex; justify-content: center; gap: 2rem; } .youtube-box{ position: relative; width: calc((100% - 3rem) / 2); height: 36rem; overflow: hidden; cursor: pointer; transition: .3s; } .youtube-box:hover .pic._03{ transform: scale(1.2); } .youtube-title{ position: absolute; width: 100%; height: 100%; top: 0; } .youtube-title-a,.youtube-title-b{ font-size: 1.5rem; font-weight: 500; line-height: 2.6rem; text-align: center; padding: 0.6rem; color: rgba(255, 255, 255, 1); } .youtube-title-a{ background: rgba(32, 123, 194, 1); } .youtube-title-b{ background: rgba(62, 62, 62, 1); } .tube-a{ position: absolute; display: flex; justify-content: center; align-items: center; top: 3rem; bottom: 0; width: 100%; height: 100%; } .youtube_rogo{ width: 100%; height: 100%; text-align: center; display: block; transition: .3s; } .youtube_rogo img{ width: 15.6rem; height: auto; } .youtube_rogo:hover{ opacity: .6; } /*—————————————————————— EMPLOYEE BENEFITSエリア ——————————————————————*/ .red-circle-base{ position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .red-circle{ width: 28rem; height: 28rem; border-radius: 50%; background: rgba(226, 70, 75, 1); } .benefits-icon-box{ width: 100%; height: 100%; display: flex; justify-content: flex-start; gap: 4rem; align-items: center; margin-left: 7rem; } .benefits-icon img{ width: 12rem; height: auto; } /*—————————————————————— EMPLOYEE BENEFITSエリア ——————————————————————*/ .shift-area{ margin: 0 auto; width: 64rem; display: flex; justify-content: space-between; } .pic._05 p{ font-size: 1.6rem; line-height: 2.6rem; font-weight: 600; text-align: center; padding: 1rem 0; } .background_02{ width: 200rem; margin: auto; height: auto; overflow: hidden; } .background_02 img{ width: 220rem; height: auto; } /*—————————————————————— VOICEエリア ——————————————————————*/ .voice-area{ justify-content: space-between; flex-wrap: wrap; gap: 2rem; } .works_etc._a{ width: calc((100% - 6rem) / 4); height: 37.8rem; } /*—————————————————————— エントリーエリア ——————————————————————*/ .foot-back-ime{ /*position: relative;*/ width: 100%; height: 41rem; opacity: .2; } /* .foot-back-ime::after{ position: absolute; content: ''; background: rgba(47,37,34,0.8); top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } */ .foot-back-ime img{ width: 100rem; height: auto; } .under-banner{ position: relative; width: 100%; height: auto; } .buttonss{ position: absolute; width: 100vw; height: 100%; align-items: center; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); z-index: 1; } .under-button{ position: relative; transition: .3s; } .under-button._left{ position: absolute; width: 50%; height: 22rem; left: 0%; background: rgba(226, 70, 75, 1); } .under-button._right { position: absolute; width: 50%; height: 22rem; left: 50%; background: rgba(32, 123, 194, 1); } .button-moji{ position: absolute; width: 50rem; height: 100%; align-items: center; padding: 4rem; color: rgba(255, 255, 255, 1); } .button-moji._a{ right: 0 } .button-moji p{ overflow: hidden; color: transparent; font-size: 2.0rem; font-weight: 600; letter-spacing: .2rem; line-height: 3rem; text-shadow: 0 -3.5em 0 rgba(255, 255, 255, 1), 0 0 0 rgba(255, 255, 255, 1); transition: text-shadow 0.3s; } .button-moji._a p{ text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 1), 0 0 0 rgba(255, 255, 255, 1); } .circle-o{ position: relative; left: 2rem; width: 4.6rem; height: 4.6rem; border-radius: 2.3rem; background: rgba(255, 255, 255, 1); } .icon_arrow2{ position: absolute; right: 0.7rem; -webkit-bottom: 1.7rem !important; bottom: 1.5rem; width: 3rem; height: 3rem; background-repeat: repeat-x; background-size: 30px; transition: 0.3s cubic-bezier(0.33, 1, 0.68, 1) 0s; } .icon_arrow2._r{ background-image: url(../img/top/icon_arrow_red.png); } .icon_arrow2._b{ background-image: url(../img/top/icon_arrow_blue.png); } .under-button._left:hover{ background: rgba(169, 52, 56, 1); } .under-button._right:hover{ background: rgba(16, 82, 132, 1); } .under-button._left:hover .button-moji p{ text-shadow: 0 0 0 rgba(255, 255, 255, 1), 0 1.5em 0 rgba(255, 255, 255, 1); } .under-button._right:hover .button-moji p{ text-shadow: 0 0 0 rgba(255, 255, 255, 1), 0 3.5em 0 rgba(255, 255, 255, 1); } .under-button._left:hover .icon_arrow2 { background-position-x: 3rem; background-image: url(../img/top/icon_arrow_red2.png); } .under-button._right:hover .icon_arrow2 { background-position-x: 3rem; background-image: url(../img/top/icon_arrow_blue2.png); } /*—————————————————————————————————— ———————————————————————————————————— footerベーシック ———————————————————————————————————— ——————————————————————————————————*/ .f_field{ margin: 0 auto; flex-flow: column; justify-content: center; align-items: center; padding: 4rem; background: rgba(255, 255, 255, 1); } .f-logo img{ width: 40rem; height: auto; } .f_tel{ font-size: 3.2rem; font-weight: 700; } .tel-icon img{ width: 2.9rem; height: auto; } .copyright{ font-size: 1.4rem; } /*—————————————————————————————————— page_topアイコン指示 ——————————————————————————————————*/ /*—————————————————————————————————— page_topアイコン指示 ——————————————————————————————————*/ .arrow-up{ position: absolute; width: 100%; height: 100%; font-size: 1.2rem; font-family: 'Zen Kaku Gothic Antique', sans-serif; font-weight: 700; line-height: 1.3rem; color: rgba(110, 110, 110,1); text-align: center; display: flex; justify-content: center; align-items: center; z-index: 1; } .page_top { width: 8rem; height: auto; bottom: 0; position: fixed; right: 2rem; z-index: 2; opacity: 1; cursor: pointer; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1)); transform: translateY(100px); } .page_top img{ width: 100%; height: auto; } .page_top.active { animation: UpAni 1s forwards; } @keyframes UpAni { from { bottom: 14rem; } to { bottom: 24rem; } } .page_top { animation: DownAni 0.5s forwards; } @keyframes DownAni { from { bottom: 24rem; } to { bottom: 14rem; } } /*-----------jQのclass付与指示------------*/ .change{ color: #fff; background: #fff;; } .page_top.change{ background: none; } .page_top.pc-only.change span::before, .page_top.pc-only.change span::after { background: #fff; } /*—————————————————————————————————— ———————————————————————————————————— display:none ———————————————————————————————————— ——————————————————————————————————*/ .sp-only_01,.sp-only_02{ display: none; }