@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: 2.5rem; } .space._06 { height: 6rem; } .space._08 { height: 4.5rem; } .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: 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: 0.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); } /*———————————————————————————————— 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: 62rem; 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: 44.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: 0.2; overflow: hidden; } .inner._03 { position: absolute; background: rgba(226, 70, 75, 1); z-index: -1; width: 100vw; top: 50rem; 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; } .inner._05{ width: 100vw; height: auto; padding: 2rem 0; margin: 0 calc(-10% - -5.2vw); background: rgba(226, 70, 75, 1); } .topic { position: absolute; background: rgba(236, 236, 236, 1); 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); } .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: 1.8rem; letter-spacing: 0.3px; line-height: 3.2rem; } .title-fonts._01 { width: 100%; text-align: center; position: absolute; font-size: 4.6rem; color: rgba(190, 190, 190, 1); top: -6rem; } .title-fonts._02 { font-size: 6.6rem; color: rgba(190, 190, 190, 1); text-align: center; } .title-fonts._02 p { color: rgba(92, 92, 92, 1); } .title-fonts._03 { color: rgba(255, 255, 255, 1); } .moji_box { font-size: 1.6rem; letter-spacing: 0.3px; line-height: 3.4rem; } .moji_box._01 { font-weight: 600; color: rgba(255, 255, 255, 1); width: 38rem; } .moji_box._02 { font-weight: 600; color: rgba(46, 46, 46, 1); /*width: 52.7rem;*/ } .moji_box._03 { color: rgba(255, 255, 255, 1); } .moji_box._04 { text-align: center; } .moji_box._05 { color: rgba(255, 255, 255, 1); line-height: 3.2rem; padding: 0 15px 0 0; } .moji_box._05 span{ font-size: 2rem; font-weight: 700; } .moji_box._06 { font-size: 2.2rem; font-weight: 600; color: rgba(32, 123, 194, 1); margin: 0 0 10px; } .moji_box._07 { align-items: center; line-height: 2.4rem; margin: 0 0 5px; } .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: 3rem; } .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: 5rem; } .pic._03 { position: absolute; top: 0; transition: 0.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: 30rem; 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: left; 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: 3rem; } .works_etc { position: relative; width: 23.6rem; height: 33.5rem; background: rgba(255, 255, 255, 1); 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.5rem; line-height: 2.2rem; font-weight: 600; } .comments { font-size: 1.3rem; line-height: 2.2rem; } /*—————————————————————— 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: 0.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 { position: absolute; width: 100%; bottom: 0; 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: 0.3s; } .youtube_rogo img { width: 15.6rem; height: auto; } .youtube_rogo:hover { opacity: 0.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: auto; } .voice-area .waku { padding-top: 0; } /*—————————————————————— エントリーエリア ——————————————————————*/ .foot-back-ime { /*position: relative;*/ width: 100%; height: 41rem; opacity: 0.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: 0.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: 2rem; font-weight: 600; letter-spacing: 0.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, .max-width { display: none; }