@charset "utf-8"; /*============================================= カスタマイズ用 =============================================*/ /*=============== フォント読み込み =================*/ /* ▼ Poppins（英字のみ）。WOFF2優先＋英字レンジを限定 */ @font-face { font-family: 'Poppins'; src: url('lib/fonts/Poppins-SemiBold.woff2') format('woff2'), url('lib/fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; /* 英字のみ → 日本語は次のフォントに回す */ unicode-range: U+0000-00FF, U+0100-024F, U+1E00-1EFF; } @font-face { font-family: 'Poppins'; src: url('lib/fonts/Poppins-Bold.woff2') format('woff2'), url('lib/fonts/Poppins-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-024F, U+1E00-1EFF; } /* ▼ 日本語は“ゴシック”。Noto Sans JP を用意できるならこちらを採用 */ @font-face { font-family: 'Noto Sans JP'; src: url('lib/fonts/NotoSansJP-Regular.woff2') format('woff2'), url('lib/fonts/NotoSansJP-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Sans JP'; src: url('lib/fonts/NotoSansJP-Medium.woff2') format('woff2'), url('lib/fonts/NotoSansJP-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Sans JP'; src: url('lib/fonts/NotoSansJP-Bold.woff2') format('woff2'), url('lib/fonts/NotoSansJP-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } /* 見た目の太さ合わせ（Poppinsの方が太く見えるため、日本語は+1段階） */ :lang(ja) { font-weight: 500; } /* 本文：Poppins 400 ≒ JP 500 が目安 */ strong, b { font-weight: 900; } :lang(ja) strong, :lang(ja) b { font-weight: 900; } /* 必要に応じて 700→800/900 へ */ /* 簡体字（中国本土：zh-CN） */ :lang(zh-CN) { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "DengXian", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; font-weight: 400; /* ←細め（Light） */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } :lang(zh-CN).thin, :lang(zh-CN) .thin { font-weight: 400; /* Ultralight がある端末で有効 */ } /* フォーム本体のフォント（Poppins→日本語→中国語フォールバック） */ #Contact :where(input, textarea, select) { font-family: "Poppins", "Noto Sans JP", "Noto Sans SC","PingFang SC","Microsoft YaHei", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; } /* placeholder を本体と完全一致させる */ #Contact :where(input, textarea)::placeholder{ font: inherit; /* family/size/weight/line-height を継承 */ letter-spacing: inherit; color: #9aa0a6; /* 任意の色 */ opacity: 1; /* 既定の半透明を無効化 */ } /* 中国語ページ用（ などが付く想定） */ :lang(zh-CN) #Contact :where(input, textarea, select){ font-family: "PingFang SC","Noto Sans SC","Microsoft YaHei", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; } :lang(zh-CN) #Contact :where(input, textarea)::placeholder{ font: inherit; } /* 互換（古いSafari/Firefox/IE必要なら） */ #Contact input::-webkit-input-placeholder, #Contact textarea::-webkit-input-placeholder{ font: inherit; color:#9aa0a6; opacity:1; } #Contact input::-moz-placeholder, #Contact textarea::-moz-placeholder{ font: inherit; color:#9aa0a6; opacity:1; } #Contact input:-ms-input-placeholder, #Contact textarea:-ms-input-placeholder{ font: inherit; color:#9aa0a6; opacity:1; } /*=============== スクロール表示 =================*/ /* ★ アニメーションの初期状態（セレクタを変更） ★ */ [data-scroll-fadein] { /* data-scroll-fadein 属性を持つ要素すべて */ opacity: 0; /* 最初は透明で非表示 */ transform: translateY(50px); /* 少し下から始まるように50px下にずらす */ transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* アニメーションの速度と効果 */ } /* ★ アニメーション発動後の状態（セレクタを変更） ★ */ /* data-scroll-fadein 属性を持つ要素に show クラスが付与されるとこの状態になる */ [data-scroll-fadein].show { opacity: 1; /* 不透明になって表示 */ transform: translateY(0); /* 元の位置に戻る */ } /*========== 共通 ===========*/ *{ line-height: 1.5; } html { /* スムーススクロールを使うならここで */ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--anchor-gap)); } body { background: #FFF !important; line-height: 1.5; } h2{ font-size: clamp(20px, 3.8vw, 40px); font-weight: bold; } h2 span{ font-size: clamp(8px, 3.8vw, 18px); color: #9e895b; display: block; line-height: 1; } .left-content .main-inner { margin-right: 0 !important; } /*========== ヘッダー ===========*/ header .header-wrap{ display: flex; } header .logo-wrap{ display: flex; align-items: center; } header #Logo_header{ margin-right: 30px; } #header { padding: 30px 50px; border-bottom: none; } #gnav{ margin-top: 0; background: none; border: 0; display: flex; align-items: anchor-center; } #gnav li a{ border-top: none; margin-top: 0; padding: 10px; color: #000; background: none; transition: .7s; } #gnav li a:hover { border-top: 1px #9e895b solid; } #gnav li.current-menu-item a { border-top: 1px #9e895b solid; } #header #header_nav{ display: flex; } #header #header_nav .language{ margin-left: 23px; display: flex; align-items: center; } #header #header_nav .language a{ margin-left: 20px; font-size: 14px; color: #333333; } #header #header_nav .language .jp{ margin-left: 10px; } #gnav .contact, #nav-drawer .contact{ padding: 1px 15px; background: #2b2b2b; border: 1px solid #2b2b2b; color: #FFF; } #gnav .contact:hover, #nav-drawer .contact:hover{ color: #2b2b2b; background: #FFF; text-decoration: none; } #gnav .contact img, #nav-drawer .contact img{ margin-right: 5px; } /* グローバルメニュー表示／非表示 */ .gnavi-open { display: block; } header #header_nav .flex, header #header_nav .glovalnavi{ display: none; } /* グローバルメニュー */ header .header-wrap{ justify-content: space-between; } #nav-drawer { margin-left: 20px; position: relative; display: flex; align-items: center; z-index: 10000; } #nav-content .a-wrap{ width: 90%; max-width: 200px; margin: 40px auto 0; } #nav-drawer .contact{ padding: 8px 20px; text-align: center; } /*チェックボックス等は非表示に*/ .nav-unshown { display:none; } #nav-open img{ width: 20px; height: auto; } /*閉じる用の薄黒カバー #nav-close { display: none; position: fixed; z-index: 99; top: 0; right: 0; width: 100%; height: 100%; background: black; opacity: 0; transition: .3s ease-in-out; }*/ /*中身*/ #nav-content { padding: 100px 0 0; overflow: auto; position: fixed; top: 0; right: 0; z-index: 9999;/*最前面に*/ width: 100%;/*右側に隙間を作る（閉じるカバーを表示）*/ max-width: 490px;/*最大幅（調整してください）*/ height: 100%; background: #927d32;/*背景色*/ transition: .3s ease-in-out;/*滑らかに表示*/ -webkit-transform: translateX(105%);  transform: translateX(105%);/*右に隠しておく*/ } #nav-content ul{ width: 90%; max-width: 200px; margin: 0 auto; padding-top: 15px; list-style: none; padding-left: 0; } #nav-content ul li{ text-align: center; } #nav-content ul li a{ padding: 20px; color: #fff; display: block; text-decoration: none; font-weight: 700; position: relative; overflow: hidden; text-align: left; } #nav-content ul li a::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: #000; transform-origin: 50% 0%; transform: scaleY(0); transition: transform ease .3s; } #nav-content ul li a:hover { color: #fff; text-decoration: none; } #nav-content ul li a:hover::before { transform-origin: 50% 100%; transform: scaleY(1); } /*チェックが入ったらもろもろ表示*/ #nav-input:checked ~ #nav-close { display: block;/*カバーを表示*/ opacity: .5; } #nav-input:checked ~ #nav-content { -webkit-transform: translateX(0%); transform: translateX(0%);/*中身を表示（右へスライド）*/ box-shadow: 6px 0 25px rgba(0,0,0,.15); } /* クローズボタンのスタイルと初期状態 */ #nav-close-btn { display: none; /* 最初は非表示にしておく */ cursor: pointer; /* クリックできることが分かるように */ position: relative; z-index: 10000; } #nav-close-btn img { width: 20px; /* オープンボタンと同じサイズに合わせる */ height: auto; } /* チェックが入った（メニューが開いた）時の制御 */ #nav-input:checked ~ #nav-open { display: none; /* オープンボタンを非表示にする */ } #nav-input:checked ~ #nav-close-btn { display: block; /* クローズボタンを表示する */ } /* リストスタイルリセット（スキン用） */ .glovalnavi:before, .glovalnavi:after, .glovalnavi *, .glovalnavi-inner, .glovalnavi ul, .glovalnavi li, .glovalnavi li a { margin: 0; padding: 0; width: auto; border: none; background: none; box-shadow: none; text-shadow: none; } .glovalnavi *:before, .glovalnavi *:after, .glovalnavi a:before, .glovalnavi a:after, .glovalnavi li a:before, .glovalnavi li a:after { content: none; } /*== ==*/ #content { padding: 100px 0 200px; } /*== メインビジュアル ==*/ .mv { position: relative; /* 子要素の絶対配置の基準にする場合 */ width: 100%; } .mv .mv-inner p{ text-align: center; font-weight: bold; margin-bottom: 20px; } .mv .mv-inner p span{ font-size: 12px; display: block; } .mv .mv-inner h1 { margin: 0; text-align: center; font-size: clamp(60px, 8vw, 160px); line-height: 0.7; font-weight: bolder; font-family: 'Poppins','Noto Sans JP',system-ui, -apple-system,'Hiragino Sans', 'Hiragino Kaku Gothic ProN','Helvetica Neue', Arial, sans-serif; font-synthesis-weight: bolder; /* iOSの疑似ボールド抑止 */; } /* 「千人力」以外の左側のテキスト */ .mv .mv-inner h1 span:first-child { /* spanタグがないのでこのセレクタは機能しない。テキストノードを直接指定はCSSでは難しい */ /* spanタグで囲まれていない「百人力を超えた千人力に感じていただける存在でありたい」というテキストノードのスタイルは直接CSSでは調整が難しいです。 このテキスト部分も別途タグで囲むことを推奨します。 */ /* 例:

百人力を超えた千人力に感じていただける存在でありたい千人力

*/ } /* 「千人力」の部分 */ .mv .mv-inner h1 span { font-weight: bold; /* 太字 */ margin-left: 20px; /* 左のテキストとの間隔 */ white-space: nowrap; /* 強制的に改行しない */ font-size: 4.8rem; font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "BIZ UDPMincho", "游明朝", "Yu Mincho", serif; } /* レスポンシブ対応の例 */ @media (max-width: 768px) { .mv .mv-inner{ padding-right: 0; justify-content: center; } } /* スライダーコンテナの基本スタイル */ .custom-slider-container { position: relative; width: 100%; height: 600px; /* スライダーの高さ */ overflow: hidden; /* はみ出すコンテンツを隠す */ margin: 0 auto; /* 中央寄せ */ background-color: #000; /* 背景色（スライド切り替え時のちらつき防止） */ } /* スライドラッパー */ .custom-slider-wrapper { position: relative; width: 100%; height: 100%; } /* 各スライドのスタイル */ .custom-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; /* デフォルトでは非表示 */ visibility: hidden; /* 非表示のスライドはDOMから見えなくする */ z-index: 0; /* デフォルトの重なり順 */ transition: opacity 0.5s ease-in-out, transform 0.5s ease-out; /* スライド切り替え時のトランジション */ transform: translateX(100%); /* 次のスライドは右外から待機 */ display: flex; /* 画像を中央に配置するため残す */ justify-content: center; align-items: center; overflow: hidden; } /* 現在表示中のスライド（右から中央へスライドイン） */ .custom-slide.active { opacity: 1; /* 表示 */ visibility: visible; z-index: 1; /* 手前に表示 */ transform: translateX(0%); /* 中央に移動 */ transition: opacity 0.5s ease-in-out, transform 0.5s ease-out; /* 表示時のアニメーション */ } /* 左に抜けていくスライド */ .custom-slide.leaving { opacity: 0; /* 非表示にフェードアウト */ transform: translateX(-100%); /* 左に抜ける */ z-index: 2; /* 新しいスライドの上に表示されてから抜けていく */ visibility: visible; /* 抜けていく間は見えるように */ transition: opacity 0.5s ease-out, transform 0.5s ease-in; /* 抜ける時のアニメーション */ } /* スライド内の画像 */ .custom-slide img { width: 100%; height: 100%; object-fit: cover; transform: translate(0, 0) scale(1); /* 初期位置と初期拡大率 */ transition: transform 6s linear; /* 画像のゆっくりとした動きの時間 */ } /* ★ 画像自体の内部アニメーション（activeクラスがあるスライド内のimgに適用） ★ */ /* 左に動かす際は、拡大も同時に行い、右側に隙間ができないようにする */ .custom-slide.active img.animate-left { transform: translateX(-5%) scale(1.1); /* ★ 左に動かしつつ1.1倍に拡大 */ } /* 右に動かす際は、拡大も同時に行い、左側に隙間ができないようにする */ .custom-slide.active img.animate-right { transform: translateX(5%) scale(1.1); /* ★ 右に動かしつつ1.1倍に拡大 */ } /* 上に動かす際は、拡大も同時に行い、下側に隙間ができないようにする */ .custom-slide.active img.animate-up { transform: translateY(-5%) scale(1.1); /* ★ 上に動かしつつ1.1倍に拡大 */ } /* ページネーションのスタイル */ .slider-pagination { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 10px; } .slider-pagination .dot { width: 10px; height: 10px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; cursor: pointer; transition: background-color 0.3s; } .slider-pagination .dot.active { background-color: #FFF; } /* ナビゲーションボタンのスタイル */ .slider-prev, .slider-next { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: #FFF; border: none; padding: 10px 15px; font-size: 2em; cursor: pointer; z-index: 10; border-radius: 5px; transition: background-color 0.3s; } .slider-prev:hover, .slider-next:hover { background-color: rgba(0, 0, 0, 0.7); } .slider-prev { left: 20px; } .slider-next { right: 20px; } /* レスポンシブ対応の例 */ @media (max-width: 768px) { .custom-slider-container { height: 200px; } .slider-prev, .slider-next { padding: 5px 10px; font-size: 1.5em; } } /*== ニュース・会社概要 ==*/ .news-company { position: relative; /* 擬似要素の基準にする */ width: 100%; background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), /* 黒の半透明オーバーレイ */ url('../../lib/img/bg_top_ourstartment.png'); /* あなたの画像のパスを指定 */ background-color: rgba(0, 0, 0, 0.8); z-index: 1; /* 背景画像の上、コンテンツの下に配置 */ background-size: cover; background-position: top center; background-repeat: no-repeat; justify-content: center; align-items: center; text-align: center; display: block; } .box-news { padding: 60px 0; width: 90%; margin: 0 auto; display: flex; } .box-news .title-news { display: block; width: 20%; color: #FFF; text-align: left; } .box-news .title-news h2 { font-size: 3.4rem; margin: 0; line-height: 1; font-weight: bolder; font-family: 'Poppins','Noto Sans JP',system-ui, -apple-system,'Hiragino Sans', 'Hiragino Kaku Gothic ProN','Helvetica Neue', Arial, sans-serif; font-synthesis-weight: bolder; /* iOSの疑似ボールド抑止 */; } .box-news .news-list { display: block; width: 80%; list-style: none; padding: 10px 0; margin: 0; } .news-item { display: flex; align-items: baseline; margin-bottom: 10px; padding-bottom: 10px; } .news-item:last-child { border-bottom: none; } .news-item .date { font-size: 0.8em; color: #FFF; flex-shrink: 0; /* 日付が縮まないように */ padding-right: 20px; margin-right: 20px; min-width: 80px; /* 日付の最小幅 */ border-right: 3px solid #eee; } .news-item .category { background-color: #555555; color: #FFF; min-width: 100px; font-size: 0.9em; padding: 2px 5px; margin-right: 15px; flex-shrink: 0; } .news-item .title{ text-align: left; } .news-item .title a { font-size: 1em; color: #FFF; transition: color 0.3s; } /* --- box-ourstartmentセクション CSS --- */ .box-ourstartment { padding: 60px 5%; width: 90%; margin: 0 auto; } .box-ourstartment h2 { font-size: clamp(30px, 8vw, 120px); text-align: left; font-weight: bolder; font-family: 'Poppins','Noto Sans JP',system-ui, -apple-system,'Hiragino Sans', 'Hiragino Kaku Gothic ProN','Helvetica Neue', Arial, sans-serif; font-synthesis-weight: bolder; /* iOSの疑似ボールド抑止 */; margin-bottom: 30px; color: #FFF; opacity: 0.2 !important; line-height: 1; } .box-ourstartment .box-ourstartment-inner { display: flex; align-items: flex-end; /* ★追加・変更: 子要素を下寄せにする ★ */ } .box-ourstartment .box-ourstartment-inner .box-photo { width: 35%; } .box-ourstartment .box-ourstartment-inner .box-photo img { width: 100%; } .box-ourstartment .box-ourstartment-inner .box-text { width: 60%; margin-left: 5%; text-align: left; color: #FFF; } .box-ourstartment .box-ourstartment-inner .box-text .en-title { color: #9e895b; font-family: 'Poppins','Noto Sans JP',system-ui, -apple-system,'Hiragino Sans', 'Hiragino Kaku Gothic ProN','Helvetica Neue', Arial, sans-serif; font-synthesis-weight: bolder; /* iOSの疑似ボールド抑止 */; font-size: clamp(8px, 2vw, 18px); font-weight: bolder; } .box-ourstartment .box-ourstartment-inner .box-text .ja-title { color: #FFF; font-size: clamp(12px, 4vw, 40px); } /* --- box-ourstartmentセクション CSS --- */ .box-oursrvice { padding: 60px 5%; width: 90%; margin: 0 auto; } .box-oursrvice h2 { font-size: clamp(30px, 8vw, 120px); text-align: center; font-weight: bolder; font-family: 'Poppins','Noto Sans JP',system-ui, -apple-system,'Hiragino Sans', 'Hiragino Kaku Gothic ProN','Helvetica Neue', Arial, sans-serif; font-synthesis-weight: bolder; /* iOSの疑似ボールド抑止 */; margin-bottom: 30px; color: #FFF; opacity: 0.2 !important; line-height: 1; } .box-oursrvice .box-oursrvice-inner { display: flex; } .box-oursrvice .box-oursrvice-inner .box-photo { width: 35%; } .box-oursrvice .box-oursrvice-inner .box-photo img { width: 100%; } .box-oursrvice .box-oursrvice-inner .box-text { width: 50%; margin-right: 15%; text-align: left; color: #FFF; } .box-oursrvice .box-oursrvice-inner .box-text .en-title { color: #9e895b; font-family: 'Poppins','Noto Sans JP',system-ui, -apple-system,'Hiragino Sans', 'Hiragino Kaku Gothic ProN','Helvetica Neue', Arial, sans-serif; font-synthesis-weight: bolder; /* iOSの疑似ボールド抑止 */; font-size: clamp(8px, 2vw, 18px); font-weight: bolder; } .box-oursrvice .box-oursrvice-inner .box-text .ja-title { color: #FFF; font-size: clamp(12px, 4vw, 40px); } .box-oursrvice ul { display: block; margin: 0; } .box-oursrvice ul.oursrvice-link { display: flex; } .box-oursrvice ul.oursrvice-link li { width: 29%; margin: 2%; text-align: left; } .box-oursrvice ul.oursrvice-link li:nth-child(1) { margin: 2% 4% 2% 0%; } .box-oursrvice ul.oursrvice-link li:nth-child(3) { margin: 2% 0% 2% 4%; } .box-oursrvice ul.oursrvice-link li a { color: #FFF; width: 100%; display: inline-block; position: relative; padding: 20px; border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; } .box-oursrvice ul.oursrvice-link li a::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.2em; color: #9e895b; transition: transform 0.2s ease-out, opacity 0.2s ease-out; } .box-oursrvice ul.oursrvice-link li a:hover{ color: #9e895b; text-decoration: none; border-top: 1px solid #9e895b; border-bottom: 1px solid #9e895b; } .box-oursrvice ul.oursrvice-link li a:hover::after { content: '→'; transform: translateY(-50%) translateX(3px); color: #9e895b; } .box-recruit .bg { background-image: url(../img/bg_top_recruit.png); background-size: cover; background-repeat: no-repeat; background-position: center center; /* 背景画像を中央寄せにするための設定 */ min-height: 800px; /* セクションの最低高さを確保 */ display: flex; /* Flexboxを有効にする */ flex-direction: column; /* ★子要素を縦方向に並べる★ */ justify-content: flex-end; /* ★子要素全体をコンテナの下端に揃える★ */ align-items: center; /* ★子要素全体を水平方向の中央に揃える★ */ box-sizing: border-box; /* paddingを含めて高さを計算 */ width: 100%; /* 親要素の幅 */ } .box-recruit h2 { font-size: clamp(30px, 8vw, 120px); margin: 0; line-height: 1; font-weight: bolder; font-family: 'Poppins','Noto Sans JP',system-ui, -apple-system,'Hiragino Sans', 'Hiragino Kaku Gothic ProN','Helvetica Neue', Arial, sans-serif; font-synthesis-weight: bolder; /* iOSの疑似ボールド抑止 */; color: #FFF; opacity: 0.4 !important; margin-bottom: 30px; /* 下からのマージンは残す */ width: 100%; /* Flexアイテムとしての幅を親に合わせる */ max-width: 800px; /* コンテンツの最大幅に合わせて調整 (この幅内で左寄せ) */ text-align: right; /* テキストは左寄せ */ } .box-recruit .box-recruit-inner { /* 既存のスタイル */ display: flex; /* これ自体は子要素 (.box-photo, .box-text) を横に並べる */ width: 100%; /* Flexアイテムとして、親の幅を占める */ max-width: 1000px; /* コンテンツの最大幅に合わせて調整 */ margin: 0 auto; align-items: flex-end; } .box-recruit .box-recruit-inner .box-photo { width: 40%; } .box-recruit .box-recruit-inner .box-photo img { width: 100%; margin-top: -80px; } .box-recruit .box-recruit-inner .box-text { width: 55%; margin-left: 5%; text-align: left; color: #000; } .box-recruit .box-recruit-inner .box-text .en-title { color: #9e895b; font-family: 'Poppins','Noto Sans JP',system-ui, -apple-system,'Hiragino Sans', 'Hiragino Kaku Gothic ProN','Helvetica Neue', Arial, sans-serif; font-synthesis-weight: bolder; /* iOSの疑似ボールド抑止 */; font-size: clamp(8px, 2vw, 18px); font-weight: bolder; } .box-recruit .box-recruit-inner .box-text .ja-title { color: #000; font-size: clamp(12px, 4vw, 40px); } .box-news .title-news a.white_button, .box-ourstartment .box-ourstartment-inner .box-text a.white_button, .box-oursrvice .box-oursrvice-inner .box-text a.white_button, .box-recruit .box-recruit-inner .box-text a.white_button, #Manufacturing a.white_button, #Contact a.white_button { width: 160px !important; margin-top: 20px; padding: 9px 15px; color: #2b2b2b; background: #FFF; border-top: 1px solid transparent; border-bottom: 2px solid #927d32; position: relative; display: block; overflow: hidden; transition: background 0.3s, border-bottom-color 0.3s, color 0.3s; } .box-recruit .box-recruit-inner .box-text a.white_button {/*右寄せにする*/ margin-left: auto; margin-right: 0; } .box-news .title-news a.white_button:hover, .box-ourstartment .box-ourstartment-inner .box-text a.white_button:hover, .box-oursrvice .box-oursrvice-inner .box-text a.white_button:hover, .box-recruit .box-recruit-inner .box-text a.white_button:hover, #Contact a.white_button:hover { text-decoration: none; background: #EEEEEE; border-bottom: 2px solid #999999; color: #2b2b2b; } .box-news .title-news a.white_button::after, .box-ourstartment .box-ourstartment-inner .box-text a.white_button::after, .box-oursrvice .box-oursrvice-inner .box-text a.white_button::after, .box-recruit .box-recruit-inner .box-text a.white_button::after, #Manufacturing a.white_button::after, #Contact a.white_button::after { content: '＋'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%) translateX(0px); display: inline-block; font-size: 1.2em; color: #9e895b; opacity: 1; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } .box-news .title-news a.white_button::before, .box-ourstartment .box-ourstartment-inner .box-text a.white_button::before, .box-oursrvice .box-oursrvice-inner .box-text a.white_button::before, .box-recruit .box-recruit-inner .box-text a.white_button::before, #Contact a.white_button::before { content: '→'; position: absolute; right: 10px; /* 右からの位置 */ top: 50%; transform: translateY(-50%) translateX(-10px); /* ★矢印の初期位置を左側に隠しておく★ */ display: inline-block; font-size: 1.2em; color: #9e895b; opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } .box-news .title-news a.white_button:hover, .box-ourstartment .box-ourstartment-inner .box-text a.white_button:hover, .box-oursrvice .box-oursrvice-inner .box-text a.white_button:hover, .box-recruit .box-recruit-inner .box-text a.white_button:hover, #Contact a.white_button:hover{ text-decoration: none; } .box-news .title-news a.white_button:hover::after, .box-ourstartment .box-ourstartment-inner .box-text a.white_button:hover::after, .box-oursrvice .box-oursrvice-inner .box-text a.white_button:hover::after, .box-recruit .box-recruit-inner .box-text a.white_button:hover::after, #Contact a.white_button:hover::after{ transform: translateY(-50%) translateX(10px); opacity: 0; } .box-news .title-news a.white_button:hover::before, .box-ourstartment .box-ourstartment-inner .box-text a.white_button:hover::before, .box-oursrvice .box-oursrvice-inner .box-text a.white_button:hover::before, .box-recruit .box-recruit-inner .box-text a.white_button:hover::before, #Contact a.white_button:hover::before { opacity: 1; transform: translateY(-50%) translateX(0px); /* ★初期位置から中央（右10pxの位置）へ移動★ */ } /*========== 下層ページ共通 ===========*/ .page-wrap h1{ margin: 100px auto; font-size: clamp(20px, 3vw, 50px); text-align: center; font-weight: bold; } .page-wrap h1 span{ font-size: clamp(8px, 3vw, 20px); display: block; text-align: center; color: #9e895b; font-weight: bold; font-family: 'Poppins','Noto Sans JP',system-ui, -apple-system,'Hiragino Sans', 'Hiragino Kaku Gothic ProN','Helvetica Neue', Arial, sans-serif; font-synthesis-weight: bolder; /* iOSの疑似ボールド抑止 */; line-height: 1; } .page-wrap h3{ margin-bottom: 30px; font-size: clamp(14px, 3vw, 20px); font-weight: bold; } .page-wrap h4{ margin-bottom: 40px; font-size: clamp(12px, 3vw, 28px); color: #fff; } .page-wrap .center{ text-align: center; } .page-wrap .right{ text-align: right; } .page-wrap .section-wrap{ padding: 80px 0; } .page-wrap .flex{ display: flex; } .page-wrap .img-wrap{ width: 100%; text-align: center; } .page-wrap .img-wrap img { width: 100%; height: auto; vertical-align: top; } /* このセクションだけに限定 */ .js-business { overflow: hidden; } .js-business .swiper-wrapper.is-marquee{ display: flex; gap: 20px; /* スライド間隔（元の spaceBetween と揃える） */ width: max-content; /* 中身サイズにフィット */ will-change: transform; animation: business-marquee var(--marquee-duration, 40s) linear infinite; transform: translate3d(0,0,0); /* GPU促進 */ } /* 再レイアウトを防ぐため幅を固定（元画像が360pxなら固定推奨） */ .js-business .swiper-slide{ width: 360px; /* 必要なら clamp で可変してもOK。ただし等速再計算はJSが担保 */ flex: 0 0 auto; } .js-business .swiper-slide img{ display: block; backface-visibility: hidden; } /* 2倍化した帯の“半分”を流し切ると継ぎ目ゼロになる */ @keyframes business-marquee{ from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ホバーで停止したい時（任意） */ .js-business:hover .swiper-wrapper.is-marquee{ animation-play-state: paused; } /* 動きを控えるOS設定に配慮（任意） */ @media (prefers-reduced-motion: reduce){ .js-business .swiper-wrapper.is-marquee{ animation: none; } } .page-wrap .swiper { width: 100%; height: 220px; /* スライダー全体の高さを指定 */ } /* 各スライドの幅をautoに！ */ .page-wrap .swiper-slide { width: auto!important; /* ★これが最重要 */ } /* スライド内の画像を親要素の高さに合わせる */ .page-wrap .swiper-slide img { display: block; height: 228px; /* 高さを揃える */ width: auto; /* 幅は画像の比率を維持 */ object-fit: cover; /* 高さを維持したままトリミング */ } .page-wrap .table-wrap{ overflow-x: inherit; } /*========== 企業情報ページ ===========*/ #Company #Corporate-philosophy{ margin-top: 40px; background: url(../img/bg_company01.jpg) center center no-repeat; background-size: cover; } #Company #Corporate-philosophy .circle{ width: 95%; max-width: 642px; margin: 0 auto; background: rgba(255,255,255,0.8); border-radius: 50%; } #Company #Corporate-philosophy .section{ height: 0; padding-top: 100%; position: relative; } #Company #Corporate-philosophy .section .section-inner{ margin: 0; position: absolute; top: 50%; transform: translateY( -50%); left: 0; right: 0; } #Company #Corporate-philosophy .brand{ margin-bottom: 30px; font-size: clamp(28px, 3.8vw, 80px); font-family: 'Noto Serif JP'; } #Company #Corporate-philosophy p{ line-height: 2; } #Company #Message{ background: url(../img/bg_company02.jpg) center center no-repeat; background-size: cover; } #Company #Message .section{ width: 45%; max-width: 700px; margin-left: 48%; } #Company #Message .section p{ margin-top: 20px; line-height: 2; } #Company #About h2{ width: 90%; max-width: 710px; margin: 0 auto 50px; } #Company #About .img-wrap{ width: 50%; } #Company #About table{ width: 50%!important; margin-left: 60px; border: none; } #Company #About table th, #Company #About table td{ padding: 10px 20px; border: none; vertical-align: top; } #Company #Access p{ width: 90%; max-width: 710px; margin: 20px auto; } /*========== 事業紹介ページ ===========*/ #Consistent-service .section{ position: relative; } #Consistent-service .bg{ display: flex; justify-content: center; font-family: 'Poppins','Noto Sans JP',system-ui, -apple-system,'Hiragino Sans', 'Hiragino Kaku Gothic ProN','Helvetica Neue', Arial, sans-serif; font-synthesis-weight: bolder; /* iOSの疑似ボールド抑止 */; font-size: 120px; font-weight: bold; color: #333333; opacity: 10%; line-height: 1; } #Consistent-service .p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } #Prototype-production .section{ width: 40%; background: url(../img/bg_business01.jpg) center center no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center; } #Prototype-production .section h2{ color: #fff; } #Prototype-production .flex-right{ widt: 40%; max-width: 540px; margin-left: 5%; } #Prototype-production .flex-right .img-wrap{ max-width: 260px; } #Prototype-production .flex-right .flex{ margin-top: 30px; margin-bottom: 120px; justify-content: space-between; } #OEM_manufacturing { padding-top:100px; margin-top: 0px; } #OEM_manufacturing{ background: url(../img/bg_business02.jpg) center center no-repeat; background-size: cover; } #OEM_manufacturing .section h2, #OEM_manufacturing .section p{ width: 90%; max-width: 710px; margin: 60px auto; color: #fff; } #OEM_manufacturing .section .needs{ width: 95%; max-width: 1060px; margin: 0 auto; padding: 50px 0; background: rgba(255,255,255,0.8); } #OEM_manufacturing .section .needs p{ color: #333333; font-size: 25px; } #OEM_manufacturing .section .needs .flex{ width: 90%; max-width: 810px; margin: 0 auto 20px; justify-content: space-between; } #OEM_manufacturing .section .needs .flex .img-wrap{ width: 48%; max-width: 374px; } #Own-brand { padding-top:100px; margin-top: 00px; } #Own-brand .section{ width: 90%; max-width: 768px; margin: 0 auto 65px; } #Own-brand .flex img{ width: calc((100% - 60px)/5); } #Own-brand .flex-end{ margin-bottom: 15px; justify-content: flex-end; } #Own-brand .flex-end img{ margin-left: 15px; } #Own-brand .flex-start img{ margin-right: 15px; } /*========== 採用情報ページ ===========*/ #Recruit{ position: relative; } #Manufacturing p{ line-height: 2; } #Manufacturing h3{ font-family: "Noto Serif JP", serif; font-size: clamp(40px, 2vw, 70px); } #Recruit a.apply{ width: 164px; height: 164px; border-radius: 50%; display: flex; flex-flow: column; justify-content: center; align-items: center; background: #9e895b; color: #fff; text-align: center; font-size: 25px; font-weight: bold; font-family: "游ゴシック体", YuGothic; line-height: 1.2; cursor: pointer; position: fixed; z-index: 999; right: 2.5%; bottom: 30px; } #Manufacturing .section a img{ margin-bottom: 10px; } #Interview .flex{ width: 95%; max-width: 1100px; margin: 40px auto 80px; justify-content: space-between; } #Interview .flex a{ width: 31%; padding: 40px 20px; color: #fff; font-size: clamp(8px, 2vw, 18px); display: flex; justify-content: center; align-items: center; text-align: center; } #Interview .flex a:first-child{ background: url(../img/bg_recruit01.jpg) center center no-repeat; background-size: cover; } #Interview .flex a:nth-child(2){ background: url(../img/bg_recruit02.jpg) center center no-repeat; background-size: cover; } #Interview .flex a:last-child{ background: url(../img/bg_recruit03.jpg) center center no-repeat; background-size: cover; } #Interview .flex a:hover { text-decoration:none; opacity: 0.7; } #Employee_interview, #Entry{ padding: 0; } #Employee_interview .section{ position: relative; } #Employee_interview .interview-box{ padding: 45px 0; } #Employee_interview .interview-box p{ width: 190px; height: 190px; border-radius: 50%; border: 1px solid #907547; color: #907547; display: flex; justify-content: center; align-items: center; } #Employee_interview .interview-box .flex{ width: 90%; max-width: 950px; margin: 0 auto; justify-content: space-between; align-items: center; } /* 画像リンクの土台 */ #Employee_interview .interview-box .img-wrap{ width: calc((100% - 300px)/2); position: relative; display: inline-block; line-height: 0; /* 画像下の隙間防止 */ overflow: hidden; } /* 画像 */ #Employee_interview .interview-box .img-wrap img { display: block; width: 100%; height: auto; transition: filter .5s ease; } /* 黒オーバーレイ（前面へ） */ #Employee_interview .interview-box .img-wrap::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s ease; z-index: 1; } /* 中央テキスト（さらに前面） */ #Employee_interview .interview-box .img-wrap::before { content: "interview→"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0.98); color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .06em; text-align: center; line-height: 1.4; opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; white-space: nowrap; z-index: 2; } /* ホバー & フォーカス可視時 */ #Employee_interview .interview-box .img-wrap:hover img, #Employee_interview .interview-box .img-wrap:focus-visible img { filter: brightness(.7); } #Employee_interview .interview-box .img-wrap:hover::after, #Employee_interview .interview-box .img-wrap:focus-visible::after { opacity: 1; } #Employee_interview .interview-box .img-wrap:hover::before, #Employee_interview .interview-box .img-wrap:focus-visible::before { opacity: 1; transform: translate(-50%,-50%) scale(1); } /* 動きオフ配慮（任意） */ @media (prefers-reduced-motion: reduce) { #Employee_interview .interview-box .img-wrap img, #Employee_interview .interview-box .img-wrap::after, #Employee_interview .interview-box .img-wrap::before { transition: none; } } #Employee_interview #Prototype-master{ background: #262626; } #Employee_interview #Planning-sales{ background: #363636; } #Employee_interview .bg_title, #Entry .bg_title{ width: 100%; position: absolute; font-family: 'Poppins','Noto Sans JP',system-ui, -apple-system,'Hiragino Sans', 'Hiragino Kaku Gothic ProN','Helvetica Neue', Arial, sans-serif; font-synthesis-weight: bolder; /* iOSの疑似ボールド抑止 */; font-size: clamp(30px, 8vw, 120px); font-weight: bold; color: #fff; opacity: 0.1 !important; top: 50%; transform: translateY(-50%); text-align: center; } #Recruit_message{ background: url(../img/bg_recruit05.jpg) center right no-repeat; background-size: contain; } @media (max-width: 1600px) { #Recruit_message{ background-position: right -180px center; /* 右へ押し出す＝左に白が増える */ background-size: contain; /* shorthandで消えないよう明示 */ } } #Recruit_message h3{ margin-top: 20px; } #Recruit_message .section{ width: 100%; max-width: 1000px; margin: 0 auto; } #Recruit_message .section p{ width: 48%; max-width: 480px; margin-top: 40px; line-height: 2; } #Entry #Occupation{ background: #907547; } #Entry #Entry-area{ background: #262626; } #Entry .entry-box{ padding: 100px 0; } #Entry .section{ position: relative; } #Entry #Occupation .flex{ width: 90%; max-width: 680px; margin: 0 auto; justify-content: space-between; } #Entry #Entry-area .flex{ width: 90%; max-width: 530px; margin: 0 auto; justify-content: space-between; flex-wrap: wrap; } #Entry #Occupation .flex span{ width: 24%; padding: 8px; background: #fff; color: #907547; text-align: center; border-radius: 5px; font-size: 18px; display: inline-flex; /* ← 追加 */ justify-content: center; /* 横中央 */ align-items: center; /* 縦中央 */ text-align: center; } #Entry #Entry-area .flex a{ width: 48%; margin-bottom: 10px; padding: 15px; border: 1px solid #907547; color: #907547; border-radius: 10px; font-size: 18px; text-align: center; transition: .7s; } #Entry #Entry-area .flex a:hover{ text-decoration: none; background: #907547; color: #262626; } /* ---------- ポップアップ（モーダル）用スタイル ---------- */ /* クリックできる画像にカーソルをポインターにする */ .img-wrap[data-modal-open] { cursor: pointer; } /* モーダル全体（最初は非表示） */ .modal { display: none; /* 初期状態では非表示 */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; justify-content: center; align-items: center; } /* モーダル表示時のスタイル */ .modal.is-open { display: flex; /* is-openクラスが付いたら表示 */ } /* 背景の黒いオーバーレイ */ .modal-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); } /* ポップアップの中身 */ .modal-content { position: relative; background: #fff; padding: 40px; max-width: 800px; width: 90%; max-height: 80vh; overflow-y: auto; } /* 閉じるボタン */ .modal-close { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 24px; cursor: pointer; color: #333; } .modal-content h3{ margin-bottom: 20px; padding: 3px 10px; font-size: 14px; background: #9e895b; color: #fff; display: flex; justify-content: space-between; } .modal-content h3 span{ font-family: 'Poppins','Noto Sans JP',system-ui, -apple-system,'Hiragino Sans', 'Hiragino Kaku Gothic ProN','Helvetica Neue', Arial, sans-serif; font-synthesis-weight: bolder; /* iOSの疑似ボールド抑止 */; font-size: 12px; font-weight: bold; color: #fff; } .modal-content h4{ color: #9e895b; margin-bottom: 15px; } .modal-content p{ margin-bottom: 30px; } /*========== お問い合わせページ ===========*/ #Contact{ margin-bottom: 100px; } #Contact h1{ margin-bottom: 0; } #Contact #Manufacturing div{ text-align: center; } #Contact #Manufacturing a.white_button{ width: 175px!important; display: inline-block; font-size: 12px; text-align: left; } #Contact form{ width: 90%; max-width: 700px; margin: 0 auto; padding: 0; } #Contact table, #Contact table th, #Contact table td{ border: none; } #Contact table th{ width: 220px; padding: 15px; vertical-align: top; } #Contact table th p{ width: 100%; display: flex; justify-content: space-between; white-space: normal; /* 折り返しは許可（nowrapは外す） */ word-break: keep-all; /* 単語の途中で改行しない */ } #Contact table td p{ width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; } #Contact table td p a{ width: 100%; color: #9E895B; text-decoration: underline; font-size: 14px; } #Contact table td p a:hover{ text-decoration: none; } #Contact table td p .wpcf7-checkbox label{ display: flex; font-size: 14px; align-items: center; } #Contact table td p .wpcf7-checkbox label input{ width: 24px; height: 24px; margin-right: 10px; background: #F4F1EC; } #Contact table td{ width: calc( 100% - 220px); padding: 15px; } #Contact table td .wpcf7-form-control-wrap{ width: 100%; } #Contact table td input, #Contact table td textarea{ width: 100%; display: inline-block; background: #F1F1F1; border: none; } #Contact table td input::placeholder, #Contact table td textarea::placeholder{ color: #797979; font-size: 14px; font-weight: 100; } #Contact table .required{ display: inline-flex; /* 行内で横並びのまま */ align-items: center; /* テキストを垂直中央 */ white-space: nowrap; /* 中で改行しない */ padding: 0 10px; /* 上下は高さで管理するので 0 */ height: 28px; /* ← 1行分に固定（お好みで 24〜30px） */ line-height: 1; /* ← 親の大きい line-height を無効化 */ vertical-align: text-top; /* ← ラベルが2行でも上端に揃える */ font-size: 14px; color: #fff; background: #9E895B; border-radius: 999px; } #Contact table td.consent .wpcf7-form-control-wrap{ width: calc(100% - 50px); } #Contact .button-submit{ margin-top: 80px; text-align: center; } #Contact .button-submit input{ padding: 18px 40px; background: #333333; color: #fff; border-radius: 40px; transition: .7s; border: 1px solid #333; } #Contact .button-submit input:hover{ color: #333; background: #fff; } #Contact .button-submit .wpcf7-previous{ margin-right: 20px; border: #9E895B 1px solid; color: #9E895B; background: none; } #Contact .contact-wrap{ margin: 60px auto; text-align: center; } #Contact .wpcf7-spinner{ margin: 0; } /*========== フッター ===========*/ footer{ display: flex; } #footer p, #footer a{ color: #FFF; } #footer a:hover{ color: #9e895b; text-decoration: none; } footer .footer-01{ width: 43%; padding: 80px 20px 40px; background: #333333; font-size: 12px; display: flex; justify-content: center; border: none; } footer .footer-01 .company-name{ margin-top: 20px; margin-bottom: 10px; font-size: 14px; } footer .footer-01 .footer-nav{ margin-top: 20px; margin-bottom: 20px; padding: 30px 0; border-top: #FFF 1px solid; border-bottom: #FFF 1px solid; } footer .footer-01 .sns_logo img{ margin-right: 10px; } footer .footer-01 .footer-copy{ margin-top: 20px; } footer .footer-02{ width: 22%; background: url(../../lib/img/img_footer_contact.png) center center; background-size: cover; border: none; } footer .footer-02 img{ width: 100%; height: auto; } footer .footer-03{ width: 35%; background: #000; display: flex; align-items: center; justify-content: center; flex-flow: column; } footer .footer-03 h2{ color: #FFF; text-align: center; } #footer .footer-03 a.white_button{ width: 160px !important; margin-top: 20px; padding: 9px 15px; color: #2b2b2b; background: #FFF; border-top: 1px solid transparent; border-bottom: 2px solid #927d32; position: relative; display: block; overflow: hidden; transition: background 0.3s, border-bottom-color 0.3s, color 0.3s; } #footer .footer-03 a.white_button:hover { text-decoration: none; background: #EEEEEE; border-bottom: 2px solid #999999; color: #2b2b2b; } #footer .footer-03 a.white_button:after{ content: '＋'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%) translateX(0px); display: inline-block; font-size: 1.2em; color: #9e895b; opacity: 1; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } #footer .footer-03 a.white_button::before { content: '→'; position: absolute; right: 10px; /* 右からの位置 */ top: 50%; transform: translateY(-50%) translateX(-10px); /* ★矢印の初期位置を左側に隠しておく★ */ display: inline-block; font-size: 1.2em; color: #9e895b; opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } #footer .footer-03 a.white_button:hover { text-decoration: none; } #footer .footer-03 a.white_button:hover::after { transform: translateY(-50%) translateX(10px); opacity: 0; } #footer .footer-03 a.white_button:hover::before { opacity: 1; transform: translateY(-50%) translateX(0px); /* ★初期位置から中央（右10pxの位置）へ移動★ */ }