/* ==========================================================================
Foundation
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* デモ確認用にbodyの高さを出してスクロールできるようにしています */
/* 実際のプロジェクトではbodyへの指定は不要です。
*/
body {
margin: 0;
padding: 0;
height: 200vh;
font-family: “Hiragino Kaku Gothic ProN”, “Noto Sans JP”, Meiryo, sans-serif;
}
/* ==========================================================================
Layout & Project (FLOCSS + BEM)
========================================================================== */
.l-header {
/* Positioning */
position: fixed;
top: 0;
left: 0;
z-index: 100;
/* Box Model */
width: 100%;
/* Visual */
background: linear-gradient(to bottom, oklch(0% 0 0 / 0.7) 0%, oklch(0% 0 0 / 0) 100%);
/* Misc */
container-type: inline-size;
container-name: header;
transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}
/* スクロール時の状態クラス */
.l-header.is-scrolled {
/* Visual */
background: oklch(15% 0 0 / 0.6);
/* 相対色構文を使用した半透明ブラック */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
/* Misc */
@supports (backdrop-filter: blur(10px)) {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
.l-header__inner {
/* Box Model */
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1280px;
height: 100px;
margin: 0 auto;
padding: 0 4%;
/* Misc */
transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.l-header.is-scrolled .l-header__inner {
height: 60px;
}
/* Logo */
.l-header__logo {
/* Box Model */
display: flex;
align-items: center;
margin: 0;
}
.l-header__logo-img {
/* Box Model */
width: auto;
height: 50px;
/* Misc */
transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.l-header.is-scrolled .l-header__logo-img {
height: 34px;
}
/* ==========================================================================
Container Query (PC / Tablet & SP)
========================================================================== */
/* PC向け (992px以上) */
@container header (min-width: 992px) {
.l-header__hamburger {
display: none;
}
.l-header__nav {
display: block;
}
.l-header__list {
display: flex;
align-items: center;
/* remをpxベースのclampに変換 */
gap: clamp(16px, 1.25vw + 8px, 40px);
margin: 0;
padding: 0;
list-style: none;
}
.l-header__link {
/* Positioning */
position: relative;
/* Box Model */
/* remをpxに変換 */
display: block;
padding: 8px 0;
/* Typography */
/* remをpxベースのclampに変換 */
font-size: clamp(13px, 0.31vw + 12px, 15px);
font-weight: 700;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
/* Misc */
transition: color 0.3s ease, transform 0.3s ease;
}
/* Micro Interactions: ホバーアニメーション */
.l-header__link::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
content: ”;
}
.l-header__link:hover {
transform: translateY(-2px);
}
.l-header__link:hover::after {
transform: scaleX(1);
transform-origin: left;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.l-header__link–icon {
display: flex;
align-items: center;
justify-content: center;
}
.l-header__link–icon svg {
width: 24px;
height: 24px;
fill: #fff;
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
transition: transform 0.3s ease;
}
.l-header__link–icon:hover::after {
display: none;
/* アイコンには下線を出さない */
}
.l-header__link–icon:hover svg {
transform: scale(1.15) rotate(-5deg);
}
}
/* タブレット・スマホ向け (991px以下) */
@container header (max-width: 991px) {
.l-header__hamburger {
/* Positioning */
position: relative;
z-index: 110;
/* Box Model */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
width: 44px;
height: 44px;
padding: 0;
/* Visual */
background: transparent;
border: none;
/* Misc */
cursor: pointer;
}
.l-header__hamburger-line {
display: block;
width: 24px;
height: 2px;
background-color: #fff;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* ハンバーガーメニューがアクティブな時（バツ印に変形） */
.l-header__hamburger.is-active .l-header__hamburger-line:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.l-header__hamburger.is-active .l-header__hamburger-line:nth-child(2) {
opacity: 0;
}
.l-header__hamburger.is-active .l-header__hamburger-line:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.l-header__nav {
/* Positioning */
position: fixed;
top: 0;
left: 0;
z-index: 105;
/* Box Model */
width: 100%;
height: 100dvh;
/* Visual */
background: oklch(0% 0 0 / 0.85);
/* ダークな背景 */
opacity: 0;
visibility: hidden;
/* Misc */
@supports (backdrop-filter: blur(15px)) {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
transition: opacity 0.4s ease,
visibility 0.4s ease;
}
.l-header__nav.is-active {
opacity: 1;
visibility: visible;
}
.l-header__list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
/* remをpxに変換 */
gap: 32px;
transform: translateY(20px);
transition: transform 0.4s ease;
}
.l-header__nav.is-active .l-header__list {
transform: translateY(0);
}
.l-header__link {
/* remをpxベースのclampに変換 */
font-size: clamp(16px, 5vw, 18px);
font-weight: 700;
color: #fff;
text-decoration: none;
letter-spacing: 0.05em;
}
.l-header__link–icon svg {
width: 32px;
height: 32px;
fill: #fff;
}
}
/**
* DOM構築完了後に実行します。
*/
document.addEventListener(‘DOMContentLoaded’, () => {
const header = document.getElementById(‘js-header’);
const hamburger = document.getElementById(‘js-hamburger’);
const nav = document.getElementById(‘js-nav’);
// スクロール検知によるヘッダーのクラス切り替え
window.addEventListener(‘scroll’, () => {
// 50px以上スクロールされたらクラスを付与します。
if (window.scrollY > 50) {
header.classList.add(‘is-scrolled’);
} else {
header.classList.remove(‘is-scrolled’);
}
}, { passive: true }); // スクロールパフォーマンス向上のためpassiveオプションを指定
// ハンバーガーメニューの開閉処理
if (hamburger && nav) {
hamburger.addEventListener(‘click’, () => {
const isExpanded = hamburger.getAttribute(‘aria-expanded’) === ‘true’;
hamburger.classList.toggle(‘is-active’);
nav.classList.toggle(‘is-active’);
// アクセシビリティのための属性更新を行います。
hamburger.setAttribute(‘aria-expanded’, !isExpanded);
nav.setAttribute(‘aria-hidden’, isExpanded);
// メニューが開いているときは背景のスクロールを固定します。
if (!isExpanded) {
document.body.style.overflow = ‘hidden’;
} else {
document.body.style.overflow = ”;
}
});
}
});
フィールドは広い。だからこそ思い切り羽ばたける。さあ、一緒にチャレンジを始めよう！株式会社タカサワマテリアル
/* Positioning, Box Model, Typography, Visual, Misc の順で記述しています */
.p-hero {
position: relative;
width: 100%;
height: clamp(600px, 100vh, 1080px);
overflow: hidden;
}
.p-hero__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.p-hero__bg-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-hero__content {
position: absolute;
/* PC時に文字位置を上に移動させるため 50% → 40% に調整 */
top: 30%;
left: clamp(20px, 10vw, 15vw);
transform: translateY(-50%);
width: clamp(320px, 45vw, 600px);
z-index: 10;
}
.p-hero__copy {
margin: 0;
}
.p-hero__copy-img {
width: 100%;
height: auto;
vertical-align: bottom;
}
/* スクロールアニメーションのスタイル */
.p-hero__scroll {
position: absolute;
bottom: clamp(30px, 5vw, 50px);
/* コピー画像と左端が揃うように配置 */
left: clamp(20px, 10vw, 15vw);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
}
.p-hero__scroll-text {
color: #ffffff;
font-size: clamp(10px, 1vw, 12px);
font-weight: 700;
letter-spacing: 0.1em;
}
.p-hero__scroll-arrow {
position: relative;
width: 1px;
height: clamp(60px, 8vw, 100px);
margin-top: 10px;
}
.p-hero__scroll-line-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.3);
}
.p-hero__scroll-line-active {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
transform-origin: top;
/* スクロール線のアニメーション */
animation: scrollLine 2s ease-in-out infinite;
}
.p-hero__scroll-diagonal {
position: absolute;
bottom: -1px;
left: 0;
width: 1px;
height: clamp(15px, 2vw, 20px);
background-color: #ffffff;
/* 斜め上に跳ね上がる線を表現 */
transform: rotate(-45deg);
transform-origin: bottom left;
}
@keyframes scrollLine {
0% {
transform: scaleY(0);
transform-origin: top;
}
50% {
transform: scaleY(1);
transform-origin: top;
}
50.1% {
transform: scaleY(1);
transform-origin: bottom;
}
100% {
transform: scaleY(0);
transform-origin: bottom;
}
}
/* 画面から視覚的に隠すためのユーティリティクラス */
.u-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* スマホ表示時の上書き設定 (767px以下) */
@media (max-width: 767px) {
.p-hero {
height: clamp(500px, 100svh, 850px);
}
.p-hero__content {
/* 中央配置の設定 */
top: 45%;
left: 55%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
.p-hero__copy-img {
width: 40%;
margin: 30% auto 0 5%;
}
.p-hero__scroll {
/* スマホ時は左下に配置 */
left: clamp(15px, 4vw, 24px);
}
}
新着情報
-
株式会社タカサワマテリアルサイト へようこそ。これは最初の投稿です。編集または削除してコ…
-
2027年3月卒業予定の新卒者の方に向け、会社説明会を実施しております。詳細は「マイナビ…
手がけた仕事が街をつくるオモシロサ。
資材を適正に、確実に回すミッション。
それは静かだけれど、街を動かすロングエンジン。
道路も建物も、暮らしもその一点からスタートライン。
このフィールドで挑める仕事――
どう考えても オモシロイ。
/* Positioning, Box Model, Typography, Visual, Misc の順で記述しています */
.p-work {
position: relative;
max-width: initial;
margin-inline: calc((50vw – 50%) * -1) !important;
clip-path: inset(0);
}
.p-work__bg-img {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
z-index: -1;
}
.p-work__inner {
position: relative;
z-index: 1;
padding-top: clamp(60px, 8vw, 120px);
padding-bottom: clamp(120px, 16vw, 240px);
}
/* メッセージボックス */
.p-work__message {
width: clamp(320px, 60vw, 800px);
margin-left: auto;
margin-bottom: clamp(60px, 8vw, 120px);
padding: clamp(40px, 5vw, 80px) clamp(20px, 4vw, 60px);
color: #1a1a1a;
background-color: #ffffff;
border-radius: clamp(20px, 3vw, 40px) 0 0 clamp(20px, 3vw, 40px);
}
.p-work__message-title {
margin-bottom: clamp(30px, 4vw, 50px);
font-size: clamp(24px, 2.2vw, 32px);
font-weight: 700;
letter-spacing: 0.05em;
}
.p-work__message-text {
margin-bottom: clamp(30px, 4vw, 50px);
font-size: clamp(16px, 1.2vw, 18px);
font-weight: 500;
line-height: 2.2;
}
.p-work__message-catch {
font-size: clamp(18px, 1.8vw, 24px);
font-weight: 700;
}
.p-work__message-highlight {
color: #eb5c36;
font-size: clamp(28px, 3vw, 40px);
}
/* 手前のバナー画像 */
.p-work__banner {
position: relative;
display: block;
width: 100%;
max-height: 720px;
overflow: hidden;
text-decoration: none;
}
/* トリガーとなる親バナー自体のフェードインは打ち消す */
.p-work__banner–trigger {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* 水色のマスク */
.p-work__banner::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(123, 174, 226, 0.4);
content: “”;
z-index: 1;
pointer-events: none;
transition: background-color 0.6s ease;
}
/* — 追加・修正：バナー内アニメーションの初期状態 — */
.p-work__banner-heading-anim,
.p-work__banner-text-anim,
.p-work__banner-img-anim,
.p-work__banner-btn-anim {
opacity: 0;
/* 末尾に 0.3s を追加して、親が発火してから少し待ってアニメーションを開始させます */
transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1) 0.3s, transform 1s cubic-bezier(0.25, 1, 0.5, 1) 0.3s;
}
/* 見出しは上から */
.p-work__banner-heading-anim {
transform: translateY(-40px);
}
/* 画像、テキスト、ボタンは下から */
.p-work__banner-text-anim,
.p-work__banner-img-anim,
.p-work__banner-btn-anim {
transform: translateY(40px);
}
/* 親に .is-visible が付いたら発火 */
.p-work__banner.is-visible .p-work__banner-heading-anim,
.p-work__banner.is-visible .p-work__banner-text-anim,
.p-work__banner.is-visible .p-work__banner-img-anim,
.p-work__banner.is-visible .p-work__banner-btn-anim {
opacity: 1;
transform: translateY(0);
}
/* ——————————————- */
.p-work__banner-img {
width: 100%;
object-fit: cover;
vertical-align: bottom;
}
.p-work__banner-content {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(20px, 3vw, 40px);
width: 100%;
z-index: 2;
}
.p-work__banner-text {
color: #ffffff;
font-size: clamp(18px, 1.4vw, 20px);
font-weight: 700;
text-align: center;
letter-spacing: 0.1em;
line-height: 1.8;
}
.p-work__banner-btn {
display: flex;
align-items: center;
justify-content: center;
width: clamp(60px, 7vw, 80px);
height: clamp(60px, 7vw, 80px);
background-color: #ffffff;
border-radius: 50%;
transition: transform 0.3s ease;
}
.p-work__banner-btn svg {
transition: transform 0.3s ease;
}
/* ホバー時のマイクロインタラクション */
@media (hover: hover) {
.p-work__banner:hover .p-work__banner-img {
transform: scale(1.05);
}
.p-work__banner:hover .p-work__banner-btn {
transform: scale(1.1);
}
.p-work__banner:hover .p-work__banner-btn svg {
transform: translateX(5px);
}
}
/* 共通見出しの白文字バリエーション */
.p-vertical-heading–white {
color: #ffffff;
}
.p-vertical-heading–white::before {
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
}
/* スマホ表示時の上書き設定 (767px以下) */
@media (max-width: 767px) {
.p-work__message {
width: 95%;
margin-left: auto;
margin-right: 0;
border-radius: 20px 0 0 20px;
}
.p-work__banner-img {
height: clamp(450px, 75svh, 600px);
}
.p-work__banner-content {
/* コンテンツを上下中央に配置するため高さを100%に */
height: 100%;
justify-content: space-between;
padding-bottom: 32px;
}
/* スマホでもこのセクションだけは縦書きを維持する */
.p-work__banner .p-vertical-heading {
writing-mode: vertical-rl;
text-orientation: upright;
padding-top: clamp(60px, 15vw, 80px);
padding-left: 0;
display: inline-flex;
}
/* スマホ時の上から伸びる線の調整 */
.p-work__banner .p-vertical-heading::before {
left: 50%;
top: 0;
transform: translateX(-50%);
width: 1px;
height: clamp(40px, 12vw, 60px);
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
}
}
わたしたちの仕事は各種資材を扱う商社でありながら、街のインフラづくりを支える”未来につなぐ役目”を担っています。
現場の声を聞き、必要な資材を選び、最適な計画を描く――
それは、ただの調達ではなく、街の動脈をつくる『未来図』を描く仕事です。
// DOMの読み込みが完了してから発火させる
window.addEventListener(‘DOMContentLoaded’, function() {
new ScrollHint(‘.js-scrollable’, {
i18n: {
scrollable: ‘スクロールできます’
}
});
});
/* Positioning, Box Model, Typography, Visual, Misc の順で記述しています */
.p-employees {
position: relative;
width: 100%;
padding-bottom: clamp(80px, 10vw, 160px);
background-color: #ffffff;
}
.p-employees__inner {
display: flex;
gap: clamp(40px, 6vw, 80px);
width: 100%;
max-width: 1350px;
margin: 0 auto;
padding-right: clamp(20px, 4vw, 40px);
padding-left: clamp(20px, 4vw, 40px);
}
.p-employees__sidebar {
flex-shrink: 0;
}
.p-employees__content {
flex-grow: 1;
/* ★超重要：Flexbox内で子要素のはみ出しを許可し、親が伸びるのを防ぐ */
min-width: 0;
padding-top: clamp(24px, 6vw, 96px);
}
/* リード文 */
.p-employees__lead {
margin-bottom: clamp(40px, 6vw, 80px);
color: #000000;
font-family: “Shippori Mincho”, serif;
font-size: clamp(15px, 2vw, 20px);
line-height: 2.2;
}
/* カードリスト（Gridで3列） */
.p-employees__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 40px);
}
/* 社員カード */
.p-employees__card {
display: flex;
flex-direction: column;
gap: clamp(15px, 2vw, 24px);
color: #000000;
text-decoration: none;
}
/* 画像エリア */
.p-employees__img-box {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
overflow: hidden;
}
.p-employees__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 下部の黒グラデーション */
.p-employees__img-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}
.p-employees__catch {
position: absolute;
bottom: clamp(15px, 2vw, 24px);
left: clamp(15px, 2vw, 24px);
right: clamp(15px, 2vw, 24px);
margin: 0;
color: #ffffff;
font-size: clamp(14px, 1.1vw, 16px);
font-weight: 700;
line-height: 1.6;
}
/* カード下部の情報エリア */
.p-employees__info {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
}
.p-employees__meta {
display: flex;
flex-direction: column;
gap: 6px;
}
.p-employees__year {
font-size: clamp(10px, 0.9vw, 12px);
font-weight: 700;
}
.p-employees__dept {
font-size: clamp(12px, 1vw, 14px);
font-weight: 700;
line-height: 1.4;
}
/* インタビューリンク */
.p-employees__interview {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 8px;
}
/* 斜めの青い線 */
.p-employees__interview-line {
display: block;
width: 1px;
height: clamp(20px, 2vw, 24px);
background-color: #00a0e9;
transform: rotate(30deg);
}
.p-employees__interview-text {
font-size: clamp(12px, 1vw, 14px);
font-weight: 700;
transition: color 0.3s ease;
}
/* ホバーアクション */
@media (hover: hover) {
.p-employees__card:hover .p-employees__img {
transform: scale(1.05);
}
.p-employees__card:hover .p-employees__interview-text {
color: #00a0e9;
}
}
/* スマホ表示時の上書き設定 (767px以下) */
@media (max-width: 767px) {
.p-employees__inner {
flex-direction: column;
gap: clamp(30px, 8vw, 50px);
/* スクロールを画面右端まで貫通させる */
padding-right: 0;
}
/* 見出しとリード文は右余白を維持 */
.p-employees__sidebar,
.p-employees__lead {
padding-right: clamp(20px, 4vw, 40px);
}
.p-employees__lead {
margin-bottom: clamp(30px, 8vw, 50px);
}
.p-employees__list {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 15px;
/* Scroll Hintアイコン用の余白確保 */
padding-bottom: 30px;
padding-right: clamp(20px, 4vw, 40px);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.p-employees__list::-webkit-scrollbar {
display: none;
}
.p-employees__card {
/* ★％だとバグりやすいのでvw（画面幅の80%）で固定 */
width: 80vw;
flex-shrink: 0;
}
.p-employees__img-box {
aspect-ratio: 4 / 5;
}
}
創業から140年以上。地元に根づき、県内で幅広く事業を展開する高沢グループの一員として、
私たちは地域のインフラの源を生み出す大きなビジネスフィールドを担っています。
扱うのは”街を動かす材料”。
支えるのは、建設現場と地域産業の基盤。その仕事は、単なる資材の手配ではありません。
“現場を支えるプロ”として、”最適な提案を行うビジネスコンサルタント”として、そして”商人（あきんど）とし
ての感性”を持ちながら、自らの成長とともに大きなチャンスに挑める環境があります。
地域の未来を支えながら、自分自身も成長できる――。
そんな働き方ができる会社です。
/* Positioning, Box Model, Typography, Visual, Misc の順で記述しています */
.p-company {
position: relative;
width: 100%;
padding-bottom: clamp(104px, 10vw, 200px);
/* 背景画像があるためベースカラーは透明に */
background-color: transparent;
overflow: hidden;
}
/* 背景画像エリア */
.p-company__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.p-company__bg-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-company__inner {
display: flex;
gap: clamp(40px, 6vw, 80px);
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-right: clamp(20px, 4vw, 40px);
padding-left: clamp(20px, 4vw, 40px);
}
.p-company__sidebar {
flex-shrink: 0;
}
.p-company__content {
flex-grow: 1;
padding-top: clamp(24px, 6vw, 96px)
}
/* リード文 */
.p-company__lead {
margin-bottom: clamp(40px, 6vw, 80px);
color: #000000;
font-family: “Shippori Mincho”, serif;
font-size: clamp(15px, 2vw, 20px);
line-height: 2.2;
}
/* パネルリスト */
.p-company__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 40px);
}
/* パネルカード */
.p-company__card {
display: block;
text-decoration: none;
}
.p-company__img-box {
position: relative;
width: 100%;
/* 正方形に近い比率で設定 */
aspect-ratio: 1 / 1;
overflow: hidden;
}
.p-company__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 白文字を読みやすくするための黒いフィルター */
.p-company__img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
transition: background-color 0.4s ease;
pointer-events: none;
}
/* 中央のテキスト */
.p-company__title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
margin: 0;
color: #ffffff;
font-size: clamp(18px, 1.2vw, 20px);
font-weight: 700;
text-align: center;
letter-spacing: 0.05em;
line-height: 1.5;
/* 文字に軽いドロップシャドウをつけて視認性をアップ */
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
/* ホバーアクション */
@media (hover: hover) {
.p-company__card:hover .p-company__img {
transform: scale(1.08);
}
/* ホバー時に少し暗くして文字をより目立たせる */
.p-company__card:hover .p-company__img-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
}
/* スマホ表示時の上書き設定 (767px以下) */
@media (max-width: 767px) {
.p-company__inner {
flex-direction: column;
gap: clamp(30px, 8vw, 50px);
}
.p-company__lead {
margin-bottom: clamp(30px, 8vw, 50px);
}
.p-company__list {
/* スマホ時は縦に1列 */
grid-template-columns: 1fr;
gap: clamp(20px, 5vw, 30px);
}
.p-company__img-box {
/* スマホだと正方形は少し大きすぎるため、横長の長方形に変更 */
aspect-ratio: 3 / 2;
}
}
