/*----------------------------- 太平洋総合コンサルタント株式会社 www.taicon.co.jp -- 2023-03-00 Renewal 2022-12-02 Separate for top page 2019-02-07 mobile-first -----------------------------*/ @charset "UTF-8"; /*----------------------------- In Vegas -----------------------------*/ .top-logo { display: flex; justify-content: center; align-items: center; } .top-logo { height: 100%; } .top-logo img { width: 80vw; max-width: 800px; } /* .top-logo { margin: auto; padding: 0; width: 70vw; max-width: 360px; background: url(logo1x1.png) no-repeat 50% 40% / contain; } .top-logo h1 { text-indent: -9999px; } .top-logo a { color: #fff; font-size: 64px; transition: .2s; } .top-logo a:hover { transform: scale(1.2); text-decoration: none; } */ /*----------------------------- simpleParallax -----------------------------*/ .simpleParallax { display: none; width: 100%; } /*----------*/ #pankz { display: none !important; } #top_bnr { background-color: #222; } #top_bnr .inner { margin: auto; padding: 1em; max-width: 1200px; } #top_bnr .inner { display: flex; gap: 1em; } #top_bnr .inner > * { flex: 1 0 40%; text-align: center; font-size: .8em; } #top_bnr a { transition: .2s; } #top_bnr a:after { content: '' !important; margin-left: 0 !important; } #top_bnr a:hover { opacity: .8; } #top_work { position: relative; } #top_work { background: url(../images/building-4781384_1920.jpg) no-repeat center / cover; } #top_work .inner{ width: 100%; padding: 0; max-width: 1200px; } #top_work ul { margin: 0; padding: 1em; list-style: none; } /*#top_work ul { display: flex; flex-wrap: wrap; grid-gap: 1em; }*/ #top_work ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-gap: 1em; } /*#top_work li { flex: 1 0 15%; aspect-ratio: 4/3; box-shadow: 0 0 18px rgba(0,0,0,.3); }*/ #top_work li { flex: 1 0 15%; box-shadow: 0 0 18px rgba(0,0,0,.3); } #top_work li { display: flex; justify-content: center; align-items: center; } /*#top_work a { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .5em; text-align: center; }*/ #top_work li a { display: block; width: 100%; padding: 1em 0; transition: .2s; } #top_work li a { color: #fff; background-color: #36c; text-align: center; } #top_work li:nth-child(2) a { background-color: #69c; } #top_work li:nth-child(3) a { background-color: #6ab; } #top_work li:nth-child(4) a { background-color: #6b9; } #top_work li:nth-child(5) a { background-color: #9b7; } #top_work li:nth-child(6) a { background-color: #6a6; } #top_work li a:hover { transform: scale(1.1); text-decoration: none; } #top_work li img { max-height: 48px; margin-bottom: .5em } #top_work .fa { font-size: 2em; } #top_info { background-color: #f8f8f8; } #top_info .inner { margin: auto; padding: 1em; max-width: 1000px; } #top_recruit { position: relative; } #top_recruit { background: url(../images/ph2212/ph11.jpg) no-repeat center / cover; } #top_recruit .inner {width: 100%; padding: 0; max-width: 980px; } #top_recruit .inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 1em 2em; } #top_recruit .inner { /* background-color: #eee4;*/ backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } #top_recruit .rec-img { max-height: 250px; overflow: hidden; } #top_recruit .rec-txt { padding: 1em; display: flex; flex-direction: column; justify-content: center; text-align: center; } #top_recruit h3 { margin: 0; padding: 0; background-color: transparent; } #top_recruit span { display: inline-block; } #top_link { background-color: #f8f8f8; } #top_link .inner { margin: auto; padding: 2em; max-width: 980px; } #top_link .inner { display: grid; grid-gap: 1em; } #top_link .inner >* { font-size: .9rem; } #top_link .inner > :nth-child(1) { min-height: 3em; background-color: #fff; border: thin solid #ccc; } #top_link .inner > :nth-child(2) { min-height: 3em; background-color: #fff; border: thin solid #ccc; } #top_link .inner > :nth-child(3) { text-align: center; } #top_link .inner > :nth-child(1) a { display: flex; justify-content: center; align-items: center; gap: .5em; } #top_link .inner > :nth-child(2) a { display: flex; justify-content: center; align-items: center; gap: .5em; } #top_link .inner > :nth-child(3) a { display: block; } #top_link .inner a { width: 100%; height: 100%; } #top_link .inner a:after { content: '' !important; margin-left: 0 !important; } /* #top_link .inner > * { display: flex; align-items: center; justify-content: center; flex: 1 0 40%; padding: 1em; text-align: center; font-size: 1em; } #top_link .inner > :nth-child(1) { flex: 1 0 auto; flex-wrap: wrap; } #top_link .inner > :nth-child(1) a { display: block; width: 100%; padding: 1em; background-color: #ccc; } #top_link .inner > :nth-child(2) a { padding: 0 !important; display: block; } */ #top_link2310 { padding: 1em; background-color: #f8f8f8; } #top_link2310 .inner { margin: auto; padding: 1em; max-width: 980px; background-color: #fff; box-shadow: 0 0 18px rgba(0,0,0,.1); } #top_link2310 .inner { display: grid; grid-gap: 1em; align-items: center; } #top_link2310 .inner >* { font-size: .8rem; text-align: center; } #top_link2310 .inner > :nth-child(1) { grid-area: areaA; padding: 1em; } #top_link2310 .inner > :nth-child(2) { grid-area: areaB; padding: 1em; } #top_link2310 .inner > :nth-child(3) { grid-area: areaC; } #top_link2310 .inner > :nth-child(4) { grid-area: areaD; } #top_link2310 .inner a { display: block; width: 100%; transition: .3s; } #top_link2310 .inner a:hover { opacity: .7; } #top_link2310 .inner a:after { content: '' !important; margin-left: 0 !important; } #top_link2310 .inner { grid-template-areas: "areaC areaC" "areaD areaD" "areaA areaB"; } /* for SmartPhone Landscape (横) */ @media screen and (min-width: 480px) { /* #top_work ul { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }*/ #top_work ul { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; } #top_work .fa { font-size: 3em; } #top_link .inner { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "areaA areaC" "areaB areaC"; } #top_link .inner > :nth-child(1) { grid-area: areaA; } #top_link .inner > :nth-child(2) { grid-area: areaB; } #top_link .inner > :nth-child(3) { grid-area: areaC; } #top_link2310 .inner > :nth-child(1) { padding: 0; } #top_link2310 .inner > :nth-child(2) { padding: 0; } #top_link2310 .inner { padding: 1.5em; grid-template-columns: 1fr 1fr 3fr; /* grid-template-rows: 2fr 3fr;*/ grid-template-areas: "areaA areaB areaC" "areaD areaD areaC"; } } /* for Tablet */ @media screen and (min-width: 768px) { /* and ( max-width:1024px) { */ .simpleParallax { display: block; } #top_work { max-height: 250px; overflow: hidden; } #top_work .inner { padding: 2em 1em; } #top_work .inner{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } #top_work ul { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; } /* #top_work li { aspect-ratio: 1/1; }*/ #top_work li a { padding: 1.5em 0; } #top_recruit { max-height: 400px; overflow: hidden; } #top_recruit .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #cde8; } #top_recruit .rec-img { padding: 1em; max-height: none; } #top_recruit .rec-txt { padding: 1em; } #top_recruit h3 { margin: 1em 0; font-size: 1.6em; } #top_link .inner { grid-gap: 2em; } } /* for PC @media screen and (min-width:1024px) {*/ @media screen and (min-width: 960px) { #top_bnr .inner { padding: 2em 1em; gap: 2em; } #top_work ul { grid-gap: 2em; } #top_info .inner { padding: 3em 0; } }