/* ==========================================================================
No Image画像を完全に中央配置にする設定
========================================================================== */
/* No Image画像を正方形の枠内でも縦横中央に配置する */
.custom-center-noimage {
display: block !important;
width: 100% !important;
height: 100% !important;
/* 枠いっぱいに引き伸ばして切り取るのではなく、全体が収まるように縮小する */
object-fit: contain !important;
/* 正方形の枠に対して、上下も左右も「真ん中」に配置する */
object-position: center center !important;
/* 背景に隙間ができる場合は、ここでお好みの背景色（白や薄いグレーなど）を指定できます */
background-color: transparent !important;
}
/* ==========================================
* スマホ用（画面幅768px以下）のNo Image画像調整
* ========================================== */
@media screen and (max-width: 768px) {
.custom-center-noimage {
/* スマホの小さな枠内でも「No Image」の文字やロゴが小さくなりすぎないよう、
ほんの少しだけ引き伸ばして（1.1倍〜1.2倍程度に）見やすく調整する魔法の記述 */
transform: scale(1.15);
/* 拡大した際、カードの枠線（角丸など）からはみ出さないようにガード */
overflow: hidden;
/* 元の綺麗な中央配置をスマホでも100%維持 */
object-fit: contain !important;
object-position: center center !important;
}
}
/* ==========================================================================
求人一覧（アーカイブ）シックデザイン
========================================================================== */
/* 全体コンテナ */
.archive-container {
background-color: #fcfbf9; /* ほんのり温かみのあるオフホワイト */
color: #2c2a29; /* 炭黒（完全な黒を避けて上品に） */
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
line-height: 1.7;
}
.job-list-section {
padding: 80px 0;
}
.job-list-section .inner {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
/* セクションタイトル */
.section-title {
font-size: 2rem;
font-weight: 300; /* 細めのウェイトで洗練さを演出 */
letter-spacing: 0.15em;
text-align: center;
margin-bottom: 50px;
position: relative;
color: #1a1a1a;
}
.section-title::after {
content: "";
display: block;
width: 40px;
height: 1px;
background-color: #aa9472; /* シックなブロンズ・ゴールド */
margin: 15px auto 0;
}
/* ==========================================
* スマホ用（画面幅768px以下）の求人一覧シックデザイン調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 親コンテナを縦積みに変更 */
.job-flex-container {
flex-direction: column !important; /* 横並びを解除して縦にする */
gap: 30px !important;
}
/* 左側のエリア（求人情報）を幅100%にする */
.job-main-info {
flex: 0 0 100% !important;
max-width: 100% !important;
padding-right: 0 !important;
}
/* 右側のエリア（写真）を幅100%にする */
.job-side-assets {
flex: 0 0 100% !important;
max-width: 100% !important;
order: -1; /* 必要であれば、写真の方を上に持ってくる設定（不要なら削除） */
}
/* パネルやタイトルが突き抜けないようにする */
.job-summary-panel,
.job-hero-title {
width: 100% !important;
max-width: 100% !important;
}
}
/* --------------------------------------------------------------------------
求人カード（リスト）
-------------------------------------------------------------------------- */
.job-archive-list {
display: flex;
flex-direction: column;
gap: 30px; /* カード同士の間隔 */
margin-bottom: 50px;
max-width: 700px;
margin: 0 auto 50px; /* ★上:0, 左右:auto(中央寄せ), 下:50px */
}
/* カード本体 */
.job-archive-card {
display: flex;
background-color: #ffffff;
border: 1px solid #eae6e1;
border-radius: 0; /* 直角でシャープな印象に */
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.job-archive-card:hover {
transform: translateY(-4px);
border-color: #aa9472;
box-shadow: 0 12px 30px rgba(170, 148, 114, 0.08);
}
/* サムネイルエリア */
.job-archive-card__thumb {
position: relative;
width: 300px;
min-width: 300px;
height: auto;
overflow: hidden;
display: block;
}
.job-archive-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.job-archive-card:hover .job-archive-card__thumb img {
transform: scale(1.05);
}
/* 職種タグ（画像の上に被るタグ） */
.job-category-tag {
position: absolute;
top: 15px;
left: 15px;
background-color: rgba(26, 26, 26, 0.85);
color: #ffffff;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.05em;
padding: 4px 12px;
backdrop-filter: blur(4px);
}
/* カードボディ */
.job-archive-card__body {
padding: 30px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* バッジ（雇用形態） */
.job-archive-card__badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.job-archive-card__badge {
font-size: 0.7rem;
font-weight: 600;
color: #aa9472;
border: 1px solid #aa9472;
padding: 2px 8px;
letter-spacing: 0.05em;
}
/* タイトル */
.job-archive-card__title {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.5;
margin-bottom: 20px;
}
.job-archive-card__title a {
color: #1a1a1a;
text-decoration: none;
transition: color 0.2s ease;
}
.job-archive-card__title a:hover {
color: #aa9472;
}
/* メタ情報（勤務地・給与） */
.job-archive-card__meta {
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px 0;
border-top: 1px dotted #eae6e1;
border-bottom: 1px dotted #eae6e1;
margin-bottom: 25px;
}
.job-archive-card__meta-item {
display: flex;
align-items: center;
font-size: 0.85rem;
}
.job-archive-card__meta-label {
width: 90px;
font-size: 0.75rem;
font-weight: 700;
color: #8c857b;
letter-spacing: 0.1em;
}
.job-archive-card__meta-value {
color: #4a4540;
}
.job-archive-card__meta-value.--salary {
font-weight: 600;
color: #1a1a1a;
}
/* ボタンエリア */
.job-archive-card__actions {
display: flex;
gap: 15px;
justify-content: flex-end;
}
.job-archive-card__btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 25px;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.05em;
text-decoration: none;
transition: all 0.3s ease;
box-sizing: border-box;
}
/* 詳細を見るボタン（二等） */
.job-archive-card__btn.--secondary {
background-color: transparent;
color: #1a1a1a;
border: 1px solid #1a1a1a;
}
.job-archive-card__btn.--secondary:hover {
background-color: #1a1a1a;
color: #ffffff;
}
/* 応募するボタン（一等） */
.job-archive-card__btn.--primary {
background-color: #aa9472;
color: #ffffff;
border: 1px solid #aa9472;
}
.job-archive-card__btn.--primary:hover {
background-color: #8e7a5c;
border-color: #8e7a5c;
}
/* ==========================================
* スマホ用（画面幅768px以下）の求人カード調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. カードリストの間隔調整 */
.job-archive-list {
gap: 20px; /* カード同士の間隔を少し詰めてコンパクトに */
margin-bottom: 40px;
}
/* 2. カード本体を横並びから「縦並び」に変更 */
.job-archive-card {
flex-direction: column;
}
/* スマホでは誤タップ防止のためホバー時の浮き上がり（translateY）を無効化 */
.job-archive-card:hover {
transform: none;
box-shadow: 0 4px 15px rgba(170, 148, 114, 0.05); /* 軽い影のみ残す */
}
/* 3. サムネイルエリア（画像）を上部に全幅配置 */
.job-archive-card__thumb {
width: 100%;
min-width: 100%;
height: 200px; /* スマホで縦長になりすぎない絶妙な高さに固定 */
}
/* 職種タグの位置を微調整 */
.job-category-tag {
top: 10px;
left: 10px;
padding: 3px 10px;
font-size: 0.7rem;
}
/* 4. カードボディ（テキストエリア）の余白調整 */
.job-archive-card__body {
padding: 20px; /* PC版の30pxから20pxに縮めてテキストの表示幅を確保 */
}
/* 雇用形態バッジ */
.job-archive-card__badges {
margin-bottom: 10px;
}
/* 求人タイトル */
.job-archive-card__title {
font-size: 1.15rem; /* スマホで読みやすいスマートな大きさに調整 */
margin-bottom: 15px;
}
/* 5. メタ情報（勤務地・給与）エリアの調整 */
.job-archive-card__meta {
padding: 12px 0;
margin-bottom: 20px;
}
.job-archive-card__meta-item {
font-size: 0.8rem; /* 文字をわずかにスマートに */
}
.job-archive-card__meta-label {
width: 70px; /* ラベルの幅を少し縮めて、右側のテキスト幅を広く使えるように */
padding-right: 10px; /* テキストとの隙間を確保 */
}
/* 6. ボタンエリアを横幅いっぱいに「2等分並び」にする */
.job-archive-card__actions {
display: flex;
gap: 10px; /* ボタン同士の隙間を少し詰める */
justify-content: space-between; /* 左右に綺麗に引き伸ばす */
width: 100%;
}
.job-archive-card__btn {
flex: 1; /* 2つのボタンが均等（50%ずつ）の幅になるように設定 */
height: 42px; /* 高さをほんの少し引き締め */
padding: 0 10px; /* 文字が枠からはみ出さないよう内側を調整 */
font-size: 0.8rem;
text-align: center;
}
}
/* --------------------------------------------------------------------------
結果なし表示
-------------------------------------------------------------------------- */
.no-results {
text-align: center;
padding: 60px 20px;
background-color: #ffffff;
border: 1px solid #eae6e1;
}
.no-results p {
font-size: 0.95rem;
color: #8c857b;
margin-bottom: 25px;
}
.no-results .back-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 30px;
background-color: #1a1a1a;
color: #ffffff;
text-decoration: none;
font-size: 0.85rem;
letter-spacing: 0.05em;
transition: background-color 0.3s ease;
}
.no-results .back-btn:hover {
background-color: #aa9472;
}
/* ==========================================
* スマホ用（画面幅768px以下）の結果なし表示調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. 全体コンテナの上下余白を引き締め */
.no-results {
/* スマホの画面の縦幅に合わせて、上下のパディングを60pxから40pxへスマートに調整 */
padding: 40px 15px;
}
/* 2. テキストの調整 */
.no-results p {
font-size: 0.9rem; /* スマホ向けにフォントサイズをわずかにスマートに */
line-height: 1.6; /* 2行になっても美しく読めるように調整 */
margin-bottom: 20px; /* ボタンとの隙間を少し引き締め */
}
/* 3. 「戻るボタン」をスマホ用に最適化 */
.no-results .back-btn {
/* ボタンを横幅いっぱいに広げて、片手操作でも劇的にタップしやすくする */
display: flex;
width: 100%;
max-width: 280px; /* 広がりすぎないようにスマホでの黄金比である280pxに制限 */
margin: 0 auto; /* 横幅を制限した分、しっかり中央寄せ */
height: 46px; /* タップ領域（高さ）を44pxから46pxにわずかに広げて押しやすさ向上 */
font-size: 0.9rem; /* ボタン内の文字の視認性をアップ */
padding: 0 15px; /* 横幅いっぱいに広がるため、左右パディングはコンパクトに */
}
}
/* --------------------------------------------------------------------------
ページネーション
-------------------------------------------------------------------------- */
.page-navi {
max-width: 700px; /* ★カードの幅と合わせる */
margin: 50px auto 50px; /* ★上:50px, 左右:auto(中央寄せ), 下:0 */
text-align: center; /* 万が一のためのインライン要素の中央寄せ */
}
.page-navi .pagination {
display: flex;
justify-content: center;
gap: 8px;
list-style: none;
padding: 0;
}
.page-navi .nav-links {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
/* WordPressのデフォルト出力に対応 */
.page-navi .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: #1a1a1a;
text-decoration: none;
font-size: 0.9rem;
border: 1px solid #eae6e1;
background-color: #ffffff;
transition: all 0.3s ease;
}
.page-navi .page-numbers:hover:not(.current) {
border-color: #aa9472;
color: #aa9472;
}
.page-navi .page-numbers.current {
background-color: #aa9472;
border-color: #aa9472;
color: #ffffff;
font-weight: 600;
}
/* ==========================================
* スマホ用（画面幅768px以下）のページネーション調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. 全体コンテナの余白調整 */
.page-navi {
/* 上下の余白を50pxから35pxに引き締め、スマホ画面での間伸び感を解消 */
margin: 35px auto;
/* 画面幅ギリギリまでボタンが並んだ時のために左右に最低限の余白を確保 */
padding: 0 15px;
box-sizing: border-box;
}
/* 2. ボタン同士の間隔（隙間）をスマホ向けにタイトに */
.page-navi .pagination,
.page-navi .nav-links {
gap: 5px; /* PC版の8px〜10pxから「5px」に縮小し、横ハミ出しを徹底ガード */
}
/* 3. 各ページ番号（ボタン）のサイズを黄金比に微調整 */
.page-navi .page-numbers {
/* 40pxから「横幅36px / 高さ38px」のスマートな微縦長型にシフト */
/* これにより、ページ数が増えてもスマホ画面内に綺麗に1列に収まります */
width: 36px;
height: 38px;
font-size: 0.85rem; /* 文字サイズもわずかにスケールダウンして全体のバランスを最適化 */
}
/* 4. スマホ操作時のタップバグ防止 */
/* スマホにはホバー（マウスを乗せる）概念がなく、タップした瞬間にhoverが誤作動して
リンク移動後もボタンに色が残り続けることがあるため、スマホでは hover を無効化してシンプルに */
.page-navi .page-numbers:hover:not(.current) {
border-color: #eae6e1;
color: #1a1a1a;
}
}
/* --------------------------------------------------------------------------
下部フローティング検索窓
========================================================================== */
.job-floating-search-css {
position: fixed !important;
bottom: 30px !important;
right: 40px !important;
z-index: 9999 !important; /* 他の要素の下に隠れないように大きめに */
width: calc(100% - 80px) !important;
max-width: 460px !important;
}
/* 外枠（緑の背景） */
/* 通常時（丸いボタンのとき） */
.floating-search-inner {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background-color: #042e1a !important;
padding: 8px 20px !important;
border-radius: 100px !important;
}
/* ★ 新設：丸いボタンのときだけ、中身のボタン要素を左へ引っ張る */
.floating-search-inner .floating-search-icon-btn {
/* 透明な入力欄のせいで右に寄っている分（約15px〜20px程度）を、左側に強制移動させます */
margin-left: -50px !important;
}
/* ★ 開いた状態（ホバー時や入力中）になったら、左への引っ張りを完全にリセットする */
.job-floating-search-css:hover .floating-search-inner,
.job-floating-search-css:focus-within .floating-search-inner,
.job-floating-search-css[data-open="1"] .floating-search-inner {
justify-content: flex-start !important;
}
/* 開いた時は、ボタンの引っ張りを 0 に戻して元の正しい位置にする */
.job-floating-search-css:hover .floating-search-icon-btn,
.job-floating-search-css:focus-within .floating-search-icon-btn,
.job-floating-search-css[data-open="1"] .floating-search-icon-btn {
margin-left: 0 !important;
}
/* 入力欄（白いボックス） */
.floating-search-input {
flex-grow: 1 !important;
width: 100% !important;
background-color: #ffffff !important; /* パキッとした白 */
border: none !important;
padding: 12px 20px !important;
color: #333333 !important;
font-size: 0.95rem !important;
outline: none !important;
border-radius: 100px !important; /* 入力欄の左側もカプセル型に強制 */
box-shadow: none !important; /* テーマの余計な影がついている場合は消去 */
}
.floating-search-input::placeholder {
color: #999999 !important;
}
/* ボタン（文字とアイコン） */
.floating-search-icon-btn {
background: transparent !important; /* 四角い背景を強制消去 */
border: none !important;
color: #ffffff !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
padding: 0 12px 0 20px !important;
cursor: pointer !important;
transition: opacity 0.3s ease !important;
box-shadow: none !important;
}
.floating-search-icon-btn:hover {
opacity: 0.8 !important;
}
.floating-search-icon-btn svg {
stroke: #ffffff !important;
width: 22px !important;
height: 22px !important;
}
.floating-search-icon-btn .btn-label {
font-size: 0.65rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
color: #ffffff !important;
}
.job-floating-search-css {
position: fixed;
right: 30px;
bottom: 110px;
z-index: 9998;
}
/* フォーム全体の器 */
.floating-search-inner {
display: flex;
align-items: center;
justify-content: flex-end;
background: #0c4728;
border-radius: 35px;
padding: 5px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
transition: max-width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
overflow: hidden;
max-width: 60px;
}
/* 入力欄 */
.floating-search-input {
width: 0;
opacity: 0;
border: none;
background: #ffffff;
color: #333;
padding: 0;
outline: none;
font-size: 14px;
height: 50px;
border-radius: 25px;
box-sizing: border-box;
transition: width 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
}
/* プレースホルダーの色 */
.floating-search-input::placeholder {
color: #999;
}
/* アイコンボタン */
.floating-search-icon-btn {
width: 60px;
height: 50px;
background: transparent;
border: none;
outline: none;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
padding: 0;
transition: transform 0.3s ease;
}
.floating-search-icon-btn:hover {
transform: scale(1.1);
}
.btn-label {
font-size: 8px;
font-weight: bold;
margin-top: 2px;
letter-spacing: 0.05em;
line-height: 1;
}
/* ホバー・フォーカス時の展開 */
.job-floating-search-css:hover .floating-search-inner,
.job-floating-search-css:focus-within .floating-search-inner {
max-width: 400px;
background: #08331d;
}
.job-floating-search-css:hover .floating-search-input,
.job-floating-search-css:focus-within .floating-search-input {
width: 300px;
opacity: 1;
padding: 0 20px;
}
/* ==========================================
* スマホ用（画面幅768px以下）の下部フローティング検索窓調整
* ========================================== */
/* スマホ幅では検索窓を完全に非表示にする */
@media screen and (max-width: 768px) {
.job-floating-search-css {
display: none !important;
}
}
/* =========================
求人詳細
========================= */
.u-job-details {
max-width: 1500px;
margin: 0 auto;
padding: 120px 40px;
}
.u-job-header {
border-left: 2px solid #b8860b; /* アクセントのゴールド */
padding-left: 20px;
margin-bottom: 50px;
}
.job-sub-label {
font-size: 12px;
letter-spacing: 0.3em;
color: #b8860b;
}
.u-job-main-title {
font-size: 28px;
font-weight: bold;
color: #333;
}
/* --- タイトル下の職種名 --- */
.u-job-title-occupation {
font-size: 14px;
color: #666;
letter-spacing: 0.05em;
display: flex;
align-items: center;
margin-top: -15px; /* ★マイナス値で上の「募集職種」に近づける */
}
.occupation-label {
font-weight: bold;
margin-right: 5px;
}
.occupation-name {
border-bottom: 1px solid #ccc; /* 軽く線を引いて視認性をアップ */
}
/* フレックス配置 */
/* 親コンテナ：左右の隙間を調整して余裕を作る */
.job-flex-container {
display: flex;
justify-content: center; /* コンテンツ全体を中央寄せ */
gap: 5%; /* %で指定することで画面幅に応じた余白に */
align-items: flex-start;
width: 100%;
max-width: 1400px; /* 窮屈さを消すために最大幅を少し広げる */
margin: 0 auto;
}
/* 左側エリア：求人情報（最大幅を広げてゆとりを出す） */
.job-main-info {
flex: 1; /* 余白をすべて埋める */
min-width: 0;
max-width: 850px; /* ここを調整して「窮屈さ」を制御 */
}
/* 右側エリア：写真（幅を300px〜350pxで固定して安定させる） */
.job-side-assets {
flex: 0 0 350px; /* 右側はこれ以上の広さを固定 */
max-width: 350px;
min-width: 0;
}
/* 写真自体が枠内に収まるように */
.job-side-assets img {
width: 100%;
height: auto;
display: block;
}
/* 緑色のパネル：親幅に収め、はみ出しをカット */
.job-summary-panel {
background: #0c4728;
padding: 30px;
margin-bottom: 20px;
color: #fff;
box-sizing: border-box;
width: 100%; /* 親(job-side-assets)の幅に合わせる */
min-width: 0; /* 文字でパネルが広がらないようにする */
}
.job-hero-eyebrow {
font-size: 13px;
color: #fff;
margin-bottom: 0; /* 下側の余白をゼロに */
}
.job-hero-title {
font-size: 35px;
margin-bottom: 20px;
margin-top: -2px; /* ★マイナス値で上の「募集職種」に近づける */
line-height: 1.2; /* ★行間を詰めるとさらに密度が上がって目立ちます */
font-weight: bold;
word-wrap: break-word; /* 長い単語でも折り返す */
word-break: break-all; /* 強制的に折り返す */
overflow-wrap: break-word; /* モダンブラウザ向けの安全な折り返し */
max-width: 100%; /* 親要素の幅を超えない */
}
.job-badge {
display: inline-block;
padding: 4px 12px;
font-size: 12px;
border: 1px solid #ccc;
margin-right: 0; /* gapで管理するため0に */
margin-bottom: 0; /* gapで管理するため0に */
color: #fff;
white-space: nowrap; /* タグ内の文字が切れないようにする */
}
/* 1. タグエリアを折り返し可能にする */
.job-summary-panel .job-badges-wrapper {
display: flex;
flex-wrap: wrap; /* ★ここが重要：タグがはみ出たら自動的に次の行へ送る */
gap: 8px; /* タグ同士の隙間（marginを置き換えると綺麗です） */
margin-top: 15px;
}
/* 各セクション */
.u-job-info-title2 {
font-size: 20px;
border-bottom: 1px solid #333;
padding-bottom: 10px;
margin-bottom: 30px;
}
/* MESSAGEの見出し部分 */
.job-message-box .u-job-info-title2 {
margin-top: 0; /* デフォルトの余白をリセット */
padding-top: -30px; /* ★ここで「右側のライン」と合うように微調整してください */
line-height: 1; /* 行間を固定して計算しやすくする */
border-bottom: 1px solid #333; /* 下のライン */
display: block;
}
.job-section-box {
margin-bottom: 40px;
}
.job-section-heading {
font-size: 16px;
color: #b8860b;
margin-bottom: 15px;
font-weight: bold;
}
.job-row, .job-sub-row {
display: flex;
border-bottom: 1px solid #c4c4c4;
padding: 12px 0;
}
.job-row-label, .job-sub-label {
width: 140px;
font-size: 14px;
color: #888;
flex-shrink: 0;
}
.job-row-value, .job-sub-value {
font-size: 15px;
line-height: 1.6;
}
.job-salary-main {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
/* 中央のエントリエリア全体 */
.job-center-entry-area {
text-align: center;
margin: 80px auto;
padding: 60px 40px;
background: #f9f9f9; /* 軽くグレーの背景を敷いてエリアを強調 */
border-radius: 8px;
max-width: 800px;
}
/* ボタンの上のリード文 */
.entry-lead {
font-size: 18px;
font-weight: bold;
color: #0c4728;
margin-bottom: 30px;
letter-spacing: 0.1em;
}
/* プレミアム・ワイドボタン */
.job-premium-entry-btn {
display: inline-block;
text-decoration: none !important;
width: 100%;
max-width: 500px; /* 横に長くして存在感を出す */
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.job-premium-entry-btn .btn-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
background: #0c4728;
color: #fff;
padding: 25px 40px;
border-radius: 2px; /* カッチリした高級感 */
box-shadow: 0 10px 30px rgba(12, 71, 40, 0.2);
position: relative;
overflow: hidden;
border: 1px solid #0c4728;
}
/* ボタン内のテキスト */
.btn-text {
font-size: 18px;
font-weight: bold;
letter-spacing: 0.2em;
}
/* ホバー時の演出：背景を白にして文字を緑にする（リッチな反転） */
.job-premium-entry-btn:hover {
transform: translateY(-5px);
}
.job-premium-entry-btn:hover .btn-inner {
background: #fff;
color: #0c4728;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.job-premium-entry-btn:hover .btn-arrow {
transform: translateX(10px);
}
/* ==========================================
* スマホ用（画面幅768px以下）の求人詳細調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. 全体コンテナの余白を引き締め */
.u-job-details {
/* PC版の120px/40pxから、スマホに最適な上下60px・左右20pxのパディングへ縮小 */
padding: 60px 20px;
}
/* 2. 求人ヘッダーの調整 */
.u-job-header {
margin-bottom: 35px; /* 下との隙間を詰めて間伸びを解消 */
padding-left: 15px; /* 線の横の余白をわずかにコンパクトに */
}
.u-job-main-title {
font-size: 22px; /* 28pxから22pxへ。スマホでも2行以内に美しく収まるサイズ */
line-height: 1.4;
}
/* タイトル下の職種名 */
.u-job-title-occupation {
margin-top: -5px; /* スマホの文字サイズに合わせてマイナスマージンを優しく再調整 */
font-size: 13px;
}
/* 3. 横並び（2カラム）を完全な「1カラム（縦並び）」へ解放 */
.job-flex-container {
flex-direction: column;
gap: 40px; /* 縦並びになった際の間隔を調整 */
}
.job-main-info {
width: 100%;
}
/* 4. ダークグリーンのサマリーパネルのスマホ最適化 */
.job-summary-panel {
padding: 25px 20px; /* スマホ液晶に合わせて左右の余白をスマートに */
margin-bottom: 30px;
}
.job-hero-title {
/* 超重要：35pxの巨大文字をスマホ用の「24px」へスケールダウン */
/* これにより、単語の途中で不格好に一文字ずつ改行されるバグを防ぎます */
font-size: 24px;
margin-top: 5px; /* 上のアイブロウとの距離を調整 */
margin-bottom: 15px;
}
/* 5. 募集要項テーブル（.job-row）の縦並び化 */
/* スマホでの最大の崩れ原因である、ラベル（左）と中身（右）の横並びを「縦」に変形させます */
.job-row, .job-sub-row {
flex-direction: column;
align-items: flex-start;
padding: 15px 0; /* タップ操作の視認性のために上下の隙間を少し広げる */
}
.job-row-label, .job-sub-label {
width: 100% !important; /* 横幅固定（140px）を解除し、100%全幅に */
margin-bottom: 6px; /* 下の中身テキストとの間に上品な隙間を作る */
font-size: 13px; /* ラベルを一段階小さくして、情報の主従関係を明確化 */
}
.job-row-value, .job-sub-value {
width: 100%;
font-size: 14px; /* 本文をスマホで最も読みやすい14pxへ */
}
.job-salary-main {
font-size: 18px; /* 給与の目立つ文字も18pxで上品に強調 */
margin-bottom: 15px;
}
/* 各セクションの見出し */
.u-job-info-title2 {
font-size: 18px; /* 20pxから18pxへ微調整 */
margin-bottom: 25px;
}
/* 6. 中央エントリエリアの調整 */
.job-center-entry-area {
margin: 50px auto; /* 上下マージンを80pxから50pxに引き締め */
padding: 40px 20px; /* 左右パディングを40pxから20pxに縮めて画面を広く使う */
}
.entry-lead {
font-size: 15px; /* 18pxから15pxへ。スマホでも1行でパキッと見せる */
margin-bottom: 25px;
}
/* 7. プレミアムエントリボタンのスマホ最適化 */
.job-premium-entry-btn {
max-width: 100%; /* スマホの画面幅いっぱいにフィットさせる */
}
.job-premium-entry-btn .btn-inner {
padding: 18px 20px; /* PC版の25px/40pxから、スマホの手のひらに収まる厚みにスリム化 */
gap: 12px; /* テキストと矢印の間隔を少しタイトに */
}
.btn-text {
font-size: 16px; /* 18pxから16pxへ引き締め、文字盤のハミ出しを完全防止 */
letter-spacing: 0.15em; /* 横幅に合わせてレタースペースを僅かにコンパクトに */
}
/* スマホでのホバー誤作動（タップした後にボタンが浮き上がったままになる現象）を防ぐ */
.job-premium-entry-btn:hover {
transform: none !important;
}
}
/* ==========================================
コラム一覧ページ
========================================== */
/* 上部見出しエリア */
.column-archive-intro {
text-align: center;
padding: 60px 20px;
background-color: #f4f7f5; /* ほんのり緑がかった上品な背景 */
}
.column-archive-intro__sub {
font-size: 13px;
letter-spacing: 0.15em;
color: #0c4728; /* 深緑 */
font-weight: bold;
margin-bottom: 10px;
}
.column-archive-intro__title {
font-size: 28px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
}
.column-archive-intro__text {
font-size: 14px;
color: #666;
}
/* メインコンテナ */
.column-archive-main {
max-width: 1100px;
margin: 0 auto;
padding: 80px 20px 120px; /* 下部フッターとの余白を120px確保 */
}
/* グリッドレイアウト（2カラム） */
.column-archive-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px 30px; /* 縦横の隙間 */
}
/* 記事カード本体 */
.column-archive-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e5e5e5;
text-decoration: none;
color: #333;
transition: all 0.3s ease;
border-radius: 2px;
overflow: hidden;
}
/* カードホバー時の上品なエフェクト */
.column-archive-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(12, 71, 40, 0.08);
border-color: #0c4728;
}
/* アイキャッチ画像エリア */
.column-archive-card__img {
width: 100%;
aspect-ratio: 16 / 9; /* 黄金比の横長に統一 */
overflow: hidden;
background: #f0f0f0;
}
.column-archive-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.column-archive-card:hover .column-archive-card__img img {
transform: scale(1.03); /* ほんの少し画像が拡大する演出 */
}
/* テキストコンテンツ部分 */
.column-archive-card__body {
padding: 25px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
/* 日付 */
.column-archive-card__date {
font-size: 13px;
color: #999;
margin-bottom: 10px;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
/* 記事タイトル */
.column-archive-card__title {
font-size: 18px;
font-weight: bold;
color: #333;
line-height: 1.5;
margin-bottom: 12px;
/* 3行以上になったら3点リーダーにする対策 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.column-archive-card:hover .column-archive-card__title {
color: #0c4728; /* ホバー時にタイトルを深緑に */
}
/* 抜粋テキスト */
.column-archive-card__text {
font-size: 14px;
color: #666;
line-height: 1.6;
margin-bottom: 20px;
/* 2行で収める */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 右下の「記事を読む」リンクテキスト */
.column-archive-card__more {
margin-top: auto; /* 一番下に固定 */
align-self: flex-start;
font-size: 13px;
font-weight: bold;
color: #0c4728;
position: relative;
padding-right: 15px;
}
/* 矢印（＞）を模したアクセント */
.column-archive-card__more::after {
content: "→";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s;
}
.column-archive-card:hover .column-archive-card__more::after {
transform: translateY(-50%) translateX(4px); /* ホバー時に矢印が少し右に動く */
}
/* 記事がないときのメッセージ */
.column-archive-empty {
grid-column: 1 / -1;
text-align: center;
color: #999;
padding: 60px 0;
}
/* wp-pagenavi（ページネーション）の上書き設定 */
.column-archive-navi {
margin-top: 60px;
text-align: center;
}
.column-archive-navi .wp-pagenavi {
display: inline-flex;
gap: 8px;
}
/* wp-pagenaviのデザイン微調整（テーマに依存するため、基本形だけ） */
.column-archive-navi .wp-pagenavi a,
.column-archive-navi .wp-pagenavi span {
padding: 8px 14px !important;
border: 1px solid #ddd !important;
color: #555 !important;
text-decoration: none;
font-size: 14px;
}
.column-archive-navi .wp-pagenavi span.current {
background-color: #0c4728 !important;
border-color: #0c4728 !important;
color: #fff !important;
}
/* ==========================================
* スマホ用（画面幅768px以下）のコラム一覧調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. 上部見出し（イントロ）エリアの調整 */
.column-archive-intro {
/* パディングを上下60pxから「40px」に縮小し、スクロールの手間を減らす */
padding: 40px 15px;
}
.column-archive-intro__title {
font-size: 22px; /* 28pxから22pxへ。スマホでも1〜2行で綺麗に収まるサイズ */
margin-bottom: 10px;
}
.column-archive-intro__text {
font-size: 13px; /* テキストを一回りスマートにして読みやすく */
line-height: 1.5;
}
/* 2. メインコンテナの余白引き締め */
.column-archive-main {
/* PC版の「上80px・下120px」を、スマホに適した「上40px・下60px」へ大幅スリム化 */
padding: 40px 15px 60px;
}
/* 3. グリッドレイアウトを「2列」から「1列」へ完全開放 */
.column-archive-grid {
grid-template-columns: 1fr; /* 1カラム化 */
gap: 30px; /* カード同士の縦の隙間を30pxに統一してスマートに */
}
/* スマホでの誤タップ時の不自然な浮き上がり（translateY）を無効化 */
.column-archive-card:hover {
transform: none !important;
box-shadow: 0 4px 15px rgba(12, 71, 40, 0.05) !important; /* 軽い影のみ残す */
}
/* 4. 記事カード内（テキストエリア）の余白調整 */
.column-archive-card__body {
padding: 18px; /* 25pxから18pxに縮めて、スマホ画面の横幅を有効活用 */
}
/* 記事タイトル */
.column-archive-card__title {
font-size: 16px; /* 18pxから16pxへ引き締め */
margin-bottom: 8px;
-webkit-line-clamp: 2; /* スマホでもタイトルはしっかり2行を死守 */
}
/* 抜粋テキスト */
.column-archive-card__text {
font-size: 13px; /* 14pxから13pxへ */
margin-bottom: 15px;
line-height: 1.5;
-webkit-line-clamp: 2; /* 2行制限を維持し、1カードが縦長になりすぎるのを防ぐ */
}
/* 5. ページネーション（wp-pagenavi）のハミ出し防止調整 */
.column-archive-navi {
margin-top: 40px; /* 位置を少し上に詰める */
}
.column-archive-navi .wp-pagenavi {
gap: 4px; /* ボタン同士の隙間を少し詰めて、横はみ出しをガード */
flex-wrap: wrap; /* 万が一、ページ数が多すぎても綺麗に折り返すように安全弁を設置 */
justify-content: center;
}
.column-archive-navi .wp-pagenavi a,
.column-archive-navi .wp-pagenavi span {
/* タップ領域を考慮しつつ、横幅に収まるようパディングを「上下6px・左右10px」に微調整 */
padding: 6px 10px !important;
font-size: 13px;
}
}
/* ==========================================
コラム記事 デザイン
========================================== */
/* 全体を囲むコンテナ */
.column-page-wrap {
max-width: 800px;
margin: 60px auto 120px; /* 上下の余白を少しゆったりに */
padding: 0 30px; /* ★左右の余白を 25px → 30px に強化 */
color: #333;
line-height: 1.9;
font-size: 16px;
box-sizing: border-box; /* 画面からはみ出すのを防ぐ */
}
/* 「お役立ち情報」の詳細ページ（single-useful_information）の時だけ、自動出力のタイトルを消す */
.single-useful_information main h1:first-of-type,
.single-useful_information .main-content h1:first-of-type {
display: none !important;
}
/* WordPressが自動出力するタイトル（左上の文字）の位置を綺麗に整える */
.main-content h1,
.entry-title,
main > h1 {
max-width: 800px;
margin: 120px auto 30px !important; /* 上の数値を120pxにしてヘッダーの下に押し下げる */
padding: 0 30px 15px;
font-size: 28px;
color: #0c4728; /* シックな深緑に変更 */
font-weight: bold;
line-height: 1.5;
border-bottom: 2px solid #0c4728; /* 高級感のある下線 */
}
/* 導入文（リード文） */
.column-page-lead {
font-size: 17px;
color: #555;
background-color: #f4f7f5; /* ほんのり緑がかった上品な背景 */
padding: 25px;
border-left: 4px solid #0c4728; /* 左側にアクセント線 */
margin-bottom: 50px;
}
/* 各セクションごとの余白 */
.column-page-section {
margin-bottom: 60px;
}
/* 中見出し（H2） */
.column-page-section h2 {
font-size: 22px;
color: #0c4728;
font-weight: bold;
margin: 40px 0 20px;
padding-left: 15px;
position: relative;
}
/* H2の左側の縦線（お問い合わせカードとお揃いのデザイン） */
.column-page-section h2::before {
content: "";
position: absolute;
left: 0;
top: 0.15em;
width: 4px;
height: 1.2em;
background: #0c4728;
}
/* 小見出し（H3） */
.column-page-section h3 {
font-size: 18px;
color: #333;
font-weight: bold;
margin: 30px 0 15px;
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
}
/* 本文の段落 */
.column-page-section p {
margin-bottom: 20px;
}
/* 記事内の補足・箇条書き用ボックス */
.column-page-infobox {
background: #ffffff;
border: 1px solid #ddd; /* 繊細なグレーの枠線 */
padding: 25px;
margin: 25px 0;
border-radius: 2px;
}
.column-page-infobox p {
margin-bottom: 0; /* ボックス内は余白すっきり */
}
/* ボックス内の箇条書きリスト */
.column-page-list {
list-style: none; /* 標準の・を消す */
padding: 0;
margin: 0;
}
.column-page-list li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
}
.column-page-list li:last-child {
margin-bottom: 0;
}
/* 箇条書きの先頭のドットを深緑に */
.column-page-list li::before {
content: "■";
position: absolute;
left: 0;
color: #0c4728;
font-size: 11px;
top: 1px;
}
/* 下部CTAエリア（ボタンの周り） */
.column-page-action {
text-align: center;
margin-top: 60px;
padding-top: 40px;
border-top: 1px dashed #ccc;
}
/* 「求人を探す」ボタン */
.column-page-btn {
display: inline-block;
background: #0c4728;
color: #fff !important; /* テーマのリンク色に負けないように */
text-decoration: none;
padding: 18px 60px;
font-size: 16px;
font-weight: bold;
border-radius: 2px;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(12, 71, 40, 0.15);
}
/* ボタンホバー時 */
.column-page-btn:hover {
background: #08331d;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(12, 71, 40, 0.25);
}
/* ==========================================
* スマホ用（画面幅768px以下）のコラム記事調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. 全体を囲むコンテナの余白調整 */
.column-page-wrap {
/* 上下の余白を「上40px・下60px」へ。スマホの画面比率に合わせて間伸びを解消 */
margin: 40px auto 60px;
padding: 0 20px; /* 左右の余白を30pxから20pxにスリム化し、本文の表示幅を最大限に確保 */
font-size: 15px; /* スマホで長文を読んでも目が疲れにくい15pxへ微調整 */
line-height: 1.8; /* 縦長画面に合わせて行間をわずかにタイトにして読みやすく */
}
/* 2. WordPress自動出力タイトルのスマホ最適化 */
.main-content h1,
.entry-title,
main > h1 {
/* 超重要：上の巨大な余白（120px）を、スマホヘッダーの下にジャストで収まる「40px」にリセット */
margin: 40px auto 20px !important;
padding: 0 20px 12px; /* 本文とラインを揃えるために左右を20pxに調整 */
font-size: 20px; /* 28pxの特大文字を20pxにスケールダウンし、3行や4行に激しく割れるのを防ぐ */
line-height: 1.4;
}
/* 3. 導入文（リード文）のパディング調整 */
.column-page-lead {
font-size: 15px;
padding: 18px; /* パディングを25pxから18pxに絞り、文字が入る横幅を広く使えるように変更 */
margin-bottom: 35px; /* 下のセクションとの隙間を引き締め */
}
/* 各セクションごとの余白 */
.column-page-section {
margin-bottom: 40px;
}
/* 4. 中見出し（H2）の微調整 */
.column-page-section h2 {
font-size: 18px; /* 22pxから18pxへ、スマホの画面に馴染むサイズに */
margin: 30px 0 15px;
padding-left: 12px; /* 縦線の横の隙間をわずかにタイトに */
}
/* H2の左側の縦線（位置ズレ補正） */
.column-page-section h2::before {
left: 0;
top: 0.2em; /* 文字サイズが変わったのに合わせ、縦線の位置をジャスト中央に微調整 */
width: 3px; /* 線の太さを4pxから3pxにしてシャープさをキープ */
}
/* 小見出し（H3） */
.column-page-section h3 {
font-size: 16px; /* 18pxから16pxへ微調整 */
margin: 25px 0 12px;
}
/* 本文の段落 */
.column-page-section p {
margin-bottom: 15px; /* 段落ごとの隙間を少しコンパクトに */
}
/* 5. 記事内の補足・箇条書き用ボックスの調整 */
.column-page-infobox {
padding: 18px; /* 25pxから18pxに縮めて、中の箇条書きのテキスト幅を広く確保 */
margin: 20px 0;
}
.column-page-list li {
font-size: 14px; /* 箇条書きは一段階スマートにして情報の強弱をつける */
padding-left: 18px;
}
/* 箇条書きの先頭ドット（■）の位置微調整 */
.column-page-list li::before {
font-size: 9px; /* 文字サイズ縮小に合わせて■も少しミニマルに */
top: 2px; /* スマホ液晶での1ピクセルのズレを美しく中央に補正 */
}
/* 6. 下部CTAエリアの調整 */
.column-page-action {
margin-top: 40px;
padding-top: 30px;
}
/* 「求人を探す」ボタンを完全なモバイルファーストに */
.column-page-btn {
display: flex; /* inline-blockからflexに変更して、横幅いっぱいに広げやすくする */
justify-content: center;
align-items: center;
width: 100%; /* スマホ画面の横幅いっぱいにフィットさせる */
max-width: 340px; /* 画面の大きなスマホでも間伸びしないよう、美しい限界値を設定 */
margin: 0 auto; /* 横幅を絞った分、中央寄せ */
padding: 15px 20px; /* 左右のパディングを気にせず、高さ（押しやすさ）を重視 */
font-size: 15px;
box-sizing: border-box;
}
/* スマホでのホバー誤作動（タップした後にボタンが浮き上がったままになる現象）を防止 */
.column-page-btn:hover {
transform: none !important;
}
}
/* ==========================================
Q&Aページ
========================================== */
/* 上部ヒーローエリア */
.qa-page-hero {
text-align: center;
padding: 60px 20px;
background-color: #f4f7f5; /* ほんのり緑がかった上品な背景 */
}
.qa-page-hero__sub {
font-size: 13px;
letter-spacing: 0.15em;
color: #0c4728; /* 深緑 */
font-weight: bold;
margin-bottom: 10px;
}
.qa-page-hero__title {
font-size: 28px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
}
.qa-page-hero__text {
font-size: 14px;
color: #666;
}
/* メインコンテナ */
.qa-page-container {
max-width: 850px;
margin: 0 auto;
padding: 60px 25px 120px; /* 下部フッターとの隙間を120px確保 */
box-sizing: border-box;
}
/* 各QAの塊 */
.qa-page-item {
background: #fff;
border: 1px solid #e5e5e5;
margin-bottom: 18px;
border-radius: 2px;
transition: border-color 0.3s;
}
.qa-page-item:hover {
border-color: #0c4728; /* ホバーすると枠線が深緑に */
}
/* 質問部分（ボタン） */
.qa-page-question {
width: 100%;
display: flex;
align-items: center;
text-align: left;
background: none;
border: none;
outline: none;
padding: 22px 25px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
color: #333;
position: relative;
}
/* 「Q」の文字 */
.qa-page-q {
font-size: 22px;
color: #0c4728; /* ブランドカラーの深緑 */
font-family: 'Times New Roman', serif;
font-weight: bold;
margin-right: 18px;
line-height: 1;
}
/* 質問のテキスト */
.qa-page-text {
flex: 1;
padding-right: 30px; /* アイコンと被らないための余白 */
line-height: 1.5;
}
/* 開閉のプラス・マイナスアイコン（CSSで綺麗に描画） */
.qa-page-icon {
position: absolute;
right: 25px;
width: 14px;
height: 14px;
}
.qa-page-icon::before,
.qa-page-icon::after {
content: "";
position: absolute;
background-color: #999;
transition: transform 0.3s ease, background-color 0.3s;
}
/* 横線 */
.qa-page-icon::before {
top: 6px;
left: 0;
width: 14px;
height: 2px;
}
/* 縦線 */
.qa-page-icon::after {
top: 0;
left: 6px;
width: 2px;
height: 14px;
}
/* ホバー時にアイコンの色を濃く */
.qa-page-question:hover .qa-page-icon::before,
.qa-page-question:hover .qa-page-icon::after {
background-color: #0c4728;
}
/* アコーディオンが開いたとき（is-open）のアイコン変化 */
.qa-page-item.is-open .qa-page-icon::after {
transform: rotate(90deg);
opacity: 0; /* 縦線を消してマイナス（ー）にする */
}
.qa-page-item.is-open .qa-page-icon::before {
background-color: #0c4728;
}
/* 回答部分のラッパー（アニメーション用） */
.qa-page-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out; /* ヌルッと開閉する演出 */
background-color: #fcfdfc; /* 回答エリアはうっすら上品な背景色に */
}
/* 回答の内側（余白調整） */
.qa-page-answer-inner {
padding: 0 25px 25px 25px;
display: flex;
align-items: flex-start;
}
/* 「A」の文字 */
.qa-page-a {
font-size: 22px;
color: #bf8233; /* 落ち着いたゴールド・アンバー系でアクセント */
font-family: 'Times New Roman', serif;
font-weight: bold;
margin-right: 18px;
line-height: 1;
}
/* 回答のテキスト */
.qa-page-answer-text {
flex: 1;
font-size: 15px;
color: #555;
line-height: 1.7;
margin: 0;
}
/* 下部コンタクトエリア */
.qa-page-contact {
text-align: center;
margin-top: 60px;
padding-top: 40px;
border-top: 1px dashed #ccc;
}
.qa-page-contact__text {
font-size: 15px;
color: #555;
margin-bottom: 20px;
}
/* お問い合わせはこちらボタン */
.qa-page-contact__btn {
display: inline-block;
background: #0c4728;
color: #fff !important;
text-decoration: none;
padding: 16px 45px;
font-size: 15px;
font-weight: bold;
border-radius: 2px;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(12, 71, 40, 0.15);
}
.qa-page-contact__btn:hover {
background: #08331d;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(12, 71, 40, 0.25);
}
/* ==========================================
* スマホ用（画面幅768px以下）のQ&Aページ調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. 上部ヒーローエリアの調整 */
.qa-page-hero {
padding: 40px 15px; /* 上下余白を絞ってファーストビューの効率をアップ */
}
.qa-page-hero__title {
font-size: 22px; /* 28pxから22pxへ、スマホに収まりの良いサイズに縮小 */
margin-bottom: 10px;
}
.qa-page-hero__text {
font-size: 13px; /* テキストをスマートにして読みやすく */
}
/* 2. メインコンテナの余白引き締め */
.qa-page-container {
padding: 35px 15px 60px; /* 左右を15pxに広げ、下部フッターとの余白もスマートに */
}
/* 各QAの塊 */
.qa-page-item {
margin-bottom: 12px; /* カード同士の間隔を少し詰めて一覧性を向上 */
}
/* スマホでの不要なホバー枠線変化をリセット */
.qa-page-item:hover {
border-color: #e5e5e5;
}
/* 3. 質問部分（アコーディオントリガー）の余白と文字サイズ調整 */
.qa-page-question {
padding: 16px 15px; /* 左右余白を25pxから15pxに削り、テキスト領域を最大化 */
font-size: 14px; /* スマホで読みやすい14pxへ引き締め */
}
/* 「Q」の文字の調整 */
.qa-page-q {
font-size: 18px; /* 22pxから18pxへ。縮小してもフォントの気品は維持されます */
margin-right: 12px; /* 右側のテキストとの隙間を18pxから12pxへタイトに */
}
/* 質問のテキスト */
.qa-page-text {
padding-right: 25px; /* 右側のアイコンと絶対に被らないためのセーフティエリア */
}
/* 開閉アイコンの位置微調整 */
.qa-page-icon {
right: 15px; /* コンテナの縮小に合わせて位置を右端15pxにジャストフィット */
}
/* 4. 回答部分（インナー）の余白調整 */
.qa-page-answer-inner {
padding: 0 15px 18px 15px; /* 左右を15pxに揃え、テキストが縦に綺麗に整列するレイアウトに */
}
/* 「A」の文字の調整 */
.qa-page-a {
font-size: 18px; /* Qとお揃いの18pxへリサイズ */
margin-right: 12px; /* 隙間を12pxに引き締め */
}
/* 回答のテキスト */
.qa-page-answer-text {
font-size: 13.5px; /* 15pxから13.5pxに微調整し、長文になっても圧迫感を与えない設計に */
line-height: 1.6;
}
/* 5. 下部コンタクトエリアの最適化 */
.qa-page-contact {
margin-top: 40px;
padding-top: 30px;
}
.qa-page-contact__text {
font-size: 14px;
}
/* お問い合わせボタンを完全全幅の押しやすいUIへ */
.qa-page-contact__btn {
display: flex; /* inline-blockから変更して中央寄せしやすく */
justify-content: center;
align-items: center;
width: 100%; /* 横幅いっぱいにフィット */
max-width: 320px; /* 大きな画面でも間伸びしないよう黄金比で固定 */
margin: 0 auto; /* 横幅を絞った分を中央寄せ */
padding: 15px 20px; /* タップしやすい理想的な高さに補正 */
font-size: 14px;
box-sizing: border-box;
}
/* スマホでのホバー時の不自然な浮き上がりを防止 */
.qa-page-contact__btn:hover {
transform: none !important;
}
}
/* ==========================================================================
company
========================================================================== */
.page-header {
color: #000;
padding: 60px 20px;
text-align: center;
position: relative;
overflow: hidden;
}
/* 背景にうっすらと高級感のあるオーバーレイを入れる */
.page-header::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 1;
}
.header-inner {
position: relative;
z-index: 2;
}
.page-header .en-title {
font-family: 'Platypi', serif;
font-size: 0.9rem;
color: #c5a880; /* アクセントのゴールド */
letter-spacing: 0.3em;
display: block;
margin-bottom: 10px;
}
.page-header h1 {
font-family: 'Noto Serif JP', serif;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
}
.page-header .lead-text {
font-size: 1rem;
color: #c5a880;
font-weight: 300;
}
.business-container {
max-width: 1200px;
margin: 80px auto;
padding: 0 20px;
}
/* 各カードの基本構造 */
.business-card {
display: flex;
align-items: center;
margin-bottom: 120px;
gap: 60px;
}
/* 偶数番目のカードは左右反転にする */
.business-card.reverse {
flex-direction: row-reverse;
}
/* 画像エリア */
.card-image {
flex: 1;
height: 450px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0,0,0,0.1); /* 柔らかい影で高級感を */
position: relative;
}
.image-placeholder {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: transform 0.6s ease;
filter: grayscale(20%); /* 少し彩度を落としてシックにする */
}
/* ホバー時にゆっくり拡大する演出 */
.business-card:hover .image-placeholder {
transform: scale(1.05);
}
/* テキストコンテンツエリア */
.card-content {
flex: 1;
padding: 20px;
}
.card-number {
font-family: 'Platypi', serif;
font-size: 3rem;
color: rgba(197, 168, 128, 0.3); /* ゴールドを薄く */
display: block;
line-height: 1;
margin-bottom: 5px;
}
.card-en {
font-family: 'Platypi', serif;
font-size: 0.8rem;
color: #c5a880; /* アクセントのゴールド */
letter-spacing: 0.2em;
display: block;
margin-bottom: 15px;
}
.card-content h2 {
font-family: 'Noto Serif JP', serif;
font-size: 1.8rem;
color: #0f1e36; /* シックな深いネイビー */
margin-bottom: 25px;
position: relative;
padding-bottom: 15px;
}
/* タイトルの下の飾り線（シックな細線） */
.card-content h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background-color: #c5a880; /* アクセントのゴールド */
}
.card-text {
color: #666666; /* 補足の文字色 */
font-size: 0.95rem;
text-align: justify;
}
.company-profile {
max-width: 1400px;
margin: 100px auto 0 auto; /* 上部に50pxの余白を追加 */
font-family: sans-serif;
color: #333;
}
.title {
font-size: 2rem;
margin-bottom: 20px;
}
.profile-row {
display: flex;
padding: 20px 0;
border-bottom: 1px solid #ccc;
}
/* 最初の行の上にも線を引く場合は以下を追加 */
.company-profile > .profile-row:first-of-type {
border-top: 1px solid #ccc;
}
.label {
flex: 0 0 150px; /* 左側の項目の幅 */
color: #006699; /* 画像内の青い文字色 */
font-weight: bold;
}
.value {
flex: 1;
line-height: 1.6;
}
/* ==========================================
* スマホ用（画面幅768px以下）の会社・事業紹介調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 既存のflexを強制的に無効化し、縦並びを確定させる */
.page-header,
.header-inner {
display: block !important; /* flexを解除 */
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
padding: 30px 15px !important; /* 余白を確保 */
margin: 0 !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
text-align: center !important;
}
/* 子要素も強制的にブロック要素にして縦並びにする */
.page-header .en-title,
.page-header h2,
.page-header .lead-text {
display: block !important; /* flexアイテムからブロック要素へ */
width: 100% !important; /* 幅をフルに使う */
margin-bottom: 20px !important; /* 下に隙間を作る */
text-align: center !important;
}
/* 2. メインコンテナの余白調整 */
.business-container {
margin: 40px auto; /* PC版の80pxから40pxに引き締め、スクロールを軽快に */
padding: 0 15px; /* 左右余白を15pxにして本文の横幅を確保 */
}
/* 3. 各カードを「縦並び」に変形 ＆ 反転の完全リセット */
.business-card {
flex-direction: column !important; /* 横並びを縦並びへ強制変換 */
margin-bottom: 60px; /* カード同士の間隔を120pxから60pxへ詰めて間伸びを解消 */
gap: 25px; /* 画像と下のテキストの隙間を25pxに縮小 */
}
/* 超重要：偶数番目の左右反転をスマホでは完全に打ち消す */
/* これにより、スマホでは全カードが例外なく「上に画像、下にテキスト」の美しい順序で統一されます */
.business-card.reverse {
flex-direction: column !important;
}
/* 4. 画像エリアのスマホ最適化（黄金比の横長に固定） */
.card-image {
width: 100%;
/* 縦固定の450pxを撤廃し、スマホで最も美しいシネマスコープ比率（約21:9〜16:9）に近い高さ220pxにリサイズ */
height: 220px;
box-shadow: 0 8px 20px rgba(0,0,0,0.06); /* スマホ画面に合わせて影を優しく */
}
/* タップした際、スマホ特有のホバー拡大バグが起きないよう transition の速度を微調整 */
.business-card:hover .image-placeholder {
transform: scale(1.02); /* 拡大率を1.05から1.02へ、スマホ向けにほんの少しだけにセーブ */
}
/* 5. テキストコンテンツエリアの調整 */
.card-content {
padding: 0 5px; /* 横幅を限界まで使うため、左右のパディングを5pxまで解放 */
}
/* 薄い巨大なナンバリング数字 */
.card-number {
font-size: 2.2rem; /* 3remから2.2remへ。文字サイズに合わせた上品なスケールに */
margin-bottom: 2px;
}
.card-en {
font-size: 0.75rem;
margin-bottom: 10px;
}
/* 事業タイトル */
.card-content h2 {
font-size: 1.4rem; /* 1.8remから1.4rem（約22px）へ。美的な明朝体の線が潰れない絶妙なサイズ */
margin-bottom: 15px;
padding-bottom: 12px;
}
/* タイトル下の飾り線（ゴールド） */
.card-content h2::after {
width: 30px; /* タイトル縮小に合わせて、線の長さも40pxから30pxへスマートに変更 */
height: 1px; /* 2pxだとスマホ画面では少し太く見えて野暮ったくなるため、極細の1pxにして洗練さを強調 */
}
/* 本文テキスト */
.card-text {
font-size: 0.88rem; /* 0.95remから0.88rem（約14px）へ調整。長文の圧迫感を無くす */
line-height: 1.75; /* 縦長画面で目の滑りを良くする快適な行間 */
}
}
/* 強味 */
.strength-section {
color: #000; /* オフホワイト */
background-color: #c5a880; /* アクセントのゴールド */
padding: 120px 0px 10px; /* ← 下側（3つ目の値）だけ120pxから60pxなどに減らす */
letter-spacing: 0.06em;
line-height: 1.8;
}
.container {
max-width: 1400px; /* 1200px から 1400px に広げる */
margin: 0 auto;
}
/* セクションタイトル */
.section-title-area {
text-align: center;
margin-bottom: 10px;
}
.section-title-area .en-title {
font-family: 'Cinzel', serif;
font-size: 1rem;
color: #c5a880; /* 鈍いゴールド */
letter-spacing: 0.4em;
display: block;
margin-bottom: 15px;
}
.section-title-area .main-title {
font-family: 'Noto Serif JP', serif;
font-size: 2.2rem;
font-weight: 600;
position: relative;
display: inline-block;
}
/* タイトル下の美しい極細線 */
.section-title-area .main-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 1px;
background-color: #c5a880; /* 鈍いゴールド */
}
/* グリッドレイアウト（3カラム） */
.strength-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.strength-item {
border: 1px solid #c5a880; /* 薄いゴールドの境界線 */
padding: 40px 30px;
display: flex;
flex-direction: column;
transition: all 0.4s ease;
}
/* ホバー時に上品に浮き上がらせる */
.strength-item:hover {
border-color: #c5a880; /* 鈍いゴールド */
background-color: rgba(255, 255, 255, 0.04);
transform: translateY(-5px);
}
/* カードのヘッダー部分 */
.item-header {
margin-bottom: 30px;
}
.item-number {
font-family: 'Cinzel', serif;
font-size: 1.2rem;
color: #c5a880; /* 鈍いゴールド */
display: block;
margin-bottom: 10px;
}
.strength-item h3 {
font-family: 'Noto Serif JP', serif;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.5;
height: 3.2em; /* タイトルの高さを揃える */
}
/* 数字・実績（ハイライトエリア） */
.badge-area {
background-color: #ccd2da;
border-left: 2px solid #c5a880; /* 鈍いゴールドのアクセント線 */
padding: 20px;
margin-bottom: 30px;
flex-grow: 0;
}
.badge-label {
font-size: 0.75rem;
color: #000; /* グレー（補足テキスト） */
display: block;
margin-bottom: 5px;
}
.badge-value {
font-family: 'Cinzel', serif;
font-size: 2.2rem;
font-weight: 600;
color: #000;
line-height: 1.2;
display: block;
}
/* 「90%」の「%」だけを小さくする調整 */
.badge-value .unit {
font-size: 1.2rem;
margin-left: 2px;
color: #000; /* 鈍いゴールド */
}
.badge-sub {
font-size: 0.7rem;
color: #000; /* グレー（補足テキスト） */
display: block;
margin-top: 5px;
}
/* 説明文 */
.item-text {
font-size: 0.85rem;
color: #000; /* やや明るいグレー */
text-align: justify;
}
/* ==========================================
* スマホ用（画面幅768px以下）の強みセクション調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. セクション全体のパディング調整 */
.strength-section {
/* PC版の「上120px」を、スマホに適した「上60px・下40px」へ。間伸びを解消 */
padding: 60px 0 40px;
}
/* コメントにあった下側余白の調整用 */
.strength-section {
padding-bottom: 40px !important; /* 下側を60px前後にキュッとスマートに凝縮 */
}
/* コンテナの左右にセーフティ余白を設置 */
.strength-section .container {
padding: 0 20px;
box-sizing: border-box;
}
/* 2. セクションタイトルエリアの微調整 */
.section-title-area {
margin-bottom: 35px; /* カード群との間隔をスマホ用に最適化 */
}
.section-title-area .en-title {
font-size: 0.85rem; /* 1remから0.85remへ。Cinzelの文字間（0.4em）を活かす絶妙な縮小 */
margin-bottom: 10px;
}
.section-title-area .main-title {
font-size: 1.6rem; /* 2.2remから1.6remへ。スマホでも1行で堂々と収まるサイズ */
}
/* 3. グリッドレイアウトを「3列」から「1列」へ完全開放 */
.strength-grid {
grid-template-columns: 1fr; /* 1カラム化 */
gap: 25px; /* カード同士の縦の隙間を25pxにしてテンポよくスクロール */
}
/* 4. カード本体の調整 */
.strength-item {
padding: 30px 20px; /* 40px 30px から、スマホ画面幅を活かす 30px 20px へスリム化 */
}
/* スマホでの不要な浮き上がり（translateY）や背景変化をリセット（誤タップ時の違和感防止） */
.strength-item:hover {
transform: none !important;
background-color: transparent !important;
}
/* カードのヘッダー部分 */
.item-header {
margin-bottom: 20px; /* バッジエリアとの隙間を引き締め */
}
.item-number {
font-size: 1.1rem;
margin-bottom: 5px;
}
/* 超重要：タイトルの高さ固定（height: 3.2em）をスマホでは完全解除！ */
/* スマホでは1カラムになりカード単体で独立するため、高さを揃える必要がなくなり、文字重なりバグを根本解決します */
.strength-item h3 {
font-size: 1.15rem; /* 1.25remから1.15rem（約18px）へスマートに */
height: auto !important; /* 高さを自動（可変）にして折り返しに対応 */
}
/* 5. 数字・実績（ハイライトエリア）のスマホ最適化 */
.badge-area {
padding: 15px; /* 20pxから15pxに縮め、中の数字の表示幅を最大化 */
margin-bottom: 20px;
}
.badge-label {
font-size: 0.7rem;
margin-bottom: 3px;
}
/* 圧倒的なアイキャッチになる実績値のフォントサイズ調整 */
.badge-value {
font-size: 1.8rem; /* 2.2remから1.8remへ。スマホの枠内に美しく収まる限界値 */
}
/* 「%」などの単位 */
.badge-value .unit {
font-size: 1rem; /* 1.2remから1remへリサイズし、数字との黄金比を維持 */
}
.badge-sub {
font-size: 0.65rem;
margin-top: 3px;
}
/* 6. 説明文 */
.item-text {
font-size: 0.85rem; /* 読みやすさを考慮し、あえてサイズを維持して可読性を最優先 */
line-height: 1.7;
}
}
/* 1枚の画像を3分割して表示するエフェクト（スクロール連動版） */
.split-banner-section {
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
height: 600px;
background-color: #0b131f;
overflow: hidden;
}
.split-banner-container {
display: flex;
width: 100%;
height: 100%;
}
/* 3分割する各パーツの基本設定 */
.split-pic {
flex: 1;
height: 100%;
overflow: hidden;
position: relative;
opacity: 0;
transform: translateY(40px);
}
/* 【新設】JavaScriptによって親要素に .is-active がついたら、パーツが動き出す */
.split-banner-section.is-active .split-pic {
animation: splitFadeIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* 実際の背景画像を入れるエリア */
.split-bg-image {
position: absolute;
top: 0;
left: 0;
width: 300%;
height: 100%;
background-image: url('https://locajob.net/wp-content/uploads/2026/05/9-1.jpg');
background-size: cover;
background-position: center;
filter: grayscale(10%) brightness(80%);
}
/* それぞれの位置調整と時間差ディレイ（親が is-active になったらディレイを適用）*/
.split-left .split-bg-image { left: 0; }
.split-banner-section.is-active .split-left {
animation-delay: 0s;
}
.split-center .split-bg-image { left: -100%; }
.split-banner-section.is-active .split-center {
animation-delay: 0.18s; /* 時間差を少しだけ長め（0.18秒）にしてメリハリを強化 */
}
.split-right .split-bg-image { left: -200%; }
.split-banner-section.is-active .split-right {
animation-delay: 0.36s;
}
/* アニメーションの動き（キーフレーム） */
@keyframes splitFadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
/* 画像の上に優雅に浮かび上がる文字（こちらも連動してふわっと出す） */
.split-overlay-text {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%); /* 画面のド中央に完全固定 */
text-align: center;
color: #ffffff;
z-index: 10;
pointer-events: none;
opacity: 0;
width: 100%;
max-width: 600px;
}
/* セクションが見えたら文字も少し遅れて中央から現れる */
.split-banner-section.is-active .split-overlay-text {
animation: splitFadeIn 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
animation-delay: 0.5s; /* 3枚のパネルが並び終わる頃に出てくる */
}
.split-overlay-text span {
font-family: 'Cinzel', serif;
font-size: 2rem;
color: #c5a880;
letter-spacing: 0.4em;
display: block;
margin-bottom: 15px;
}
.split-overlay-text h2 {
font-family: 'Noto Serif JP', serif;
font-size: 2rem;
font-weight: 400;
letter-spacing: 0.1em;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.company-profile {
margin: 50px 20px 0 20px; /* 左右に少し余白を持たせる */
}
.profile-row {
flex-direction: column; /* 縦並びに変更 */
padding: 15px 0;
}
.label {
flex: 0 0 auto; /* 幅の固定を解除 */
margin-bottom: 5px; /* ラベルと値の間に少し隙間を作る */
}
/* ==========================================
* スマホ用（画面幅768px以下）の3分割バナー調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. バナー全体の高さ調整（縦長の画面に合わせた最適なスケール化） */
.split-banner-section {
/* PC版の600px固定から、スマホ画面で圧迫感を与えず画像も潰れない「380px」へリサイズ */
height: 380px;
background-color: #0b131f;
}
/* 2. 【超重要】画像の上に浮かび上がる文字の位置・サイズ最適化 */
.split-overlay-text {
/* スマホでは top: 20% だと上すぎ、またははみ出すバグが起きるため、
『top: 50%』に変更して、高さ380pxの「完全なド中央」へ安全にホールド */
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important; /* 中央固定の吸着を強化 */
padding: 0 20px; /* 左右に最低限のセーフティ余白を確保 */
box-sizing: border-box;
width: 100%;
}
/* 飾り英語タイトル（Cinzel） */
.split-overlay-text span {
font-size: 1.1rem; /* 2remから1.1remへ、スマホ向けに洗練されたサイズに縮小 */
letter-spacing: 0.3em; /* 画面幅に合わせてレタースペースを僅かに引き締め */
margin-bottom: 10px;
}
/* メイン日本語タイトル（Noto Serif JP） */
.split-overlay-text h2 {
font-size: 1.35rem !important; /* スマホで見やすいサイズ */
line-height: 1.5 !important;
letter-spacing: 0.05em !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7) !important;
/* 改行禁止設定をここにまとめる */
white-space: nowrap !important;
display: inline-block !important;
}
/* brタグを表示しない（改行させない） */
.split-overlay-text h2 br {
display: none !important;
content: "" !important; /* 一部の環境用 */
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 3. アニメーション（浮き上がり幅）のスマホ最適化 */
/* スマホの短い液晶画面で translateY(40px) は移動距離が長すぎて、スクロール中に
一瞬遅れてワープしてきたような違和感が出やすくなります。
初期位置を「20px」にセーブすることで、スマホ特有の滑らかな「スッ…」とした立ち上がりを実現します */
.split-pic {
transform: translateY(20px);
}
/* アクティブ時のアニメーション（スマホ用最適化キーフレームへ差し替え） */
.split-banner-section.is-active .split-pic {
animation: splitFadeInMobile 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.split-banner-section.is-active .split-overlay-text {
animation: splitFadeInMobile 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
animation-delay: 0.5s; /* PC版の美しい時間差タイムラインをそのまま継承 */
}
}
/* スマホ用の滑らかな移動距離（20pxから0へ）を定義する専用キーフレーム */
@keyframes splitFadeInMobile {
to {
opacity: 1;
transform: translate(0, 0); /* 左右の中央配置（Overlay用）と上下の立ち上がりを同時にリセット */
}
}
/* Culture（働く環境を知る）セクション */
/* セクション全体のベース */
.cl-section {
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
padding: 100px 0;
}
/* コンテナ設定 */
.cl-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
/* タイトル全体の並び */
.cl-title-wrap {
display: flex;
flex-direction: column;
align-items: flex-start; /* 左寄せ */
gap: 30px;
}
/* 英語と補足テキストの並び */
.cl-title-main {
display: flex;
align-items: flex-end; /* 下のラインで揃える */
gap: 20px;
}
/* 大きな「Culture」の文字（洗練されたセリフ体） */
.cl-en {
font-family: 'Cinzel', 'Platypi', serif;
font-size: 5rem;
font-weight: 500;
color: #0f1e36;
line-height: 1.0;
letter-spacing: -0.02em;
}
/* 「働く環境を知る」の文字 */
.cl-sub {
font-family: 'Noto Serif JP', serif;
font-size: 1rem;
font-weight: 600;
color: #0f1e36; /* メインカラーと同色で統一感 */
letter-spacing: 0.1em;
padding-bottom: 5px; /* 英語のベースラインに合わせる微調整 */
}
/* メインリード「完全燃焼できる環境が〜」 */
.cl-lead {
font-family: 'Noto Serif JP', serif;
font-size: 2rem;
font-weight: 600;
color: #0f1e36; /* 深いネイビーで一気にシックに */
letter-spacing: 0.08em;
line-height: 1.4;
}
/* ==========================================
* スマホ用（画面幅768px以下）のCultureセクション調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. セクション全体の上下パディングをスリム化 */
.cl-section {
/* PC版の上下100pxから、スマホの画面比率に合わせた「上下60px」へ凝縮 */
padding: 60px 0;
}
/* コンテナの左右に美しいセーフティ余白（20px）を設置 */
.cl-container {
padding: 0 20px;
box-sizing: border-box;
}
/* 2. タイトル全体の並び・ギャップ調整 */
.cl-title-wrap {
/* 縦の要素間隔をPC版の30pxから「20px」へ引き締め、美しいまとまり感を演出 */
gap: 20px;
}
/* 3. 【超重要】英語と日本語の並びを「横」から「縦」へスマートに解放 */
.cl-title-main {
flex-direction: column; /* 狭い画面幅での衝突を防ぐため縦並びに変形 */
align-items: flex-start; /* 縦並びの左揃えにスイッチ */
gap: 6px; /* 英語と日本語の縦の隙間を6pxの絶妙なディテールで固定 */
}
/* 4. 巨大英語タイトル「Culture」のスマホ用リサイズ */
.cl-en {
/* 5rem（約80px）から、スマホ画面で最も高貴に映える「3.2rem（約51px）」へスケールダウン */
/* これにより、右側へのはみ出しや単語の途中での不格好な改行を100%防止します */
font-size: 3.2rem;
letter-spacing: -0.01em; /* 文字サイズ縮小に合わせてレタースペースを極微調整 */
}
/* 「働く環境を知る」の文字 */
.cl-sub {
font-size: 0.85rem; /* 1remから0.85rem（約13.5px）へ落とし、情報の主従関係（強弱）を明確に */
letter-spacing: 0.08em;
padding-bottom: 0; /* 横並び用のベースライン調整パディング（5px）を安全にリセット */
}
/* 5. メインリードのスマホ最適化（改行美のコントロール） */
.cl-lead {
/* 2rem（約32px）から、スマホの文字組みとして最も美しい「1.35rem（約21px）」へ調整 */
font-size: 1.35rem;
line-height: 1.5; /* 縦長画面で明朝体を流れるように読ませるための快適な行間 */
letter-spacing: 0.06em;
}
}
/* ==========================================================================
ご利用の流れ（FLOW）専用スタイル（競合回避対応）
========================================================================== */
/* 全体の並び（カード自体は縦にカチッと並べる） */
.asv2-flow-box-group,
.asv2-flow-process-column {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 15px;
}
/* 各フェーズのカード：高さを抑えた「横長のバー」スタイル */
.asv2-flow-phase-card {
background-color: transparent;
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 15px 25px;
width: 100%;
max-width: 1200px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 30px;
}
/* カード内の見出しエリア（横並びにするためブロック化を解除） */
.asv2-flow-phase-card__header {
margin-bottom: 0;
display: flex;
align-items: center;
gap: 12px;
}
.asv2-flow-phase-card__eng {
font-family: 'Montserrat', sans-serif;
font-size: 1.4rem; /* 高さに合わせて少し小さく */
font-weight: 400;
color: #1a1a1a;
margin: 0;
letter-spacing: 0.05em;
}
.asv2-flow-phase-card__jp {
font-size: 0.8rem;
color: #888888;
font-weight: 500;
letter-spacing: 0.05em;
}
/* 各ステップのバッジ：シンプルな「仕切り文字」のようなデザインに */
.asv2-flow-step__badge {
display: inline-block;
color: #1a1a1a;
font-size: 0.85rem;
font-weight: 700;
padding: 0 15px 0 0;
border-right: 1px solid #dddddd; /* 右側に細い区切り線を入れる */
border-bottom: none; /* 下線は廃止 */
border-radius: 0;
width: auto;
margin-bottom: 0; /* 下マージンをリセット */
white-space: nowrap; /* 勝手に改行されるのを防ぐ */
flex-shrink: 0;
}
/* ステップ内のリスト：ここも横並び（インライン風）に変更 */
.asv2-flow-step__list {
display: flex;
flex-direction: row; /* 縦から横並びに変更 */
align-items: center;
list-style: none;
padding: 0;
margin: 0;
gap: 15px; /* リスト項目同士の間隔 */
flex-wrap: wrap; /* 画面が狭いときは自動で折り返す優しさ */
}
.asv2-flow-step__list li {
font-size: 0.85rem;
color: #555555;
line-height: 1; /* 高さをギリギリまで低く */
position: relative;
}
/* リストの項目間に「・」や「,」を入れたい場合はここ（お好みで） */
.asv2-flow-step__list li:not(:last-child)::after {
content: ' /'; /* 項目の区切りにスラッシュを薄く入れる */
color: #ccc;
margin-left: 15px;
}
/* 縦方向の矢印：線が細くなったので、矢印自体も少しシンプルに引き締め */
.asv2-flow-arrow-v {
font-size: 0.8rem;
color: #b0b5c5;
margin: 5px 0; /* 矢印の上下のすき間も最小限に */
text-align: center;
}
/* ==========================================================================
レスポンシブ（スマホ表示時は縦並びに戻す）
========================================================================== */
@media (max-width: 768px) {
.asv2-flow-phase-card {
flex-direction: column; /* スマホでは窮屈なので縦並びに戻す */
align-items: flex-start;
gap: 15px;
padding: 25px 20px;
}
.asv2-flow-phase-card__header {
min-width: 100%;
}
.asv2-flow-step__badge {
border-right: none;
border-bottom: 1px solid #dddddd;
padding: 0 0 5px 0;
width: 100%;
}
.asv2-flow-step__list {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.asv2-flow-step__list li:not(:last-child)::after {
display: none;
}
}
/* ==========================================================================
RESPONSIVE (レスポンシブ・ブレイクポイント)
========================================================================== */
/* タブレット・スマホ全般 (768px以下) */
@media (max-width: 768px) {
.asv2-wrap {
padding: 0 20px;
}
.asv2-section {
padding: 60px 0;
}
.asv2-head {
margin-bottom: 40px;
}
.asv2-hero__inner {
padding-top: 60px;
padding-bottom: 60px;
}
.asv2-hero__title {
font-size: 2.2rem;
}
.asv2-company-grid {
grid-template-columns: 1fr;
gap: 40px;
}
/* FLOWのスマホ対応 */
.asv2-flow-phase-card {
padding: 35px 20px;
border-radius: 16px;
}
.asv2-flow-phase-card__eng {
font-size: 1.7rem;
}
.asv2-flow-step__badge {
max-width: 100%;
}
}
/* 極小スマホ (480px以下) */
@media (max-width: 480px) {
.asv2-wrap {
padding: 0 16px;
}
}
/* ==========================================================================
下部 問い合わせ/求人一覧ボタン
========================================================================== */
/* セクション全体を画面幅いっぱいに広げる */
.rc-section {
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
margin-bottom: 0 !important;
margin-top: 120px;
}
/* 左右を50%ずつ綺麗に分けるコンテナ */
.rc-container {
display: flex;
width: 100%;
min-height: 480px; /* セクションの心地よい高さ */
}
/* 左右のボックスの共通基本設定（aタグなので全体をクリック可能に） */
.rc-box {
flex: 1; /* 1:1で等分 */
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 80px 40px;
transition: all 0.5s ease;
position: relative;
}
/* 中身を綺麗に左寄せして配置するためのインナー */
.rc-box-inner {
width: 100%;
max-width: 400px; /* テキストやボタンが広がりすぎないように */
display: flex;
flex-direction: column;
align-items: flex-start; /* 左寄せ */
}
/* 左右それぞれの配色（ここでシックな世界観を作ります） */
/* 【左側：Recruit】クリーンな白背景 */
.rc-box--recruit {
background-color: #ffffff;
}
.rc-box--recruit .rc-ja-tag { color: #888888; }
.rc-box--recruit .rc-en-title { color: #111111; }
.rc-box--recruit .rc-btn {
border: 1px solid #111111;
color: #111111;
}
/* 【右側：Contact】重厚感のある漆黒背景（赤から変更） */
.rc-box--contact {
background-color: #111111;
}
.rc-box--contact .rc-ja-tag { color: #999999; }
.rc-box--contact .rc-en-title { color: #ffffff; }
.rc-box--contact .rc-btn {
border: 1px solid #ffffff;
color: #ffffff;
}
/* パーツごとのデザイン設定 */
/* ｛ 採用情報 ｝の部分 */
.rc-ja-tag {
font-size: 0.8rem;
letter-spacing: 0.1em;
margin-bottom: 15px;
}
/* 英語の巨大タイトル */
.rc-en-title {
font-family: 'Cinzel', 'Platypi', serif; /* 上品なセリフ体 */
font-size: 4rem;
font-weight: 300; /* 細めにして洗練 */
line-height: 1;
margin-bottom: 50px;
letter-spacing: 0.02em;
}
/* ボタンの基本デザイン */
.rc-btn {
display: flex;
align-items: center;
justify-content: space-between; /* 文字と矢印を両端に離す */
width: 100%;
max-width: 280px; /* 元サイトに合わせたスマートな横幅 */
padding: 16px 24px;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.05em;
transition: all 0.4s ease;
}
.rc-arrow {
transition: transform 0.4s ease;
}
/* ホバー（マウスを乗せたとき）の上品なエフェクト */
/* 左（白側）をホバー：黒に反転 */
.rc-box--recruit:hover {
background-color: #0c4728;
}
.rc-box--recruit:hover .rc-ja-tag { color: #999999; }
.rc-box--recruit:hover .rc-en-title { color: #ffffff; }
.rc-box--recruit:hover .rc-btn {
border-color: #ffffff;
color: #ffffff;
background-color: transparent;
}
/* 右（黒側）をホバー：白に反転 */
.rc-box--contact:hover {
background-color: #0c4728;
}
.rc-box--contact:hover .rc-ja-tag { color: #fff; }
.rc-box--contact:hover .rc-en-title { color: #fff; }
.rc-box--contact:hover .rc-btn {
border-color: #fff;
color: #fff;
background-color: transparent;
}
/* 両方共通：ホバー時にボタンの中の矢印がスッと右に動く */
.rc-box:hover .rc-arrow {
transform: translateX(6px);
}
/* ==========================================
* スマホ用（画面幅768px以下）の下部ナビゲーション調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. セクション全体の上の余白を引き締め */
.rc-section {
margin-top: 60px; /* PC版の120pxからスマホ適正の60pxへ半減させ、間伸びを解消 */
}
/* 2. 【超重要】左右並びから「縦2段のフルフラット」へ完全変形 */
.rc-container {
flex-direction: column; /* 1:1の横並びを解除し、上・下の2段構成にスイッチ */
min-height: auto; /* 固定高さを撤廃し、中身のコンテンツに応じた可変にリセット */
}
/* 3. 各ボックスのスマホ用サイズ・余白調整 */
.rc-box {
width: 100%;
padding: 60px 25px; /* 上下80pxを60pxへコンパクトにし、左右はタップしやすい25pxに調整 */
box-sizing: border-box;
}
/* 縦並びになるため、ボックスの中身を中央寄せにして視認性を向上 */
.rc-box-inner {
max-width: 100%; /* スマホの画面幅いっぱいに使えるように解放 */
align-items: center; /* 左寄せから「中央寄せ」に変更してポスターライクに美しく */
text-align: center;
}
/* 4. 各パーツのスマホ用スケールダウン */
/* 日本語タグ（｛ 採用情報 ｝など） */
.rc-ja-tag {
font-size: 0.75rem;
margin-bottom: 10px; /* 隙間を引き締め */
}
/* 英語タイトル（Recruit / Contact） */
.rc-en-title {
font-size: 2.6rem; /* 4remの巨大文字をスマホの画面幅に綺麗に収まる2.6remへ補正 */
margin-bottom: 30px; /* ボタンとの隙間を50pxから30pxへスマートに凝縮 */
}
/* 5. ボタンのモバイルファースト化（親指ターゲット） */
.rc-btn {
max-width: 320px; /* スマホの画面サイズに対して一番安定して押しやすいサイズに固定 */
padding: 14px 20px; /* 押しやすさを維持しつつ高さを微調整 */
font-size: 0.85rem;
}
/* 6. 【超重要】スマホでの誤タップ・スクロール時のホバー色変化バグを無効化 */
/* スマホ特有の「触っただけで色が深緑に変形したまま戻らない」現象を完全にシャットアウトします */
.rc-box--recruit:hover {
background-color: #ffffff; /* ずっと白をキープ */
}
.rc-box--recruit:hover .rc-ja-tag { color: #888888; }
.rc-box--recruit:hover .rc-en-title { color: #111111; }
.rc-box--recruit:hover .rc-btn {
border-color: #111111;
color: #111111;
}
.rc-box--contact:hover {
background-color: #111111; /* ずっと黒をキープ */
}
.rc-box--contact:hover .rc-ja-tag { color: #999999; }
.rc-box--contact:hover .rc-en-title { color: #ffffff; }
.rc-box--contact:hover .rc-btn {
border-color: #ffffff;
color: #ffffff;
}
/* 矢印の無駄なホバー移動もスマホではリセット */
.rc-box:hover .rc-arrow {
transform: none !important;
}
}
/* ------------------------------------
* 求人募集ページ
* ------------------------------------ */
.npx-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.npx-section-title {
font-size: 2rem;
font-weight: 700;
text-align: center;
color: #0f172a;
margin-bottom: 48px;
letter-spacing: -0.02em;
}
/* ボタン共通 */
.npx-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
font-size: 1rem;
font-weight: 700;
border-radius: 6px;
text-decoration: none;
transition: all 0.25s ease;
box-sizing: border-box;
}
.npx-btn-primary {
background-color: #00b06b;
color: #ffffff;
}
.npx-btn-primary:hover {
background-color: #00955a;
transform: translateY(-1px);
}
/* ------------------------------------
* 2. Hero Section
* ------------------------------------ */
.npx-hero-section {
background-color: #f8fafc;
padding: 80px 0;
overflow: hidden;
}
.npx-hero-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.npx-hero-content {
flex: 1;
max-width: 600px;
}
.npx-hero-title {
font-size: 2.5rem;
line-height: 1.4;
color: #0f172a;
font-weight: 800;
margin: 0 0 24px 0;
}
.npx-hero-title span {
font-size: 1.5rem;
color: #00b06b;
display: block;
margin-top: 12px;
font-weight: 600;
}
.npx-hero-lead {
font-size: 1.1rem;
line-height: 1.7;
color: #475569;
margin-bottom: 36px;
}
.npx-hero-cta-area {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.npx-btn-large {
padding: 16px 48px;
font-size: 1.15rem;
box-shadow: 0 4px 12px rgba(0, 176, 107, 0.2);
}
.npx-cta-note {
font-size: 0.85rem;
color: #64748b;
margin: 0;
}
.npx-hero-image {
flex: 1;
display: flex;
justify-content: center;
}
.npx-hero-image img {
max-width: 100%;
height: auto;
border-radius: 12px;
}
/* スマホ用（画面幅768px以下）調整 */
@media screen and (max-width: 768px) {
/* 1. 基本コンテナのスマホ対応 */
.npx-container {
width: 100%;
max-width: 100%;
padding: 0 16px; /* 20pxから16pxに調整 */
box-sizing: border-box;
overflow-x: hidden; /* 横スクロール防止 */
}
/* 2. セクションタイトル */
.npx-section-title {
font-size: 1.5rem; /* 2remから1.5remに縮小 */
font-weight: 700;
text-align: center;
color: #0f172a;
margin-bottom: 32px; /* 48pxから32pxに圧縮 */
letter-spacing: -0.02em;
word-break: break-word;
overflow-wrap: break-word;
}
/* 3. ボタン共通スタイル */
.npx-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
font-size: 0.95rem;
font-weight: 700;
border-radius: 6px;
text-decoration: none;
transition: all 0.25s ease;
box-sizing: border-box;
min-height: 44px; /* タップターゲット最小高さ */
white-space: nowrap;
}
.npx-btn-primary {
background-color: #00b06b;
color: #ffffff;
}
.npx-btn-primary:active {
background-color: #00955a;
transform: translateY(-1px);
}
/* ========================================
* Hero Section スマホ版
* ======================================== */
/* 4. Heroセクション全体 */
.npx-hero-section {
background-color: #f8fafc;
padding: 50px 0; /* 80pxから50pxに圧縮 */
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
/* 5. Heroコンテナ（テキスト＋画像を縦1列に） */
.npx-hero-container {
display: flex;
flex-direction: column; /* 横並びを縦に切り替え */
align-items: center;
justify-content: flex-start;
gap: 30px; /* 40pxから30pxに圧縮 */
max-width: 100%;
margin: 0 auto;
padding: 0 16px;
box-sizing: border-box;
}
/* 6. Heroのテキストエリア */
.npx-hero-content {
flex: 1;
width: 100%;
max-width: none; /* スマホではmax-widthを効かさない */
order: 2; /* 画像を下に配置する場合、order: 2 */
}
/* 7. Heroのメインタイトル */
.npx-hero-title {
font-size: 1.75rem; /* 2.5remから1.75remに縮小 */
line-height: 1.3;
color: #0f172a;
font-weight: 800;
margin: 0 0 16px 0; /* 下マージンを24pxから16pxに */
word-break: break-word;
overflow-wrap: break-word;
}
/* 8. Heroタイトルのspan（色付きサブテキスト） */
.npx-hero-title span {
font-size: 1.1rem; /* 1.5remから1.1remに縮小 */
color: #00b06b;
display: block;
margin-top: 10px; /* 12pxから10pxに */
font-weight: 600;
word-break: break-word;
}
/* 9. Heroのリード文 */
.npx-hero-lead {
font-size: 0.95rem; /* 1.1remから0.95remに縮小 */
line-height: 1.7;
color: #475569;
margin-bottom: 24px; /* 36pxから24pxに圧縮 */
word-break: break-word;
overflow-wrap: break-word;
}
/* 10. CTAエリア（ボタンなど） */
.npx-hero-cta-area {
display: flex;
flex-direction: column;
align-items: stretch; /* ボタンを親の幅いっぱいに */
gap: 12px;
width: 100%;
}
/* 11. 大きめボタン */
.npx-btn-large {
width: 100%; /* スマホでは画面幅いっぱいに */
max-width: 100%;
padding: 14px 24px;
font-size: 1rem; /* 1.15remから1remに */
box-shadow: 0 4px 12px rgba(0, 176, 107, 0.2);
box-sizing: border-box;
}
/* 12. CTA注釈テキスト */
.npx-cta-note {
font-size: 0.8rem; /* 0.85remから0.8remに微調整 */
color: #64748b;
margin: 0;
text-align: center; /* スマホでは中央揃え */
word-break: break-word;
}
/* 13. Heroの画像エリア */
.npx-hero-image {
flex: 1;
width: 100%;
display: flex;
justify-content: center;
order: 1; /* 画像を上に表示（order: 1） */
}
/* 14. 画像タグ */
.npx-hero-image img {
width: 100%; /* 画像を親の幅に合わせる */
max-width: 100%;
height: auto;
border-radius: 12px;
display: block;
}
}
/* ------------------------------------
* 3. Features & Stats
* ------------------------------------ */
.npx-features-section {
padding: 100px 0;
background-color: #ffffff;
}
/* 実績のグリッド（3カラム） */
.npx-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-bottom: 64px;
}
.npx-stat-card {
background-color: #f8fafc;
border-radius: 8px;
padding: 32px 24px;
text-align: center;
border: 1px solid #e2e8f0;
}
.npx-stat-number {
display: block;
font-size: 3rem;
font-weight: 800;
color: #00b06b;
line-height: 1.2;
margin-bottom: 8px;
}
.npx-stat-label {
font-size: 0.95rem;
font-weight: 600;
color: #475569;
}
/* 特徴の紹介ブロック */
.npx-feature-blocks {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.npx-feature-item {
background: #ffffff;
border-left: 4px solid #0f172a;
padding: 8px 0 8px 24px;
}
.npx-feature-item h3 {
font-size: 1.3rem;
color: #0f172a;
margin: 0 0 12px 0;
}
.npx-feature-item p {
color: #475569;
line-height: 1.6;
margin: 0;
}
@media (max-width: 768px) {
.npx-stats-grid,
.npx-feature-blocks {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* ------------------------------------
* 4. Project Types
* ------------------------------------ */
.npx-projects-section {
padding: 100px 0;
background-color: #f1f5f9; /* 少し濃いめのグレー背景で区切りをつける */
}
.npx-project-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.npx-project-card {
background: #ffffff;
border-radius: 12px;
padding: 32px;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.npx-card-badge {
align-self: flex-start;
background-color: #e2f7ed;
color: #00b06b;
font-size: 0.8rem;
font-weight: 700;
padding: 4px 12px;
border-radius: 4px;
margin-bottom: 20px;
}
.npx-card-title {
font-size: 1.25rem;
color: #0f172a;
margin: 0 0 16px 0;
font-weight: 700;
line-height: 1.4;
}
.npx-card-desc {
font-size: 0.95rem;
color: #475569;
line-height: 1.6;
margin: 0 0 24px 0;
flex-grow: 1; /* 説明文の長さに合わせてカードの高さを統一 */
}
.npx-reward-box {
background-color: #f8fafc;
border-radius: 6px;
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #edf2f7;
}
.npx-reward-label {
font-size: 0.85rem;
color: #64748b;
font-weight: 600;
}
.npx-reward-amount {
font-size: 1.1rem;
color: #0f172a;
font-weight: 700;
}
@media (max-width: 960px) {
.npx-project-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* ------------------------------------
* 5. Step Flow
* ------------------------------------ */
.npx-flow-section {
padding: 100px 0;
background-color: #ffffff;
}
.npx-step-list {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
list-style: none;
padding: 0;
margin: 0;
}
.npx-step-item {
position: relative;
background: #f8fafc;
border-radius: 8px;
padding: 24px 16px;
text-align: center;
border: 1px solid #e2e8f0;
box-sizing: border-box;
}
.npx-step-number {
font-size: 1.5rem;
font-weight: 800;
color: #cbd5e1;
margin-bottom: 12px;
}
.npx-step-name {
font-size: 1.05rem;
color: #0f172a;
margin: 0 0 12px 0;
font-weight: 700;
}
.npx-step-text {
font-size: 0.85rem;
color: #64748b;
line-height: 1.5;
margin: 0;
}
/* スマホ対応：縦並びにして、すっきり見せる */
@media (max-width: 960px) {
.npx-step-list {
grid-template-columns: 1fr;
gap: 16px;
}
.npx-step-item {
display: flex;
align-items: center;
text-align: left;
padding: 20px;
gap: 20px;
}
.npx-step-number {
margin-bottom: 0;
}
.npx-step-name {
margin-bottom: 4px;
}
}
/* ------------------------------------
* M-STAGE Recruit Section Style
* ------------------------------------ */
/* セクション全体の定義 */
.mst-recruit-section {
position: relative;
padding: 120px 0;
background-color: #ffffff;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
overflow: hidden; /* 背景の巨大文字のはみ出し防止 */
box-sizing: border-box;
}
/* 背景に敷く巨大な極薄テキスト（隠し味的な装飾） */
.mst-recruit-bg-text {
position: absolute;
top: 40px;
right: -5%;
font-size: 8rem;
font-weight: 900;
color: #f4f6f9; /* 限界まで薄くしたグレー */
white-space: nowrap;
letter-spacing: 0.05em;
pointer-events: none;
z-index: 1;
}
/* コンテナ */
.mst-recruit-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
position: relative;
z-index: 2; /* 背景文字より前に出す */
box-sizing: border-box;
}
/* 左右2カラムのフレックスボックス */
.mst-recruit-flex {
display: flex;
align-items: center;
justify-content: space-between;
gap: 64px;
}
/* 左側カラム：コンテンツ */
.mst-recruit-content {
flex: 1;
max-width: 540px;
}
.mst-section-header {
margin-bottom: 32px;
}
.mst-sub-title {
display: block;
font-size: 0.95rem;
font-weight: 700;
color: #0055ff; /* 安心感のある医療系ブルー */
letter-spacing: 0.15em;
margin-bottom: 12px;
}
.mst-main-title {
font-size: 2.5rem;
font-weight: 800;
color: #0a2540; /* 信頼感のある深いネイビー */
line-height: 1.4;
margin: 0;
}
.mst-lead-text {
font-size: 1rem;
line-height: 1.8;
color: #4a5a6a;
margin-bottom: 40px;
}
/* ボタンエリア */
.mst-btn-wrap {
display: flex;
gap: 20px;
}
/* ボタンの基本スタイル（他のコードと絶対に喧嘩しない独立設計） */
.mst-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 220px;
padding: 18px 24px;
font-size: 0.95rem;
font-weight: 700;
border-radius: 30px; /* 丸みのある洗練された形状 */
text-decoration: none;
transition: all 0.3s ease;
box-sizing: border-box;
}
/* プライマリーボタン（濃紺背景） */
.mst-btn-primary {
background-color: #0a2540;
color: #ffffff;
box-shadow: 0 4px 15px rgba(10, 37, 64, 0.15);
}
.mst-btn-primary:hover {
background-color: #0055ff; /* ホバーで鮮やかなブルーに */
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 85, 255, 0.25);
}
/* セカンダリーボタン（枠線タイプ） */
.mst-btn-secondary {
background-color: transparent;
color: #0a2540;
border: 2px solid #0a2540;
}
.mst-btn-secondary:hover {
background-color: #0a2540;
color: #ffffff;
transform: translateY(-2px);
}
/* ボタン内の右矢印アイコン（CSSのみで描写） */
.mst-icon-arrow {
position: relative;
display: inline-block;
width: 16px;
height: 2px;
background-color: currentColor;
transition: transform 0.3s ease;
}
.mst-icon-arrow::after {
content: '';
position: absolute;
right: 0;
top: -3px;
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
}
/* ホバー時に矢印を少し右に動かすアニメーション */
.mst-btn:hover .mst-icon-arrow {
transform: translateX(5px);
}
/* 右側カラム：ビジュアル写真エリア */
.mst-recruit-visual {
flex: 1;
display: flex;
justify-content: center;
}
.mst-image-box {
position: relative;
width: 100%;
max-width: 480px;
}
.mst-main-img {
width: 100%;
height: auto;
border-radius: 16px; /* 角を丸めて柔らかい印象に */
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
display: block;
}
/* 写真の右下に浮かぶ小さな情報バッジ */
.mst-image-badge {
position: absolute;
bottom: -20px;
right: -20px;
background-color: #0055ff;
color: #ffffff;
padding: 20px;
border-radius: 12px;
display: flex;
flex-direction: column;
box-shadow: 0 10px 25px rgba(0, 85, 255, 0.3);
}
.mst-badge-en {
font-size: 1.2rem;
font-weight: 800;
letter-spacing: 0.05em;
line-height: 1;
margin-bottom: 4px;
}
.mst-badge-ja {
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
}
/* ------------------------------------
* レスポンシブ対応（スマホ・タブレット）
* ------------------------------------ */
@media (max-width: 960px) {
.mst-recruit-section {
padding: 80px 0;
}
.mst-recruit-bg-text {
font-size: 5rem; /* 背景文字を小さく */
top: 20px;
}
.mst-recruit-flex {
flex-direction: column-reverse; /* スマホでは写真が上、テキストが下 */
gap: 48px;
}
.mst-recruit-content {
max-width: 100%;
text-align: center; /* 中央揃えに綺麗に配置 */
}
.mst-btn-wrap {
justify-content: center;
flex-direction: column; /* ボタンを縦並びに */
align-items: center;
}
.mst-btn {
width: 100%;
max-width: 320px;
}
.mst-main-title {
font-size: 2rem;
}
.mst-image-box {
max-width: 100%;
padding-right: 20px; /* バッジのはみ出しを吸収 */
}
.mst-image-badge {
bottom: -10px;
right: 0;
padding: 12px 16px;
}
}
/* =========================
エントリーページ
========================= */
/* --- エントリーページ全体コンテナ --- */
.entry-page {
background-color: #fcfcfc; /* 非常に薄いグレーで高級感を */
padding-bottom: 100px;
}
.inner {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
}
/* --- 導入部 (Intro) --- */
.entry-intro {
padding: 80px 0 60px;
text-align: center;
}
.entry-intro__sub {
display: block;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.3em;
color: #0c4728;
margin-bottom: 15px;
}
.entry-intro__title {
font-size: 32px;
color: #333;
margin-bottom: 30px;
font-weight: 600;
}
.entry-intro__text {
font-size: 15px;
line-height: 1.8;
color: #666;
margin-bottom: 15px;
}
.entry-intro__note {
font-size: 13px;
color: #0c4728;
font-weight: bold;
}
/* --- フォームエリア --- */
.company-contact-form {
background: #fff;
padding: 60px;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}
/* CF7の項目間隔 */
.wpcf7-form-control-wrap {
display: block;
margin-bottom: 5px;
}
/* 各入力行のスタイル（CF7側のタグ構成に合わせて調整してください） */
.entry-form-row {
margin-bottom: 35px;
}
.entry-form-label {
display: block;
font-size: 14px;
font-weight: bold;
margin-bottom: 12px;
color: #333;
}
.entry-form-label span.required {
background: #e31e2d;
color: #fff;
font-size: 10px;
padding: 2px 6px;
border-radius: 2px;
margin-left: 10px;
vertical-align: middle;
}
/* 入力フィールド共通 */
.wpcf7-text,
.wpcf7-select,
.wpcf7-textarea {
width: 100%;
padding: 15px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fafafa; /* 初期状態は薄いグレー */
font-size: 16px;
transition: all 0.3s ease;
box-sizing: border-box;
}
/* ★追加：文字が入力されたときのスタイル（枠線と背景を上品な緑系に） */
.wpcf7-text:not(:placeholder-shown),
.wpcf7-textarea:not(:placeholder-shown),
.wpcf7-select:valid {
border-color: #0c4728; /* 枠線をテーマカラーの深緑に */
background: #f4f8f5; /* 背景をごく薄い上品な緑に */
}
.wpcf7-text:focus,
.wpcf7-select:focus,
.wpcf7-textarea:focus {
border-color: #0c4728;
background: #fff;
box-shadow: 0 0 0 4px rgba(12, 71, 40, 0.05);
outline: none;
}
/* 送信・確認ボタン */
.entry-btn-group {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 50px;
}
.js-confirm-btn,
.wpcf7-submit,
.js-back-btn {
display: block;
width: 100%;
max-width: 400px;
margin: 40px auto 0;
padding: 22px 40px;
background: #0c4728; /* 深緑 */
color: #fff;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.15em;
text-align: center;
border: none;
border-radius: 2px; /* ★あえて角を少しだけ残してシックな印象に */
cursor: pointer;
box-shadow: 0 15px 35px rgba(12, 71, 40, 0.2);
position: relative;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
z-index: 1;
}
.js-confirm-btn,
.wpcf7-submit {
background: #0c4728;
color: #fff;
}
.js-confirm-btn:hover,
.wpcf7-submit:hover {
background: #08331d;
transform: translateY(-2px);
}
.js-back-btn {
background: #eee;
color: #666;
}
/* 確認画面のデザイン */
#entry-confirm-area {
padding: 20px 0;
}
.confirm-item {
border-bottom: 1px dotted #ddd;
padding: 20px 0;
display: flex;
}
.confirm-label {
width: 250px;
font-weight: bold;
color: #0c4728;
}
.confirm-value {
flex: 1;
color: #333;
}
/* エラーメッセージ */
.wpcf7-not-valid-tip {
color: #e31e2d;
font-size: 12px;
margin-top: 5px;
font-weight: bold;
}
/* ==========================================
* スマホ用（画面幅768px以下）のエントリーページ調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. 全体コンテナの余白調整 */
.entry-page {
padding-bottom: 60px; /* PC版の100pxから引き締め */
}
/* 2. 導入部（Intro）のコンパクト化 */
.entry-intro {
padding: 40px 0 30px; /* ファーストビューでフォームの頭がしっかり見えるように調整 */
}
.entry-intro__title {
font-size: 22px; /* 32pxから22pxへ。スマホで綺麗に収まるサイズにリサイズ */
margin-bottom: 15px;
}
.entry-intro__text {
font-size: 14px; /* 長文の圧迫感を減らすため一回りスマートに */
line-height: 1.6;
}
/* 3. 【最重要】フォーム筐体のパディングをスマホ用に全開放 */
.company-contact-form {
padding: 30px 15px; /* 左右のパディングを60pxから15pxへ削り、入力欄の横幅を最大限に確保 */
border-radius: 4px; /* スマホの画面に合わせて角丸をややミニマルに */
box-shadow: 0 5px 20px rgba(0,0,0,0.03); /* 影を薄くしてフラットですっきりした見た目に */
}
/* 入力フィールドの間隔 */
.entry-form-row {
margin-bottom: 25px; /* 縦の間隔を少し詰めて、ページ全体の長さを抑える */
}
/* フィールド共通（文字サイズ調整） */
.wpcf7-text,
.wpcf7-select,
.wpcf7-textarea {
padding: 12px; /* 15pxから12pxへ。スマートにしつつタップ領域は十分に維持 */
font-size: 15px; /* iOSでの「フォームフォーカス時の不自然な画面ズームバグ」を防ぐ最適解サイズ */
}
/* 4. 【最重要】確認画面（Confirm）を横並びから「縦並び」へ完全スイッチ */
/* ラベルと入力値の衝突を100%回避し、スマホでも見やすさバツグンのレイアウトにします */
.confirm-item {
flex-direction: column; /* 2カラムを1カラムに変更 */
align-items: flex-start;
padding: 15px 0;
}
.confirm-label {
width: 100% !important; /* 幅250pxの固定を解除し、全幅へ広げる */
font-size: 13px; /* ラベルは一回りスマートにしてデータの強弱をつける */
margin-bottom: 5px; /* 下に続く入力値との間にほんの少し隙間を開ける */
}
.confirm-value {
width: 100%;
font-size: 15px;
padding-left: 2px; /* ほんの少しだけインデントを入れ、視認性を向上 */
}
/* 5. ボタンエリアのモバイル最適化 */
.entry-btn-group {
flex-direction: column; /* 「戻る」「送信」ボタンが横並びで潰れるのを防ぐため縦並びへ */
gap: 12px;
margin-top: 30px;
}
.js-confirm-btn,
.wpcf7-submit,
.js-back-btn {
width: 100%;
max-width: 100%; /* スマホの画面幅いっぱいに広げて押しやすく */
margin: 0 auto; /* マージンをリセット */
padding: 16px 20px; /* PC版の22pxから16pxへ引き締め、親指でジャストな高さに補正 */
font-size: 16px; /* 18pxから16pxへリサイズし、ボタン内での文字割れを防止 */
}
/* スマホでのボタンの縦順を調整（確認画面で「戻る」が下に来る場合のセーフティ） */
.js-back-btn {
order: 2; /* 縦並びにした際、「戻る」ボタンが自然に一番下へドロップするように制御 */
}
}
/* =========================
問い合わせページ
========================= */
/* 親要素のグリッド設定 */
.contact-selection-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px; /* 隙間を少し広げて、カード自体の横幅を削る */
max-width: 1060px; /* ★ 1400pxから1060pxに縮める（1つのカードが約320px幅に） */
margin: 0 auto 180px;
padding: 0 20px;
}
/* ポップアップ（モーダル）の基本設定 */
.contact-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
display: none; /* 初期は隠す */
align-items: center;
justify-content: center;
}
.contact-modal.is-open {
display: flex;
}
/* 背景を暗く & ぼかす */
.contact-modal__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
/* 浮き出る白い箱 */
.contact-modal__content {
position: relative;
background: #fff;
width: 90%;
max-width: 700px;
max-height: 85vh;
padding: 50px 30px;
overflow-y: auto;
border-radius: 4px;
box-shadow: 0 20px 50px rgba(0,0,0,0.3);
animation: modalIn 0.4s ease-out;
}
@keyframes modalIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* 閉じるボタン */
.contact-modal__close {
position: absolute;
top: 15px;
right: 15px;
font-size: 30px;
background: none;
border: none;
cursor: pointer;
color: #999;
}
.modal-title {
text-align: center;
color: #0c4728;
font-size: 24px;
margin-bottom: 30px;
border-bottom: 2px solid #0c4728;
display: inline-block;
left: 50%;
transform: translateX(-50%);
position: relative;
}
/* 各カードのユニット */
.contact-unit {
display: flex;
flex-direction: column;
}
/* カード本体のデザイン */
.contact-card {
background: #fff;
border: 1px solid #ddd; /* 繊細なグレーの枠線 */
padding: 40px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* ホバー時の挙動 */
.contact-card:hover {
border-color: #0c4728;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transform: translateY(-5px);
}
/* アクティブ（開いている時）の挙動 */
.contact-card.is-active {
border-color: #0c4728;
border-width: 1px;
background: #f4f7f5; /* ほんのり緑がかった背景 */
border-bottom: none; /* スライドパネルと繋げるために下線を消す */
z-index: 2;
}
/* カード内のタイトル */
.contact-card__title {
font-size: 20px;
color: #0c4728;
font-weight: bold;
margin-bottom: 20px;
position: relative;
padding-left: 15px;
line-height: 1.4;
}
.contact-card__title::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
width: 4px;
height: 1.2em;
background: #0c4728;
}
/* カード内の説明文 */
.contact-card__text {
font-size: 14px;
line-height: 1.8;
color: #666;
margin-bottom: 30px;
flex-grow: 1;
}
/* カード内のボタン風ラベル */
.contact-card__btn {
display: block;
width: 100%;
background: #0c4728;
color: #fff;
text-align: center;
padding: 15px 10px;
border-radius: 2px; /* 少し角を残すシックなスタイル */
font-size: 14px;
font-weight: bold;
transition: 0.3s;
}
.contact-card:hover .contact-card__btn {
background: #08331d;
}
/* 確認ボタン専用のデザイン（上書き） */
.js-company-confirm-btn.submit {
background-color: #0c4728; /* ブランドカラーの緑 */
color: #fff;
border: none;
padding: 18px 40px;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.1em;
cursor: pointer;
width: 100%;
max-width: 300px;
display: block;
margin: 0 auto;
transition: background-color 0.3s, transform 0.2s;
}
.js-company-confirm-btn.submit:hover {
background-color: #08331d;
transform: translateY(-2px); /* 少し浮き上がる演出 */
}
/* ★ 赤色の丸みのある必須バッジ */
.required-badge {
background-color: #e53935; /* 注意を引きやすい赤 */
color: #fff;
font-size: 12px;
padding: 2px 6px;
border-radius: 2px;
font-weight: bold;
}
/* ==========================================
スライドパネル（フォーム部分）
========================================== */
.contact-slide-panel {
max-height: 0;
overflow: hidden;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
background: #fff;
border: 1px solid #ddd;
border-top: none; /* カードとの繋ぎ目を自然に */
opacity: 0;
transition: opacity 0.5s ease; /* 高さはJSで制御するのでopacityのみでOK */
}
.contact-slide-panel.is-open {
max-height: 3000px; /* フォームが長くても大丈夫なように多めに設定 */
opacity: 1;
margin-bottom: 40px;
border-color: #0c4728; /* 開いている時は枠線を緑に */
}
.panel-inner {
padding: 40px;
border-top: 1px solid #eee; /* カードとの境界線 */
}
/* ==========================================
* スマホ用（画面幅768px以下）の問い合わせページ調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. 親要素のグリッドを「2列」から「1列」へ完全開放 */
.contact-selection-grid {
grid-template-columns: 1fr; /* 縦1カラムに並び替えて横幅を救済 */
gap: 20px; /* カード同士の間隔を20pxに引き締め */
margin-bottom: 60px; /* PC版の180pxからスマホ適正の60pxへ凝縮 */
}
/* 2. カード本体のデザインのスマホ最適化 */
.contact-card {
padding: 30px 20px; /* 上下40px→30px、左右40px→20pxへスリム化し本文領域を確保 */
}
/* スマホでの誤認識を防ぐため、ホバー時の浮き上がり演出を安全にリセット */
.contact-card:hover {
transform: none !important;
}
/* カード内のタイトル */
.contact-card__title {
font-size: 18px; /* 20pxから18pxへ、スマホにジャストなサイズへ補正 */
margin-bottom: 12px;
}
/* カード内の説明文 */
.contact-card__text {
font-size: 13.5px; /* 14pxから13.5pxへわずかにスケールダウン */
line-height: 1.7;
margin-bottom: 20px; /* ボタンとの距離を適正化 */
}
/* カード内のボタン風ラベル */
.contact-card__btn {
padding: 12px 10px; /* 上下を少しスリムにして押しやすさとスマートさを両立 */
font-size: 13.5px;
}
/* 3. 【超重要】合体スライドパネルのパディング調整 */
.contact-slide-panel.is-open {
margin-bottom: 25px; /* 1カラム化に伴い、次の要素を押しすぎないようマージンを25pxにセーブ */
}
.panel-inner {
padding: 30px 15px; /* 40pxから「左右15px」へ広げ、中のCF7フォームが破綻するのを防止 */
}
/* 4. 【最重要】ポップアップ（モーダル）のスマホ画面窒息対策 */
.contact-modal__content {
width: 92%; /* 画面の左右にわずかな隙間を残す美しいサイズ */
max-height: 90vh; /* 液晶の縦を限界まで使えるよう85vhから90vhへ拡張 */
padding: 40px 20px 30px; /* 上下の余白を削り、スマホのキーボード表示時でもスクロール領域を死守 */
}
/* 閉じるボタンのスマホ用配置調整（親指が届きやすく、タイトルと被らない位置へ） */
.contact-modal__close {
top: 10px;
right: 12px;
font-size: 26px; /* 30pxから26pxへわずかにミニマル化 */
padding: 5px; /* タップ領域（判定）だけは広く確保 */
}
/* モーダル内タイトル */
.modal-title {
font-size: 20px; /* 24pxから20pxへ。スマホの1行に美しく収まるサイズ */
margin-bottom: 25px;
}
/* 確認ボタン（送信ボタン）のモバイル最適化 */
.js-company-confirm-btn.submit {
max-width: 100%; /* 横幅いっぱいに広げてスマホの親指で100%押しやすく */
padding: 15px 20px; /* 高さを他のボタンと合わせてスマートに調整 */
font-size: 1rem;
}
/* スマホホバー時の挙動を安全にリセット */
.js-company-confirm-btn.submit:hover {
transform: none !important;
}
}
/* ==========================================
プライバシーポリシーの横幅を制限して真ん中に寄せる
========================================== */
.privacy-inner {
max-width: 800px; /* PCで広がっても最大800ピクセルの幅に収める */
margin: 0 auto; /* 画面のちょうど真ん中に配置する */
padding: 0 20px; /* スマホで見たときに左右に少しだけ隙間を作る */
}
/* ==========================================
* スマホ用（画面幅768px以下）のプライバシーポリシー調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. 全体の上下余白をスマホの画面比率に最適化 */
.privacy-inner {
/* PC版より画面が狭いスマホでは、上下の大きな余白を「40px」前後に引き締めると
ユーザーがスクロールしやすくなり、スマートな印象になります */
padding: 40px 15px; /* 左右余白を20pxから15pxに微調整して本文の横幅を広く確保 */
}
/* 2. ポリシー内の見出し（h2 / h3）のスマホ用リサイズ */
/* WordPressの本文エリア（.entry-content など）の中にある見出しを想定しています */
.privacy-inner h2 {
font-family: 'Noto Serif JP', serif;
font-size: 1.3rem; /* PC用の大きな見出しを、スマホで1〜2行にすっきり収まるサイズに縮小 */
color: #0c4728; /* ブランドカラーの深緑をここにもさりげなく適用 */
margin-top: 30px; /* 各条項ごとの区切りを分かりやすくするための上部マージン */
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 1px solid #ddd; /* 第1条、第2条の区切りを明確にする上品な下線 */
}
.privacy-inner h3 {
font-family: 'Noto Serif JP', serif;
font-size: 1.1rem; /* h2より一回り小さい適切なスケール */
margin-top: 20px;
margin-bottom: 10px;
color: #333;
}
/* 3. 本文テキスト・箇条書き（ul / li / p）の快適な行間コントロール */
.privacy-inner p,
.privacy-inner li {
font-size: 0.88rem; /* 法律・規約関連の堅い長文は、スマホでは少しスマート（約14px）に */
line-height: 1.75; /* 文字がギュッと詰まって目が滑るのを防ぐ、ゆったり快適な行間 */
color: #444444; /* 真っ黒（#000）よりも僅かに柔らかい墨色にすることで目の疲れを軽減 */
margin-bottom: 15px;
}
/* 箇条書き（個人情報の利用目的など）の左側余白調整 */
.privacy-inner ul,
.privacy-inner ol {
padding-left: 20px; /* スマホの狭い画面でもポツ（・）や数字がはみ出さない適正余白 */
margin-bottom: 20px;
}
}
/* --------------------------------------------------------------------------
cancelページ
-------------------------------------------------------------------------- */
.np-cancel-hero {
padding: 160px 0 100px 0;
border-bottom: 1px solid #111111; /* 力強い黒の境界線 */
background-color: #ffffff;
}
.np-cancel-hero__sub {
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.2em;
color: #111111;
margin-bottom: 20px;
}
.np-cancel-hero__title {
font-family: 'Montserrat', sans-serif;
font-size: 5.5rem; /* 画面を圧倒する巨大な英字 */
font-weight: 900;
line-height: 0.95;
letter-spacing: -0.02em;
text-transform: uppercase;
margin-bottom: 40px;
}
.np-cancel-hero__lead {
font-size: 1.1rem;
font-weight: 400;
color: #333333;
max-width: 800px;
line-height: 1.8;
}
@media (max-width: 960px) {
.np-cancel-hero__title {
font-size: 3.5rem; /* タブレットサイズで文字崩れを防ぐ */
}
}
@media (max-width: 640px) {
.np-cancel-hero {
padding: 100px 0 60px 0; /* 上下の余白をスマホ向けにタイトに */
}
.np-cancel-hero__title {
font-size: 2.5rem; /* スマホの画面幅に収まる限界のデカさに調整 */
margin-bottom: 30px;
}
.np-cancel-hero__lead {
font-size: 0.95rem; /* モバイルで見やすいフォントサイズ */
}
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Noto+Sans+JP:wght@300;400;700&display=swap');
.np-cancel-features {
font-family: 'Noto Sans JP', sans-serif;
color: #111111;
background-color: #ffffff;
line-height: 1.7;
letter-spacing: 0.03em;
-webkit-font-smoothing: antialiased;
padding: 140px 0;
}
.np-cancel-container {
max-width: 1300px;
margin: 0 auto;
padding: 0 5%;
}
/* 共通ボタン */
.np-cancel-btn {
display: inline-flex;
align-items: center;
gap: 15px;
background: #111111;
color: #ffffff;
padding: 18px 40px;
font-family: 'Montserrat', sans-serif;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.15em;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.np-cancel-btn svg {
transition: transform 0.3s ease;
}
.np-cancel-btn:hover {
background: #252525;
}
.np-cancel-btn:hover svg {
transform: translateX(5px);
}
/* セクションヘッド */
.np-cancel-section-head {
margin-bottom: 100px;
border-bottom: 1px solid #111;
padding-bottom: 20px;
}
.np-cancel-section-title {
font-family: 'Montserrat', sans-serif;
font-size: 2.4rem;
font-weight: 800;
letter-spacing: 0.1em;
margin-bottom: 10px;
}
.np-cancel-section-subtitle {
font-size: 1rem;
color: #555555;
font-weight: 300;
}
/* 縦並びリスト */
.np-cancel-zigzag-list {
display: flex;
flex-direction: column;
gap: 120px;
}
/* 各カード：基本（左画像、右テキスト） */
.np-cancel-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8%;
}
/* 偶数番目の反転設定 */
.np-cancel-card:nth-child(even) {
flex-direction: row-reverse;
}
/* 画像ブロック */
.np-cancel-card__image {
width: 50%;
height: 450px;
overflow: hidden;
background-color: #f5f5f5;
}
.np-cancel-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.np-cancel-card:hover .np-cancel-card__image img {
transform: scale(1.04);
}
/* テキストブロック */
.np-cancel-card__body {
width: 42%;
}
.np-cancel-card__meta {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.np-cancel-card__num {
font-family: 'Montserrat', sans-serif;
font-size: 1.5rem;
font-weight: 800;
color: #111111;
}
.np-cancel-card__tag {
font-family: 'Montserrat', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
color: #111111;
border: 1px solid #111111;
padding: 3px 10px;
}
.np-cancel-card__title {
font-size: 1.6rem;
font-weight: 700;
color: #111111;
margin-bottom: 20px;
}
.np-cancel-card__text {
font-size: 0.95rem;
color: #444444;
line-height: 1.8;
text-align: justify;
}
.np-cancel-action {
margin-top: 100px;
text-align: center;
}
@media screen and (max-width: 768px) {
/* 余白調整 */
.np-cancel-features {
padding: 80px 0;
}
/* セクションヘッド調整 */
.np-cancel-section-head {
margin-bottom: 60px;
}
.np-cancel-section-title {
font-size: 1.8rem;
}
/* リストの隙間を縮小 */
.np-cancel-zigzag-list {
gap: 60px;
}
/* カードを縦並びに変更 */
.np-cancel-card,
.np-cancel-card:nth-child(even) {
flex-direction: column;
align-items: flex-start;
gap: 30px;
}
/* 画像とテキストの幅を100%に */
.np-cancel-card__image {
width: 100%;
height: 300px; /* スマホ用に高さを少し抑える */
}
.np-cancel-card__body {
width: 100%;
}
/* テキストの調整 */
.np-cancel-card__title {
font-size: 1.3rem;
}
/* ボタン調整 */
.np-cancel-btn {
padding: 15px 30px;
width: 100%;
justify-content: center;
}
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Oswald:wght@300;500&display=swap');
/* ページ全体をなめらかにスクロールさせる設定 */
html {
scroll-behavior: smooth;
}
/* 画像リンクをブロック要素にしてエリアいっぱいに広げる */
.np-cancel-card__image a {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
/* ホバー時の画像ズーム効果を a タグの子要素に対しても適用 */
.np-cancel-card__image a:hover img {
transform: scale(1.04);
}
/* WordPressの固定ヘッダーなどがある場合のズレ防止（必要に応じて数値を調整してください） */
.np-cancel-strength-block {
scroll-margin-top: 40px; /* クリックして飛んだ際、上部に少し余白を持たせる設定 */
}
.np-cancel-strength-section {
font-family: 'Noto Sans JP', sans-serif;
color: #222222;
background-color: #ffffff;
padding: 120px 0;
line-height: 1.75;
letter-spacing: 0.04em;
}
.np-cancel-strength-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 4%;
}
/* セクションヘッド */
.np-cancel-strength-head {
margin-bottom: 80px;
}
.np-cancel-strength-head__sub {
font-family: 'Oswald', sans-serif;
font-size: 0.9rem;
font-weight: 500;
color: #686b93;
letter-spacing: 0.15em;
display: block;
margin-bottom: 10px;
}
.np-cancel-strength-head__title {
font-size: 2rem;
font-weight: 700;
color: #111111;
margin: 0;
}
/* PC版：画像が親要素からはみ出さないように制限 */
.np-cancel-strength-block__visual-zone .np-cancel-image-box img {
max-width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* 強みリストコンテナ */
.np-cancel-strength-list {
display: flex;
flex-direction: column;
}
/* 各ブロック（横いっぱいの1本線で区切る） */
.np-cancel-strength-block {
border-top: 1px solid #e5e5e5;
padding: 60px 0;
display: flex;
justify-content: space-between;
}
.np-cancel-strength-block:last-child {
border-bottom: 1px solid #e5e5e5; /* 最後の要素の下線 */
}
/* ブロックの左側（ナンバーと見出し） */
.np-cancel-strength-block__meta {
width: 32%;
}
.np-cancel-strength-block__num {
font-family: 'Oswald', sans-serif;
font-size: 2.5rem;
font-weight: 300;
color: #686b93;
display: block;
line-height: 1;
margin-bottom: 15px;
}
.np-cancel-strength-block__title {
font-size: 1.35rem;
font-weight: 700;
line-height: 1.5;
color: #111111;
margin: 0;
}
/* ブロックの右側（文章と図の複合エリア） */
.np-cancel-strength-block__content {
width: 63%;
display: flex;
justify-content: space-between;
gap: 40px;
}
/* 文章エリア */
.np-cancel-strength-block__text-zone {
width: 55%;
font-size: 0.95rem;
color: #444444;
text-align: justify;
}
.np-cancel-strength-block__text-zone p {
margin: 0;
}
/* 図・グラフの表示エリア */
.np-cancel-strength-block__visual-zone {
width: 40%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 768px) {
/* 余白の縮小 */
.np-cancel-strength-section {
padding: 60px 0;
}
.np-cancel-strength-head {
margin-bottom: 40px;
}
.np-cancel-strength-head__title {
font-size: 1.6rem;
}
/* ブロックの縦積み設定 */
.np-cancel-strength-block {
flex-direction: column;
padding: 40px 0;
gap: 30px;
}
/* 左側（ナンバー・タイトル）の幅を100%に */
.np-cancel-strength-block__meta {
width: 100%;
}
/* 右側（コンテンツ・ビジュアル）の幅を100%に */
.np-cancel-strength-block__content {
width: 100%;
flex-direction: column; /* ここも縦積みに */
gap: 20px;
}
/* テキストエリア・ビジュアルエリアの幅を100%に */
.np-cancel-strength-block__text-zone,
.np-cancel-strength-block__visual-zone {
width: 100%;
}
/* 画像が入っている箱のサイズを強制的にスマホ幅に合わせる */
.np-cancel-strength-block__visual-zone .np-cancel-image-box {
width: 100%;
max-width: 300px; /* スマホで大きすぎないよう最大幅を指定（好みに合わせて調整してください） */
margin: 0 auto; /* 中央寄せ */
}
/* 画像自体を箱の中に収める */
.np-cancel-strength-block__visual-zone .np-cancel-image-box img {
width: 100%;
height: auto;
display: block;
object-fit: contain; /* 画像が歪まないようにする */
}
/* スマホでの数字サイズ調整 */
.np-cancel-strength-block__num {
font-size: 2rem;
margin-bottom: 10px;
}
}
/* ==========================================================================
cancel水平アコーディオン：8項目・2段配置（接頭辞 np-cancel-）
========================================================================== */
.np-cancel-horiz-section {
max-width: 1200px;
margin: 0 auto;
padding: 60px 4%;
display: flex;
flex-direction: column;
gap: 20px; /* 上段と下段のすき間 */
}
/* 4つのアイテムを横に並べるコンテナ */
.np-cancel-horiz-wrapper {
display: flex;
gap: 15px; /* アイテム同士の横のすき間 */
width: 100%;
height: 280px; /* PCでの高さ（文字量に合わせて調整してください） */
}
/* 個々のアイテムの基本状態 */
.np-cancel-horiz-item {
flex: 1; /* 4等分の幅 */
background-color: #ffffff;
border: 1px solid #111111; /* パキッとした黒線（NewsPicks風） */
padding: 25px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
/* 横幅の変化、背景色、文字色の変化をなめらかに */
transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1),
background-color 0.4s ease,
color 0.4s ease;
}
/* ★マウスが乗った（ホバーした）アイテムは横幅を大きく広げる */
.np-cancel-horiz-item:hover {
flex: 3; /* 他の閉じているアイテムの3倍の広さになる */
background-color: #111111; /* 黒背景に反転 */
color: #ffffff; /* 文字を白に */
}
/* ナンバー（英字フォント） */
.np-cancel-horiz-num {
font-family: 'Montserrat', sans-serif;
font-size: 1.6rem;
font-weight: 800;
display: block;
margin-bottom: 8px;
letter-spacing: 0.05em;
}
/* タイトル（日本語） */
.np-cancel-horiz-title {
font-size: 1.15rem;
font-weight: 700;
margin: 0;
line-height: 1.4;
/* ホバーしていない時は文字が横に溢れないように、折り返しを許可 */
white-space: normal;
}
/* 中身の文章（初期状態は消しておく） */
.np-cancel-horiz-body {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.3s ease, transform 0.3s ease;
margin-top: 15px;
}
.np-cancel-horiz-body p {
font-size: 0.88rem;
line-height: 1.6;
margin: 0;
/* 横幅が狭いときに文字がはみ出るのを防ぐため、ホバー時以外は非表示化を確実に */
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ★ホバーした時だけ、文章をフワッと下から浮き上がらせる */
.np-cancel-horiz-item:hover .np-cancel-horiz-body {
opacity: 1;
transform: translateY(0);
transition-delay: 0.25s; /* 横幅が広がりきったタイミングで文字を出す */
}
.np-cancel-horiz-item:hover .np-cancel-horiz-body p {
display: block;
overflow: visible;
}
/* ==========================================================================
RESPONSIVE (スマホ・タブレットでは縦並びにして読みやすく)
========================================================================== */
@media (max-width: 960px) {
.np-cancel-horiz-wrapper {
flex-direction: column;
height: auto; /* 高さを解除 */
gap: 15px;
}
.np-cancel-horiz-item,
.np-cancel-horiz-item:hover {
flex: none;
width: 100%;
height: auto;
background-color: #ffffff;
color: #111111;
padding: 20px;
}
/* スマホではギミックを解除し、最初からすべて見せる */
.np-cancel-horiz-body {
opacity: 1;
transform: none;
}
.np-cancel-horiz-item:hover .np-cancel-horiz-body {
transition-delay: 0s;
}
}
/* ==========================================================================
reCAPTCHA
========================================================================== */
/* reCAPTCHA 表示 共通 */
.company-recaptcha-note {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap; /* ここで折り返しを許可 */
gap: 6px;
width: 90%; /* 100%から少し減らして左右に余白を作る */
max-width: 500px; /* PCでの広がりすぎを防ぐ */
margin: 24px auto 12px;
text-align: center;
font-size: 13px;
line-height: 1.6;
color: #64748b;
word-break: break-all; /* 文字が突き抜けるのを防ぐ */
}
.company-recaptcha-note span,
.company-recaptcha-note a {
display: inline-block; /* inline から変更 */
word-break: break-all;
}
.company-recaptcha-note a {
color: #2563eb;
text-decoration: underline;
font-weight: 600;
}
/* スマホ向けの調整 */
@media screen and (max-width: 600px) {
.company-recaptcha-note {
width: 95%; /* スマホでは画面端ギリギリまで使う */
font-size: 12px;
margin: 16px auto 8px;
}
}
/* =========================
解約アンケ
========================= */
.questionnaire-wrapper {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
}
.questionnaire-section {
margin-bottom: 25px;
}
.questionnaire-section label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
/* ラジオボタンを縦に並べる場合 */
.wpcf7-list-item {
display: block;
margin-bottom: 5px;
}
.questionnaire-submit {
text-align: center;
margin-top: 20px;
}
/* =========================
tablet
========================= */
@media (max-width: 1024px) {
.u-useful-archive {
grid-template-columns: 1fr;
gap: 20px;
}
.u-useful-item {
padding: 16px;
}
.u-useful-img {
width: 200px;
min-width: 200px;
}
.u-useful-img img {
min-height: 160px;
}
}
/* =========================
mobile
========================= */
@media (max-width: 767px) {
.u-useful-archive {
grid-template-columns: 1fr;
gap: 16px;
width: calc(100% - 16px);
}
.u-useful-item {
flex-direction: column;
gap: 14px;
padding: 14px;
border-radius: 16px;
}
.u-useful-img {
width: 100%;
min-width: 0;
border-radius: 12px;
}
.u-useful-img img {
min-height: 200px;
max-height: 220px;
}
.u-useful-textwrap {
padding: 0;
}
.u-useful-item-title {
font-size: 1.08rem;
line-height: 1.65;
}
.u-useful-item-text {
margin-top: 10px;
font-size: 0.93rem;
line-height: 1.85;
-webkit-line-clamp: 3;
}
.page-navi {
width: calc(100% - 16px);
margin-top: 24px;
}
.page-navi .wp-pagenavi a,
.page-navi .wp-pagenavi span {
min-width: 38px;
height: 38px;
font-size: 0.9rem;
}
}
/* =========================
small mobile
========================= */
@media (max-width: 480px) {
.u-useful-archive {
width: calc(100% - 12px);
}
.u-useful-item {
padding: 12px;
}
.u-useful-img img {
min-height: 180px;
max-height: 200px;
}
.u-useful-item-title {
font-size: 1rem;
}
.u-useful-item-text {
font-size: 0.9rem;
}
.page-navi {
width: calc(100% - 12px);
}
}
/* =========================
ARTICLE DESIGN / LUXURY
#9A2530ベース
========================= */
.article-wrap {
max-width: 860px;
margin: 0 auto;
padding: 40px 20px 60px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
color: #222;
line-height: 2;
}
/* タイトル */
.article-title {
font-size: 36px;
font-weight: 700;
line-height: 1.4;
margin-bottom: 16px;
letter-spacing: 0.02em;
}
.article-lead {
font-size: 15px;
color: #666;
margin-bottom: 36px;
}
/* セクション */
.article-section {
margin-bottom: 36px;
}
/* H2 */
.article-section h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 18px;
position: relative;
padding-left: 14px;
}
.article-section h2::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 4px;
background: #9A2530;
border-radius: 2px;
}
/* H3 */
.article-section h3 {
font-size: 18px;
font-weight: 700;
margin: 24px 0 10px;
position: relative;
padding-left: 12px;
}
.article-section h3::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 6px;
height: 6px;
background: #9A2530;
border-radius: 50%;
}
/* テキスト */
.article-section p {
margin-bottom: 14px;
color: #333;
}
/* ボックス */
.article-box {
background: #fff;
border: 1px solid #eee;
border-radius: 16px;
padding: 22px;
margin: 24px 0;
}
/* リスト */
.article-section ul {
padding-left: 1.2em;
}
.article-section li {
margin-bottom: 6px;
}
/* CTA */
.article-cta {
margin-top: 40px;
text-align: center;
}
.article-cta a {
display: inline-block;
padding: 16px 30px;
border-radius: 999px;
background: #9A2530;
color: #fff;
font-weight: 700;
text-decoration: none;
box-shadow: 0 12px 24px rgba(154,37,48,0.2);
transition: 0.3s;
}
.article-cta a:hover {
transform: translateY(-2px);
opacity: 0.9;
}
/* スマホ */
@media (max-width: 767px) {
.article-title {
font-size: 26px;
}
.article-section h2 {
font-size: 20px;
}
.article-section h3 {
font-size: 16px;
}
.article-wrap {
padding: 20px 14px 40px;
}
}
/* =========================
REVIEW ARTICLE / PREMIUM
#9A2530 base
========================= */
.review-wrap {
width: min(100%, 920px);
margin: 0 auto;
padding: 32px 20px 64px;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
color: #222;
line-height: 2;
}
.review-lead {
position: relative;
margin: 0 0 34px;
padding: 0 0 18px;
font-size: 15px;
line-height: 2;
color: #5d5657;
}
.review-lead::after {
content: "";
display: block;
width: 88px;
height: 2px;
margin-top: 18px;
background: linear-gradient(90deg, #9A2530 0%, rgba(154, 37, 48, 0.18) 100%);
border-radius: 999px;
}
/* 要点サマリー */
.review-summary {
margin: 0 0 28px;
padding: 22px 22px 20px;
background: linear-gradient(135deg, #fff 0%, #fcf7f8 100%);
border: 1px solid rgba(154, 37, 48, 0.14);
border-radius: 18px;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.05);
}
.review-summary-label {
display: inline-flex;
align-items: center;
margin-bottom: 12px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(154, 37, 48, 0.08);
color: #8f1f2a;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
}
.review-summary p {
margin: 0;
font-size: 15px;
line-height: 2;
color: #342f30;
}
/* セクション */
.review-box {
position: relative;
margin-bottom: 24px;
padding: 28px 28px 24px;
background: #fff;
border: 1px solid #ece6e7;
border-radius: 18px;
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.045),
0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.review-heading {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 18px;
font-size: 24px;
font-weight: 700;
line-height: 1.45;
color: #181818;
letter-spacing: 0.01em;
}
.review-heading::before {
content: "";
display: inline-block;
width: 30px;
height: 3px;
border-radius: 999px;
background: #9A2530;
flex-shrink: 0;
}
.review-box p {
margin: 0 0 14px;
font-size: 15px;
line-height: 2;
color: #3e3a3b;
}
.review-box p:last-child {
margin-bottom: 0;
}
.review-box strong {
color: #8f1f2a;
font-weight: 700;
}
/* 良い点・注意点の2カラム */
.review-points {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin: 18px 0 18px;
}
.review-card {
padding: 18px 18px 16px;
border-radius: 16px;
border: 1px solid #eee7e8;
background: #fbf9f9;
}
.review-card-title {
margin: 0 0 10px;
font-size: 15px;
font-weight: 700;
color: #222;
}
.review-card--good {
background: linear-gradient(180deg, #fff 0%, #fcf7f8 100%);
border-color: rgba(154, 37, 48, 0.14);
}
.review-card--good .review-card-title {
color: #8f1f2a;
}
.review-card--bad {
background: linear-gradient(180deg, #fcfcfc 0%, #f7f5f5 100%);
}
/* 通常リスト */
.review-box ul {
margin: 0;
padding: 0;
list-style: none;
}
.review-box li {
position: relative;
margin-bottom: 10px;
padding-left: 18px;
color: #3e3a3b;
line-height: 1.9;
}
.review-box li:last-child {
margin-bottom: 0;
}
.review-box li::before {
content: "";
position: absolute;
left: 0;
top: 0.8em;
width: 6px;
height: 6px;
border-radius: 50%;
background: #9A2530;
transform: translateY(-50%);
}
/* 小さめ補足枠 */
.review-note-box {
margin-top: 18px;
padding: 16px 18px;
border-radius: 14px;
background: #faf7f7;
border: 1px solid #efe7e8;
color: #494243;
font-size: 14px;
line-height: 1.9;
}
/* リンク */
.review-box a {
color: #8f1f2a;
text-decoration: none;
border-bottom: 1px solid rgba(154, 37, 48, 0.25);
transition: opacity 0.25s ease, color 0.25s ease;
}
.review-box a:hover {
opacity: 0.82;
color: #731823;
}
/* CTA */
.review-cta {
margin-top: 34px;
text-align: center;
}
.review-cta a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 320px;
max-width: 100%;
padding: 17px 30px;
box-sizing: border-box;
border-radius: 999px;
background: linear-gradient(135deg, #8a1f2a 0%, #9A2530 55%, #b34652 100%);
color: #fff;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.03em;
text-decoration: none;
box-shadow: 0 16px 30px rgba(154, 37, 48, 0.20);
transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.review-cta a:hover {
transform: translateY(-2px);
box-shadow: 0 18px 36px rgba(154, 37, 48, 0.24);
opacity: 0.98;
}
.review-note {
margin-top: 18px;
font-size: 12px;
line-height: 1.8;
color: #8b7e80;
}
/* スマホ */
@media (max-width: 767px) {
.review-wrap {
padding: 20px 14px 40px;
}
.review-lead {
font-size: 14px;
margin-bottom: 24px;
padding-bottom: 14px;
}
.review-lead::after {
width: 70px;
margin-top: 14px;
}
.review-summary {
padding: 18px 16px 16px;
border-radius: 16px;
margin-bottom: 20px;
}
.review-summary p {
font-size: 14px;
line-height: 1.9;
}
.review-box {
padding: 20px 16px 18px;
border-radius: 16px;
margin-bottom: 16px;
}
.review-heading {
gap: 10px;
margin-bottom: 14px;
font-size: 19px;
line-height: 1.55;
}
.review-heading::before {
width: 22px;
height: 3px;
}
.review-box p,
.review-box li,
.review-card-title,
.review-note-box {
font-size: 14px;
line-height: 1.9;
}
.review-points {
grid-template-columns: 1fr;
gap: 10px;
margin: 14px 0 16px;
}
.review-card {
padding: 15px 14px 14px;
border-radius: 14px;
}
.review-cta {
margin-top: 24px;
}
.review-cta a {
width: 100%;
min-width: 0;
padding: 15px 18px;
font-size: 14px;
}
}
/* ===== Q&Aページ ===== */
.qa-page {
padding: 60px 20px;
background: #f9f9f9;
}
/* タイトル */
.qa-hero {
text-align: center;
margin-bottom: 40px;
}
.qa-hero h1 {
font-size: 32px;
margin-bottom: 10px;
}
.qa-hero p {
color: #666;
}
/* Q&A本体 */
.qa-container {
max-width: 800px;
margin: 0 auto;
}
/* 各アイテム */
.qa-item {
background: #fff;
border-radius: 12px;
margin-bottom: 16px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
/* 質問 */
.qa-question {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 18px;
background: #fff;
border: none;
cursor: pointer;
font-size: 16px;
text-align: left;
}
/* Qマーク */
.qa-q {
background: #99202B;
color: #fff;
font-weight: bold;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
/* Aマーク */
.qa-a {
background: #ccc;
color: #333;
font-weight: bold;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 10px;
}
/* テキスト */
.qa-text {
flex: 1;
}
/* アイコン */
.qa-icon {
font-size: 20px;
color: #99202B;
}
/* 回答 */
.qa-answer {
max-height: 0;
overflow: hidden;
transition: 0.3s;
padding: 0 18px;
}
.qa-answer p {
padding: 16px 0;
line-height: 1.6;
}
/* 開いた状態 */
.qa-item.active .qa-answer {
max-height: 200px;
}
.qa-item.active .qa-icon {
transform: rotate(45deg);
}
.qa-contact {
margin-top: 40px;
text-align: center;
padding: 32px 20px;
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.qa-contact__text {
margin-bottom: 16px;
color: #555;
line-height: 1.7;
}
.qa-contact__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
padding: 14px 28px;
background: linear-gradient(135deg, #8f1521 0%, #b3202a 100%);
color: #fff;
text-decoration: none;
border-radius: 999px;
font-weight: 700;
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 12px 24px rgba(153, 32, 43, 0.22);
}
.qa-contact__btn:hover {
transform: translateY(-2px);
box-shadow: 0 16px 30px rgba(153, 32, 43, 0.28);
}
@media (max-width: 767px) {
.qa-contact {
margin-top: 28px;
padding: 24px 16px;
}
.qa-contact__btn {
width: 100%;
min-width: 0;
}
}
@media (max-width: 768px) {
.qa-hero h1 {
font-size: 24px;
}
}
/*privacy*/
.u-privacy-contents {
margin-top: 2rem;
}
.privacy-item {
margin-top: 2rem;
}
.privacy-item h2 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
}
.privacy-item h2 {
font-size: 1.3rem;
display: flex;
align-items: center;
color: #000;
}
.privacy-item h2::before {
content: "";
height: 40px;
width: 4px;
background-color: #000;
margin-right: 1rem;
}
.privacy-item {
line-height: 2;
}
.privacy-item ol,
.privacy-item ul {
margin-top: 0.5rem;
}
.privacy-item ol > li {
list-style: initial;
list-style-type: decimal;
list-style-position: inside;
}
.sec-ol {
padding-left: 2rem;
}
.mt-1 {
margin-top: 1rem;
}
/*記事系ページデザイン*/
.u-resume-text h2,
.useful-single-textwrap h2,
.news-single-textwrap h2 {
font-size: 1.3rem; /* フォントサイズ */
font-weight: bold; /* フォント太さ */
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.5rem;
margin-bottom: 2rem;
background-color: #f4f7fb; /* 背景色 */
border-bottom: 4px solid #9A2530; /* 下の線 */
color: #000; /* フォント色 */
margin-top: 2rem;
}
.u-resume-text h3,
.useful-single-textwrap h3,
.news-single-textwrap h3 {
font-size: 1.2rem; /* フォントサイズ */
font-weight: bold; /* フォント太さ */
padding-top: 0.5rem;
padding-bottom: 0.5rem;
margin: 1rem 0;
position: relative;
border-bottom: dotted 3px #f0c400; /* 線 */
color: #000; /*フォント色*/
}
.u-resume-text hr,
.useful-single-textwrap hr,
.news-single-textwrap hr {
margin: 2rem 0;
border-color: gray;
}
.u-resume-text p,
.useful-single-textwrap p,
.news-single-textwrap p {
line-height: 2;
}
.u-resume-text p strong,
.useful-single-textwrap p strong,
.news-single-textwrap p strong {
background: linear-gradient(transparent 65%, #bd203052 0%);
display: inline;
padding: 0 1px 0px;
}
.u-resume-text p em,
.useful-single-textwrap p em,
.news-single-textwrap p em {
background: linear-gradient(transparent 65%, #bd203052 0%);
display: inline;
padding: 0 1px 0px;
font-weight: bold;
font-style: normal;
}
.u-resume-text ul,
.useful-single-textwrap ul,
.news-single-textwrap ul {
margin: 1rem 0 1rem 0.5rem;
}
.u-resume-text li,
.useful-single-textwrap li,
.news-single-textwrap li {
font-size: 1rem; /* フォントサイズ */
padding-left: 1.4rem;
position: relative;
line-height: 2;
color: #284078; /*フォント色*/
}
.u-resume-text li + li,
.useful-single-textwrap li + li,
.news-single-textwrap li + li {
margin-top: 0.5rem;
}
.u-resume-text li::before,
.useful-single-textwrap li::before,
.news-single-textwrap li::before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f00c";
font-weight: 900;
font-size: 1rem;
left: 0;
top: 0.1rem;
color: #284078;
}
/*features-lists*/
.features-lists-contents {
display: flex;
width: 50px;
}
.features-lists-contents a {
width: calc((100% - 30px) / 2);
margin: 10px;
}
.features-lists-contents a img {
display: flex;
width: 50px;
object-fit: none;
}
/*サイドバーなしの場合のcss*/
.main-max-width {
width: 100%;
}
/*求人掲載page*/
/* 求人ページ本体は縦並び固定 */
.kyujin-content {
display: block !important;
}
/* 画像セクションは先に表示 */
.image-flow {
display: block !important;
width: 100% !important;
margin: 0 !important;
float: none !important;
clear: both !important;
}
/* 問い合わせボックスは必ずその下 */
.kyujin-contact-cta {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 40px 0 0 !important;
float: none !important;
clear: both !important;
order: 99 !important;
}
/* ボックス本体は中央寄せ */
.kyujin-contact-cta__inner {
max-width: 860px;
margin: 0 auto;
}
/* スマホでも順番固定 */
@media (max-width: 767px) {
.kyujin-content {
display: block !important;
}
.image-flow {
display: block !important;
width: 100% !important;
margin: 0 !important;
float: none !important;
clear: both !important;
}
.kyujin-contact-cta {
display: block !important;
width: 100% !important;
margin: 28px 0 0 !important;
float: none !important;
clear: both !important;
order: 99 !important;
}
.kyujin-contact-cta__inner {
width: calc(100% - 32px);
margin: 0 auto;
}
}
.image-flow {
max-width: 1200px;
margin: 0 auto;
}
.image-item {
display: flex;
justify-content: center;
margin: 80px 0;
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease-out;
}
.image-item.left {
justify-content: flex-start;
}
.image-item.right {
justify-content: flex-end;
}
.image-item img {
width: 100%;
max-width: 2000px;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.image-item.show {
opacity: 1;
transform: translateY(0);
}
.kyujin-contact-cta {
display: block;
width: 100%;
margin-top: 40px;
clear: both;
flex-basis: 100%;
}
.kyujin-contact-cta__inner {
max-width: 480px;
margin: 0 auto;
}
.kyujin-contact-cta {
padding: 56px 20px 72px;
}
.kyujin-contact-cta__inner {
max-width: 860px;
margin: 0 auto;
padding: 40px 24px;
background: linear-gradient(135deg, #fff8f8 0%, #ffffff 100%);
border: 1px solid rgba(153, 32, 43, 0.12);
border-radius: 24px;
text-align: center;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}
.kyujin-contact-cta__title {
margin: 0 0 12px;
font-size: clamp(24px, 3vw, 34px);
font-weight: 700;
line-height: 1.4;
color: #99202B;
}
.kyujin-contact-cta__text {
margin: 0 0 24px;
font-size: 15px;
line-height: 1.9;
color: #444;
}
.kyujin-contact-cta__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 240px;
padding: 16px 28px;
background: linear-gradient(135deg, #8f1521 0%, #b3202a 100%);
color: #fff;
font-size: 16px;
font-weight: 700;
text-decoration: none;
border-radius: 999px;
box-shadow: 0 12px 28px rgba(153, 32, 43, 0.22);
transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.kyujin-contact-cta__button:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(153, 32, 43, 0.28);
opacity: 0.96;
}
@media (max-width: 767px) {
.kyujin-contact-cta {
padding: 40px 16px 56px;
}
.kyujin-contact-cta__inner {
padding: 30px 18px;
border-radius: 18px;
}
.kyujin-contact-cta__title {
font-size: 22px;
}
.kyujin-contact-cta__text {
font-size: 14px;
line-height: 1.8;
}
.kyujin-contact-cta__button {
width: 100%;
min-width: 0;
padding: 15px 20px;
font-size: 15px;
}
}