/* ===== Progress (Title-under area) - Production match ===== */
/*
タグを表示する */
br {
display: block;
}
/* テキストを改行するように設定 */
.hero-title,
.hero-subtitle {
white-space: pre-line;
word-break: keep-all;
overflow-wrap: break-word;
line-height: 1.6;
hyphens: none;
}
/* 問題カードとその他の要素は通常の改行処理 */
.problem-card h3,
.cta-urge-title,
.step-title,
.highlight-card-title,
.highlight-card-p {
white-space: normal;
word-break: keep-all;
overflow-wrap: break-word;
line-height: 1.6;
hyphens: auto;
}
/* レスポンシブ対応の改行設定 */
@media (max-width: 768px) {
.hero-title,
.hero-subtitle {
white-space: pre-line;
word-break: keep-all;
overflow-wrap: break-word;
line-height: 1.5;
hyphens: none;
}
.problem-card h3,
.cta-urge-title,
.step-title,
.highlight-card-title,
.highlight-card-p {
white-space: normal;
word-break: keep-all;
overflow-wrap: break-word;
line-height: 1.5;
hyphens: auto;
}
}
/* モバイル版の追加レスポンシブスタイル */
@media (max-width: 480px) {
body {
font-size: clamp(12px, 3vw, 14px);
}
.hero-title,
h1.hero-title {
font-size: clamp(12px, 3.5vw, 16px);
margin-bottom: 1rem;
word-break: keep-all;
overflow-wrap: break-word;
hyphens: none;
line-height: 1.3;
}
.hero-subtitle {
font-size: clamp(12px, 3.5vw, 16px);
margin-bottom: 2rem;
word-break: keep-all;
overflow-wrap: break-word;
hyphens: none;
}
.problem-card h3 {
font-size: clamp(14px, 4vw, 18px);
word-break: keep-all;
overflow-wrap: break-word;
hyphens: auto;
}
.section-header h2 {
font-size: clamp(16px, 5vw, 22px);
word-break: keep-all;
overflow-wrap: break-word;
hyphens: none;
}
.problem-card p,
.step-description,
.highlight-card-p {
word-break: keep-all;
overflow-wrap: break-word;
hyphens: auto;
line-break: strict;
text-justify: inter-ideograph;
}
}
@media (max-width: 375px) {
.hero-title,
h1.hero-title {
font-size: clamp(10px, 3vw, 14px);
word-break: keep-all;
overflow-wrap: break-word;
hyphens: none;
line-height: 1.3;
}
.hero-subtitle {
font-size: clamp(11px, 3vw, 14px);
word-break: keep-all;
overflow-wrap: break-word;
hyphens: none;
}
.problem-card h3 {
font-size: clamp(13px, 3.5vw, 16px);
word-break: keep-all;
overflow-wrap: break-word;
hyphens: auto;
}
.problem-card p,
.step-description,
.highlight-card-p {
word-break: keep-all;
overflow-wrap: break-word;
hyphens: auto;
line-break: strict;
text-justify: inter-ideograph;
}
}
/* 改行の調整 */
.white-space-normal {
white-space: normal;
}
.white-space-nowrap {
white-space: nowrap;
}
/* 意図しない改行を防ぐスタイル */
.prevent-line-break {
white-space: nowrap;
display: inline-block;
}
/* テキストの折り返し制御 */
.text-no-wrap {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 重要なテキスト要素の改行制御 */
.hero-title,
.hero-subtitle,
.problem-card h3,
.step-title,
.highlight-card-title {
white-space: pre-line;
word-break: keep-all;
overflow-wrap: break-word;
hyphens: none;
}
/* 段落テキストの改行制御 */
p, .problem-card p, .step-description, .highlight-card-p {
white-space: normal;
word-break: keep-all;
overflow-wrap: break-word;
hyphens: auto;
/* 日本語句読点の改行制御 */
line-break: strict;
word-wrap: break-word;
}
/* 改行を防ぐユーティリティクラス */
.no-break {
white-space: nowrap;
}
.break-word {
word-break: break-word;
overflow-wrap: break-word;
}
.break-all {
word-break: break-all;
}
/* 日本語句読点の改行制御を強化 */
.japanese-text {
word-break: keep-all;
overflow-wrap: break-word;
line-break: strict;
word-wrap: break-word;
/* 句読点の前で改行を防ぐ */
text-justify: inter-ideograph;
}
/* 句読点の改行制御 */
.hero-title,
.hero-subtitle,
.problem-card h3,
.step-title,
.highlight-card-title {
word-break: keep-all;
overflow-wrap: break-word;
line-break: strict;
/* 句読点の前で改行を防ぐ */
text-justify: inter-ideograph;
}
/* 特定の要素で改行を制御 */
.hero-title .no-break,
.hero-subtitle .no-break,
.problem-card h3 .no-break {
white-space: nowrap;
display: inline;
}
/* 日本語句読点の改行制御を強化 */
* {
/* 句読点の前で改行を防ぐ */
word-break: keep-all;
overflow-wrap: break-word;
line-break: strict;
white-space: normal;
}
/* 句読点の改行制御を最適化 */
.hero-title,
.hero-subtitle,
.problem-card h3,
.step-title,
.highlight-card-title,
p,
.problem-card p,
.step-description,
.highlight-card-p {
/* 句読点の前で改行を防ぐ */
word-break: keep-all;
overflow-wrap: break-word;
line-break: strict;
text-justify: inter-ideograph;
white-space: normal;
/* 句読点の改行制御を強化 */
word-spacing: normal;
letter-spacing: normal;
}
/* ===== 統一タイポグラフィシステム ===== */
:root {
/* レスポンシブフォントサイズ（画面幅に応じて自動調整） */
--font-xs: clamp(10px, 2.5vw, 12px);
--font-sm: clamp(12px, 3vw, 14px);
--font-base: clamp(14px, 3.5vw, 16px);
--font-lg: clamp(16px, 4vw, 18px);
--font-xl: clamp(18px, 4.5vw, 20px);
--font-2xl: clamp(20px, 5vw, 24px);
--font-3xl: clamp(24px, 6vw, 28px);
--font-4xl: clamp(28px, 7vw, 32px);
--font-5xl: clamp(32px, 8vw, 36px);
/* 色の統一 */
--text-primary: #1a1a1a;
--text-secondary: #4a4a4a;
--text-muted: #6b7280;
--text-light: #9ca3af;
--text-white: #ffffff;
/* フォントウェイトの統一 */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
/* 行間の統一 */
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
}
/* 見やすいフォントファミリーの設定 */
body, html {
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", "Roboto", "Helvetica Neue", Arial, sans-serif;
font-feature-settings: "palt" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: var(--font-base);
line-height: var(--line-height-normal);
color: var(--text-primary);
}
/* 日本語フォントの最適化 */
.japanese-text {
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
font-feature-settings: "palt" 1;
letter-spacing: 0.05em;
line-height: 1.6;
}
/* タイポグラフィの全体的な改善 */
* {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 見出しの統一スタイル */
h1 {
font-size: clamp(24px, 7vw, 32px);
font-weight: var(--font-bold);
line-height: var(--line-height-tight);
color: var(--text-primary);
margin-bottom: 1rem;
}
h2 {
font-size: clamp(20px, 6vw, 28px);
font-weight: var(--font-bold);
line-height: var(--line-height-tight);
color: var(--text-primary);
margin-bottom: 0.875rem;
}
h3 {
font-size: clamp(18px, 5vw, 24px);
font-weight: var(--font-semibold);
line-height: var(--line-height-normal);
color: var(--text-primary);
margin-bottom: 0.75rem;
}
h4 {
font-size: clamp(16px, 4.5vw, 20px);
font-weight: var(--font-semibold);
line-height: var(--line-height-normal);
color: var(--text-primary);
margin-bottom: 0.625rem;
}
h5 {
font-size: clamp(14px, 4vw, 18px);
font-weight: var(--font-medium);
line-height: var(--line-height-normal);
color: var(--text-primary);
margin-bottom: 0.5rem;
}
h6 {
font-size: clamp(12px, 3.5vw, 16px);
font-weight: var(--font-medium);
line-height: var(--line-height-normal);
color: var(--text-secondary);
margin-bottom: 0.5rem;
}
/* 段落の統一スタイル */
p {
font-size: clamp(14px, 3.5vw, 16px);
font-weight: var(--font-normal);
line-height: var(--line-height-relaxed);
color: var(--text-primary);
margin-bottom: 1rem;
word-break: keep-all;
overflow-wrap: break-word;
hyphens: auto;
}
/* リンクの統一スタイル */
a {
color: var(--text-primary);
text-decoration: none;
font-weight: var(--font-medium);
transition: all 0.2s ease;
}
a:hover {
color: var(--text-secondary);
text-decoration: underline;
}
a:focus {
outline: 2px solid var(--text-primary);
outline-offset: 2px;
}
#diagnosis .progress-container {
max-width: 704px;
margin: 0 auto 16px;
padding: 12px 16px;
background: #fff;
border-radius: 24px;
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
#diagnosis .progress-container > ul.progress {
display: flex;
justify-content: center;
align-items: center;
gap: 28px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
#diagnosis .progress-container > ul.progress::before {
content: '';
position: absolute;
top: 50%;
left: 28px;
right: 28px;
height: 4px;
background: #E6EEF5;
border-radius: 2px;
}
#diagnosis .progress-container > ul.progress > li.progress-item {
width: 48px;
height: 48px;
background: #FFFFFF;
border: 3px solid #E5E7EB;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font: 600 14px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
color: #4B5563;
line-height: 1.2;
box-shadow: 0 6px 16px rgba(0,0,0,0.05);
}
#diagnosis .progress-container > ul.progress > li.progress-item.current {
background: #0B74DE;
border-color: #0B74DE;
color: #fff;
box-shadow: 0 0 0 6px rgba(11,116,222,0.10);
}
#diagnosis .progress-container > ul.progress > li.progress-item.completed {
background: #28A745;
border-color: #28A745;
color: #fff;
box-shadow: 0 0 0 6px rgba(40,167,69,0.10);
}
#diagnosis .progress::before { content: none !important; }
@media (max-width: 768px) {
#diagnosis .progress-container { max-width: 100%; margin: 0 auto 12px; padding: 10px 12px; }
#diagnosis .progress-container > ul.progress { gap: 18px; }
#diagnosis .progress-container > ul.progress::before { left: 18px; right: 18px; height: 3px; }
#diagnosis .progress-container > ul.progress > li.progress-item { width: 32px; height: 32px; font-size: 14px; }
}
@media (max-width: 480px) {
#diagnosis .progress-container { margin: 0 auto 10px; padding: 8px 10px; }
#diagnosis .progress-container > ul.progress { gap: 14px; }
#diagnosis .progress-container > ul.progress > li.progress-item { width: 28px; height: 28px; font-size: 13px; }
}
/* ===== Progress (Production-Exact) ===== */
/* コンテナ（箱のサイズ・角丸・影は本番値） */
#diagnosis > div > div > div.progress.progress-container {
max-width: 704px;
margin: 0 auto 16px;
padding: 12px 16px;
background: #FFFFFF;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
text-align: center;
box-sizing: border-box;
}
/* 並びはulで管理：center+gap固定、ulの既定余白はゼロ */
#diagnosis > div > div > div.progress.progress-container > ul {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
position: relative;
z-index: 0;
}
/* ベースライン（背面） */
#diagnosis > div > div > div.progress.progress-container > ul::before {
content: '';
position: absolute;
top: 50%;
left: 24px;
right: 24px;
height: 4px;
background: #E5E7EB; /* gray-200 */
border-radius: 2px;
z-index: 0;
}
/* ドット（完全一致：直径48px、縁3px、完全な円＝50%） */
#diagnosis > div > div > div.progress.progress-container > ul > li {
width: 48px;
height: 48px;
background: #FFFFFF;
border: 3px solid #E5E7EB;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font: 600 14px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
color: #374151; /* gray-700 */
letter-spacing: 0;
line-height: 1.2;
z-index: 1;
transition: none;
transform: none;
box-shadow: none;
}
/* 状態色（本番と同値） */
#diagnosis > div > div > div.progress.progress-container > ul > li.current {
border-color: #007AD2;
background: #007AD2;
color: #FFFFFF;
box-shadow: 0 0 0 3px rgba(0,122,210,0.15);
}
#diagnosis > div > div > div.progress.progress-container > ul > li.completed {
border-color: #28A745;
background: #28A745;
color: #FFFFFF;
box-shadow: 0 0 0 3px rgba(40,167,69,0.15);
}
/* 競合を完全排除（線はul::before一本化、古い定義は無効化） */
.progress::before { content: none !important; }
.progress-item,
.progress-step,
.progress-bar { all: unset; }
/* モバイル対応（完全一致ブレークポイント） */
@media (max-width: 768px) {
#diagnosis > div > div > div.progress.progress-container {
max-width: 100%;
margin: 0 auto 12px;
padding: 10px 12px;
}
#diagnosis > div > div > div.progress.progress-container > ul {
gap: 16px;
}
#diagnosis > div > div > div.progress.progress-container > ul::before {
left: 16px; right: 16px; height: 3px;
}
#diagnosis > div > div > div.progress.progress-container > ul > li {
width: 32px; height: 32px; font-size: 14px;
}
}
@media (max-width: 480px) {
#diagnosis > div > div > div.progress.progress-container {
margin: 0 auto 10px;
padding: 8px 10px;
}
#diagnosis > div > div > div.progress.progress-container > ul {
gap: 12px;
}
#diagnosis > div > div > div.progress.progress-container > ul > li {
width: 28px; height: 28px; font-size: 13px;
}
}
/* Diagnosis progress container - responsive (match production; mobile-friendly) */
#diagnosis > div > div > div > div.progress.progress-container{
max-width:704px;
width:auto;
height:auto;
margin:0 auto 16px;
padding:0 16px;
text-align:center;
box-sizing:border-box;
}
/* UL layout: center + gap; inherits container padding/margins */
#diagnosis > div > div > div > div.progress.progress-container > ul{
display:flex;
justify-content:center;
align-items:center;
gap:24px;
margin:0;
padding:0;
list-style:none;
width:100%;
position:relative;
}
#diagnosis > div > div > div > div.progress.progress-container > ul::before{
content:'';
position:absolute;
top:50%;
left:24px;
right:24px;
height:4px;
background:#E5E7EB;
border-radius:2px;
}
#diagnosis > div > div > div > div.progress.progress-container > ul > li{ z-index:1; }
/* Tablets (<=768px) */
@media (max-width:768px){
#diagnosis > div > div > div > div.progress.progress-container{
max-width:100%;
width:100%;
height:auto;
margin:0 auto 12px;
padding:0 12px;
}
#diagnosis > div > div > div > div.progress.progress-container > ul{ gap:16px; }
#diagnosis > div > div > div > div.progress.progress-container > ul::before{
left:16px; right:16px; height:3px;
}
}
/* Small phones (<=480px) */
@media (max-width:480px){
#diagnosis > div > div > div > div.progress.progress-container{
margin:0 auto 10px;
padding:0 10px;
}
#diagnosis > div > div > div > div.progress.progress-container > ul{ gap:12px; }
}
/*
* Engineer Diagnosis Theme - Compiled CSS
* This file contains compiled styles and should not include theme headers
*/
/* ===== 統合CSS変数定義 ===== */
:root {
/* カラーパレット */
--primary: #007AD2;
--primary-dark: #052F87;
--primary-light: #F4FCFF;
--primary-color: #007acc;
--secondary: #0071BD;
--secondary-color: #ff6b35;
--accent: #1BADDD;
--muted: #6B7280;
/* テキストカラー */
--text-primary: #052F87;
--text-secondary: #0071BD;
--text-color: #333;
--text-light: #666;
/* 背景カラー */
--background-main: #FFFFFF;
--background-section: #F4FCFF;
--background-light: #F4FCFF;
--bg-white: #fff;
--bg-light: #f8f8f8;
--white: #fff;
--secondary-light: #E6F7FF;
/* ボーダーカラー */
--border-light: #E2E8F0;
--border-gray: #E5E7EB;
/* エラーカラー */
--error: #ef4444;
--error-light: rgba(239,68,68,.1);
--error-dark: rgba(239,68,68,.2);
/* フォントサイズ */
--font-xs: 14px;
--font-sm: 16px;
--font-base: 18px;
--font-lg: 20px;
--font-xl: 22px;
--font-2xl: 26px;
--font-3xl: 34px;
--font-4xl: 50px;
--font-small: 16px;
--font-medium: 18px;
--font-large: 24px;
/* フォントウェイト */
--weight-bold: 800;
--weight-semibold: 700;
--weight-medium: 600;
--weight-normal: 500;
/* グラデーション */
--gradient-hero: linear-gradient(135deg, #F4FCFF 0%, #F4FCFF 50%, #FFFFFF 100%);
--gradient-cta: linear-gradient(135deg, #007AD2 0%, #052F87 100%);
--gradient-accent: linear-gradient(135deg, #1BADDD 0%, #0071BD 100%);
--gradient-primary: linear-gradient(135deg, #007AD2 0%, #052F87 100%);
--cta-gradient: linear-gradient(135deg, #FF6B6B, #FF8E53, #FF6B6B);
/* シャドウ */
--shadow-soft: 0 10px 25px -3px rgba(0,0,0,.1);
--shadow-medium: 0 20px 25px -5px rgba(0,0,0,.1);
--shadow-warm: 0 10px 25px -3px rgba(59,130,246,.15);
--box-shadow: 0 2px 8px rgba(0,0,0,0.1);
/* スペーシング */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--padding: 20px;
--gap: 30px;
/* ボーダー半径 */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 50px;
--border-radius: 8px;
/* トランジション */
--transition-fast: 0.2s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.5s ease;
--transition: 0.3s ease;
/* レイアウト */
--max-width: min(1400px, 95vw);
/* モバイル最適化用変数 */
--mobile-padding: 16px;
--mobile-gap: 20px;
--mobile-font-size: 16px;
--mobile-line-height: 1.5;
--touch-target-size: 44px;
--mobile-border-radius: 6px;
}
/* リセットCSS - モバイル余白問題の解決 */
* {
box-sizing: border-box;
}
/* ===== 統合されたhtml, bodyスタイル ===== */
html, body {
margin: 0 !important;
padding: 0 !important;
width: 100%;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--text-primary);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
line-height: 1.8;
font-size: 18px;
background: var(--gradient-hero);
position: relative;
font-display: swap;
contain: layout style;
}
/* ===== 統合されたbodyスタイル ===== */
body {
font-size: 14px;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* --- Emanon風スタイル --- */
/* サイドバーとウィジェットのスタイル */
.side {
background: var(--bg-white);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
padding: 20px;
margin-top: 20px;
}
.sidebar-widget {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
transition: var(--transition);
}
.sidebar-widget:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.widget-title {
font-size: 18px;
font-weight: 600;
color: white !important;
margin: 0 0 15px 0;
padding: 10px 15px;
background: linear-gradient(135deg, var(--primary-color), #0056b3);
border-radius: 6px;
position: relative;
}
.widget-title::before {
content: "";
display: none;
}
/* より具体的なセレクターでウィジェットタイトルを白に */
.side .widget-title,
.sidebar-widget .widget-title,
.widget .widget-title,
h2.widget-title {
color: white !important;
}
.widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.widget li {
padding: 8px 0;
border-bottom: 1px solid #eee;
transition: var(--transition);
}
.widget li:last-child {
border-bottom: none;
}
.widget li:hover {
background: #f0f8ff;
padding-left: 10px;
border-radius: 4px;
}
.widget a {
color: var(--text-color);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
}
.widget a:hover {
color: var(--primary-color);
text-decoration: underline;
}
/* 人気記事ウィジェット */
.popular-posts-widget .post-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
}
.popular-posts-widget .post-thumbnail {
width: 60px;
height: 60px;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
}
/* 削除: 新しい統合スタイルに移行 */
.popular-posts-widget .post-content {
flex: 1;
}
.popular-posts-widget .post-title {
font-size: 14px;
font-weight: 600;
margin: 0 0 5px 0;
line-height: 1.5;
}
.popular-posts-widget .post-meta {
font-size: 14px;
color: var(--text-light);
}
/* カテゴリーウィジェット */
.widget_categories .cat-item {
position: relative;
padding-left: 20px;
}
.widget_categories .cat-item::before {
content: "";
display: none;
}
.widget_categories .count {
background: var(--primary-color);
color: white;
padding: 2px 6px;
border-radius: 10px;
font-size: 13px;
margin-left: 8px;
}
/* アーカイブウィジェット */
.widget_archive .archive-item {
position: relative;
padding-left: 20px;
}
.widget_archive .archive-item::before {
content: "";
display: none;
}
/* 最近の投稿ウィジェット */
.widget_recent_entries .post-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
}
.widget_recent_entries .post-date {
font-size: 13px;
color: var(--text-light);
background: #f0f0f0;
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
}
/* タグクラウドウィジェット */
.tagcloud a {
display: inline-block;
background: #f0f8ff;
color: var(--primary-color);
padding: 4px 8px;
margin: 2px;
border-radius: 12px;
font-size: 14px;
text-decoration: none;
transition: var(--transition);
}
.tagcloud a:hover {
background: var(--primary-color);
color: white;
transform: scale(1.05);
}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
.side {
margin-top: 30px;
padding: 15px;
}
.sidebar-widget {
padding: 15px;
margin-bottom: 15px;
}
.widget-title {
font-size: 16px;
padding: 8px 12px;
}
.popular-posts-widget .post-thumbnail {
width: 50px;
height: 50px;
}
.popular-posts-widget .post-title {
font-size: 15px;
}
}
/* レイアウト構造 */
.l-contents {
background-color: var(--bg-light);
}
.l-content {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--padding);
}
.u-row {
display: flex;
gap: 40px;
}
/* u-row レイアウトの調整 */
.u-row.is-right_sidebar {
display: grid;
grid-template-columns: 1fr 320px;
gap: 50px;
align-items: start;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--padding);
}
@media screen and (max-width: 1024px) {
.u-row.is-right_sidebar {
grid-template-columns: 1fr;
gap: 24px;
padding: 0 16px;
}
}
.l-content__main {
flex: 1;
min-width: 0; /* グリッドアイテムの最小幅を制御 */
overflow: hidden; /* コンテンツのオーバーフローを制御 */
}
/* パンくずリスト */
.breadcrumb {
margin: 0 0 4px 0 !important;
padding: 0 !important;
}
/* モバイル用パンくずリスト最適化 */
@media (max-width: 768px) {
.breadcrumb {
margin: 0 0 8px 0 !important;
padding: 8px 16px !important;
font-size: 14px !important;
line-height: 1.4 !important;
overflow-x: auto;
white-space: nowrap;
}
.breadcrumb-list {
font-size: 14px !important;
gap: 4px !important;
}
.breadcrumb-list li {
margin-right: 4px !important;
}
.breadcrumb-list li:not(:last-child)::after {
margin-left: 4px !important;
}
}
.page-top-breadcrumbs {
margin: 0 0 4px 0 !important;
padding: 0 !important;
}
#breadcrumbs {
margin: 0 !important;
padding: 0 !important;
}
.breadcrumb-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
font-size: 14px;
}
.breadcrumb-list li {
margin-right: 8px;
}
.breadcrumb-list li:not(:last-child)::after {
content: ">";
margin-left: 8px;
color: #666;
}
.breadcrumb-list a {
color: #007acc;
text-decoration: none;
}
.breadcrumb-list a:hover {
text-decoration: underline;
}
/* アーカイブリスト */
.wrapper-archive-list {
display: flex;
flex-direction: column;
gap: 30px;
}
.archive-list {
background: var(--bg-white);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition);
}
.archive-list:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.archive-list__thumbnail {
position: relative;
overflow: hidden;
}
/* 削除: 新しい統合スタイルに移行 */
.archive-list__content {
padding: 20px;
}
.archive-list__meta {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 10px;
font-size: 14px;
}
.archive-list__cat {
background: var(--primary-color);
color: var(--bg-white);
padding: 4px 12px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
}
.archive-list__date {
color: var(--text-light);
}
.archive-list__title {
margin: 0 0 15px 0;
font-size: 18px;
font-weight: 600;
line-height: 1.5;
}
.archive-list__title a {
color: var(--text-color);
text-decoration: none;
transition: color var(--transition);
}
.archive-list__title a:hover {
color: var(--primary-color);
}
.archive-list__excerpt {
color: var(--text-light);
line-height: 1.6;
font-size: 14px;
}
/* 記事ページ */
.article {
background: var(--bg-white);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
margin-bottom: var(--gap);
}
.article-header {
padding: 30px 30px 20px;
border-bottom: 1px solid #eee;
}
.article-header h1 {
margin: 0;
font-size: 28px;
font-weight: 700;
color: #333;
line-height: 1.5;
}
.article-thumbnail {
position: relative;
overflow: hidden;
}
/* 削除: 新しい統合スタイルに移行 */
.article-body {
padding: 30px;
line-height: 1.8;
color: #333;
}
.article-body h2 {
font-size: 32px;
font-weight: 800;
color: #2c3e50;
margin: 50px 0 25px;
padding: 20px 25px;
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-left: 6px solid #1976d2;
border-radius: 0 12px 12px 0;
box-shadow: 0 4px 8px rgba(25, 118, 210, 0.2);
position: relative;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.article-body h2::before {
content: "";
display: none;
}
.article-body h3 {
font-size: 24px;
font-weight: 600;
color: #34495e;
margin: 35px 0 18px;
padding: 12px 18px;
background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e8 100%);
border-left: 4px solid #4caf50;
border-radius: 0 8px 8px 0;
position: relative;
box-shadow: 0 2px 4px rgba(76, 175, 80, 0.1);
}
.article-body h3::before {
content: "";
display: none;
}
.article-body p {
margin: 0 0 15px 0;
}
.article-body a {
color: #007acc;
text-decoration: none;
}
.article-body a:hover {
text-decoration: underline;
}
/* 古いページネーション - 削除済み */
/* レスポンシブ対応 */
@media (max-width: 768px) {
.u-row {
flex-direction: column;
gap: 20px;
}
.l-content {
padding: 0 15px;
}
.archive-list__content {
padding: 15px;
}
.article-header {
padding: 20px 20px 15px;
}
.article-header h1 {
font-size: 24px;
}
.article-body {
padding: 20px;
}
.article-body h2 {
font-size: 28px;
padding: 16px 20px;
margin: 40px 0 20px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.article-body h3 {
font-size: 22px;
padding: 10px 15px;
margin: 30px 0 15px;
}
}
.contents .container {
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
display: grid;
grid-template-columns: 1fr 320px;
gap: 50px;
align-items: start;
justify-content: stretch;
}
/* メインコンテンツエリアの幅を調整 */
.contents .container .main {
max-width: none;
width: 100%;
}
/* サイドバーの幅を固定 */
.contents .container .side {
width: 320px;
max-width: 320px;
justify-self: end;
}
/* デスクトップではモバイル用サイドバーを非表示 */
.mobile-sidebar {
display: none;
}
/* 効率的な2カラムレイアウト */
.layout-with-sidebar{
display: grid;
grid-template-columns: 1fr 320px;
gap: 50px;
align-items: start;
justify-content: stretch;
}
/* タブレット（768px-1024px）では2カラムを維持 */
@media (max-width: 1024px) and (min-width: 769px) {
.contents .container {
grid-template-columns: 1fr 300px;
gap: 35px;
max-width: 1200px;
}
.layout-with-sidebar{
grid-template-columns: 1fr 300px;
gap: 35px;
max-width: 1200px;
}
.side {
width: 300px;
max-width: 300px;
min-width: 280px;
}
.main {
max-width: none;
}
/* モバイル用サイドバーを非表示 */
.mobile-sidebar {
display: none;
}
}
/* 小さいタブレット（600px-768px）では2カラムを維持（サイドバーを小さく） */
@media (max-width: 768px) and (min-width: 601px) {
.contents .container {
grid-template-columns: 1fr 280px;
gap: 25px;
max-width: 1100px;
}
.layout-with-sidebar{
grid-template-columns: 1fr 280px;
gap: 25px;
max-width: 1100px;
}
.side {
width: 280px;
max-width: 280px;
min-width: 250px;
padding: 15px;
}
.main {
max-width: none;
}
.sidebar-widget {
padding: 15px;
margin-bottom: 15px;
}
.widget-title {
font-size: 16px;
padding: 8px 12px;
color: white;
}
/* モバイル用サイドバーを非表示 */
.mobile-sidebar {
display: none;
}
}
/* モバイル（600px以下）でのみ縦並びレイアウト */
@media (max-width: 600px) {
.contents .container {
grid-template-columns: 1fr;
gap: 20px;
max-width: 100%;
}
.layout-with-sidebar{
grid-template-columns: 1fr;
gap: 20px;
max-width: 100%;
}
/* デスクトップ用サイドバーを非表示 */
.side {
display: none;
}
/* モバイル用サイドバーを表示 */
.mobile-sidebar {
display: block;
margin-top: 40px;
padding: 0 20px;
}
.mobile-sidebar .widget-area {
display: block;
margin-top: 0;
padding: 15px;
background: var(--bg-white);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
.mobile-sidebar .sidebar-widget {
padding: 20px;
margin-bottom: 20px;
}
.mobile-sidebar .widget-title {
font-size: 16px;
padding: 8px 12px;
color: white !important;
}
}
.articleListContainer {
background: #fff;
border-radius: 20px;
box-shadow: 0 6px 24px rgba(0,0,0,.08);
padding: 40px;
margin: 0 auto 60px !important;
max-width: 100%;
}
/* お役立ち情報ページ専用の調整 */
.contents .container .articleListContainer {
margin: 4px auto 60px !important;
}
.posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media screen and (max-width: 1024px) {
.posts-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media screen and (max-width: 768px) {
.posts-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.articleListContainer {
padding: 20px;
margin: 0 auto 40px;
}
.post-card-content {
padding: 16px;
}
.post-card-title {
font-size: 1.2rem;
}
}
/* 最適化された投稿カード */
.post-card-wrapper {
margin-bottom: 0;
}
.post-card {
background: #fff;
border: 2px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
transition: all .3s ease;
display: grid;
grid-template-columns: 300px 1fr;
gap: 20px;
cursor: pointer;
text-decoration: none;
color: inherit;
position: relative;
width: 100%;
box-sizing: border-box;
padding: 16px;
}
.post-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0,0,0,.12);
border-color: #007AD2;
text-decoration: none;
color: inherit;
}
.post-card:focus {
outline: 3px solid #007AD2;
outline-offset: 2px;
}
/* 投稿カードヘッダー */
.post-card-header { position: relative; width: 100%; margin: 0; }
.post-card-thumbnail { width: 100%; height: 200px; overflow: hidden; border-radius: 12px; border: 2px solid #E5E7EB; }
/* 削除: 新しい統合スタイルに移行 */
.post-card-category {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
}
.category-tag {
background: linear-gradient(135deg,#FF6B6B,#FF8E53,#FF6B6B);
color: #fff;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(255,107,107,.3);
transition: all 0.3s ease;
}
.post-card:hover .category-tag {
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(0,122,210,.4);
}
/* 投稿カードコンテンツ */
.post-card-content { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
/* 同じ高さに揃える（カード） */
.post-card {
display: flex;
flex-direction: column;
height: 100%;
}
.post-card-wrapper {
display: block;
height: 100%;
}
.post-card-content {
display: flex;
flex-direction: column;
flex: 1;
}
.post-card-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-clamp: 2;
/* フォールバック用の高さ制限 */
max-height: 2.8em;
line-height: 1.5;
}
.post-card-excerpt {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-clamp: 3;
flex: 1;
/* フォールバック用の高さ制限 */
max-height: 4.2em;
line-height: 1.5;
}
/* 人気記事ウィジェット */
.popular-rank-widget{display:flex;flex-direction:column;gap:12px}
.popular-rank-item{position:relative;background:#fff;border:1px solid #E5E7EB;border-radius:10px;overflow:hidden}
.popular-rank-link{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;padding:10px;text-decoration:none;color:inherit}
.popular-rank-thumb{width:64px;height:64px;border-radius:6px;overflow:hidden;border:1px solid #E5E7EB;background:#f6f7f9}
/* 削除: 新しい統合スタイルに移行 */
.popular-rank-num{position:absolute;top:6px;left:6px;background:#007AD2;color:#fff;font-weight:700;border-radius:999px;min-width:22px;min-height:22px;display:flex;align-items:center;justify-content:center;font-size:14px;padding:0 6px}
.popular-rank-title{font-size:.95rem;line-height:1.4;margin:0}
.post-card-title {
color: #0071BD;
text-decoration: none;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.5;
display: block;
transition: color 0.3s ease;
margin: 0 0 16px 0;
}
.post-card:hover .post-card-title {
color: #007AD2;
}
.post-card-meta {
font-size: 0.9rem;
color: #666;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.post-card-excerpt {
color: #444;
line-height: 1.6;
font-size: 1rem;
flex: 1;
}
.post-card-footer{margin-top:auto;padding:12px 20px 20px}
.read-more-link{display:inline-block;padding:8px 16px;background:#0073aa;color:#fff;border-radius:4px;text-decoration:none;font-size:0.9rem;transition:background 0.3s ease}
.read-more-link:hover{background:#005a87}
/* ページネーション */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 40px;
}
.pagination a,
.pagination span {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 10px 16px;
border: 2px solid #007AD2;
border-radius: 8px;
text-decoration: none;
color: #007AD2;
font-weight: 700;
transition: all 0.3s ease;
background: #fff;
min-width: 44px;
text-align: center !important;
height: 40px !important;
}
.pagination a:hover {
background: linear-gradient(135deg,#007AD2 0%, #052F87 100%);
color: #fff;
border-color: transparent;
transform: translateY(-1px);
}
.pagination .current {
background: linear-gradient(135deg,#007AD2 0%, #052F87 100%);
color: #fff;
border-color: transparent;
}
.pagination .prev,
.pagination .next {
min-width: auto;
padding: 10px 20px;
}
.pagination .dots {
padding: 10px 8px;
color: #666;
font-weight: 700;
}
/* レスポンシブデザイン */
@media (max-width: 768px) {
.page-header {
padding: 30px 0;
}
.page-title {
font-size: 2rem;
}
.articleListContainer {
padding: 20px;
margin: 0 auto 40px;
}
.post-card-wrapper {
margin-bottom: 24px;
}
.post-card {
display: block;
padding: 16px;
text-align: left;
}
.post-card-header {
flex: none;
width: 100%;
}
.post-card-thumbnail { height: 200px; margin-bottom: 12px; }
.post-card-title {
font-size: 1.4rem;
}
.pagination {
gap: 6px;
flex-wrap: wrap;
}
.pagination a,
.pagination span {
padding: 8px 12px;
min-width: 40px;
font-size: 0.9rem;
}
}
/* Sidebar Styles */
.side {
background:#f8f9fa;
padding:20px;
border-radius:8px;
height:fit-content;
width:320px;
flex-shrink: 0; /* サイドバーの幅を固定 */
position: static; /* 固定を解除 */
}
.widget-area {
margin-bottom: 20px;
}
.sidebar-sticky {
position: sticky;
top: 20px;
}
/* サイドバーウィジェットのスタイル */
.side .widget {
background: #ffffff;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e7eb;
}
.side .widget-title {
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 16px 0;
color: #1a1a1a;
border-bottom: 2px solid #007AD2;
padding-bottom: 8px;
}
/* 検索フォーム */
.search-form {
position: relative;
}
.search-input-wrapper {
display: flex;
border: 2px solid #e5e7eb;
border-radius: 6px;
overflow: hidden;
transition: border-color 0.3s ease;
}
.search-input-wrapper:focus-within {
border-color: #007AD2;
}
.search-field {
flex: 1;
padding: 12px 16px;
border: none;
outline: none;
font-size: 14px;
}
.search-submit {
background: #007AD2;
color: white;
border: none;
padding: 12px 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.search-submit:hover {
background: #052F87;
}
/* 最近の投稿リスト */
.recent-posts-list {
list-style: none;
padding: 0;
margin: 0;
}
.recent-post-item {
border-bottom: 1px solid #f0f0f0;
padding: 12px 0;
}
.recent-post-item:last-child {
border-bottom: none;
}
.recent-post-link {
display: block;
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
}
.recent-post-link:hover {
color: #007AD2;
}
.recent-post-title {
display: block;
font-weight: 500;
font-size: 14px;
line-height: 1.5;
margin-bottom: 4px;
}
.recent-post-date {
display: block;
font-size: 14px;
color: #6b7280;
}
/* 最近のコメントリスト */
.recent-comments-list {
list-style: none;
padding: 0;
margin: 0;
}
.recent-comment-item {
border-bottom: 1px solid #f0f0f0;
padding: 12px 0;
}
.recent-comment-item:last-child {
border-bottom: none;
}
.recent-comment-link {
display: block;
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
}
.recent-comment-link:hover {
color: #007AD2;
}
.comment-author {
display: block;
font-weight: 600;
font-size: 13px;
color: #007AD2;
margin-bottom: 4px;
}
.comment-text {
display: block;
font-size: 13px;
line-height: 1.5;
color: #4b5563;
margin-bottom: 4px;
}
.comment-date {
display: block;
font-size: 13px;
color: #9ca3af;
}
/* カスタムウィジェット */
.widget-content {
font-size: 14px;
line-height: 1.6;
}
.widget-content p {
margin: 0 0 12px 0;
}
.widget-content p:last-child {
margin-bottom: 0;
}
/* 空の状態 */
.no-posts,
.no-comments {
color: #6b7280;
font-style: italic;
text-align: center;
padding: 20px 0;
margin: 0;
}
/* 新しいウィジェットエリア用のスタイル */
.blockTitle {
margin-bottom: 20px;
}
.blockTitle__ja {
font-size: 1.2rem;
font-weight: 600;
color: #1a1a1a;
border-bottom: 2px solid #007AD2;
padding-bottom: 8px;
}
.thumb-widget {
margin: 20px 0;
padding: 20px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e7eb;
}
.article-bottom-widget {
margin: 30px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #007AD2;
}
.mainVisualBottom {
margin: 40px 0;
padding: 30px;
background: linear-gradient(135deg, #007AD2 0%, #052F87 100%);
color: white;
border-radius: 12px;
}
.footerTop {
margin: 40px 0 20px 0;
padding: 30px;
background: #f8f9fa;
border-radius: 8px;
}
.footTitle {
font-size: 1.1rem;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 15px;
border-bottom: 2px solid #007AD2;
padding-bottom: 8px;
}
.mobile-widget {
margin: 15px 0;
padding: 15px;
background: #ffffff;
border-radius: 6px;
border: 1px solid #e5e7eb;
}
.MobileNavTitle {
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 10px;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.blockTitle__ja {
font-size: 1.1rem;
}
.mainVisualBottom {
margin: 20px 0;
padding: 20px;
}
.footerTop {
margin: 20px 0 15px 0;
padding: 20px;
}
.thumb-widget,
.article-bottom-widget {
margin: 15px 0;
padding: 15px;
}
}
.sidebar-widget{margin-bottom:12px}
.widget-title{font-size:0.8rem;font-weight:600;margin:0 0 8px;color:white !important;border-bottom:1px solid #ddd;padding-bottom:3px}
.popular-posts{display:flex;flex-direction:column;gap:8px}
.popular-post-item{display:flex;align-items:flex-start;gap:6px;padding:6px;background:#fff;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,0.05);transition:box-shadow 0.3s ease}
.popular-post-item:hover{box-shadow:0 2px 6px rgba(0,0,0,0.15)}
.popular-post-number{background:#0073aa;color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:600;flex-shrink:0}
.popular-post-thumbnail{width:40px;height:40px;border-radius:2px;overflow:hidden;flex-shrink:0}
/* 削除: 新しい統合スタイルに移行 */
.popular-post-thumbnail .no-thumbnail{width:100%;height:100%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;text-decoration:none}
.thumbnail-placeholder{font-size:1.5rem}
.popular-post-content{flex:1;min-width:0}
.popular-post-title{margin:0;font-size:0.75rem;line-height:1.2}
.popular-post-title a{text-decoration:none;color:#222;transition:color 0.3s ease}
.popular-post-title a:hover{color:#0073aa}
/*
* Engineer Diagnosis Theme - Compiled CSS
* This file contains compiled styles and should not include theme headers
*/
/* ===== 重複削除: 統合された:root定義は上記に移動済み ===== */
/* ===== 重複削除: 統合された* { box-sizing: border-box; }は上記に移動済み ===== */
/* ===== 重複削除: 統合されたhtml, bodyスタイルは上記に移動済み ===== */
.error {
border-color:var(--error) !important;
box-shadow:0 0 0 3px var(--error-light) !important;
}
.error:focus {
outline:none;
box-shadow:0 0 0 3px var(--error-dark) !important;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,");
pointer-events: none;
z-index: -1;
}
/* ===== Layout Components ===== */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 24px;
}
.section {
padding: 80px 0;
position: relative;
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-header h2 {
font-size: 2.5rem;
font-weight: 800;
color: var(--text-primary);
margin: 0 0 16px;
line-height: 1.3;
}
.section-subtitle {
font-size: 1.1rem;
color: var(--text-secondary);
text-align: center;
margin-bottom: 60px;
line-height: 1.6;
}
/* ===== Header Styles ===== */
.site-header {
background: #007AD2;
padding: 20px 0;
position: static;
box-shadow: var(--shadow-medium);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.brand {
font: 700 24px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-decoration: none;
}
.brand:hover {
color: #f0f9ff;
}
.pr-label {
color: #fff;
font-size: 12px;
font-weight: 700;
background: rgba(255, 255, 255, 0.2);
padding: 4px 8px;
border-radius: 4px;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.header-nav a {
color: var(--white);
margin-left: 24px;
text-decoration: none;
font-weight: var(--weight-normal);
transition: opacity 0.3s;
}
.header-nav a:hover {
opacity: 0.8;
}
/* ===== Hero Section ===== */
.hero {
background: var(--gradient-hero);
padding: 80px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,");
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0 auto;
padding: 0 24px;
text-align: center;
}
.hero-title {
font-size: clamp(16px, 4.5vw, 28px);
font-weight: var(--font-bold);
line-height: 1.2;
margin: 0 0 2rem;
color: var(--text-primary);
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.hero-subtitle {
font-size: clamp(14px, 4vw, 20px);
color: var(--text-secondary);
margin: 0 0 3rem;
line-height: var(--line-height-relaxed);
}
/* ===== Achievement Cards ===== */
.achievement-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 0 auto 40px;
max-width: 900px;
background: var(--gradient-hero);
border-radius: var(--radius-xl);
padding: 32px;
box-shadow: var(--shadow-warm);
border: 2px solid var(--primary-light);
position: relative;
overflow: hidden;
}
.achievement-cards::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:var(--gradient-cta);
}
.achievement-card{
background:transparent;
border:0;
padding:0;
text-align:center;
position:relative;
transition:var(--transition-base);
}
.achievement-card:hover{
transform:translateY(-2px);
}
.achievement-card:not(:last-child)::after{
content:'';
position:absolute;
right:-8px;
top:50%;
transform:translateY(-50%);
width:1px;
height:60%;
background:var(--border-light);
}
.achievement-number{
font-size:var(--font-large);
font-weight:900;
color:var(--primary);
margin-bottom:8px;
line-height:1.1;
animation:countUp 1.5s ease-out forwards;
opacity:0;
transform:translateY(20px);
position:relative;
}
@keyframes countUp{
from{
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.achievement-text{
font:600 16px/1.4 "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
color:var(--text-secondary);
text-transform:uppercase;
letter-spacing:0.5px;
}
.job-change-methods{
max-width:1200px;
margin:0 auto;
padding:0 var(--space-6);
}
.methods-intro{
text-align:center;
margin-bottom:var(--space-8);
}
.methods-intro h3{
font-size:24px;
font-weight:var(--weight-semibold);
color:var(--text-primary);
margin-bottom:var(--space-4);
}
.methods-intro p{
font-size:var(--font-small);
color:var(--text-secondary);
line-height:1.6;
max-width:800px;
margin:0 auto;
}
.methods-comparison{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:var(--space-6);
}
.method-card{
background:#fff;
border-radius:16px;
padding:var(--space-6);
box-shadow:var(--shadow-soft);
border:1px solid rgba(0,0,0,0.05);
transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position:relative;
overflow:hidden;
}
.method-card::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:#007AD2;
transform:scaleX(0);
transition:var(--transition-base);
}
.method-card:hover{
transform:translateY(-8px);
box-shadow:var(--shadow-soft);
border-color:rgba(59,130,246,.2);
}
.method-card:hover::before{
transform:scaleX(1);
}
.method-header{
display:flex;
align-items:center;
gap:var(--space-3);
margin-bottom:var(--space-5);
padding:var(--space-4);
background:linear-gradient(135deg,rgba(255,107,53,0.05)0%, rgba(78,205,196,0.05)100%);
border-radius:12px;
border:1px solid rgba(59,130,246,.1);
}
.method-icon{
font-size:28px;
}
.method-header h4{
font-size:22px;
font-weight:var(--weight-semibold);
color:var(--text-primary);
margin:0;
background:#007AD2;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.method-features{
margin-bottom:var(--space-5);
}
.feature-item{
display:flex;
align-items:center;
gap:var(--space-3);
margin-bottom:var(--space-3);
padding:var(--space-3);
background:var(--gradient-hero);
border:1px solid rgba(0,0,0,0.05);
border-radius:10px;
transition:var(--transition-base);
position:relative;
overflow:hidden;
}
.feature-item::before{
content:'';
position:absolute;
left:0;
top:0;
bottom:0;
width:3px;
background:#007AD2;
transform:scaleY(0);
transition:var(--transition-base);
}
.feature-item:hover{
transform:translateX(4px);
box-shadow:0 4px 12px rgba(0,0,0,0.08);
border-color:rgba(59,130,246,.2);
}
.feature-item:hover::before{
transform:scaleY(1);
}
.feature-icon{
font-size:var(--font-medium);
width:24px;
text-align:center;
}
.feature-text{
font-size:16px;
color:var(--text-primary);
font-weight:var(--weight-medium);
}
.method-description{
background:linear-gradient(135deg,rgba(255,107,53,0.05)0%, rgba(147, 51, 234, 0.05)100%);
border:1px solid rgba(255,107,53, 0.1);
border-radius:12px;
padding:var(--space-4);
margin-top:var(--space-4);
position:relative;
overflow:hidden;
}
.method-description::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:3px;
background:var(--gradient-cta);
}
.method-description p{
font-size:16px;
line-height:1.6;
color:var(--text-primary);
margin:0;
font-weight:var(--weight-normal);
}
.problem-cta{
text-align:center;
max-width:600px;
margin:0 auto;
padding:0 24px
}
.problem-cta p{
font-size:var(--font-small);
color:var(--text-secondary);
margin:0 0 24px;
line-height:1.6
}
.hero-cta,
.cta-button,
.diagnosis-cta .cta-button,
.success-cta .cta-button {
display: inline-block;
background: var(--cta-gradient);
background-size: 200% 200%;
color: var(--white);
padding: 16px 32px;
border-radius: var(--radius-lg);
font: 700 18px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
transition: var(--transition);
box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
min-width: 320px;
text-align: center;
position: relative;
overflow: hidden;
animation: gradient-shift 3s ease infinite, glow 2s ease-in-out infinite;
cursor: pointer;
letter-spacing: 1px;
text-decoration: none;
}
.cta-button::before{
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent, rgba(255,255,255,0.3), transparent);
transition:left 0.6s ease;
}
.cta-button:hover{
transform:translateY(-3px) scale(1.02);
box-shadow:0 15px 35px rgba(255, 107, 107, 0.5), 0 0 25px rgba(255, 107, 107, 0.3);
animation-play-state:paused;
}
.cta-button:hover::before{
left:100%;
}
.cta-button:active{
transform:translateY(-1px) scale(0.98);
animation:bounce 0.6s ease;
}
/* オレンジ系ボタンの色指定 */
.hero-cta,
.diagnosis-cta .cta-button,
.success-cta .cta-button {
background: linear-gradient(135deg, #FF6B35, #FF8C42, #FF6B35) !important;
background-size: 200% 200% !important;
box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4) !important;
animation: gradientShift 3s ease-in-out infinite !important;
}
.hero-cta:hover,
.diagnosis-cta .cta-button:hover,
.success-cta .cta-button:hover {
transform: translateY(-3px) scale(1.02) !important;
box-shadow: 0 15px 35px rgba(255, 140, 66, 0.5), 0 0 25px rgba(255, 107, 53, 0.3) !important;
animation-play-state: paused !important;
}
.hero-cta:active,
.diagnosis-cta .cta-button:active,
.success-cta .cta-button:active {
transform: translateY(-1px) scale(0.98) !important;
animation: bounce 0.6s ease !important;
}
/* オレンジグラデーションアニメーション */
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.data-section{
background:var(--background-section);
padding:40px 0
}
.salary-comparison{
max-width:1000px;
margin:0 auto 24px;
padding:0 24px
}
.comparison-header{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-bottom:12px
}
.comparison-item{
background:var(--gradient-hero);
border-radius:var(--radius-xl);
padding:16px 12px;
text-align:center;
box-shadow:var(--shadow-soft);
border:2px solid var(--border-light);
transition:var(--transition)
}
.comparison-item:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-medium)
}
.ses-path{
border-color:#E5E7EB
}
.transfer-path{
border-color:var(--secondary);
background:var(--secondary-light)
}
.comparison-item h3{
font-size:var(--font-small);
font-weight:var(--weight-semibold);
color:var(--text-primary);
margin:0 0 12px;
line-height:1.3
}
/* ハイライトカードのスタイル */
.method-highlights {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 20px 0;
max-width: 600px;
margin: 20px auto;
}
.highlight-card {
border-radius: 12px;
padding: 16px;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.highlight-card-agent {
background: linear-gradient(135deg, #E3F2FD 0%, #F8F9FA 100%);
border: 2px solid #2196F3;
box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
}
.highlight-card-site {
background: linear-gradient(135deg, #FFF3E0 0%, #F8F9FA 100%);
border: 2px solid #FF9800;
box-shadow: 0 2px 8px rgba(255, 152, 0, 0.1);
}
.highlight-icon {
font-size: 2.5rem;
margin-bottom: 12px;
display: block;
}
.highlight-card-title {
margin: 0 0 8px 0;
font-size: 1rem;
font-weight: 700;
}
.highlight-card-agent .highlight-card-title {
color: #1976D2;
}
.highlight-card-site .highlight-card-title {
color: #F57C00;
}
.highlight-card-p {
margin: 0;
color: #424242;
line-height: 1.4;
font-size: 0.9rem;
}
/* ハイライトカードのホバー効果 */
.highlight-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.highlight-card-agent:hover {
box-shadow: 0 8px 25px rgba(33, 150, 243, 0.3);
}
.highlight-card-site:hover {
box-shadow: 0 8px 25px rgba(255, 152, 0, 0.3);
}
.salary-flow{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
margin-bottom:12px
}
.salary-point{
text-align:center
}
.salary-amount{
font-size:20px;
font-weight:var(--weight-bold);
color:var(--text-primary);
margin-bottom:2px;
line-height:1.2
}
.salary-year{
font-size:14px;
color:var(--text-secondary);
font-weight:500
}
.salary-arrow{
font-size:20px;
color:var(--text-secondary);
font-weight:bold
}
.salary-increase{
font-size:14px;
font-weight:var(--weight-semibold);
color:var(--text-secondary);
padding:8px 12px;
background:var(--background-section);
border-radius:var(--radius-lg);
display:inline-block
}
.salary-increase.success{
color:var(--secondary);
background:var(--secondary-light)
}
.opportunity-loss{
background:var(--gradient-hero);
border-radius:var(--radius-xl);
padding:16px;
text-align:center;
box-shadow:var(--shadow-soft);
border:2px solid #007AD2;
background:var(--gradient-hero);
margin-top:0;
grid-column:1 / -1
}
.loss-header h3{
font-size:var(--font-small);
font-weight:var(--weight-bold);
color:var(--primary);
margin:0 0 8px;
line-height:1.3
}
.loss-amount{
font-size:20px;
font-weight:900;
color:var(--primary);
margin-bottom:12px;
line-height:1.2
}
.loss-breakdown{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:12px;
max-width:600px;
margin:0 auto
}
.loss-item{
background:var(--background-section);
border-radius:var(--radius-lg);
padding:12px 8px;
text-align:center
}
.loss-item.total{
background:#007AD2;
color:#fff
}
.loss-label{
font-size:14px;
font-weight:var(--weight-medium);
margin-bottom:4px;
color:var(--text-secondary)
}
.loss-item.total .loss-label{
color:rgba(255,255,255,0.9)
}
.loss-value{
font-size:var(--font-small);
font-weight:var(--weight-semibold);
color:var(--text-primary)
}
.loss-item.total .loss-value{
color:#fff
}
.loss-message{
margin-top:16px;
padding:16px;
background:rgba(239,68,68,0.1);
border-radius:8px;
border-left:4px solid #007AD2
}
.loss-message p{
margin:0;
font-size:var(--font-small);
color:var(--primary);
text-align:center
}
.career-stagnation{
background:var(--gradient-hero);
border-radius:var(--radius-xl);
padding:var(--space-lg);
text-align:center;
box-shadow:var(--shadow-soft);
border:2px solid #007AD2;
background:var(--gradient-hero);
margin-top:24px;
grid-column:1 / -1
}
.benefits-section{
background:var(--background-section);
padding:40px 0
}
.diagnosis-comparison{
max-width:800px;
margin:0 auto;
padding:0 20px;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
-ms-overflow-style:none;
position:relative;
display:flex;
justify-content:flex-start;
align-items:center;
width:100%;
scroll-behavior: smooth;
}
/* 比較表の初期スクロール位置を左端に設定 */
.diagnosis-comparison::-webkit-scrollbar {
display: none;
}
.diagnosis-comparison {
scrollbar-width: none;
-ms-overflow-style: none;
}
.comparison-table{
background:#fff;
border-radius:var(--radius-xl);
overflow:hidden;
box-shadow:var(--shadow-soft);
border:2px solid var(--border-gray);
min-width:600px;
width:100%;
table-layout:fixed;
border-collapse:collapse;
margin:0;
text-align:center;
padding:0;
}
.comparison-header-row{
display:grid;
grid-template-columns: 200px 1fr 1fr;
background:#052F87;
color:var(--white);
font-weight:var(--weight-semibold);
width:100%;
margin:0;
padding:0;
min-width: 600px;
}
.comparison-row{
display:grid;
grid-template-columns: 200px 1fr 1fr;
border-bottom:1px solid #E5E7EB;
width:100%;
margin:0;
padding:0;
min-width: 600px;
}
.comparison-row:last-child{
border-bottom:none;
}
.comparison-cell{
padding:24px 16px;
text-align:center;
font-size:16px;
line-height:1.7;
border-right:1px solid #E5E7EB;
color:#374151;
display:flex;
align-items:center;
justify-content:center;
margin:0;
border-collapse:collapse;
}
/* 比較項目のセルは左寄せ */
.comparison-cell:first-child {
text-align: left;
justify-content: flex-start;
}
/* ヘッダーの比較項目も左寄せ */
.comparison-header-row .comparison-cell:first-child {
text-align: left;
justify-content: flex-start;
}
/* モバイル版で比較表のセルを縦並びに */
@media (max-width: 768px) {
.comparison-cell {
flex-direction: column;
gap: 8px;
padding: 16px 12px;
}
.rating-icon {
margin-bottom: 4px;
}
.comparison-cell small {
font-size: 14px;
line-height: 1.5;
}
}
/* PC版の余白を調整 */
@media (min-width: 769px) {
/* タブレットサイズでの文字サイズ調整 */
.hero-title{font-size:40px}
.hero-subtitle{font-size:20px}
.problem-card h3{font-size:var(--font-2xl)}
.cta-urge-title{font-size:var(--font-3xl)}
.step-title{font-size:var(--font-xl)}
.step-description{font-size:var(--font-base)}
.highlight-card-title{font-size:var(--font-lg)}
.highlight-card-p{font-size:var(--font-base)}
.diagnosis-section p{font-size:16px}
.comparison-cell:last-child {
border-right: none;
}
.comparison-table {
margin: 0 auto;
}
.diagnosis-comparison {
margin: 0 auto;
padding: 0 20px;
}
.diagnosis-section {
padding: 80px 0;
}
.diagnosis-container {
padding: 60px 48px;
}
.diagnosis-title {
margin-bottom: 48px;
}
/* critical.cssのprogressクラスを使用 */
.progress {
padding: 20px 24px;
margin-bottom: 24px;
}
}
.comparison-cell.header{
font-weight:var(--weight-semibold);
background:var(--primary-dark);
color:var(--white);
text-align:center;
display:flex;
align-items:center;
justify-content:center;
}
.comparison-row:nth-child(even){
background:var(--background-section);
}
.rating-icon {
display:inline-block;
font-size:var(--font-small);
font-weight:var(--weight-semibold);
text-align:center;
}
.diagnosis-cta{
text-align:center;
max-width:600px;
margin:0 auto;
padding:0 24px
}
.diagnosis-cta p{
font-size:var(--font-medium);
color:var(--text-primary);
margin:0 0 24px;
font-weight:var(--weight-medium);
line-height:1.6
}
.success-cases-section{
background:var(--gradient-hero);
padding:40px 0
}
.success-carousel{
max-width:1000px;
margin:0 auto 24px;
padding:0 24px
}
.success-cards-container{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:var(--space-6);
border-radius:var(--radius-xl);
}
.success-card{
background:var(--gradient-hero);
padding:20px 16px;
text-align:center;
border:2px solid var(--border-light);
border-radius:12px;
transition:var(--transition);
box-shadow:var(--shadow-soft);
flex:0 0 280px;
scroll-snap-align:start
}
.success-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-medium);
border-color:var(--primary)
}
.success-avatar{
margin-bottom:24px
}
.avatar-circle{
width:80px;
height:80px;
background:#007AD2;
color:var(--white);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:var(--font-small);
font-weight:var(--weight-semibold);
margin:0 auto;
box-shadow:0 8px 20px rgba(37,99,235,0.3)
}
.success-info h3{
font-size:20px;
font-weight:var(--weight-semibold);
color:var(--text-primary);
margin:0 0 24px;
line-height:1.3
}
.success-details{
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:16px
}
.detail-item{
background:var(--background-section);
border-radius:var(--radius-lg);
padding:16px 12px;
text-align:center
}
.detail-item.highlight{
background:var(--secondary-light);
border:2px solid var(--secondary)
}
.detail-label{
display:block;
font-size:14px;
font-weight:var(--weight-medium);
color:var(--text-secondary);
margin-bottom:4px
}
.detail-value{
display:block;
font-size:var(--font-small);
font-weight:var(--weight-semibold);
color:var(--text-primary)
}
.detail-item.highlight .detail-value{
color:var(--secondary)
}
.success-agent{
background:var(--primary-light);
border-radius:var(--radius-lg);
padding:16px;
border:1px solid var(--primary)
}
.agent-label{
display:block;
font-size:14px;
font-weight:var(--weight-medium);
color:var(--primary);
margin-bottom:4px
}
.agent-name{
display:block;
font-size:var(--font-small);
font-weight:var(--weight-semibold);
color:var(--primary-dark)
}
.carousel-controls{
display:flex;
align-items:center;
justify-content:center;
gap:24px;
margin-top:24px
}
.carousel-btn{
width:40px;
height:40px;
background:var(--gradient-cta);
color:var(--white);
border:0;
border-radius:50%;
font-size:20px;
font-weight:bold;
cursor:pointer;
transition:var(--transition);
display:flex;
align-items:center;
justify-content:center
}
.carousel-btn:hover{
background:var(--primary-dark);
transform:scale(1.1)
}
.carousel-dots{
display:flex;
gap:8px
}
.dot{
width:12px;
height:12px;
background:var(--border-light);
border-radius:50%;
cursor:pointer;
transition:var(--transition)
}
.dot.active{
background:var(--primary)
}
.success-cta{
text-align:center;
max-width:600px;
margin:0 auto;
padding:0 24px
}
.success-cta p{
font-size:var(--font-medium);
color:var(--text-primary);
margin:0 0 24px;
font-weight:var(--weight-medium);
line-height:1.6
}
.story-container{max-width:800px;margin:0 auto;padding:0 24px}
.story-header{text-align:center;margin-bottom:40px}
.story-header h2{font:700 28px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;color:var(--text-primary);margin-bottom:8px}
.story-subtitle{font:16px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;color:var(--text-secondary);margin:0}
.story-content{
background:#f8f9fa;
border-radius:16px;
padding:32px;
box-shadow:0 8px 20px rgba(0,0,0,0.1)
}
.story-visual{
display:flex;
align-items:center;
margin-bottom:24px;
padding-bottom:20px;
border-bottom:1px solid #e0e0e0
}
.person-photo{
width:80px;
height:80px;
border-radius:50%;
overflow:hidden;
margin-right:20px;
box-shadow:0 4px 12px rgba(0,0,0,0.15)
}
/* 削除: 新しい統合スタイルに移行 */
.photo-placeholder{
width:100%;
height:100%;
background:linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
box-shadow:0 4px 12px rgba(0,0,0,0.15);
border:3px solid #fff
}
.photo-placeholder.success{
background:linear-gradient(135deg, #40B5B0 0%, #359994 100%);
}
.photo-placeholder::before{
content:'';
position:absolute;
top:20%;
left:20%;
width:60%;
height:60%;
background:rgba(255,255,255,0.3);
border-radius:50%;
filter:blur(10px)
}
.photo-text{
font-size:14px;
font-weight:var(--weight-medium);
color:var(--text-secondary);
text-align:center;
line-height:1.2;
z-index:1;
position:relative
}
.photo-placeholder.success .photo-text{
color:#fff
}
.story-info h3{font:600 20px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;color:var(--text-primary);margin:0 0 4px}
.story-info p{font:14px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;color:var(--text-secondary);margin:0}
.failure-details,
.success-details{display:flex;flex-direction:column;gap:20px}
.failure-item{
background:var(--gradient-hero);
border-radius:12px;
padding:20px;
border-left:4px solid #ef4444;
position:relative;
transition:transform 0.3s ease
}
.failure-item h4{font:600 16px/1.4 "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;color:var(--text-primary);margin:0 0 12px}
.failure-item p{font:15px/1.7 "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;color:var(--text-secondary);margin:0}
.success-item{
background:var(--gradient-hero);
border-radius:12px;
padding:20px;
border-left:4px solid #40B5B0;
position:relative;
transition:transform 0.3s ease
}
.success-item h4{font:600 16px/1.4 "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;color:var(--text-primary);margin:0 0 12px}
.success-item p{font:15px/1.7 "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;color:var(--text-secondary);margin:0}
.failure-item:nth-child(1){transform:rotate(-0.3deg)}
.failure-item:nth-child(2){transform:rotate(0.2deg)}
.failure-item:nth-child(3){transform:rotate(-0.1deg)}
.success-item:nth-child(1){transform:rotate(0.2deg)}
.success-item:nth-child(2){transform:rotate(-0.4deg)}
.success-item:nth-child(3){transform:rotate(0.3deg)}
.failure-item:hover,
.success-item:hover{transform:rotate(0deg) translateY(-2px)}
@media (max-width:768px) {
.story-visual{flex-direction:column;text-align:center}
.person-photo{margin-right:0;margin-bottom:var(--space-md)}
.failure-details{grid-template-columns:1fr;gap:var(--space-md)}
.section-header{margin-bottom:var(--space-2xl)}
.section-header h2{font-size:var(--font-2xl)}
}
.section-subtitle{
font-size:var(--font-small);
opacity:0.9;
margin-bottom:24px;
line-height:1.6
}
.section-underline{width:80px;height:4px;background:rgba(255,255,255,0.8);margin:0 auto}
.hierarchical-layout{
max-width:1200px;
margin:0 auto;
padding:0 24px;
position:relative
}
.main-section{
background:rgba(255,255,255,0.95);
border-radius:24px;
padding:48px 40px;
margin-bottom:32px;
box-shadow:0 15px 35px rgba(0,0,0,0.2);
border:2px solid #40B5B0;
position:relative;
transform:scale(1.02);
z-index:2
}
.main-content{
text-align:center;
max-width:800px;
margin:0 auto
}
.main-icon{
font-size:64px;
margin-bottom:24px;
display:block
}
.main-section h3{
font-size:24px;
font-weight:var(--weight-bold);
color:var(--text-primary);
margin-bottom:20px;
line-height:1.4
}
.main-section p{
font-size:var(--font-medium);
line-height:1.8;
color:var(--text-secondary);
margin-bottom:32px
}
.impact-highlight{
background:linear-gradient(135deg,#40B5B0, #359994);
color:var(--white);
padding:20px 32px;
border-radius:16px;
display:inline-flex;
align-items:center;
gap:12px;
box-shadow:0 8px 20px rgba(64,181,176,0.3)
}
.impact-number{
font-size:32px;
font-weight:900;
line-height:1
}
.impact-text{
font-size:var(--font-small);
font-weight:600
}
.sub-sections{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
margin-bottom:32px
}
.sub-section{
background:rgba(255,255,255,0.9);
border-radius:var(--radius-xl);
padding:32px 24px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
transition:var(--transition-base);
position:relative
}
.sub-section:hover{
transform:translateY(-4px);
box-shadow:0 15px 30px rgba(0,0,0,0.2)
}
.sub-icon{
font-size:40px;
margin-bottom:16px;
display:block
}
.sub-section h4{
font-size:19px;
font-weight:var(--weight-bold);
color:var(--text-primary);
margin-bottom:14px;
line-height:1.3;
letter-spacing:-0.01em
}
.sub-section p{
font-size:var(--font-small);
line-height:1.8;
color:var(--text-secondary);
margin:0;
font-weight:400
}
.flow-arrow{
display:flex;
align-items:center;
justify-content:center;
margin:24px 0;
position:relative
}
.arrow-line{
width:200px;
height:3px;
background:linear-gradient(90deg,#40B5B0, #359994);
border-radius:2px;
position:relative
}
.arrow-head{
font-size:24px;
color:#40B5B0;
margin-left:8px;
font-weight:bold
}
.necessity-item{
background:rgba(255,255,255,0.95);
border-radius:var(--radius-xl);
padding:32px 24px;
text-align:center;
color:var(--text-primary);
box-shadow:0 10px 30px rgba(0,0,0,0.2);
transition:transform 0.3s ease, box-shadow 0.3s ease;
position:relative
}
.necessity-item:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.3)}
.necessity-item:nth-child(1){transform:rotate(-0.5deg)}
.necessity-item:nth-child(2){transform:rotate(0.3deg)}
.necessity-item:nth-child(3){transform:rotate(-0.2deg)}
.necessity-item:hover{transform:translateY(-8px) rotate(0deg)}
.necessity-icon{
font-size:48px;
margin-bottom:20px;
display:block
}
.necessity-item p{
font-size:15px;
line-height:1.7;
color:var(--text-secondary);
margin:0
}
.flow-layout{
max-width:1200px;
margin:0 auto;
padding:0 24px;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:24px
}
.flow-step{
background:#f8f9fa;
border-radius:var(--radius-xl);
padding:32px 24px;
text-align:center;
border:2px solid #e0e0e0;
transition:var(--transition-base);
position:relative;
flex:1;
min-width:280px;
max-width:320px
}
.flow-step:hover{
transform:translateY(-4px);
box-shadow:0 15px 30px rgba(0,0,0,0.1);
border-color:#40B5B0
}
.flow-step.highlight-step{
background:linear-gradient(135deg,#40B5B0, #359994);
color:var(--white);
border-color:#40B5B0;
transform:scale(1.05);
z-index:2
}
.flow-step.highlight-step h3,
.flow-step.highlight-step p{
color:#fff
}
.step-number{
width:40px;
height:40px;
background:#40B5B0;
color:var(--white);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:var(--font-medium);
font-weight:var(--weight-bold);
margin:0 auto 20px;
box-shadow:0 4px 12px rgba(64,181,176,0.3)
}
.flow-step.highlight-step .step-number{
background:var(--gradient-hero);
color:#40B5B0;
box-shadow:0 4px 12px rgba(255,255,255,0.3)
}
.step-content h3{
font-size:var(--font-medium);
font-weight:var(--weight-bold);
color:var(--text-primary);
margin-bottom:12px;
line-height:1.3
}
.step-content p{
font-size:15px;
line-height:1.7;
color:var(--text-secondary);
margin:0
}
.result-badge{
background:transparent;
color:var(--white);
padding:8px 16px;
border-radius:var(--radius-xl);
font-size:14px;
font-weight:var(--weight-semibold);
margin-top:16px;
display:inline-block
}
.flow-connector{
display:flex;
align-items:center;
gap:8px;
flex-shrink:0
}
.connector-line{
width:60px;
height:3px;
background:linear-gradient(90deg,#40B5B0, #359994);
border-radius:2px
}
.connector-arrow{
font-size:20px;
color:#40B5B0;
font-weight:bold
}
.section h3,
.solution-step h3,
.agent-reason h3,
.optimization-content h3,
.necessity-item h3,
.agent-item h3,
.faq-item h3 {
font-size:22px;
color:#40B5B0;
margin:28px 0 16px 0;
font-weight:var(--weight-bold);
position:relative;
padding-left:20px;
line-height:1.3;
letter-spacing:-0.02em;
}
.section h3::before,
.solution-step h3::before,
.agent-reason h3::before,
.optimization-content h3::before,
.necessity-item h3::before,
.agent-item h3::before,
.faq-item h3::before {
content:'';
position:absolute;
left:0;
top:0;
bottom:0;
width:6px;
background:#40B5B0;
border-radius:3px;
}
.point-title {
font-size:24px;
color:#40B5B0;
margin:32px 0 16px 0;
font-weight:var(--weight-semibold);
position:relative;
padding-left:20px;
}
.point-title::before {
content:'';
position:absolute;
left:0;
top:0;
bottom:0;
width:6px;
background:#40B5B0;
border-radius:3px;
}
.diagnosis-section{background:var(--background-main);padding:60px 0}
.diagnosis-container{max-width:824px;margin:0 auto;background:var(--background-light);border-radius:24px;padding:48px;box-shadow:var(--shadow-medium)}
.diagnosis-title{text-align:center;margin-bottom:48px}
.diagnosis-title h2{font:800 32px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;color:var(--text-primary);margin:0 0 16px}
.diagnosis-title p{font:18px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;color:var(--text-secondary);margin:0}
.form-slider{position:relative}
.progress-bar{display:flex;justify-content:space-between;margin-bottom:16px;position:relative}
.progress-bar::before{content:'';position:absolute;top:50%;left:24px;right:24px;height:4px;background:#E5E7EB;z-index:1;border-radius:2px}
.progress-step{width:48px;height:48px;background:#FFFFFF;border:3px solid #E5E7EB;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;color:#374151;position:relative;z-index:2;transition:all 0.3s ease}
.progress-step.active{border-color:#007AD2;background:#007AD2;color:#fff;box-shadow:0 0 0 3px rgba(0,122,210,0.15)}
.progress-step.completed{border-color:#28a745;background:#28a745;color:#fff;box-shadow:0 0 0 3px rgba(40,167,69,0.15)}
.progress-step.clicked{border-color:#007AD2;background:#007AD2;color:#fff;box-shadow:0 0 0 3px rgba(0,122,210,0.15);transition:all 0.3s ease}
.form-slide{display:none;animation:fadeIn 0.5s ease}
.form-slide.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.form-group{margin-bottom:32px}
.form-label{display:block;font:700 20px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;color:var(--text-primary);margin-bottom:20px;text-align:center;position:relative}
.form-label::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:40px;height:3px;background:var(--gradient-cta);border-radius:2px}
.question-value{margin-bottom:16px}
.question-subtitle{font-size:14px;color:var(--text-secondary);font-style:italic;margin:0;text-align:center}
.radio-group{display:flex;flex-direction:column;gap:16px}
.radio-item{position:relative}
.radio-input{position:absolute;opacity:0}
.radio-label{display:block;padding:20px 24px;background:var(--background-main);border:3px solid var(--border-light);border-radius:16px;text-align:center;cursor:pointer;transition:var(--transition-base);font-weight:var(--weight-medium);min-height:56px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.radio-label::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent, rgba(59,130,246,0.1), transparent);transition:left 0.5s}
.radio-label:hover::before{left:100%}
.radio-input:checked + .radio-label{border-color:var(--primary);background:var(--primary-light);color:var(--primary);transform:scale(1.02);box-shadow:var(--shadow-warm)}
.c-form-slider{position:relative;width:100%;max-width:824px;margin:0 auto;overflow:visible}
/* critical.cssのprogressクラスを使用 */
.progress { /* 余白はUL側で管理するためコンテナ余白を撤去 */ }
.progress::before { content: none; }
.progress-item { /* liで定義 */ }
.progress-item.current {
border-color: #007AD2;
background: #007AD2;
color: #fff;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 122, 210, 0.3);
animation: pulse 2s infinite;
}
.progress-item.completed {
border-color: #28a745;
background: #28a745;
color: #fff;
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}
@keyframes pulse {
0% {
box-shadow: 0 4px 12px rgba(0, 122, 210, 0.3);
}
50% {
box-shadow: 0 4px 20px rgba(0, 122, 210, 0.5);
}
100% {
box-shadow: 0 4px 12px rgba(0, 122, 210, 0.3);
}
}
.current-question-indicator {
background: linear-gradient(135deg, #F4FCFF 0%, #E6F7FF 100%);
padding: 16px 24px;
border-radius: 12px;
border: 2px solid #E5E7EB;
margin: 0 auto;
max-width: 400px;
}
.current-question-text {
font-size: 16px;
font-weight: 600;
color: #052F87;
margin: 0;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
/* critical.cssのprogressクラスを使用 */
.progress {
max-width: 704px;
padding: 12px 16px;
margin-bottom: 16px;
}
.progress-item {
width: 40px;
height: 40px;
font-size: 14px;
}
.current-question-indicator {
padding: 12px 20px;
max-width: 300px;
}
.current-question-text {
font-size: 14px;
}
.diagnosis-section {
padding: 40px 0;
display: block !important;
visibility: visible !important;
}
.diagnosis-container {
margin: 0 auto;
padding: 32px 20px;
display: block !important;
visibility: visible !important;
}
.diagnosis-title {
margin-bottom: 32px;
}
.diagnosis-title h2 {
font-size: 24px;
line-height: 1.5;
}
.diagnosis-title p {
font-size: 16px;
}
.c-form-slider {
width: 100%;
max-width: 100%;
padding: 0 8px;
}
.slide-item {
padding: 12px 0;
}
.c-urge_form_head {
font-size: 16px;
margin-bottom: 12px;
}
.c-urge_form_radio {
margin-bottom: 16px;
}
.change-btn-wrapper {
margin-top: 32px;
gap: 12px;
}
/* モバイル版でCTAボタンを中央揃えに */
.hero-cta,
.cta-button {
display: block;
margin: 0 auto;
text-align: center;
}
.cta-button-wrapper {
text-align: center;
display: flex;
justify-content: center;
}
.cta-urge-content {
text-align: center;
}
.cta-button-wrapper a {
display: inline-block;
margin: 0 auto;
}
.diagnosis-cta {
text-align: center;
}
.success-cta {
text-align: center;
}
/* モバイル版のindex.phpデザイン強化 */
.hero {
padding: 60px 0;
}
.hero-title {
font-size: 2.2rem;
line-height: 1.5;
margin-bottom: 24px;
}
.hero-subtitle {
font-size: 1.1rem;
margin-bottom: 32px;
}
.hero-cta {
padding: 14px 28px;
font-size: 16px;
width: 100%;
max-width: 300px;
}
.section {
padding: 60px 0;
}
.section-header h2 {
font-size: 2rem;
margin-bottom: 12px;
}
.problem-cards-container {
grid-template-columns: 1fr;
gap: 24px;
padding: 0 16px;
}
.problem-card {
padding: 32px 24px;
}
.problem-content h3 {
font-size: 1.3rem;
}
}
/* さらに小さい端末でフォームの縦サイズを圧縮してボタンを確実に表示 */
@media (max-width: 480px) {
.diagnosis-section { padding: 28px 0; }
.diagnosis-container { padding: 16px 12px; }
.diagnosis-title { margin-bottom: 16px; }
.c-form-slider { padding: 0 4px; }
.slide-item { padding: 6px 0; }
.form-label, .c-urge_form_head { margin-bottom: 5px; }
.question-group { margin-bottom: 5px; padding: 5px; }
.radio-label { padding: 12px 14px; min-height: 44px; }
.change-btn-wrapper { margin-top: 5px; }
.change-btn button { min-height: 44px; padding: 10px 14px; }
/* 次へボタンを常に表示（非表示指定の影響を受けない） */
.change-btn-wrapper { display: flex !important; }
.next-btn button { display: inline-block !important; }
}
.form-slides{list-style:none;padding:0;margin:0}
.slide-item{display:none;animation:fadeIn 0.5s ease}
.slide-item.active{display:block}
/* 診断フォームのスライド表示制御を強化 */
.form-slides .slide-item:not(.active) {
display: none !important;
}
.form-slides .slide-item.active {
display: block !important;
}
.c-urge_form_head{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic","Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
font-weight:600;
font-size:18px;
color:#1f2937;
margin-bottom:8px;
line-height:1.4;
width:704px;
max-width:704px;
}
.c-urge_form_head_label{
display:inline-block;
background:linear-gradient(135deg,#3b82f6, #2563eb);
color:var(--white);
padding:4px 12px;
border-radius:var(--radius-xl);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic","Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
font-weight:600;
font-size:14px;
margin-right:8px;
box-shadow:0 2px 8px rgba(59, 130, 246, 0.3);
line-height:1.4;
}
.c-urge_form_radio{list-style:none;padding:0;margin:0 0 32px 0;display:grid;grid-template-columns:1fr;gap:6px;max-width:704px}
.c-urge_form_radioitem{margin-bottom:4px;max-width:704px}
.radio_input{position:absolute;opacity:0}
.radio_label{
display:flex;
padding:12px;
background:#f9fafb;
border:2px solid #e5e7eb;
border-radius:12px;
text-align:center;
cursor:pointer;
transition:var(--transition-base);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic","Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
font-weight:500;
font-size:16px;
min-height:48px;
align-items:center;
justify-content:center;
line-height:1.5;
}
.radio_input:checked + .radio_label{border-color:var(--primary);background:#F4FCFF;color:var(--primary);transform:scale(1.02)}
.change-btn-wrapper{display:flex;justify-content:space-between;margin-top:20px;gap:16px;max-width:704px;margin:20px auto 0}
.change-btn{display:inline-block}
.change-btn button{
color:var(--white);
border:0;
padding:16px 32px;
border-radius:12px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic","Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
font-weight:600;
font-size:16px;
cursor:pointer;
transition:var(--transition-base);
min-width:120px;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
line-height:1.5;
}
.change-btn.prev-btn button{background:#6b7280}
.change-btn.prev-btn button:hover{background:#4b5563;transform:translateY(-2px)}
/* 初期状態で戻るボタンを非表示（リロード時のちらつき防止） */
.change-btn-wrapper .prev-btn {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease;
}
/* 最初のスライドでは戻るボタンを非表示（レイアウトは維持） */
.slide-item:first-child ~ .change-btn-wrapper .prev-btn,
.slide-item.active:first-child ~ .change-btn-wrapper .prev-btn {
visibility: hidden !important;
opacity: 0 !important;
/* display: flex を維持してレイアウトスペースを確保 */
}
.slide-item:first-child ~ .change-btn-wrapper,
.slide-item.active:first-child ~ .change-btn-wrapper {
justify-content: space-between;
}
/* 2番目以降のスライドでは戻るボタンを表示（JavaScriptで制御） */
.change-btn-wrapper .prev-btn.show {
visibility: visible !important;
opacity: 1 !important;
}
.change-btn.next-btn button{background:#3b82f6}
.change-btn.next-btn button:hover{background:#052F87;transform:translateY(-2px)}
.change-btn button:disabled{background:#9ca3af;cursor:not-allowed;transform:none}
/* 最初のスライドでもレイアウトは通常の左右配置を維持 */
/* 都道府県セレクター用CSS */
.prefecture-selector{
position:relative;
width:704px;
max-width:704px;
margin-bottom:32px;
}
.prefecture-display{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 14px;
background:#fff;
border:1px solid #e5e7eb;
border-radius:12px;
cursor:pointer;
transition:all .2s;
min-height:56px;
}
.prefecture-display:hover{
background:#f8fafc;
border-color:#b6dcff;
}
.prefecture-display.active{
border-color:#007AD2;
background:#F4FCFF;
border-width:2px;
}
.selected-prefecture{
color:#1f2937;
font-weight:600;
}
.dropdown-arrow{
color:#6b7280;
transition:transform .2s;
}
.prefecture-display.active .dropdown-arrow{
transform:rotate(180deg);
}
.prefecture-menu{
position:absolute;
top:100%;
left:0;
right:0;
background:#fff;
border:2px solid #e5e7eb;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
z-index:1000;
max-height:500px;
overflow-y:auto;
display:none;
margin-top:4px;
opacity:0;
transform:translateY(-10px);
transition:opacity 0.2s ease, transform 0.2s ease;
}
.prefecture-menu.show,
.prefecture-menu-visible{
display:block;
opacity:1;
transform:translateY(0);
}
.prefecture-menu-hidden{
display:none;
opacity:0;
transform:translateY(-10px);
}
.region-section{
margin-bottom:16px;
}
.region-section:last-child{
margin-bottom:0;
}
.region-title{
padding:12px 16px;
background:#F4FCFF;
font-weight:var(--weight-medium);
color:#374151;
font-size:14px;
border-bottom:1px solid #e5e7eb;
}
.prefecture-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
gap:8px;
padding:12px;
}
.prefecture-btn{
padding:10px 12px;
background:#f9fafb;
border:1px solid #e5e7eb;
border-radius:8px;
font:500 14px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
color:#374151;
cursor:pointer;
transition:all 0.2s ease;
text-align:center;
min-height:36px;
touch-action:manipulation;
}
.prefecture-btn:hover{
background:#eef6ff;
border-color:#b6dcff;
}
.prefecture-btn.selected{
background:#e8f4ff;
border-color:#007AD2;
color:#007AD2;
}
@media (max-width:768px) {
.prefecture-display{padding:14px 18px;font-size:15px}
.prefecture-menu{max-height:400px}
.prefecture-grid{grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));gap:6px;padding:8px}
.prefecture-btn{padding:8px 10px;font-size:13px;min-height:36px}
.region-title{padding:10px 14px;font-size:13px}
}
.faq-section{background:var(--background-section);padding:80px 0}
.faq-section .section-subtitle{font-size:var(--font-small);color:var(--text-secondary);margin-bottom:24px}
.faq-section .section-underline{width:80px;height:4px;background:var(--primary);margin:0 auto}
.social-proof{
max-width:800px;
margin:0 auto 48px;
padding:0 24px
}
.proof-stats{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:24px;
margin-bottom:24px
}
.proof-item{
background:var(--gradient-hero);
border-radius:var(--radius-xl);
padding:24px 16px;
text-align:center;
box-shadow:var(--shadow-soft);
border:2px solid var(--border-light);
transition:var(--transition)
}
.proof-item:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-medium);
border-color:var(--primary)
}
.proof-number{
font-size:28px;
font-weight:900;
color:var(--primary);
margin-bottom:8px;
line-height:1.1
}
.proof-label{
font-size:14px;
color:var(--text-secondary);
font-weight:600
}
.proof-message{
text-align:center;
padding:16px;
background:var(--primary-light);
border-radius:var(--radius-lg);
border:1px solid var(--primary)
}
.proof-message p{
margin:0;
font-size:var(--font-small);
color:var(--primary-dark);
font-weight:600
}
@media (max-width:374px) {
body{font-size:14px}
.container{padding:16px}
.hero-title{font-size:24px;line-height:1.2}
.hero-subtitle{font-size:14px;line-height:1.4}
.problem-card h3{font-size:var(--font-xl)}
.cta-urge-title{font-size:var(--font-2xl)}
.step-title{font-size:var(--font-base)}
.achievement-number{font-size:var(--font-lg)}
.achievement-text{font-size:var(--font-xs)}
.problem-cards-container{grid-template-columns:1fr;gap:var(--space-4)}
.steps-grid{grid-template-columns:1fr;gap:var(--space-4)}
.success-cards-container{grid-template-columns:1fr;gap:var(--space-4)}
}
@media (min-width:375px) and (max-width:424px) {
body{font-size:15px !important}
.hero-title{font-size:28px !important;line-height:1.2 !important}
.hero-subtitle{font-size:16px !important;line-height:1.4 !important}
.problem-card h3{font-size:var(--font-xl) !important}
.cta-urge-title{font-size:var(--font-2xl) !important}
.step-title{font-size:var(--font-lg) !important}
.step-description{font-size:var(--font-base) !important}
.highlight-card-title{font-size:var(--font-lg) !important}
.highlight-card-p{font-size:var(--font-base) !important}
.diagnosis-section p{font-size:16px !important}
.achievement-number{font-size:20px !important}
.achievement-text{font-size:12px !important}
.problem-cards-container{grid-template-columns:1fr;gap:var(--space-4)}
.steps-grid{grid-template-columns:1fr;gap:var(--space-4)}
.success-cards-container{grid-template-columns:1fr;gap:var(--space-4)}
}
@media (min-width:425px) and (max-width:768px) {
body{font-size:16px}
.hero-title{font-size:32px;line-height:1.2}
.hero-subtitle{font-size:18px;line-height:1.4}
.problem-card h3{font-size:var(--font-2xl)}
.cta-urge-title{font-size:var(--font-3xl)}
.step-title{font-size:var(--font-xl)}
.step-description{font-size:var(--font-base)}
.highlight-card-title{font-size:var(--font-lg)}
.highlight-card-p{font-size:var(--font-base)}
.diagnosis-section p{font-size:16px}
.achievement-number{font-size:22px}
.achievement-text{font-size:14px}
.problem-cards-container{grid-template-columns:repeat(2, 1fr);gap:var(--space-4)}
.steps-grid{grid-template-columns:1fr;gap:var(--space-4)}
.success-cards-container{grid-template-columns:1fr;gap:var(--space-4)}
}
@media (max-width:768px) {
.footer{
padding-bottom:100px
}
/* 転職サイト・エージェントカードのモバイル最適化 */
.method-highlights{
grid-template-columns:1fr 1fr !important;
gap:0.8rem !important;
}
.highlight-card{
padding:1.2rem 0.8rem !important;
min-height:100px !important;
}
.highlight-card h4{
font-size:0.85rem !important;
white-space:nowrap !important;
margin-bottom:0.6rem !important;
}
.highlight-card p{
font-size:0.8rem !important;
line-height:1.4 !important;
margin:0 !important;
}
/* 診断結果ボタンのモバイル最適化 */
button[type="submit"]{
padding:12px 20px !important;
font-size:14px !important;
min-width:140px !important;
}
/* エージェント診断タイトルのモバイル最適化 */
.c-urgw_head{
font-size:22px !important;
line-height:1.3 !important;
}
/* 診断フォームのモバイル版コンパクト化 */
.diagnosis-container{
padding:16px 12px;
border-radius:12px
}
.diagnosis-title{
margin-bottom:16px
}
.diagnosis-title h2{
font-size:22px;
margin-bottom:6px
}
.diagnosis-title p{
font-size:13px
}
.form-group{
margin-bottom:16px
}
.form-label{
font-size:15px;
margin-bottom:6px
}
.question-value{
margin-bottom:6px
}
.question-subtitle{
font-size:13px
}
.radio-group{
gap:6px
}
.radio-label{
padding:10px 12px;
font-size:13px;
min-height:36px
}
.form-navigation{
margin-top:16px;
flex-direction:row;
gap:12px;
justify-content:space-between
}
.nav-button{
flex:1;
min-width:auto;
padding:12px 16px;
font-size:14px
}
}
@media (max-width:768px) {
body{font-size:15px}
.hero{padding:32px 0}
.hero-title{font-size:28px;line-height:1.2}
.hero-subtitle{font-size:var(--font-small);line-height:1.5}
.hero-description{font-size:15px;line-height:1.7}
.section{padding:32px 0}
.section-subtitle{font-size:15px;line-height:1.5}
.hierarchical-layout{
padding:0 16px
}
.form-label {
font-size: 18px;
margin-bottom: 16px;
line-height: 1.5;
}
.question-value {
font-size: 16px;
margin-bottom: 12px;
line-height: 1.5;
}
.question-subtitle {
font-size: 14px;
margin-bottom: 16px;
line-height: 1.5;
}
.radio-group {
gap: 12px;
}
.radio-item {
padding: 16px;
}
.radio-label {
font-size: 16px;
line-height: 1.5;
padding: 16px 20px;
min-height: 56px;
}
/* 選択肢のモバイル最適化 */
.c-urge_form_radio {
margin-bottom: 20px;
}
.c-urge_form_radioitem {
margin-bottom: 2px;
}
.radio_label {
padding: 8px 12px;
font-size: 14px;
min-height: 40px;
border-radius: 8px;
}
/* ボタンのモバイル最適化 */
.change-btn-wrapper {
margin-top: 24px;
gap: 12px;
}
.change-btn button {
padding: 12px 20px;
font-size: 14px;
min-width: 100px;
min-height: 44px;
border-radius: 8px;
}
/* フォームスライダーのモバイル最適化 */
.form-slides {
padding: 0 8px;
}
.slide-item {
padding: 12px 0;
}
/* 都道府県セレクターのモバイル最適化 */
.prefecture-display {
padding: 12px 16px;
font-size: 14px;
}
.prefecture-menu {
max-height: 400px;
}
.prefecture-grid {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 4px;
padding: 8px;
}
.prefecture-btn {
padding: 6px 8px;
font-size: 14px;
min-height: 36px;
}
.region-title {
padding: 8px 12px;
font-size: 14px;
}
}
/* ===== 重複削除: 統合されたbodyスタイルは上記に移動済み ===== */
/* ヒーローセクションの強化 */
.hero {
background: linear-gradient(135deg, #F4FCFF 0%, #E6F7FF 50%, #FFFFFF 100%);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,");
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0 auto;
padding: 0 24px;
text-align: center;
}
.hero-title {
font-size: clamp(16px, 4.5vw, 28px);
font-weight: var(--font-bold);
line-height: 1.2;
margin: 0 0 2rem;
color: var(--text-primary);
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.hero-title-accent {
color: var(--primary-dark);
}
.hero-subtitle {
font-size: clamp(14px, 4vw, 20px);
color: var(--text-secondary);
margin: 0 0 3rem;
line-height: var(--line-height-relaxed);
}
/* 問題提起カードのアイコン */
.problem-icon {
font-size: 48px;
color: #3B82F6;
margin-bottom: 16px;
}
/* CTA緊急セクション */
.cta-urge-section {
background: linear-gradient(135deg, #F4FCFF 0%, #E6F7FF 100%);
padding: 60px 0;
}
.cta-urge-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.cta-urge-title {
font: 800 36px/1.3 "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
color: var(--primary-dark);
margin-bottom: 24px;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.cta-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin: 48px 0;
}
.cta-step {
text-align: center;
}
.step-number {
width: 60px;
height: 60px;
background: #007AD2;
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font: bold 24px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
margin: 0 auto 16px;
}
/* CTAセクションの丸数字は後方の汎用 .step-number に上書きされないよう強制指定 */
.cta-steps .step-number {
background: #007AD2 !important;
color: #fff !important;
border: 2px solid rgba(0,0,0,0.06);
box-shadow: 0 6px 16px rgba(0, 122, 210, 0.25);
}
.step-title {
font: 700 22px/1.3 "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
color: var(--primary-dark);
margin-bottom: 12px;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.step-description {
font: 14px/1.6 "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
color: #444;
font-weight: 500;
}
.cta-button-wrapper {
margin-top: 40px;
}
.hero-cta {
background: linear-gradient(135deg, #FF6B35, #FF8C42, #FF6B35) !important;
background-size: 200% 200% !important;
color: #fff !important;
padding: 16px 32px;
border-radius: 12px;
display: inline-block;
font: 700 18px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4) !important;
animation: gradientShift 3s ease-in-out infinite !important;
}
.hero-cta:hover {
transform: translateY(-2px) scale(1.02) !important;
box-shadow: 0 15px 35px rgba(255, 140, 66, 0.5), 0 0 25px rgba(255, 107, 53, 0.3) !important;
color: #fff !important;
text-decoration: none;
animation-play-state: paused !important;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* セクションの統一デザイン */
.section {
padding: 80px 0;
position: relative;
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-header h2 {
font-size: 2.5rem;
font-weight: 800;
color: var(--text-primary);
margin: 0 0 16px;
line-height: 1.3;
}
.theme-subtitle {
display: inline-block;
background: var(--primary);
color: #fff;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
/* 問題提起カードのデザイン強化 */
.problem-section {
background: var(--background-light);
}
.problem-cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
max-width: 1200px;
margin: 0 auto;
}
.problem-card {
background: #fff;
border-radius: 20px;
padding: 40px 32px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border: 1px solid var(--border-light);
transition: all 0.3s ease;
text-align: center;
}
.problem-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.problem-illustration {
margin-bottom: 24px;
}
.problem-content h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 16px;
line-height: 1.4;
}
.problem-divider {
width: 60px;
height: 4px;
background: var(--primary);
margin: 0 auto 20px;
border-radius: 2px;
}
.problem-content p {
color: var(--text-secondary);
line-height: 1.7;
margin: 0;
}
/* より小さなスマートフォン用の最適化 */
@media (max-width: 480px) {
.diagnosis-container {
padding: 8px 12px;
}
/* 診断フォームの上下の幅を半分に */
.diagnosis-section {
padding: 8px 0;
}
.diagnosis-form {
margin: 6px 0;
}
.diagnosis-slide {
padding: 4px 0;
}
.change-btn {
margin-top: 3px;
}
/* 診断フォームの下の余白を大幅削減 */
.diagnosis-form .form-group {
margin-bottom: 3px;
}
.diagnosis-form .question-group {
margin-bottom: 3px;
}
.diagnosis-form .form-label {
margin-bottom: 3px;
}
.diagnosis-title h2 {
font-size: 20px;
line-height: 1.2;
}
.diagnosis-title p {
font-size: 13px;
}
.progress-item {
width: 32px;
height: 32px;
font-size: 10px;
}
.c-urge_form_head {
font-size: 16px;
padding: 0 4px;
line-height: 1.5;
}
.c-urge_form_head_label {
padding: 3px 8px;
font-size: 14px;
}
.form-label {
font-size: 16px;
margin-bottom: 12px;
}
.question-value {
font-size: 15px;
margin-bottom: 10px;
}
.question-subtitle {
font-size: 13px;
margin-bottom: 12px;
}
.radio-label {
font-size: 15px;
padding: 14px 16px;
min-height: 50px;
}
.radio_label {
padding: 10px 12px;
font-size: 13px;
min-height: 40px;
}
.change-btn button {
padding: 10px 16px;
font-size: 13px;
min-width: 80px;
min-height: 40px;
}
.prefecture-grid {
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
gap: 3px;
}
.prefecture-btn {
padding: 5px 6px;
font-size: 13px;
min-height: 36px;
}
/* タッチ操作の改善 */
.radio_label,
.prefecture-btn,
.change-btn button {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
touch-action: manipulation;
}
/* スクロールの改善 */
.form-slides {
-webkit-overflow-scrolling: touch;
}
.main-section {
padding: 32px 24px;
margin-bottom: 24px;
transform: none;
}
.main-icon {
font-size: 48px;
margin-bottom: 16px;
}
.main-section h3 {
font-size: 20px;
margin-bottom: 16px;
}
.main-section p {
font-size: var(--font-small);
margin-bottom: 24px;
}
.impact-highlight {
padding: 16px 24px;
flex-direction: column;
gap: 8px;
}
.impact-number {
font-size: 24px;
}
.impact-text {
font-size: 14px;
}
.sub-sections {
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 24px;
}
.sub-section {
padding: 24px 20px;
}
.sub-icon {
font-size: 32px;
margin-bottom: 12px;
}
.sub-section h4 {
font-size: var(--font-small);
margin-bottom: 10px;
}
.sub-section p {
font-size: 14px;
line-height: 1.6;
}
.arrow-line {
width: 120px;
}
.arrow-head {
font-size: 20px;
}
.flow-layout {
flex-direction: column;
gap: 16px;
padding: 0 16px;
}
.flow-step {
min-width: auto;
max-width: none;
width: 100%;
padding: 24px 20px;
}
.flow-step.highlight-step {
transform: none;
}
.flow-connector {
transform: rotate(90deg);
margin: 8px 0;
}
.connector-line {
width: 40px;
}
.achievement-cards {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: 0 0 24px;
padding: 16px;
max-width: 100%;
}
.achievement-card {
padding: 0;
}
.achievement-card:not(:last-child)::after {
right: -4px;
height: 50%;
}
.achievement-number {
font-size: 20px;
margin-bottom: 2px;
}
.achievement-text {
font-size: 13px;
line-height: 1.2;
}
.hero-cta {
width: 100%;
max-width: 100%;
height: 52px;
font-size: var(--font-small);
padding: 16px 24px;
}
.problem-checklist {
padding: 0 16px;
}
.problem-card {
padding: 20px 16px;
}
.problem-illustration {
height: 100px;
margin-bottom: 16px;
}
.problem-content h3 {
font-size: 14px;
margin-bottom: 8px;
}
.problem-content p {
font-size: 14px;
line-height: 1.5;
}
.methods-comparison {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.method-card {
padding: var(--space-4);
}
.method-header h4 {
font-size: var(--font-medium);
}
.method-description {
padding: var(--space-3);
}
.method-description p {
font-size: 13px;
}
.salary-comparison {
padding: 0 16px;
}
.comparison-header {
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.comparison-item {
padding: 20px 16px;
}
.comparison-item h3 {
font-size: var(--font-small);
margin-bottom: 16px;
}
.salary-flow {
gap: 12px;
margin-bottom: 16px;
}
.salary-amount {
font-size: 18px;
}
.salary-year {
font-size: 14px;
}
.salary-arrow {
font-size: 16px;
}
.salary-increase {
font-size: 14px;
padding: 8px 12px;
}
.opportunity-loss {
padding: 16px;
}
.loss-header h3 {
font-size: var(--font-small);
margin-bottom: 10px;
}
.loss-amount {
font-size: var(--font-medium);
margin-bottom: 16px;
}
.loss-breakdown {
grid-template-columns: 1fr;
gap: 12px;
}
.loss-item {
padding: 12px 8px;
}
.loss-label {
font-size: 14px;
}
.loss-value {
font-size: 14px;
}
.steps-container {
flex-direction: column;
gap: 16px;
padding: 0 16px;
}
.service-step {
min-width: auto;
max-width: none;
width: 100%;
padding: 24px 20px;
}
.step-connector {
transform: rotate(90deg);
margin: 8px 0;
}
.connector-line {
width: 40px;
}
.icon-circle {
width: 80px;
height: 80px;
font-size: 14px;
margin-bottom: 12px;
}
.step-time {
font-size: 14px;
padding: 4px 8px;
margin-top: 6px;
}
.service-cta p {
font-size: var(--font-medium);
margin-bottom: 24px;
}
.cta-button {
padding: 16px 32px;
font-size: var(--font-small);
min-width: 280px;
}
.step-content h3 {
font-size: var(--font-medium);
margin-bottom: 10px;
}
.step-content p {
font-size: 14px;
line-height: 1.5;
}
/* 診断で分かることセクションのモバイル調整 */
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 0 16px;
}
.benefit-card {
padding: 16px 12px;
}
.benefit-card h3 {
font-size: var(--font-small);
margin-bottom: 8px;
}
.benefit-card p {
font-size: 13px;
line-height: 1.5;
}
.highlight-badge {
top: -6px;
right: -6px;
padding: 4px 8px;
font-size: 10px;
}
/* 成功事例セクションのモバイル調整 */
.success-carousel {
padding: 0 16px;
}
.success-card {
padding: 32px 24px;
}
.avatar-circle {
width: 60px;
height: 60px;
font-size: 14px;
}
.success-info h3 {
font-size: var(--font-medium);
margin-bottom: 20px;
}
.success-details {
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 20px;
}
.detail-item {
padding: 12px 8px;
}
.detail-label {
font-size: 13px;
}
.detail-value {
font-size: 14px;
}
.success-agent {
padding: 12px;
}
.agent-label {
font-size: 13px;
}
.agent-name {
font-size: 14px;
}
.carousel-controls {
gap: 16px;
margin-top: 20px;
}
.carousel-btn {
width: 36px;
height: 36px;
font-size: 18px;
}
.dot {
width: 10px;
height: 10px;
}
/* FAQセクションのモバイル調整 */
.faq-container {
padding: 0 16px;
}
.faq-question {
padding: 20px;
}
.faq-question h3 {
font-size: var(--font-small);
line-height: 1.5;
}
.faq-icon {
font-size: 20px;
}
.faq-answer.active {
padding: 0 20px 20px;
}
.faq-answer p {
font-size: 14px;
line-height: 1.5;
}
/* H3見出しのモバイル調整 */
.section h3,
.solution-step h3,
.agent-reason h3,
.optimization-content h3,
.necessity-item h3,
.agent-item h3,
.faq-item h3,
.point-title {
font-size: var(--font-medium);
padding-left: 16px;
margin: 20px 0 10px 0;
}
.section h3::before,
.solution-step h3::before,
.agent-reason h3::before,
.optimization-content h3::before,
.necessity-item h3::before,
.agent-item h3::before,
.faq-item h3::before,
.point-title::before {
width: 4px;
}
/* カード内テキストのモバイル調整 */
.agent-item p,
.faq-item p,
.failure-item p,
.success-item p {
font-size: 14px;
line-height: 1.6;
}
/* カードのパディング調整 */
.agent-item {
padding: 20px 16px;
}
.faq-item {
padding: 16px;
}
.failure-item {
padding: 16px;
}
.success-item {
padding: 16px;
}
/* 社会的証明のモバイル調整 */
.proof-stats {
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 20px;
}
.proof-item {
padding: 20px 16px;
}
.proof-number {
font-size: 24px;
margin-bottom: 6px;
}
.proof-label {
font-size: 13px;
}
.proof-message {
padding: 12px;
}
.proof-message p {
font-size: 14px;
}
/* 診断価値セクションのモバイル調整 */
.diagnosis-reasons {
grid-template-columns: 1fr;
gap: 16px;
margin: 0 0 32px;
padding: 0 16px;
}
.reason-card {
padding: 24px 20px;
}
.reason-icon {
font-size: 40px;
margin-bottom: 16px;
}
.reason-card h3 {
font-size: var(--font-medium);
margin-bottom: 12px;
}
.reason-card p {
font-size: 14px;
line-height: 1.5;
}
.diagnosis-comparison {
padding: 0;
margin: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.comparison-table {
min-width: 500px;
border-collapse: collapse;
margin: 0;
padding: 0;
}
.comparison-header-row,
.comparison-row {
grid-template-columns: 150px 1fr 1fr;
margin: 0;
padding: 0;
min-width: 500px;
}
.comparison-cell {
padding: 12px 8px;
font-size: 14px;
border-right: 1px solid var(--border-light);
border-bottom: none;
margin: 0;
border-collapse: collapse;
}
.comparison-cell.header {
font-weight: var(--weight-semibold);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.scroll-hint-mobile {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
background: rgba(0,0,0,0.7);
color: var(--white);
padding: 6px 12px;
border-radius: var(--radius-xl);
font-size: 14px;
transition: var(--transition-base);
}
.scroll-indicator {
display: flex;
align-items: center;
gap: 4px;
}
.scroll-arrow {
animation: scrollPulse 1.5s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(3px);
}
}
/* キャリアの停滞のモバイル調整 */
.career-stagnation {
padding: 20px 16px;
margin-top: 20px;
}
}
.links-section{padding:80px 0 120px;background:var(--background-light)}
.links-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;margin-top:48px}
.link-card{background:var(--background-main);border-radius:12px;padding:var(--space-lg);border:3px solid #1BADDD;box-shadow:none;display:flex;flex-direction:column}
.link-card h3{font-size:20px;color:var(--text-primary);margin:-24px -24px 20px;background:#F4FCFF;text-align:center;padding:12px 16px;border-bottom:1px solid #1BADDD;font-weight:var(--weight-semibold);border-top-left-radius:8px;border-top-right-radius:8px;display:flex;align-items:center;justify-content:center;height:88px;box-sizing:border-box;line-height:1.4;position:relative;left:0;width:calc(100% + 48px)}
.link-list{list-style:none;padding:0 8px;margin:0;flex-grow:1}
.link-list li{margin-bottom:18px}
.link-list li:last-child{margin-bottom:0}
.link-list a{color:var(--text-primary);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;font-weight:var(--weight-normal);transition:color 0.2s ease;text-align:left;display:block}
.link-list a:hover{color:#0071BD}
.footer{
background:#007AD2;
color: #FFFFFF;
padding:48px 0;
margin-top:60px;
text-align:center;
position:relative;
z-index:10;
}
.footer-content{max-width:1200px;margin:0 auto;padding:0 24px}
.footer-logo{font:700 24px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;margin-bottom:24px;color:#ffffff !important}
.footer-logo h3{color:#ffffff !important}
.footer-logo p{color:#ffffff !important}
.footer-links{display:flex;justify-content:center;gap:32px;margin-bottom:32px;flex-wrap:wrap}
.footer-links a{color:#ffffff !important;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;opacity:1;transition:color 0.3s ease, text-decoration-color 0.3s ease}
.footer-links a:hover{color:var(--accent) !important}
.footer-links a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.footer-bottom p{color:#ffffff !important;opacity:1}
.footer-copyright{opacity:0.6;font:14px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;color:#ffffff !important}
@media (max-width:768px) {
/* 基本レイアウト */
.hero-title{font-size:var(--font-2xl)}
.hero-subtitle{font-size:var(--font-lg)}
.section{padding:var(--space-2xl) 0}
/* グリッドレイアウト */
.benefit-grid,
.solution-steps,
.agent-reasons,
.necessity-grid,
.agent-grid,
.cta-steps{grid-template-columns:1fr;gap:var(--space-lg)}
/* フォーム */
.diagnosis-container{padding:var(--space-lg)}
.form-navigation{flex-direction:column;gap:var(--space-md)}
.nav-button{width:100%}
/* リンク */
.links-grid{grid-template-columns:1fr}
.link-card{width:100%}
.links-section{padding:60px 0 80px}
.footer{margin-top:40px}
/* CTAセクション */
.cta-urge-content h2{font-size:var(--font-2xl)}
.cta-button{padding:var(--space-md) var(--space-xl);font-size:var(--font-lg)}
}
.fade-in{animation:fadeIn var(--transition-slow) ease}
.slide-up{animation:slideUp var(--transition-slow) ease}
@keyframes pulse {
0% {transform:scale(1);}
50% {transform:scale(1.05);}
100% {transform:scale(1);}
}
@keyframes gradient-shift {
0% {background-position:0%50%;}
50% {background-position:100%50%;}
100% {background-position:0%50%;}
}
@keyframes glow {
0% {box-shadow:0 8px 25px rgba(255, 107, 107, 0.3);}
50% {box-shadow:0 8px 35px rgba(255, 107, 107, 0.6), 0 0 20px rgba(255, 107, 107, 0.4);}
100% {box-shadow:0 8px 25px rgba(255, 107, 107, 0.3);}
}
@keyframes bounce {
0%, 20%,50%, 80%,100% {transform:translateY(0);}
40% {transform:translateY(-10px);}
60% {transform:translateY(-5px);}
}
@keyframes slideUp{
from{opacity:0;transform:translateY(40px)}
to{opacity:1;transform:translateY(0)}
}
.hero, .hero-content, .hero-title, .hero-subtitle, .hero-cta,
.benefit-grid, .agent-reasons{display:block}
.benefit-card, .agent-reason{background:transparent;border:0;box-shadow:none;padding:0;margin:0 0 16px}
.h2-underline{height:5px;width:250px;background:#007AD2;margin:12px auto 8px}
.h2-sublabel{text-align:center;color:var(--secondary);font-size:var(--font-medium);margin-bottom:32px}
.agent-points{display:flex;flex-direction:column;gap:24px}
.agent-point{background:var(--background-main);border:1px solid var(--border-light);border-left:5px solid #0071BD;border-radius:12px;padding:24px}
.point-badge{color:var(--secondary);font-weight:var(--weight-bold);font-size:24px;margin-bottom:8px}
.point-title{color:var(--secondary);font-weight:var(--weight-bold);font-size:24px;margin-bottom:8px}
.point-text{color:var(--text-secondary);line-height:1.7}
.section-title h2{background:#E8F1FF;padding:12px 16px;border-radius:8px;display:inline-block}
.problem-content p:first-child strong,
.risk-content p:first-child strong{background:#E8F1FF;padding:6px 10px;border-radius:6px;display:inline-block;color:#0f4fa8}
.benefit-card p strong{background:#E8F1FF;padding:6px 10px;border-radius:6px;display:inline-block;color:#0f4fa8}
.agent-point .point-title{background:#E8F1FF;border-radius:6px;padding:6px 10px;display:inline-block}
.c-urgw_head{font-size:32px;color:var(--text-primary);margin:0 0 16px;background:#E8F1FF;padding:12px 16px;border-radius:8px;display:inline-block}
.typeCenter{text-align:center}
.c-urgw_text_underline{box-shadow:inset 0 -0.35em 0 #CFE3FF}
.c-urgw_text_red{color:#1E6FFF}
#agent .section-title{background:var(--gradient-primary);padding:40px 0;border-radius:10px;color:var(--white);margin-bottom:48px}
#agent .section-title h2{color:var(--white);background:transparent;padding:0;display:block}
#problem-solution .section-title,
#solution .section-title{background:var(--gradient-primary);padding:40px 0;border-radius:10px;color:var(--white);margin-bottom:48px}
#problem-solution .section-title h2,
#solution .section-title h2{color:var(--white);background:transparent;padding:0;display:block}
/* メインページ用のスタイル - 重複削除済み */
/* 問題提起セクション */
.problem-section {
background: var(--background-section);
}
.problem-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin-top: 60px;
}
.problem-card {
background: white;
padding: 40px 30px;
border-radius: 16px;
box-shadow: var(--shadow-soft);
text-align: center;
transition: transform 0.3s ease;
}
.problem-card:hover {
transform: translateY(-5px);
}
.problem-icon {
font-size: 3rem;
margin-bottom: 20px;
}
.problem-card h3 {
font-size: 24px !important; /* 文字サイズを大きく */
font-weight: var(--font-semibold);
color: var(--text-primary);
margin-bottom: 1rem;
line-height: var(--line-height-normal);
white-space: pre-line !important; /* 改行文字を表示 */
}
.problem-card p {
color: var(--text-secondary);
line-height: 1.6;
}
/* 解決策セクション */
.solution-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin: 60px 0;
}
.step {
text-align: center;
position: relative;
}
.step-number {
display: inline-block;
width: 60px;
height: 60px;
background: var(--gradient-primary);
color: white;
border-radius: 50%;
line-height: 60px;
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 20px;
}
.step h3 {
font-size: 1.3rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
line-height: 1.3;
}
.step p {
color: var(--text-secondary);
font-weight: 600;
}
.solution-cta {
text-align: center;
margin-top: 60px;
}
.cta-button {
display: inline-block;
background: var(--cta-gradient);
color: white;
padding: 16px 32px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
box-shadow: var(--shadow-soft);
transition: all 0.3s ease;
margin-bottom: 16px;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.cta-note {
font-size: 0.9rem;
color: var(--text-secondary);
margin: 0;
}
/* 診断セクション */
.diagnosis-section {
background: var(--background-section);
}
/* 方法比較セクション */
.method-comparison {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin: 60px 0;
}
.method-card {
background: white;
padding: 40px 30px;
border-radius: 16px;
box-shadow: var(--shadow-soft);
text-align: center;
border: 2px solid var(--border-light);
transition: all 0.3s ease;
}
.method-card:hover {
border-color: var(--primary);
transform: translateY(-5px);
}
.method-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 16px;
}
.method-card p {
color: var(--text-secondary);
line-height: 1.6;
}
/* 比較表セクションの中央揃え */
.comparison-section {
text-align: center;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.comparison-section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.comparison-table {
margin: 60px auto;
overflow-x: auto;
max-width: 800px;
width: 100%;
}
.comparison-table table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-soft);
}
.comparison-table th,
.comparison-table td {
padding: 20px;
text-align: left;
border-bottom: 1px solid var(--border-light);
}
.comparison-table th {
background: var(--gradient-primary);
color: white;
font-weight: 700;
}
.comparison-table td {
color: var(--text-primary);
}
.method-cta {
text-align: center;
margin-top: 60px;
}
.method-cta p {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 24px;
}
/* 成功事例セクション */
.success-section {
background: var(--background-section);
}
.success-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin: 60px 0;
}
.success-card {
background: white;
padding: 40px 30px;
border-radius: 16px;
box-shadow: var(--shadow-soft);
text-align: center;
transition: transform 0.3s ease;
}
.success-card:hover {
transform: translateY(-5px);
}
.success-age {
display: inline-block;
background: var(--gradient-primary);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-weight: 700;
margin-bottom: 20px;
}
.success-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
}
.success-card p {
color: var(--text-secondary);
margin-bottom: 8px;
}
.success-salary {
font-size: 1.2rem;
font-weight: 700;
color: var(--primary);
margin: 16px 0;
}
.success-agent {
font-weight: 600;
color: var(--text-primary);
}
.success-cta {
text-align: center;
margin-top: 60px;
}
.success-cta p {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 24px;
}
/* FAQセクション */
.faq-section {
background: var(--background-section);
padding: 80px 0;
}
.faq-container {
max-width: 800px;
margin: 0 auto;
padding: 0 24px;
}
.faq-item {
background: white;
margin-bottom: 16px;
border-radius: 12px;
box-shadow: var(--shadow-soft);
overflow: hidden;
transition: all 0.3s ease;
}
.faq-item:hover {
box-shadow: var(--shadow-medium);
border-color: var(--primary);
}
.faq-question {
padding: 24px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
color: var(--text-primary);
transition: background-color 0.3s ease;
border: none;
background: white;
width: 100%;
}
.faq-question:hover {
background: var(--background-section);
}
.faq-question h3 {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
line-height: 1.4;
flex: 1;
text-align: left;
}
.faq-icon {
font-size: 24px;
font-weight: bold;
color: var(--primary);
transition: transform 0.3s ease;
flex-shrink: 0;
}
.faq-question.active .faq-icon {
transform: rotate(45deg);
}
.faq-answer {
padding: 0 24px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
background: white;
}
.faq-answer.active {
padding: 0 24px 24px;
max-height: 200px;
}
.faq-answer p {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
/* 統一されたCTAボタンスタイル - 重複削除済み */
/* アニメーション - 重複削除済み */
/* レスポンシブデザイン */
@media (max-width: 768px) {
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.section-title {
font-size: 2rem;
}
.problem-grid,
.solution-steps,
.method-comparison,
.success-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.comparison-table {
font-size: 0.9rem;
}
.comparison-table th,
.comparison-table td {
padding: 12px;
}
/* モバイル用ボタンサイズ */
.hero-cta, .cta-button {
padding: 16px 32px;
font-size: 18px;
min-width: 240px;
}
/* モバイル用FAQスタイル */
.faq-container {
padding: 0 16px;
}
.faq-question {
padding: 20px;
}
.faq-question h3 {
font-size: 16px;
padding-right: 12px;
}
.faq-icon {
font-size: 20px;
}
.faq-answer.active {
padding: 0 20px 20px;
}
}
/* 関連リンクセクション */
.links-section {
background: var(--background-section);
padding: 80px 0 120px 0; /* 下部にスキマを追加 */
}
/* 404エラーページ */
.error-404-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient-hero);
padding: 40px 20px;
}
.error-404-content {
text-align: center;
max-width: 600px;
width: 100%;
}
.error-404-icon {
font-size: 80px;
margin-bottom: 20px;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
.error-404-title {
font-size: 120px;
font-weight: 900;
color: var(--primary-dark);
margin: 0 0 20px 0;
text-shadow: 0 4px 8px rgba(0,0,0,0.1);
line-height: 1.2;
}
.error-404-subtitle {
font-size: 32px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 20px 0;
line-height: 1.2;
}
.error-404-description {
font-size: 18px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0 0 40px 0;
}
.error-404-actions {
display: flex;
gap: 20px;
justify-content: center;
margin-bottom: 60px;
flex-wrap: wrap;
}
.error-404-button {
display: inline-block;
padding: 16px 32px;
border-radius: var(--radius-lg);
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
min-width: 200px;
text-align: center;
}
.error-404-button.primary {
background: var(--gradient-primary);
color: white;
box-shadow: var(--shadow-soft);
}
.error-404-button.primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.error-404-button.secondary {
background: white;
color: var(--primary);
border: 2px solid var(--primary);
}
.error-404-button.secondary:hover {
background: var(--primary);
color: white;
transform: translateY(-2px);
}
.error-404-links-box {
background: white;
border-radius: var(--radius-xl);
padding: 40px;
box-shadow: var(--shadow-soft);
margin-bottom: 40px;
}
.error-404-links-title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 30px 0;
}
.error-404-links-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
.error-404-link {
display: block;
padding: 16px 20px;
background: var(--background-section);
border-radius: var(--radius-md);
text-decoration: none;
color: var(--text-primary);
font-weight: 500;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.error-404-link:hover {
background: var(--primary-light);
border-color: var(--primary);
transform: translateY(-2px);
box-shadow: var(--shadow-soft);
}
.error-404-footer {
color: var(--text-secondary);
font-size: 14px;
margin-top: 40px;
}
/* モバイル対応 */
@media (max-width: 768px) {
.error-404-title {
font-size: 80px;
}
.error-404-subtitle {
font-size: 24px;
}
.error-404-description {
font-size: 16px;
}
.error-404-actions {
flex-direction: column;
align-items: center;
}
.error-404-button {
width: 100%;
max-width: 300px;
}
.error-404-links-grid {
grid-template-columns: 1fr;
}
.error-404-links-box {
padding: 30px 20px;
}
}
.links-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin: 60px 0;
}
.link-card {
background: white;
padding: 40px 30px;
border-radius: 16px;
box-shadow: var(--shadow-soft);
border: 2px solid var(--border-light);
transition: all 0.3s ease;
}
.link-card:hover {
border-color: var(--primary);
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.link-card h3 {
font-size: 1.3rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 20px;
line-height: 1.4;
}
.link-list {
list-style: none;
padding: 0;
margin: 0;
}
.link-list li {
margin-bottom: 12px;
}
.link-list a {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.95rem;
line-height: 1.6;
transition: color 0.3s ease;
display: block;
padding: 8px 0;
border-bottom: 1px solid transparent;
}
.link-list a:hover {
color: var(--primary);
border-bottom-color: var(--primary);
}
@media (max-width: 480px) {
.hero-cta, .cta-button {
padding: 14px 28px;
font-size: 16px;
min-width: 200px;
}
.links-section {
padding: 60px 0 100px 0;
}
.links-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.link-card {
padding: 30px 20px;
}
}
/* --- Single Post & Page styles (single.php, page.php) --- */
.breadcrumbs {
margin: 16px 0 20px;
font-size: 0.95rem;
color: #6B7280;
}
.breadcrumbs a { color: #0071BD; text-decoration: none; }
.breadcrumbs a:hover { color: #007AD2; text-decoration: underline; }
.breadcrumbs .separator { margin: 0 8px; color: #9CA3AF; }
.breadcrumbs .current { color: #374151; font-weight: 700; }
.main-content {
padding: 40px 0 80px;
}
.post-content,
.page-content {
background: #fff;
border: 2px solid #E5E7EB;
border-radius: 16px;
padding: 32px 28px;
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
/* タイトル・メタ */
.post-header {
margin-bottom: 20px;
border-bottom: 2px solid #F1F5F9;
padding-bottom: 16px;
}
.page-header {
margin-bottom: 0 !important;
border-bottom: none !important;
padding-bottom: 0 !important;
}
.post-title,
.page-title {
font-size: 1.8rem;
font-weight: 700;
color: #052F87;
margin: 0 0 12px 0;
line-height: 1.4;
}
.post-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
color: #6B7280;
font-size: 0.85rem;
margin-bottom: 16px;
}
.post-date::before { content: ""; display: none; }
.post-author::before { content: ""; display: none; }
/* 本文 */
.post-body,
.page-body { color: #1F2937; }
.post-body p,
.page-body p {
margin: 0 0 1.4em;
line-height: 1.8;
font-size: 0.95rem;
}
.post-body h2,
.page-body h2 {
font-size: 1.4rem;
margin: 1.6em 0 0.6em;
color: #052F87;
padding-left: 10px;
border-left: 4px solid #40B5B0;
}
.post-body h3,
.page-body h3 {
font-size: 1.2rem;
margin: 1.2em 0 0.5em;
color: #0f4fa8;
}
.post-body ul,
.page-body ul { padding-left: 1.2em; margin: 0 0 1.2em; }
.post-body ol,
.page-body ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.post-body li,
.page-body li { margin: 0.4em 0; }
.post-body blockquote,
.page-body blockquote {
margin: 1.6em 0;
padding: 16px 20px;
background: #F8FAFC;
border-left: 4px solid #007AD2;
color: #334155;
border-radius: 8px;
}
.post-body pre,
.page-body pre {
background: #0B1020;
color: #E5E7EB;
border-radius: 8px;
padding: 16px;
overflow-x: auto;
}
.post-body code,
.page-body code { background: #F1F5F9; padding: 2px 6px; border-radius: 4px; }
/* 削除: 新しい統合スタイルに移行 */
/* フッター（カテゴリ・タグ） */
.post-footer {
margin-top: 28px;
padding-top: 16px;
border-top: 2px solid #F1F5F9;
}
.post-categories,
.post-tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 12px;
margin-bottom: 10px;
}
.categories-label,
.tags-label { color: #374151; font-weight: 700; }
.category-link,
.tag-link {
display: inline-block;
background: #F4FCFF;
color: #0071BD;
border: 1px solid #BAE6FD;
padding: 6px 10px;
border-radius: 999px;
font-size: 0.85rem;
text-decoration: none;
transition: all .2s ease;
}
.category-link:hover,
.tag-link:hover { background: #E0F2FE; transform: translateY(-1px); }
/* カテゴリー表示 */
.articleFooter__cat {
margin: 30px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
border: 1px solid #e9ecef;
}
.articleFooter__cat--caption {
font-size: 16px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 15px;
}
.articleFooter__cat--list {
margin-top: 10px;
}
.article-category {
margin: 0;
}
.catList {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.catList li {
margin: 0;
padding: 0;
}
.list-label a {
display: inline-block;
padding: 8px 16px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
}
.list-label a:hover {
background: #0056b3;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}
/* モバイル対応 */
@media (max-width: 768px) {
.articleFooter__cat {
margin: 20px 0;
padding: 15px;
}
.articleFooter__cat--caption {
font-size: 14px;
margin-bottom: 10px;
}
.catList {
gap: 8px;
}
.list-label a {
padding: 6px 12px;
font-size: 15px;
}
}
/* 関連記事 - 新しい構造 */
.articleFooter__relation {
margin: 40px 0;
}
.articleFooter__relation .caption {
font-size: 24px;
font-weight: 700;
color: #2c3e50;
margin: 0 0 25px 0;
padding: 15px 20px;
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-left: 5px solid #1976d2;
border-radius: 0 8px 8px 0;
box-shadow: 0 2px 4px rgba(25, 118, 210, 0.2);
}
.articleList.articleListRelation {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.articleList__item {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.articleList__item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.articleList__item--fig {
width: 100%;
height: 200px;
overflow: hidden;
margin: 0;
}
.articleList__item--fig img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.articleList__item:hover .articleList__item--fig img {
transform: scale(1.05);
}
.xw-article-media__body {
padding: 20px;
}
.xw-article-media__body--title {
margin: 0 0 10px 0;
font-size: 18px;
font-weight: 600;
line-height: 1.5;
color: #333;
}
.xw-article-media__body--title a {
color: inherit;
text-decoration: none;
}
.xw-article-media__body--title a:hover {
color: #007bff;
}
.article-meta {
margin-top: 10px;
}
.article-date {
font-size: 14px;
color: #666;
}
.posted-on time {
display: flex;
align-items: center;
gap: 5px;
}
.posted-on i {
color: #999;
}
/* モバイル対応 */
@media (max-width: 768px) {
.articleList.articleListRelation {
grid-template-columns: 1fr;
gap: 15px;
}
.articleList__item--fig {
height: 150px;
}
.xw-article-media__body {
padding: 15px;
}
.xw-article-media__body--title {
font-size: 16px;
}
}
.related-post {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.related-post-title { font-size: 1rem; margin: 0 0 8px; line-height: 1.4; }
.related-post-title a { color: #0071BD; text-decoration: none; }
.related-post-title a:hover { color: #007AD2; text-decoration: underline; }
.related-post-excerpt { color: #444; font-size: 0.95rem; }
/* アイキャッチ */
.featured-image { margin: 12px 0 24px; }
/* 削除: 新しい統合スタイルに移行 */
/* 前後記事ナビ */
.post-nav { margin: 24px 0 12px; }
.post-nav-inner { display: flex; justify-content: space-between; gap: 12px; }
.post-nav a { display: inline-block; padding: 10px 14px; border: 2px solid #E5E7EB; border-radius: 10px; text-decoration: none; color: #0071BD; background: #fff; transition: all .2s ease; }
.post-nav a:hover { border-color: #007AD2; color: #007AD2; transform: translateY(-1px); }
@media (max-width: 768px) {
.post-content,
.page-content { padding: 20px 16px; border-radius: 12px; }
.post-title,
.page-title { font-size: 1.6rem; }
.related-posts-grid { grid-template-columns: 1fr; }
.post-nav-inner { flex-direction: column; }
}
/* フォームのモバイル最適化 */
@media (max-width: 768px) {
.container {
padding: 0 var(--space-md);
}
.c-urge_form_head {
font-size: 18px;
line-height: 1.5;
margin-bottom: 16px;
}
.form-label {
font-size: 18px;
margin-bottom: 16px;
line-height: 1.5;
}
.question-value {
font-size: 16px;
margin-bottom: 12px;
line-height: 1.5;
}
.question-subtitle {
font-size: 14px;
margin-bottom: 16px;
line-height: 1.5;
}
.radio_label {
padding: var(--space-md);
font-size: var(--font-sm);
min-height: 44px;
}
.change-btn button {
padding: var(--space-md) var(--space-lg);
font-size: var(--font-sm);
min-height: 44px;
}
.prefecture-display {
min-height: 44px;
font-size: var(--font-sm);
}
.change-btn-wrapper {
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 32px;
padding: 0 16px;
}
.change-btn {
flex: 1;
}
.change-btn button {
width: 100%;
padding: 16px 24px;
font-size: 16px;
font-weight: 600;
border-radius: var(--mobile-border-radius);
min-height: var(--touch-target-size);
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.change-btn.prev-btn button {
background: #6b7280;
color: white;
}
.change-btn.prev-btn button:hover {
background: #4b5563;
transform: translateY(-2px);
}
.change-btn.next-btn button {
background: linear-gradient(135deg, var(--primary-color), #0056b3);
color: white;
}
.change-btn.next-btn button:hover {
background: linear-gradient(135deg, #0056b3, #003d82);
transform: translateY(-2px);
}
/* モバイル用ボタンサイズ統一（48px以上推奨） */
.change-btn button {
padding: 18px 28px !important;
font-size: 14px !important;
font-weight: 600 !important;
border-radius: 8px !important;
min-height: 48px !important;
min-width: 140px !important;
line-height: 1.2 !important;
}
/* ラジオボタンとラベルのタップ領域を拡大 */
.radio-item {
margin-bottom: 16px;
}
.radio-label {
display: block;
padding: 20px 24px;
background: var(--background-main);
border: 3px solid var(--border-light);
border-radius: 16px;
text-align: center;
cursor: pointer;
transition: var(--transition-base);
font-weight: var(--weight-medium);
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.radio-label::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(59,130,246,0.1), transparent);
transition: left 0.5s;
}
.radio-label:hover::before {
left: 100%;
}
.radio-input:checked + .radio-label {
border-color: var(--primary);
background: #F4FCFF;
color: var(--primary);
transform: scale(1.02);
}
/* ラジオボタンのタップ領域を拡大 */
.radio-input {
position: absolute !important;
opacity: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
cursor: pointer !important;
}
/* フォームのアクセシビリティ向上 */
.form-group {
margin-bottom: 32px;
}
.form-label {
display: block;
font: 700 20px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
color: var(--text-primary);
margin-bottom: 20px;
text-align: center;
position: relative;
}
.form-label::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 3px;
background: var(--gradient-cta);
border-radius: 2px;
}
/* 質問文のスタイル改善 */
.c-urge_form_head {
font-size: 18px;
font-weight: 600;
color: #1f2937;
margin-bottom: 16px;
line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
}
.c-urge_form_head_label {
display: inline-block;
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
padding: 4px 12px;
border-radius: var(--radius-xl);
font-size: 14px;
font-weight: 600;
margin-right: 8px;
}
/* 未選択アラートの改善 */
.next-btn button:disabled {
background: #6c757d !important;
color: #fff !important;
cursor: not-allowed !important;
opacity: 0.7 !important;
}
.next-btn button:disabled:hover {
transform: none !important;
box-shadow: none !important;
}
/* CTAの優先順位を明確化 */
.primary-cta {
background: linear-gradient(135deg, #ff6b35, #f7931e) !important;
color: white !important;
font-size: 18px !important;
font-weight: 700 !important;
padding: 20px 32px !important;
min-height: 56px !important;
border-radius: 12px !important;
box-shadow: 0 4px 16px rgba(255, 107, 53, 0.3) !important;
text-align: center !important;
display: block !important;
width: 100% !important;
margin: 24px 0 !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
}
.primary-cta:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4) !important;
color: white !important;
}
.secondary-cta {
background: #f8f9fa !important;
color: #495057 !important;
font-size: 16px !important;
font-weight: 600 !important;
padding: 16px 24px !important;
min-height: 48px !important;
border-radius: 8px !important;
border: 2px solid #e9ecef !important;
text-align: center !important;
display: block !important;
width: 100% !important;
margin: 16px 0 !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
}
.secondary-cta:hover {
border-color: var(--primary-color) !important;
background: #f0f8ff !important;
color: var(--primary-color) !important;
}
/* CTAの重複を解消 */
.cta-section {
margin: 32px 0;
padding: 24px 20px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
text-align: center;
}
.cta-section h3 {
font-size: 20px;
margin-bottom: 16px;
color: #2c3e50;
}
.cta-section p {
font-size: 16px;
margin-bottom: 20px;
color: #6c757d;
}
/* Q1-Q2の次へボタン位置を統一 */
.slide-item .change-btn-wrapper {
margin-top: 16px;
padding: 0 16px;
}
/* モバイルでも初期状態で戻るボタンを非表示（リロード時のちらつき防止） */
.change-btn-wrapper .prev-btn {
visibility: hidden !important;
opacity: 0 !important;
transition: visibility 0s, opacity 0.3s ease;
}
/* 最初のスライド（Q1+Q2）では戻るボタンを非表示（レイアウトは維持） */
.slide-item:first-child ~ .change-btn-wrapper .prev-btn,
.slide-item.active:first-child ~ .change-btn-wrapper .prev-btn {
visibility: hidden !important;
opacity: 0 !important;
/* display: flex を維持してレイアウトスペースを確保 */
}
/* 最初のスライドでの戻る・次へボタン配置（PC版と同じ） */
.slide-item:first-child ~ .change-btn-wrapper,
.slide-item.active:first-child ~ .change-btn-wrapper {
display: flex !important;
justify-content: space-between !important;
margin-top: 16px;
}
/* モバイルでも2番目以降のスライドでは戻るボタンを表示（JavaScriptで制御） */
.change-btn-wrapper .prev-btn.show {
visibility: visible !important;
opacity: 1 !important;
}
/* 最初のスライドでも通常のボタンサイズとレイアウトを維持 */
/* モバイルでボタンの順序を逆にする（次へが上、戻るが下） */
.change-btn-wrapper {
flex-direction: column !important;
gap: 12px !important;
}
.change-btn.next-btn {
order: 1 !important; /* 次へボタンを上に */
}
.change-btn.prev-btn {
order: 2 !important; /* 戻るボタンを下に */
}
}
/* Cache bust: 1758221248 */
/* Cache bust: 1758221425 */
/* Cache bust: 1758221547 */
/* Force update: 1758222180 */
/* Cache bust: 1758222299 */
/* Cache bust: 1758222406 */
/* Cache bust: 1758222456 */
/* Cache bust: 1758222895 */
/* Cache bust: 1758223056 */
/* Cache bust: 1758223163 */
/* Cache bust: 1758223581 */
/* Cache bust: 1758223982 */
/* Cache bust: 1758224100 */
/* Cache bust: 1758224202 */
/* Cache bust: 1758224379 */
/* Cache bust: 1758224573 */
/* Cache bust: 1758224652 */
/* Cache bust: 1758224728 */
/* Cache bust: 1758224832 */
/* Cache bust: 1758224957 */
/* Cache bust: 1758225068 */
/* Cache bust: 1758225405 */
/* Cache bust: 1758225533 */
/* Cache bust: 1758225608 */
/* Cache bust: 1758225730 */
/* Cache bust: 1758225910 */
/* Cache bust: 1758225957 */
/* Cache bust: 1758226085 */
/* Force refresh: 1758226130 */
/* 関連記事とページネーション用のスタイリング */
.articleFooter__relation {
margin-top: 80px;
padding: 60px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.articleFooter__relation::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #007AD2, #00C6FF, #007AD2);
background-size: 200% 100%;
animation: gradient-shift 3s ease-in-out infinite;
}
@keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.articleFooter__relation .caption {
font-size: 2.2rem;
margin: 0 0 50px;
color: #1a1a1a;
font-weight: 800;
text-align: center;
position: relative;
letter-spacing: -0.02em;
padding-bottom: 20px;
}
.articleFooter__relation .caption::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(135deg, #007AD2 0%, #052F87 100%);
border-radius: 2px;
}
.articleList.articleListRelation {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding: 0 20px;
max-width: 1200px;
margin: 0 auto;
}
.articleList.articleListRelation .articleList__item {
background: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid #e5e7eb;
}
.articleList.articleListRelation .articleList__item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border-color: #007AD2;
}
.articleList.articleListRelation .xw-article-media {
display: block;
text-decoration: none;
color: inherit;
}
.articleList.articleListRelation .articleList__item--fig {
position: relative;
overflow: hidden;
aspect-ratio: 16/9;
}
/* 削除: 新しい統合スタイルに移行 */
.articleList.articleListRelation .xw-article-media__body {
padding: 20px;
}
.articleList.articleListRelation .xw-article-media__body--title {
font-size: 1.1rem;
font-weight: 600;
line-height: 1.4;
margin-bottom: 12px;
color: #1a1a1a;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-clamp: 2;
}
.articleList.articleListRelation .xw-article-media__body--extra {
font-size: 0.9rem;
color: #6b7280;
}
.articleList.articleListRelation .article-date {
display: flex;
align-items: center;
gap: 6px;
}
.articleList.articleListRelation .article-date i {
color: #007AD2;
}
/* 個別ページの画像最適化 */
.article-thumbnail {
position: relative;
width: 100%;
margin: 20px 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.responsive-thumbnail {
width: 100%;
height: auto;
display: block;
object-fit: cover;
transition: transform 0.3s ease;
}
.responsive-thumbnail:hover {
transform: scale(1.02);
}
.is-thumbnail-style-wide {
aspect-ratio: 16/9;
}
.is-thumbnail-style-wide .responsive-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ===== お役立ち情報（blog）ページのスタイル ===== */
/* blogページの基本レイアウト */
.page-blog .contents.no-sidebar .container {
grid-template-columns: 1fr !important;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
/* 既存のテーマスタイルを上書き */
.page-blog .contents .container,
.category .contents .container {
grid-template-columns: 1fr !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 40px 20px !important;
}
/* blogページではサイドバーを完全に非表示 */
.page-blog .side,
.page-blog .sidebar,
.page .side,
.page .sidebar,
.category .side,
.category .sidebar {
display: none !important;
}
/* blogページのコンテナを1カラムに強制 */
.page-blog .contents .container,
.page .contents .container,
.category .contents .container,
body.page .contents .container,
body.page-blog .contents .container,
body.category .contents .container {
grid-template-columns: 1fr !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 40px 20px !important;
}
/* ヘッダーと投稿グリッドの幅を統一 */
.page-header .container,
.contents .container {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
/* より具体的なセレクターで上書き */
body.page .contents .container,
body.page-blog .contents .container,
body.category .contents .container {
grid-template-columns: 1fr !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 40px 20px !important;
}
/* blogページのサイドバーを完全に削除 */
body.page .side,
body.page .sidebar,
body.page-blog .side,
body.page-blog .sidebar,
body.category .side,
body.category .sidebar {
display: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
/* blogページの動的CSSを上書き */
body.page .contents .container,
body.page-blog .contents .container,
body.category .contents .container {
grid-template-columns: 1fr !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 40px 20px !important;
}
/* blogページの投稿グリッドを最適化 - 一行3つ */
body.page .posts-grid,
body.page-blog .posts-grid,
body.category .posts-grid,
.page .posts-grid,
.page-blog .posts-grid,
.category .posts-grid,
.contents .posts-grid,
.articleListContainer .posts-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 25px !important;
margin: 40px 0 !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;
width: 100% !important;
}
/* タブレットでは2列 */
@media (max-width: 1024px) {
body.page .posts-grid,
body.page-blog .posts-grid,
body.category .posts-grid,
.page .posts-grid,
.page-blog .posts-grid,
.category .posts-grid,
.contents .posts-grid,
.articleListContainer .posts-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* モバイルでは1列 */
@media (max-width: 640px) {
body.page .posts-grid,
body.page-blog .posts-grid,
body.category .posts-grid,
.page .posts-grid,
.page-blog .posts-grid,
.category .posts-grid,
.contents .posts-grid,
.articleListContainer .posts-grid {
grid-template-columns: 1fr !important;
}
}
.page-blog .page-header,
.category .page-header {
text-align: center;
margin-bottom: 40px;
padding: 40px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
}
.page-blog .page-title,
.category .page-title {
font-size: 48px;
font-weight: 700;
color: #2c3e50;
margin: 0 0 20px 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.page-blog .page-description {
font-size: 18px;
color: #6c757d;
margin: 0 0 30px 0;
text-align: center;
}
/* 投稿グリッドレイアウト - 一行3つ */
.page-blog .posts-grid,
.category .posts-grid,
.posts-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 25px !important;
margin: 40px 0 !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;
}
/* タブレットでは2列 */
@media (max-width: 1024px) {
.page-blog .posts-grid,
.category .posts-grid,
.posts-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* モバイルでは1列 */
@media (max-width: 640px) {
.page-blog .posts-grid,
.category .posts-grid,
.posts-grid {
grid-template-columns: 1fr !important;
}
}
/* より強力なセレクターで3列レイアウトを強制適用 */
div.posts-grid,
.articleListContainer div.posts-grid,
.contents .articleListContainer .posts-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 25px !important;
margin: 40px 0 !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;
}
/* デスクトップでは必ず3列 */
@media (min-width: 1025px) {
div.posts-grid,
.articleListContainer div.posts-grid,
.contents .articleListContainer .posts-grid {
grid-template-columns: repeat(3, 1fr) !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* 1920px画面での余白確保 - 左右360pxずつ */
@media (min-width: 1920px) {
.page-blog .posts-grid,
.posts-grid,
body.page .posts-grid,
body.page-blog .posts-grid,
.page .posts-grid,
.contents .posts-grid,
.articleListContainer .posts-grid {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (max-width: 1024px) {
div.posts-grid,
.articleListContainer div.posts-grid,
.contents .articleListContainer .posts-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 640px) {
div.posts-grid,
.articleListContainer div.posts-grid,
.contents .articleListContainer .posts-grid {
grid-template-columns: 1fr !important;
}
}
/* 投稿カード - 3列レイアウト用 */
.page-blog .post-card,
.category .post-card,
.post-card {
background: #fff !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
border: 1px solid #e9ecef !important;
display: flex !important;
flex-direction: column !important;
text-decoration: none !important;
color: inherit !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-width: 0 !important;
flex: 1 1 0 !important;
min-height: 400px !important;
}
.post-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.post-thumbnail {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
.post-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.post-card:hover .post-thumbnail img {
transform: scale(1.05);
}
.post-content {
padding: 25px;
}
.post-title {
font-size: 20px;
font-weight: 600;
margin: 0 0 15px 0;
line-height: 1.5;
}
.post-title a {
color: #2c3e50;
text-decoration: none;
transition: color 0.3s ease;
}
.post-title a:hover {
color: #007AD2;
}
.post-meta {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
font-size: 14px;
color: #6c757d;
}
.post-date {
display: flex;
align-items: center;
gap: 5px;
}
.post-date::before {
content: "";
display: none;
}
.post-categories {
display: flex;
align-items: center;
gap: 5px;
}
.post-categories::before {
content: "";
display: none;
}
.post-categories a {
color: #007AD2;
text-decoration: none;
padding: 2px 8px;
background: #e3f2fd;
border-radius: 4px;
font-size: 14px;
transition: all 0.3s ease;
}
.post-categories a:hover {
background: #007AD2;
color: #fff;
}
.post-excerpt {
color: #6c757d;
line-height: 1.6;
margin-bottom: 20px;
}
.post-read-more {
text-align: right;
}
.read-more-btn {
display: inline-block;
padding: 10px 20px;
background: linear-gradient(135deg, #007AD2 0%, #0056b3 100%);
color: #fff;
text-decoration: none;
border-radius: 6px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 122, 210, 0.3);
}
.read-more-btn:hover {
background: linear-gradient(135deg, #0056b3 0%, #004494 100%);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 122, 210, 0.4);
}
/* 最適化されたページネーション - 統合版 */
.navigation.pagination {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
margin: 50px auto !important;
text-align: center;
}
/* スワイプボタン - 改善版 */
.swipe-button {
display: block;
width: 100%;
max-width: 350px;
min-width: 280px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
box-sizing: border-box;
padding: 1rem 1.5rem;
margin: 30px auto;
text-align: center;
color: white !important;
font-weight: bold;
font-size: 1rem;
line-height: 1.5;
background: linear-gradient(135deg, #FFA500 0%, #FF4500 100%);
border: none;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
background-size: 200% 100%;
background-position: 0% 50%;
text-decoration: none;
position: relative;
overflow: hidden;
}
/* ホバー効果 */
.swipe-button:hover {
background-position: 100% 50%;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 69, 0, 0.3);
color: white !important;
}
/* アクティブ状態 */
.swipe-button:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
/* フォーカス状態（アクセシビリティ対応） */
.swipe-button:focus {
outline: 3px solid rgba(255, 165, 0, 0.5);
outline-offset: 2px;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.swipe-button {
max-width: 100%;
min-width: 250px;
padding: 0.875rem 1.25rem;
font-size: 0.9rem;
margin: 20px auto;
}
}
@media (max-width: 480px) {
.swipe-button {
min-width: 200px;
padding: 0.75rem 1rem;
font-size: 0.85rem;
border-radius: 25px;
}
}
/* アニメーション効果 */
@keyframes swipeGlow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 特別なアニメーション効果（オプション） */
.swipe-button.animated {
animation: swipeGlow 2s ease-in-out infinite;
}
/* ボタンのバリエーション */
.swipe-button.primary {
background: linear-gradient(135deg, #FFA500 0%, #FF4500 100%);
}
.swipe-button.secondary {
background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
}
.swipe-button.danger {
background: linear-gradient(135deg, #F44336 0%, #C62828 100%);
}
/* ボタンサイズのバリエーション */
.swipe-button.small {
padding: 0.5rem 1rem;
font-size: 0.875rem;
border-radius: 20px;
}
.swipe-button.large {
padding: 1.25rem 2rem;
font-size: 1.125rem;
border-radius: 35px;
}
.navigation.pagination .nav-links {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 5px !important;
flex-wrap: nowrap !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
}
.navigation.pagination .nav-links .page-numbers {
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
width: 40px !important;
height: 40px !important;
border: 1px solid #333 !important;
color: #333 !important;
text-decoration: none !important;
border-radius: 50% !important;
transition: all 0.3s ease !important;
text-align: center !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
margin: 0 2px !important;
font-size: 14px !important;
line-height: 1 !important;
background: #fff !important;
font-weight: 500 !important;
float: none !important;
clear: none !important;
position: relative !important;
}
/* ページネーション状態とバリエーション */
.navigation.pagination .nav-links .page-numbers:hover {
background: #f0f0f0 !important;
color: #333 !important;
border-color: #333 !important;
transform: scale(1.05) !important;
}
.navigation.pagination .nav-links .page-numbers.current {
background: #333 !important;
color: #fff !important;
border-color: #333 !important;
}
.navigation.pagination .nav-links .page-numbers.dots {
background: #fff !important;
border: 1px solid #333 !important;
color: #333 !important;
cursor: default !important;
font-size: 16px !important;
}
.navigation.pagination .nav-links .page-numbers.prev,
.navigation.pagination .nav-links .page-numbers.next {
font-size: 18px !important;
font-weight: bold !important;
line-height: 1 !important;
}
.screen-reader-text,
.sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
overflow: hidden;
}
/* レスポンシブ対応 - 最適化版 */
@media (max-width: 640px) {
.navigation.pagination .nav-links {
gap: 3px;
}
.navigation.pagination .nav-links .page-numbers {
width: 35px !important;
height: 35px !important;
font-size: 14px !important;
}
.navigation.pagination .nav-links .page-numbers.prev,
.navigation.pagination .nav-links .page-numbers.next {
font-size: 16px !important;
}
}
.pagination ul {
display: inline-flex !important;
list-style: none;
margin: 0 auto !important;
padding: 0;
gap: 8px;
justify-content: center !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
.pagination li {
margin: 0;
}
.pagination a,
.pagination span {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 10px 15px;
background: #f8f9fa;
color: #6c757d;
text-decoration: none;
border-radius: 6px;
transition: all 0.3s ease;
border: 1px solid #e9ecef;
text-align: center !important;
min-width: 40px !important;
height: 40px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.pagination a:hover {
background: #007AD2;
color: #fff;
border-color: #007AD2;
}
.pagination .current {
background: #007AD2;
color: #fff;
border-color: #007AD2;
}
/* 記事なしの場合 */
.no-posts {
text-align: center;
padding: 60px 20px;
color: #6c757d;
}
.no-posts p {
font-size: 18px;
margin: 0;
}
/* 既存のテーマスタイルを完全に上書き */
.page-blog .post-card-wrapper,
.page .post-card-wrapper,
.category .post-card-wrapper {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
min-width: 0 !important;
flex: 1 1 0 !important;
}
.page-blog .post-card-wrapper .post-card,
.page .post-card-wrapper .post-card,
.category .post-card-wrapper .post-card {
display: block !important;
text-decoration: none !important;
color: inherit !important;
background: #fff !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
border: 1px solid #e9ecef !important;
margin-bottom: 30px !important;
}
.page-blog .post-card-wrapper .post-card:hover,
.page .post-card-wrapper .post-card:hover,
.category .post-card-wrapper .post-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}
.page-blog .post-card-header,
.page .post-card-header,
.category .post-card-header {
position: relative !important;
width: 100% !important;
height: 220px !important;
overflow: hidden !important;
}
.page-blog .post-card-thumbnail,
.page .post-card-thumbnail,
.category .post-card-thumbnail {
width: 100% !important;
height: 100% !important;
}
.page-blog .post-card-thumbnail img,
.page .post-card-thumbnail img,
.category .post-card-thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.3s ease !important;
}
.page-blog .post-card:hover .post-card-thumbnail img,
.page .post-card:hover .post-card-thumbnail img,
.category .post-card:hover .post-card-thumbnail img {
transform: scale(1.05) !important;
}
.page-blog .post-card-category,
.page .post-card-category,
.category .post-card-category {
position: absolute !important;
top: 15px !important;
right: 15px !important;
}
.page-blog .category-tag,
.page .category-tag,
.category .category-tag {
background: rgba(0, 122, 210, 0.9) !important;
color: #fff !important;
padding: 5px 12px !important;
border-radius: 20px !important;
font-size: 12px !important;
font-weight: 500 !important;
}
.page-blog .post-card-content,
.page .post-card-content,
.category .post-card-content {
padding: 24px !important;
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
}
.page-blog .post-card-title,
.page .post-card-title,
.category .post-card-title {
font-size: 20px !important;
font-weight: 600 !important;
margin: 0 0 16px 0 !important;
line-height: 1.4 !important;
color: #2c3e50 !important;
}
.page-blog .post-card-meta,
.page .post-card-meta,
.category .post-card-meta {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 12px !important;
font-size: 13px !important;
color: #6c757d !important;
}
.page-blog .post-card-date,
.page .post-card-date,
.category .post-card-date {
display: flex !important;
align-items: center !important;
gap: 5px !important;
}
.page-blog .post-card-excerpt,
.page .post-card-excerpt,
.category .post-card-excerpt {
color: #6c757d !important;
line-height: 1.6 !important;
margin-bottom: 20px !important;
font-size: 15px !important;
flex-grow: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
}
.page-blog .post-card-excerpt p,
.page .post-card-excerpt p,
.category .post-card-excerpt p {
margin: 0 !important;
}
/* 新しいレイアウト用CSS - p-blog */
.p-blog {
background: #fff;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* ページヘッダーのスタイル */
.page-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 40px 0;
margin-bottom: 40px;
border-radius: 12px;
text-align: center;
}
.page-header .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.page-title {
font-size: 48px;
font-weight: 700;
color: #2c3e50;
margin: 0 0 20px 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* コンテンツエリアのスタイル */
.contents {
background: #fff;
min-height: 400px;
}
.contents .container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.main {
width: 100%;
}
.articleListContainer {
width: 100%;
}
/* ページコンテンツのスタイル */
.page-content {
background: #fff;
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
}
.page-featured-image {
margin-bottom: 30px;
text-align: center;
}
.page-thumbnail {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.page-content-body {
line-height: 1.8;
font-size: 16px;
color: #333;
}
.page-content-body h1,
.page-content-body h2,
.page-content-body h3,
.page-content-body h4,
.page-content-body h5,
.page-content-body h6 {
color: #2c3e50;
margin-top: 30px;
margin-bottom: 15px;
}
.page-content-body p {
margin-bottom: 20px;
}
.page-content-body ul,
.page-content-body ol {
margin-bottom: 20px;
padding-left: 30px;
}
.page-content-body li {
margin-bottom: 8px;
}
.page-pagination {
margin-top: 30px;
text-align: center;
}
.page-number {
display: inline-block;
padding: 8px 12px;
margin: 0 4px;
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 4px;
color: #007AD2;
text-decoration: none;
transition: all 0.3s ease;
}
.page-number:hover {
background: #007AD2;
color: #fff;
border-color: #007AD2;
}
/* 投稿ページのスタイル */
.single-post-content {
background: #fff;
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
}
.post-featured-image {
margin-bottom: 30px;
text-align: center;
}
.post-thumbnail {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.post-meta {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #e5e7eb;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.post-date {
color: #6c757d;
font-size: 14px;
display: flex;
align-items: center;
gap: 5px;
}
.post-date::before {
content: "📅";
font-size: 16px;
}
.post-categories {
display: flex;
align-items: center;
gap: 10px;
}
.post-categories a {
background: linear-gradient(135deg, #007AD2, #052F87);
color: #fff;
padding: 4px 12px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
.post-categories a:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,122,210,0.3);
}
.post-content-body {
line-height: 1.8;
font-size: 16px;
color: #333;
margin-bottom: 30px;
}
.post-content-body h1,
.post-content-body h2,
.post-content-body h3,
.post-content-body h4,
.post-content-body h5,
.post-content-body h6 {
color: #2c3e50;
margin-top: 30px;
margin-bottom: 15px;
}
.post-content-body h2 {
font-size: 24px;
border-bottom: 2px solid #007AD2;
padding-bottom: 10px;
}
.post-content-body h3 {
font-size: 20px;
color: #007AD2;
}
.post-content-body p {
margin-bottom: 20px;
}
.post-content-body ul,
.post-content-body ol {
margin-bottom: 20px;
padding-left: 30px;
}
.post-content-body li {
margin-bottom: 8px;
}
.post-content-body blockquote {
border-left: 4px solid #007AD2;
padding-left: 20px;
margin: 20px 0;
font-style: italic;
color: #6c757d;
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
}
.post-content-body img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
margin: 20px 0;
}
.post-pagination {
margin-top: 30px;
text-align: center;
}
.post-page-number {
display: inline-block;
padding: 8px 12px;
margin: 0 4px;
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 4px;
color: #007AD2;
text-decoration: none;
transition: all 0.3s ease;
}
.post-page-number:hover {
background: #007AD2;
color: #fff;
border-color: #007AD2;
}
.post-tags {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #e5e7eb;
}
.tags-label {
font-weight: 600;
color: #2c3e50;
margin-right: 10px;
}
.post-tags a {
display: inline-block;
background: #f4fcff;
color: #0071BD;
border: 1px solid #BAE6FD;
padding: 4px 10px;
border-radius: 999px;
font-size: 14px;
text-decoration: none;
margin-right: 8px;
margin-bottom: 8px;
transition: all 0.2s ease;
}
.post-tags a:hover {
background: #E0F2FE;
transform: translateY(-1px);
}
.c-page-header {
background: #fff;
padding: 60px 0;
color: #333;
max-width: 1200px;
margin: 0 auto;
border-bottom: 1px solid #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
.c-page-header__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
width: 100% !important;
}
.breadcrumbs {
margin-bottom: 20px;
font-size: 14px;
color: #666;
text-align: left !important;
margin: 0 0 20px 0 !important;
max-width: 1200px;
padding: 0 20px !important;
line-height: 1.5;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
}
/* モバイル用breadcrumbs最適化 */
@media (max-width: 768px) {
.breadcrumbs {
font-size: 14px !important;
padding: 8px 16px !important;
margin: 0 0 12px 0 !important;
gap: 4px !important;
overflow-x: auto;
white-space: nowrap;
}
.breadcrumbs a {
font-size: 14px !important;
padding: 2px 0 !important;
}
.breadcrumbs .current-item {
font-size: 14px !important;
padding: 2px 0 !important;
}
.breadcrumbs .breadcrumb-separator {
margin: 0 4px !important;
font-size: 14px !important;
}
/* モバイル用全体的な最適化 */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
}
.main-content {
padding: 20px 0 60px !important;
}
.container {
padding: 0 16px !important;
}
/* タッチターゲットの最適化 */
a, button, input, select, textarea {
min-height: 44px;
min-width: 44px;
}
}
.breadcrumbs a {
color: #007AD2;
text-decoration: none;
transition: color 0.3s ease;
padding: 2px 0;
}
.breadcrumbs a:hover {
text-decoration: underline;
color: #0056b3;
}
.breadcrumbs .current-item {
color: #333;
font-weight: 500;
padding: 2px 0;
}
.breadcrumbs .breadcrumb-separator {
color: #999;
margin: 0 8px;
font-weight: normal;
}
/* ブログページとカテゴリーページのパンクズリスト統一 */
.page-blog .breadcrumbs,
.category .breadcrumbs,
.p-blog .breadcrumbs {
margin: 0 0 20px 0 !important;
padding: 0 20px !important;
max-width: 1200px;
margin-left: auto !important;
margin-right: auto !important;
}
/* パンクズリストとリストカードの間の余白確保 */
.contents .main .breadcrumbs + .articleListContainer {
margin-top: 20px !important;
}
/* ブログページのパンクズリストとリストカードの間の余白 */
.page-blog .breadcrumbs + .articleListContainer,
.category .breadcrumbs + .p-blog__list {
margin-top: 20px !important;
}
.c-page-header__title {
margin: 0;
}
.c-page-header__title-en {
display: block;
font-size: 24px;
font-weight: 300;
margin-bottom: 8px;
opacity: 0.8;
}
.c-page-header__title-ja {
display: block;
font-size: 36px;
font-weight: 700;
}
.p-blog__main {
padding: 60px 0;
}
.p-blog__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
width: 100% !important;
}
.p-blog__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
list-style: none;
margin: 0;
padding: 0;
}
.p-blog__item {
margin: 0;
}
.p-blog__item__inner {
display: block;
text-decoration: none;
color: inherit;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 100%;
}
.p-blog__item__inner:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.p-blog__item__image {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}
.p-blog__item__image img {
width: 100%;
height: auto;
object-fit: contain;
transition: transform 0.3s ease;
display: block;
}
.p-blog__item__inner:hover .p-blog__item__image img {
transform: scale(1.05);
}
.p-blog__item__tags {
position: absolute;
top: 15px;
right: 15px;
list-style: none;
margin: 0;
padding: 0;
}
.p-blog__item__tag {
background: rgba(0, 122, 210, 0.9);
color: #fff;
padding: 4px 12px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
margin-bottom: 5px;
}
.p-blog__item__time {
display: block;
color: #666;
font-size: 14px;
margin: 20px 20px 10px 20px;
}
.p-blog__item__title {
font-size: 18px;
font-weight: 600;
line-height: 1.5;
margin: 0 20px 15px 20px;
color: #333;
}
.p-blog__item__link {
display: block;
color: #007AD2;
font-size: 14px;
font-weight: 500;
margin: 0 20px 20px 20px;
text-decoration: none;
}
.p-blog__item__link:hover {
text-decoration: underline;
}
.archive-news__pagination {
margin-top: 60px;
text-align: center;
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
}
.pagination {
display: inline-block !important;
text-align: center !important;
margin: 0 auto !important;
}
.pagination ul {
list-style: none;
margin: 0 auto !important;
padding: 0;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 8px;
width: auto !important;
flex-wrap: nowrap !important;
}
.pagination li {
margin: 0;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.pagination a,
.pagination span {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 8px 12px;
border: 1px solid #ddd;
color: #333;
text-decoration: none;
border-radius: 4px;
transition: all 0.3s ease;
text-align: center !important;
min-width: 40px !important;
height: 40px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.pagination a:hover {
background: #007AD2;
color: #fff;
border-color: #007AD2;
}
.pagination .current {
background: #007AD2;
color: #fff;
border-color: #007AD2;
}
/* blogページのサイドバー完全削除 */
.p-blog .side,
.p-blog .sidebar,
.p-blog .widget-area,
.p-blog .sidebar-widget {
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* blogページのコンテナを全幅に */
.p-blog .container,
.p-blog .contents,
.p-blog .main {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* サイドバーを完全に削除 */
body.blog .side,
body.blog .sidebar,
body.blog .widget-area,
body.page .side,
body.page .sidebar,
body.page .widget-area,
body.page-blog .side,
body.page-blog .sidebar,
body.page-blog .widget-area {
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* blogページのレイアウト調整 - 左側の隙間を復活、右側の隙間を削除 */
body.blog .contents,
body.page .contents,
body.page-blog .contents {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
body.blog .contents .container,
body.page .contents .container,
body.page-blog .contents .container {
display: block !important;
width: 100% !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
/* サイドバー関連のCSSは削除済み */
/* メインコンテンツエリア - 削除（下記で統合） */
/* p-blogレイアウトの完全な全幅設定 */
.p-blog {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
}
.p-blog * {
box-sizing: border-box !important;
}
/* p-blogレイアウトの調整 - 左側の隙間を復活、右側の隙間を削除 */
.p-blog .contents {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.p-blog .container {
display: block !important;
width: 100% !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
/* p-blogのサイドバー関連CSSは削除済み */
.p-blog .main {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* メインコンテンツエリアを適切な幅に */
.p-blog__main {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 60px 0 !important;
}
/* メインコンテンツの幅制限 */
body.blog .main,
body.page .main,
body.page-blog .main {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
.p-blog__inner {
width: 100% !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
/* 右側の隙間を完全に削除 */
.p-blog .main {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
flex: 1 !important;
}
/* コンテンツエリアの右側マージンを削除 */
.p-blog .articleListContainer,
.p-blog .posts-grid {
width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
padding-right: 0 !important;
}
/* レスポンシブ対応 */
@media (max-width: 1024px) {
.p-blog__list {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* タブレットでも1カラムレイアウト */
body.blog .contents .container,
body.page .contents .container,
body.page-blog .contents .container,
.p-blog .container {
display: block !important;
}
}
@media (max-width: 640px) {
.p-blog__list {
grid-template-columns: 1fr;
gap: 15px;
}
.c-page-header {
padding: 40px 0;
min-height: 150px;
}
.c-page-header__title-en {
font-size: 20px;
}
.c-page-header__title-ja {
font-size: 28px;
}
.p-blog__main {
padding: 40px 0;
}
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.page-blog .page-title {
font-size: 36px;
}
.page-blog .page-description {
font-size: 16px;
}
.posts-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.post-content {
padding: 20px;
}
.post-title {
font-size: 18px;
}
.post-meta {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
@media (max-width: 480px) {
.page-blog .page-title {
font-size: 28px;
}
.post-thumbnail {
height: 150px;
}
.post-content {
padding: 15px;
}
.read-more-btn {
padding: 8px 16px;
font-size: 14px;
}
}
/* サイドバーなしレイアウト */
.u-row.is-no_sidebar {
display: block;
}
.u-row.is-no_sidebar .l-content__main {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
/* お役立ち情報ページ専用スタイル */
.page-id-blog .u-row.is-no_sidebar .l-content__main,
.page-id-お役立ち情報 .u-row.is-no_sidebar .l-content__main {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.page-id-blog .article,
.page-id-お役立ち情報 .article {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 40px;
margin: 20px 0;
}
.page-id-blog .article-header h1,
.page-id-お役立ち情報 .article-header h1 {
font-size: 36px;
font-weight: 700;
color: #2c3e50;
margin: 0 0 20px 0;
text-align: center;
border-bottom: 3px solid #007AD2;
padding-bottom: 15px;
}
.page-id-blog .article-body,
.page-id-お役立ち情報 .article-body {
font-size: 16px;
line-height: 1.8;
color: #333;
}
.page-id-blog .article-body h2,
.page-id-お役立ち情報 .article-body h2 {
font-size: 28px;
font-weight: 700;
color: #2c3e50;
margin: 40px 0 20px;
padding: 15px 20px;
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-left: 5px solid #1976d2;
border-radius: 0 8px 8px 0;
box-shadow: 0 2px 4px rgba(25, 118, 210, 0.2);
}
.page-id-blog .article-body h3,
.page-id-お役立ち情報 .article-body h3 {
font-size: 22px;
font-weight: 600;
color: #34495e;
margin: 30px 0 15px;
padding: 10px 15px;
background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e8 100%);
border-left: 4px solid #4caf50;
border-radius: 0 6px 6px 0;
box-shadow: 0 2px 4px rgba(76, 175, 80, 0.1);
}
.page-id-blog .article-body p,
.page-id-お役立ち情報 .article-body p {
margin: 0 0 15px 0;
}
.page-id-blog .article-body a,
.page-id-お役立ち情報 .article-body a {
color: #007acc;
text-decoration: none;
}
.page-id-blog .article-body a:hover,
.page-id-お役立ち情報 .article-body a:hover {
text-decoration: underline;
}
/* サイドバーなしの個別記事レイアウト */
.no-sidebar .contents .container {
grid-template-columns: 1fr;
max-width: 1000px;
margin: 0 auto;
}
.no-sidebar .side {
display: none;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.page-id-blog .article,
.page-id-お役立ち情報 .article {
padding: 20px;
margin: 10px 0;
}
.page-id-blog .article-header h1,
.page-id-お役立ち情報 .article-header h1 {
font-size: 28px;
}
.page-id-blog .article-body h2,
.page-id-お役立ち情報 .article-body h2 {
font-size: 22px;
padding: 12px 15px;
margin: 30px 0 15px;
}
.page-id-blog .article-body h3,
.page-id-お役立ち情報 .article-body h3 {
font-size: 18px;
padding: 8px 12px;
margin: 25px 0 12px;
}
}
@media (max-width: 480px) {
.page-id-blog .article,
.page-id-お役立ち情報 .article {
padding: 15px;
}
.page-id-blog .article-header h1,
.page-id-お役立ち情報 .article-header h1 {
font-size: 24px;
}
.page-id-blog .article-body h2,
.page-id-お役立ち情報 .article-body h2 {
font-size: 20px;
padding: 10px 12px;
margin: 25px 0 12px;
}
.page-id-blog .article-body h3,
.page-id-お役立ち情報 .article-body h3 {
font-size: 16px;
padding: 6px 10px;
margin: 20px 0 10px;
}
}
/* ===== 個別投稿ページのスタイル ===== */
/* パンくずリスト */
.page-top-breadcrumbs {
background: #f8f9fa;
padding: 10px 0;
border-bottom: 1px solid #e9ecef;
}
.page-top-breadcrumbs.show-background {
background: linear-gradient(135deg, #007AD2, #0056b3);
color: white;
}
.page-top-breadcrumbs .breadcrumb {
font-size: 14px;
margin: 0;
}
.page-top-breadcrumbs .breadcrumb a {
color: #007AD2;
text-decoration: none;
}
.page-top-breadcrumbs.show-background .breadcrumb a {
color: white;
}
.page-top-breadcrumbs .breadcrumb a:hover {
text-decoration: underline;
}
/* 記事コンテナ */
.articleContainer {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
overflow: hidden;
}
/* 記事ヘッダー */
.article-header {
padding: 30px 30px 20px;
border-bottom: 1px solid #e9ecef;
}
.article-title {
font-size: 32px;
font-weight: 700;
color: #2c3e50;
margin: 0 0 15px 0;
line-height: 1.5;
}
.article-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
font-size: 14px;
color: #6c757d;
}
.article-date {
color: #6c757d;
}
.article-categories a,
.article-tags a {
display: inline-block;
background: #e3f2fd;
color: #1976d2;
padding: 4px 8px;
border-radius: 4px;
text-decoration: none;
font-size: 14px;
margin-right: 5px;
transition: all 0.3s ease;
}
.article-categories a:hover,
.article-tags a:hover {
background: #1976d2;
color: white;
}
/* 記事コンテンツ */
.article-content {
padding: 30px;
line-height: 1.8;
color: #333;
}
.article-content h2 {
font-size: 28px;
font-weight: 700;
color: #2c3e50;
margin: 40px 0 20px;
padding: 15px 20px;
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-left: 5px solid #1976d2;
border-radius: 0 8px 8px 0;
box-shadow: 0 2px 4px rgba(25, 118, 210, 0.2);
}
.article-content h3 {
font-size: 22px;
font-weight: 600;
color: #34495e;
margin: 30px 0 15px;
padding: 10px 15px;
background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e8 100%);
border-left: 4px solid #4caf50;
border-radius: 0 6px 6px 0;
box-shadow: 0 2px 4px rgba(76, 175, 80, 0.1);
}
.article-content p {
margin: 0 0 15px 0;
}
.article-content a {
color: #007acc;
text-decoration: none;
}
.article-content a:hover {
text-decoration: underline;
}
/* 記事フッター */
.article-footer {
padding: 20px 30px;
border-top: 1px solid #e9ecef;
background: #f8f9fa;
}
.tags-label {
font-weight: 600;
color: #495057;
margin-right: 8px;
}
/* 前後記事ナビゲーション - 新しい構造 */
.articlePagerUnit {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin: 30px 0;
}
.articlePager {
flex: 1;
max-width: 48%;
}
.articlePager.prev {
text-align: left;
}
.articlePager.next {
text-align: right;
}
.articlePager.prev .articlePager__caption {
text-align: left;
}
.articlePager.next .articlePager__caption {
text-align: right;
}
.articlePager a {
display: block;
padding: 20px;
background: white;
border: 1px solid #e9ecef;
border-radius: 12px;
text-decoration: none;
color: #333;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-height: 80px;
}
.articlePager__caption {
font-size: 14px;
font-weight: 700;
color: #007bff;
margin-bottom: 10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.articlePager a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-color: #007AD2;
background: #f8f9fa;
}
.articlePager__body {
display: flex;
align-items: center;
gap: 15px;
}
.articlePager__body--fig {
width: 80px;
height: 60px;
overflow: hidden;
border-radius: 8px;
margin: 0;
flex-shrink: 0;
}
.articlePager__body--fig img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.articlePager:hover .articlePager__body--fig img {
transform: scale(1.05);
}
.articlePager__body--text {
font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: #333;
flex: 1;
}
/* モバイル対応 */
@media (max-width: 768px) {
.articlePagerUnit {
flex-direction: column;
gap: 15px;
}
.articlePager {
max-width: 100%;
text-align: center;
}
.articlePager.prev {
text-align: left;
}
.articlePager.next {
text-align: right;
}
.articlePager.prev .articlePager__caption {
text-align: left;
}
.articlePager.next .articlePager__caption {
text-align: right;
}
.articlePager a {
min-height: 60px;
padding: 15px;
}
.articlePager__body {
flex-direction: column;
gap: 10px;
}
.articlePager__body--fig {
width: 100%;
height: 120px;
}
.articlePager__body--text {
font-size: 14px;
}
.articlePager__caption {
font-size: 15px;
margin-bottom: 8px;
font-weight: 700;
display: block;
}
}
.nav-subtitle {
display: block;
font-size: 14px;
color: #6c757d;
margin-bottom: 5px;
}
.nav-title {
display: block;
font-weight: 600;
color: #333;
line-height: 1.5;
}
/* 関連記事 */
.related-posts {
margin: 40px 0;
padding: 30px;
background: #f8f9fa;
border-radius: 12px;
border: 1px solid #e9ecef;
}
.related-posts-title {
font-size: 24px;
font-weight: 700;
color: #2c3e50;
margin: 0 0 25px 0;
padding: 15px 20px;
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-left: 5px solid #1976d2;
border-radius: 0 8px 8px 0;
box-shadow: 0 2px 4px rgba(25, 118, 210, 0.2);
}
.related-posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.related-post-item {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.related-post-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.related-post-thumbnail {
width: 100%;
height: 200px;
overflow: hidden;
}
.related-post-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.related-post-item:hover .related-post-thumbnail img {
transform: scale(1.05);
}
.related-post-content {
padding: 20px;
}
.related-post-title {
margin: 0 0 10px 0;
font-size: 18px;
font-weight: 600;
line-height: 1.5;
}
.related-post-title a {
color: #2c3e50;
text-decoration: none;
transition: color 0.3s ease;
}
.related-post-title a:hover {
color: #007AD2;
}
.related-post-meta {
margin-bottom: 10px;
}
.related-post-date {
font-size: 14px;
color: #6c757d;
}
.related-post-excerpt {
font-size: 14px;
color: #666;
line-height: 1.6;
}
/* ウィジェットエリア */
.widget-area {
margin: 20px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
}
.widget-area.post-top {
margin-top: 0;
margin-bottom: 20px;
}
.widget-area.post-bottom {
margin-top: 20px;
margin-bottom: 0;
}
/* パンくずリスト（下部） */
.breadcrumbs_wrapper.bottom {
margin-top: 30px;
padding: 15px 0;
border-top: 1px solid #e9ecef;
}
.breadcrumbs_wrapper .breadcrumb {
font-size: 14px;
color: #6c757d;
}
.breadcrumbs_wrapper .breadcrumb a {
color: #007AD2;
text-decoration: none;
}
.breadcrumbs_wrapper .breadcrumb a:hover {
text-decoration: underline;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.article-header {
padding: 20px 20px 15px;
}
.article-title {
font-size: 24px;
}
.article-content {
padding: 20px;
}
.article-content h2 {
font-size: 22px;
padding: 12px 15px;
margin: 30px 0 15px;
}
.article-content h3 {
font-size: 18px;
padding: 8px 12px;
margin: 25px 0 12px;
}
.article-footer {
padding: 15px 20px;
}
.article-navigation {
flex-direction: column;
gap: 15px;
}
.nav-previous,
.nav-next {
text-align: center;
}
.nav-previous a,
.nav-next a {
min-height: 60px;
}
.nav-previous a,
.nav-next a {
padding: 12px;
}
.widget-area {
padding: 15px;
}
.related-posts {
margin: 30px 0;
padding: 20px;
}
.related-posts-title {
font-size: 20px;
padding: 12px 15px;
}
.related-posts-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.related-post-thumbnail {
height: 150px;
}
.related-post-content {
padding: 15px;
}
.related-post-title {
font-size: 16px;
}
}
@media (max-width: 480px) {
.article-header {
padding: 15px 15px 10px;
}
.article-title {
font-size: 20px;
}
.article-content {
padding: 15px;
}
.article-content h2 {
font-size: 20px;
padding: 10px 12px;
margin: 25px 0 12px;
}
.article-content h3 {
font-size: 16px;
padding: 6px 10px;
margin: 20px 0 10px;
}
.article-footer {
padding: 12px 15px;
}
.article-navigation {
margin: 20px 0;
padding: 15px;
}
.nav-previous a,
.nav-next a {
padding: 10px;
}
.related-posts {
margin: 20px 0;
padding: 15px;
}
.related-posts-title {
font-size: 18px;
padding: 10px 12px;
}
.related-post-thumbnail {
height: 120px;
}
.related-post-content {
padding: 12px;
}
.related-post-title {
font-size: 14px;
}
.related-post-excerpt {
font-size: 14px;
}
}
/* ===== 画像の自動最適化 ===== */
/* 全画像の基本設定 */
img {
max-width: 100%;
height: auto;
display: block;
transition: all 0.3s ease;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* 記事本文内の画像最適化 */
.article-body img,
.post-body img,
.page-body img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
margin: 20px 0;
transition: transform 0.3s ease;
object-fit: cover;
}
.article-body img:hover,
.post-body img:hover,
.page-body img:hover {
transform: scale(1.01);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
/* アイキャッチ画像の最適化 */
.featured-image img {
width: 100%;
height: auto;
border-radius: 12px;
border: 2px solid #E5E7EB;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
object-fit: cover;
max-height: 400px;
}
/* サムネイル画像の最適化 */
.article-thumbnail img,
.post-card-thumbnail img,
.archive-list__thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
border-radius: 8px;
}
.article-thumbnail:hover img,
.post-card:hover .post-card-thumbnail img,
.archive-list:hover .archive-list__thumbnail img {
transform: scale(1.05);
}
/* 人気記事のサムネイル最適化 */
.popular-posts-widget .post-thumbnail img,
.popular-post-thumbnail img,
.popular-rank-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
transition: transform 0.2s ease;
}
.popular-posts-widget .post-thumbnail:hover img,
.popular-post-thumbnail:hover img,
.popular-rank-thumb:hover img {
transform: scale(1.02);
}
/* プロフィール画像の最適化 */
.person-photo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
transition: transform 0.3s ease;
}
.person-photo:hover img {
transform: scale(1.05);
}
/* 記事一覧の画像最適化 */
.articleList__item--fig img,
.articleList.articleListRelation .articleList__item--fig img,
.articlePager__body--fig img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease;
border-radius: 6px;
}
.articleList__item:hover .articleList__item--fig img,
.articleList.articleListRelation .articleList__item:hover .articleList__item--fig img,
.articlePager:hover .articlePager__body--fig img {
transform: scale(1.05);
}
/* レスポンシブ画像最適化 */
@media (max-width: 768px) {
.featured-image img {
max-height: 250px;
border-radius: 8px;
}
.article-body img,
.post-body img,
.page-body img {
margin: 16px 0;
border-radius: 6px;
}
.post-card-thumbnail img,
.archive-list__thumbnail img {
height: 150px;
}
.popular-post-thumbnail img,
.popular-rank-thumb img {
border-radius: 3px;
}
}
@media (max-width: 480px) {
.featured-image img {
max-height: 200px;
}
.post-card-thumbnail img,
.archive-list__thumbnail img {
height: 120px;
}
.article-body img,
.post-body img,
.page-body img {
margin: 12px 0;
border-radius: 4px;
}
}
/* 画像の遅延読み込み対応 */
img[data-src] {
opacity: 0;
transition: opacity 0.3s ease;
}
img[data-src].loaded {
opacity: 1;
}
/* 画像のアスペクト比維持 */
.aspect-ratio-16-9 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 */
}
.aspect-ratio-16-9 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.aspect-ratio-4-3 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%; /* 4:3 */
}
.aspect-ratio-4-3 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 画像のパフォーマンス最適化 */
img {
will-change: transform;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* 画像の読み込み中表示 */
img:not([src]) {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.article-thumbnail {
margin: 16px 0;
border-radius: 8px;
}
.article-body img {
margin: 16px 0;
border-radius: 6px;
}
}
.articleList__item {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid #f0f0f0;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
.articleList__item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.articleList__item--fig {
width: 100%;
height: 120px;
overflow: hidden;
position: relative;
background: #f8f9fa;
margin: 0;
}
/* 削除: 新しい統合スタイルに移行 */
.xw-article-media__body {
padding: 20px;
position: relative;
flex: 1;
display: flex;
flex-direction: column;
}
.xw-article-media__body--title {
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
margin: 0 0 12px;
color: #1e293b;
transition: color 0.3s ease;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 4.2rem;
/* フォールバック用の高さ制限 */
max-height: 4.2em;
line-height: 1.4;
}
.articleList__item:hover .xw-article-media__body--title {
color: #3b82f6;
}
.xw-article-media__body--extra {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid #f1f5f9;
}
.article-meta {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.8rem;
color: #94a3b8;
flex-wrap: wrap;
gap: 8px;
}
.article-date {
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.article-date i {
font-size: 0.9rem;
color: #94a3b8;
}
.entry-date {
color: #94a3b8;
font-size: 0.8rem;
}
/* ページネーション部分のスタイリング */
.articlePagerUnit {
margin: 80px 0;
padding: 0;
background: transparent;
position: relative;
overflow: visible;
}
.articlePagerUnit.type_2 {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 16px;
padding: 0;
margin: 60px 0;
}
.articlePager {
background: #ffffff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid #e5e7eb;
position: relative;
flex: 1;
max-width: 280px;
}
.articlePager:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}
.articlePager a {
display: flex;
align-items: center;
padding: 12px;
text-decoration: none;
color: inherit;
position: relative;
gap: 10px;
height: 100%;
}
.articlePager__body {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
}
.articlePager__body--fig {
width: 40px;
height: 30px;
border-radius: 4px;
overflow: hidden;
flex-shrink: 0;
background: #f8f9fa;
margin: 0;
}
/* 削除: 新しい統合スタイルに移行 */
.articlePager__body--text {
font-size: 0.85rem;
font-weight: 500;
color: #374151;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
flex: 1;
/* フォールバック用の高さ制限 */
max-height: 2.8em;
line-height: 1.4;
}
.articlePager:hover .articlePager__body--text {
color: #3b82f6;
}
/* .articlePager__caption の display: none を削除 */
/* レスポンシブデザイン */
@media (max-width: 768px) {
.articleFooter__relation {
margin-top: 60px;
padding: 40px 0;
}
.articleFooter__relation .caption {
font-size: 1.8rem;
margin-bottom: 30px;
padding-left: 16px;
}
.articleFooter__relation .caption::before {
width: 4px;
height: 30px;
}
.articleList.articleListRelation {
grid-template-columns: 1fr;
gap: 16px;
padding: 0;
}
.articleList__item--fig {
height: 100px;
}
.xw-article-media__body {
padding: 16px;
}
.xw-article-media__body--title {
font-size: 0.95rem;
min-height: 3.8rem;
}
.articlePagerUnit.type_2 {
flex-direction: column;
gap: 16px;
}
.articlePager {
max-width: none;
}
.articlePager a {
padding: 12px;
}
.articlePager__body--fig {
width: 35px;
height: 25px;
}
.articlePager__body--text {
font-size: 0.8rem;
}
}
/* ===== Single Post & Page Styles ===== */
.breadcrumb {
background: #f8f9fa;
padding: 15px 0;
margin-bottom: 30px;
border-radius: 8px;
}
.breadcrumb-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 0.9rem;
}
.breadcrumb-list li {
display: flex;
align-items: center;
}
.breadcrumb-list li:not(:last-child)::after {
content: '>';
margin-left: 8px;
color: #6b7280;
font-weight: 500;
}
.breadcrumb-list a {
color: #3b82f6;
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb-list a:hover {
color: #1d4ed8;
text-decoration: underline;
}
.breadcrumb-list li:last-child {
color: #374151;
font-weight: 500;
}
/* 個別投稿ページのスタイル */
.entry-title {
font-size: 2.2rem;
font-weight: 700;
color: #1f2937;
margin: 0 0 20px 0;
line-height: 1.3;
}
.article-thumbnail.is-thumbnail-style-wide {
margin-bottom: 30px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* 削除: 新しい統合スタイルに移行 */
.header-normal {
margin-bottom: 40px;
}
.article-header {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #f1f5f9;
}
.article-body {
line-height: 1.8;
color: #374151;
font-size: 1rem;
}
/* H2とH3のスタイルは上記で統一 */
.article-body h4 {
font-size: 1.3rem;
font-weight: 600;
color: #374151;
margin: 25px 0 10px 0;
}
.article-body p {
margin: 0 0 20px 0;
}
.article-body a {
color: #3b82f6;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.article-body a:hover {
color: #1d4ed8;
text-decoration: underline;
}
.article-body ul,
.article-body ol {
margin: 0 0 20px 0;
padding-left: 30px;
}
.article-body li {
margin-bottom: 8px;
}
.article-body blockquote {
background: #f8f9fa;
border-left: 4px solid #3b82f6;
padding: 20px 30px;
margin: 30px 0;
font-style: italic;
color: #4b5563;
}
.article-body code {
background: #f1f5f9;
padding: 2px 6px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
color: #e11d48;
}
.article-body pre {
background: #1f2937;
color: #f9fafb;
padding: 20px;
border-radius: 8px;
overflow-x: auto;
margin: 20px 0;
}
.article-body pre code {
background: none;
padding: 0;
color: inherit;
}
/* 固定ページのスタイル */
.entry-section-header {
margin-bottom: 40px;
text-align: center;
padding: 40px 0;
background: linear-gradient(135deg, #007AD2 0%, #052F87 100%);
color: white;
border-radius: 12px;
}
.entry-section-title {
font-size: 2.5rem;
font-weight: 700;
margin: 0;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.is-h2-style-border-bottom-two {
border-bottom: 3px solid #3b82f6;
}
/* ===== 一般的な固定ページ（p-page）のスタイル ===== */
.p-page {
background: var(--bg-white);
min-height: calc(100vh - 200px);
}
.p-page__article {
max-width: 1200px;
margin: 0 auto;
background: var(--bg-white);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
}
.p-page__inner {
padding: 40px;
}
.p-page__featured-image {
width: 100%;
margin-bottom: 40px;
}
.p-page__thumbnail {
width: 100%;
height: auto;
max-height: 400px;
object-fit: cover;
border-radius: var(--border-radius);
}
.p-page__content {
color: var(--text-color);
line-height: 1.8;
font-size: 16px;
}
.p-page__content h1,
.p-page__content h2,
.p-page__content h3,
.p-page__content h4,
.p-page__content h5,
.p-page__content h6 {
color: var(--text-color);
font-weight: 600;
margin: 30px 0 20px 0;
line-height: 1.4;
}
.p-page__content h1 {
font-size: 2.2rem;
border-bottom: 3px solid var(--primary-color);
padding-bottom: 10px;
}
.p-page__content h2 {
font-size: 1.8rem;
border-left: 5px solid var(--primary-color);
padding-left: 20px;
background: linear-gradient(90deg, rgba(0, 122, 210, 0.1) 0%, transparent 100%);
padding: 15px 20px;
border-radius: var(--border-radius);
}
.p-page__content h3 {
font-size: 1.5rem;
color: var(--primary-color);
border-bottom: 2px solid var(--primary-color);
padding-bottom: 8px;
}
.p-page__content h4 {
font-size: 1.3rem;
color: var(--text-color);
}
.p-page__content p {
margin: 20px 0;
}
.p-page__content ul,
.p-page__content ol {
margin: 20px 0;
padding-left: 30px;
}
.p-page__content li {
margin: 8px 0;
}
.p-page__content blockquote {
background: var(--bg-light);
border-left: 5px solid var(--secondary-color);
padding: 20px;
margin: 30px 0;
border-radius: var(--border-radius);
font-style: italic;
}
.p-page__content img {
max-width: 100%;
height: auto;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
margin: 20px 0;
}
.p-page__content table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
background: var(--bg-white);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--box-shadow);
}
.p-page__content th,
.p-page__content td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #eee;
}
.p-page__content th {
background: var(--primary-color);
color: white;
font-weight: 600;
}
.p-page__content code {
background: var(--bg-light);
padding: 3px 6px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
}
.p-page__content pre {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: var(--border-radius);
padding: 20px;
overflow-x: auto;
margin: 20px 0;
}
.p-page__content pre code {
background: none;
padding: 0;
font-size: 14px;
}
.p-page__pagination {
margin: 40px 0;
text-align: center;
}
.p-page__page-number {
display: inline-block;
padding: 10px 15px;
margin: 0 5px;
background: var(--primary-color);
color: white;
text-decoration: none;
border-radius: var(--border-radius);
transition: var(--transition);
}
.p-page__page-number:hover {
background: var(--secondary-color);
transform: translateY(-2px);
}
/* モバイル対応 */
@media screen and (max-width: 768px) {
.entry-title {
font-size: 1.8rem;
}
.entry-section-title {
font-size: 2rem;
}
.article-body h2 {
font-size: 1.6rem;
padding: 12px 15px;
margin: 30px 0 15px;
text-transform: uppercase;
letter-spacing: 0.2px;
}
.article-body h3 {
font-size: 1.4rem;
padding: 8px 12px;
margin: 25px 0 12px;
}
.article-body h4 {
font-size: 1.2rem;
}
.breadcrumb-list {
font-size: 0.8rem;
}
.article-body blockquote {
padding: 15px 20px;
margin: 20px 0;
}
.article-body pre {
padding: 15px;
font-size: 0.9rem;
}
/* 固定ページ（p-page）のモバイル対応 */
.p-page__article {
margin: 0 10px;
box-shadow: none;
border-radius: 0;
}
.p-page__inner {
padding: 20px;
}
.c-page-header__inner {
padding: 0 20px;
}
.c-page-header__title {
font-size: 1.8rem;
}
.p-page__content {
font-size: 15px;
line-height: 1.7;
}
.p-page__content h1 {
font-size: 1.8rem;
margin: 25px 0 15px 0;
}
.p-page__content h2 {
font-size: 1.5rem;
padding: 12px 15px;
margin: 25px 0 15px 0;
}
.p-page__content h3 {
font-size: 1.3rem;
margin: 20px 0 12px 0;
}
.p-page__content h4 {
font-size: 1.2rem;
}
.p-page__content ul,
.p-page__content ol {
padding-left: 20px;
}
.p-page__content blockquote {
padding: 15px;
margin: 20px 0;
}
.p-page__content pre {
padding: 15px;
font-size: 13px;
overflow-x: scroll;
}
.p-page__content table {
font-size: 14px;
overflow-x: auto;
display: block;
white-space: nowrap;
}
.p-page__content th,
.p-page__content td {
padding: 10px;
}
.p-page__page-number {
padding: 8px 12px;
font-size: 14px;
}
}
/* ===== CSS互換性とフォールバック ===== */
/* line-clampの完全な互換性対応 - 警告を完全に解消 */
/* 基本のline-clamp実装（すべてのブラウザで動作） */
.post-card-title,
.post-card-excerpt,
.xw-article-media__body--title,
.articlePager__body--text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-clamp: 2;
/* 標準プロパティを同時に定義（警告解消） */
line-clamp: 2;
/* フォールバック用の高さ制限 */
max-height: 2.8em;
line-height: 1.4;
}
.post-card-excerpt {
-webkit-line-clamp: 3;
line-clamp: 3;
max-height: 4.2em;
}
.xw-article-media__body--title {
-webkit-line-clamp: 3;
line-clamp: 3;
max-height: 4.2em;
}
/* 標準のline-clampをサポートするブラウザでの最適化 */
@supports (line-clamp: 2) {
.post-card-title,
.post-card-excerpt,
.xw-article-media__body--title,
.articlePager__body--text {
/* 標準プロパティを優先使用 */
line-clamp: 2;
/* webkitプロパティはフォールバックとして維持 */
-webkit-line-clamp: 2;
/* 標準プロパティが使える場合は高さ制限を解除 */
max-height: none;
}
.post-card-excerpt,
.xw-article-media__body--title {
line-clamp: 3;
-webkit-line-clamp: 3;
max-height: none;
}
}
/* 古いブラウザ用のフォールバック（webkitプロパティのみ） */
@supports not (line-clamp: 2) {
.post-card-title,
.post-card-excerpt,
.xw-article-media__body--title,
.articlePager__body--text {
/* webkitプロパティのみに依存 */
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* 高さ制限でフォールバック */
max-height: 2.8em;
line-height: 1.5;
}
.post-card-excerpt,
.xw-article-media__body--title {
-webkit-line-clamp: 3;
line-clamp: 3;
max-height: 4.2em;
}
}
/* スクロールバーの互換性 */
@supports (scrollbar-width: thin) {
.diagnosis-comparison {
scrollbar-width: thin;
scrollbar-color: #cbd5e0 #f7fafc;
}
}
@supports not (scrollbar-width: thin) {
.diagnosis-comparison::-webkit-scrollbar {
width: 8px;
}
.diagnosis-comparison::-webkit-scrollbar-track {
background: #f7fafc;
}
.diagnosis-comparison::-webkit-scrollbar-thumb {
background: #cbd5e0;
border-radius: 4px;
}
}
/* グリッドレイアウトのフォールバック */
@supports not (display: grid) {
.posts-grid,
.articleList.articleListRelation,
.links-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.posts-grid > *,
.articleList.articleListRelation > *,
.links-grid > * {
flex: 1 1 300px;
min-width: 0;
}
}
/* ===== Blog Page Styles ===== */
.page-header {
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #1d4ed8 100%);
color: white;
padding: 60px 0;
text-align: center;
margin-bottom: 40px;
box-shadow: 0 4px 20px rgba(30, 64, 175, 0.3);
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
.page-title {
font-size: 2.5rem;
font-weight: bold;
margin: 0 0 20px 0;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
color: white;
}
.page-top-breadcrumbs {
margin: 0;
}
.page-top-breadcrumbs p {
margin: 0;
font-size: 1rem;
opacity: 0.9;
color: white;
}
.page-top-breadcrumbs a {
color: white;
text-decoration: none;
transition: opacity 0.3s ease;
}
.page-top-breadcrumbs a:hover {
opacity: 0.8;
color: white;
}
.articleListContainer {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.posts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.post-card-wrapper {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.post-card-wrapper:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.post-card {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
}
.post-card-header {
position: relative;
overflow: hidden;
}
.post-card-thumbnail {
width: 100%;
height: 200px;
overflow: hidden;
}
/* 削除: 新しい統合スタイルに移行 */
.post-card-category {
position: absolute;
top: 15px;
left: 15px;
}
.category-tag {
background: #e3f2fd;
color: #1976d2;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.post-card-content {
padding: 25px;
}
.post-card-title {
font-size: 1.3rem;
font-weight: 600;
margin: 0 0 15px 0;
line-height: 1.4;
color: #333;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* フォールバック用の高さ制限 */
max-height: 2.8em;
}
.post-card-meta {
margin-bottom: 15px;
}
.post-card-date {
color: #666;
font-size: 0.9rem;
font-weight: 500;
}
.post-card-excerpt {
color: #666;
font-size: 0.95rem;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
/* フォールバック用の高さ制限 */
max-height: 4.2em;
}
.pagination {
text-align: center;
margin-top: 50px;
}
.pagination .page-numbers {
display: inline-block;
padding: 10px 15px;
margin: 0 5px;
background: #f8f9fa;
color: #333;
text-decoration: none;
border-radius: 6px;
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
background: #007AD2;
color: white;
border-color: #007AD2;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
font-weight: 600;
}
.no-posts {
text-align: center;
padding: 60px 20px;
background: #f8f9fa;
border-radius: 12px;
color: #666;
}
.no-posts p {
font-size: 1.1rem;
margin: 0;
}
/* モバイル対応 */
@media screen and (max-width: 768px) {
.page-header {
padding: 40px 0;
min-height: 150px;
}
.page-title {
font-size: 2rem;
}
.posts-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.post-card-content {
padding: 20px;
}
.post-card-title {
font-size: 1.2rem;
}
.pagination .page-numbers {
padding: 8px 12px;
font-size: 0.9rem;
}
}
/* ========================================
スティッキーウィジェット
======================================== */
/* スティッキーウィジェットの基本スタイル */
.sidebar-sticky {
position: relative;
}
/* スティッキー機能を有効にするには .enable-sticky クラスが必要 */
.sticky-widget.enable-sticky {
position: sticky;
top: 20px;
z-index: 10;
transition: all 0.3s ease;
}
/* 通常のウィジェット（固定なし） */
.sticky-widget:not(.enable-sticky) {
position: static;
top: auto;
z-index: auto;
}
/* スティッキーウィジェットのホバー効果（有効な場合のみ） */
.sticky-widget.enable-sticky:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* スティッキーウィジェットの境界線 */
.sticky-widget {
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #ffffff;
padding: 16px;
margin-bottom: 20px;
}
/* スティッキーウィジェットのタイトル */
.sticky-widget .widget-title {
color: #1f2937;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid #3b82f6;
}
/* スティッキーウィジェットのコンテンツ */
.sticky-widget .widget-content {
line-height: 1.6;
}
/* スティッキーウィジェットのリンク */
.sticky-widget a {
color: #3b82f6;
text-decoration: none;
transition: color 0.2s ease;
}
.sticky-widget a:hover {
color: #1d4ed8;
text-decoration: underline;
}
/* スティッキーウィジェットのリスト */
.sticky-widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.sticky-widget li {
padding: 8px 0;
border-bottom: 1px solid #f3f4f6;
}
.sticky-widget li:last-child {
border-bottom: none;
}
/* モバイルでのスティッキーウィジェット調整 */
@media (max-width: 768px) {
.sticky-widget {
position: static;
top: auto;
}
.sidebar-sticky {
display: none;
}
}
/* タブレットでのスティッキーウィジェット調整 */
@media (min-width: 769px) and (max-width: 1024px) {
.sticky-widget {
top: 15px;
}
}
/* デスクトップでのスティッキーウィジェット調整 */
@media (min-width: 1025px) {
/* デスクトップサイズでの文字サイズ調整 */
.hero-title{font-size:48px}
.hero-subtitle{font-size:24px}
.problem-card h3{font-size:var(--font-3xl)}
.cta-urge-title{font-size:var(--font-4xl)}
.step-title{font-size:var(--font-2xl)}
.step-description{font-size:var(--font-base)}
.highlight-card-title{font-size:var(--font-lg)}
.highlight-card-p{font-size:var(--font-base)}
.diagnosis-section p{font-size:16px}
.sticky-widget {
top: 20px;
}
}
/* スティッキーウィジェットのアニメーション */
@keyframes stickySlideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.sticky-widget {
animation: stickySlideIn 0.5s ease-out;
}
/* スティッキーウィジェットの固定状態インジケーター（有効な場合のみ） */
.sticky-widget.enable-sticky.is-sticky {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border-color: #3b82f6;
}
/* スティッキーウィジェットのスクロール効果（有効な場合のみ） */
.sticky-widget.enable-sticky.scrolled {
transform: scale(0.98);
opacity: 0.9;
}
/* スティッキーウィジェットのフォーカス状態 */
.sticky-widget.focused {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* スティッキーウィジェットのビューポート内状態 */
.sticky-widget.in-viewport {
animation: stickySlideIn 0.5s ease-out;
}
/* モバイルで無効化されたスティッキーウィジェット */
.sticky-widget.mobile-disabled {
position: static !important;
top: auto !important;
}
/* デバッグ情報のスタイル */
.sticky-debug-info {
position: absolute;
top: 5px;
right: 5px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px;
font-size: 10px;
border-radius: 3px;
z-index: 1000;
font-family: monospace;
}
/* スティッキーウィジェットの準備完了状態 */
.sticky-widget-ready {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* スティッキーウィジェットのホバー時の詳細効果 */
.sticky-widget:hover .widget-title {
color: #1d4ed8;
}
.sticky-widget:hover .widget-content {
color: #374151;
}
/* スティッキーウィジェットのアクティブ状態 */
.sticky-widget:active {
transform: scale(0.99);
}
/* スティッキーウィジェットの読み込み状態 */
.sticky-widget.loading {
opacity: 0.6;
pointer-events: none;
}
/* スティッキーウィジェットのエラー状態 */
.sticky-widget.error {
border-color: #ef4444;
background-color: #fef2f2;
}
/* スティッキーウィジェットの成功状態 */
.sticky-widget.success {
border-color: #10b981;
background-color: #f0fdf4;
}
/* ===== モバイル最適化の包括的スタイル ===== */
/* タッチ操作の最適化 */
@media (hover: none) and (pointer: coarse) {
/* タッチデバイス用のスタイル */
button, .btn, input[type="button"], input[type="submit"],
.clickable, a, .agent-card, .ranking-item {
min-height: var(--touch-target-size);
min-width: var(--touch-target-size);
padding: 12px 16px;
}
/* ホバー効果を無効化 */
.agent-card:hover, .ranking-item:hover,
.sidebar-widget:hover, .widget li:hover {
transform: none;
box-shadow: var(--box-shadow);
}
}
/* モバイル用の基本レスポンシブルール */
@media (max-width: 768px) {
/* セクション間の余白を適切に調整 */
.diagnosis-page {
padding: 12px 0;
}
/* 診断フォームの上下の幅を半分に */
.diagnosis-section {
padding: 12px 0;
}
.diagnosis-container {
padding: 12px 20px;
}
.diagnosis-form {
margin: 8px 0;
}
.diagnosis-slide {
padding: 6px 0;
}
.change-btn {
margin-top: 4px;
}
/* 診断フォームの下の余白を削減 */
.diagnosis-form .form-group {
margin-bottom: 4px;
}
.diagnosis-form .question-group {
margin-bottom: 4px;
}
.diagnosis-form .form-label {
margin-bottom: 4px;
}
.container {
padding: 0 20px;
max-width: 100%;
}
/* 診断フォームのモバイル最適化 */
.diagnosis-header {
text-align: center;
margin-bottom: 32px;
padding: 24px 20px;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.diagnosis-header h1 {
font-size: 1.8em;
line-height: 1.5;
margin-bottom: 16px;
color: #2c3e50;
}
.diagnosis-subtitle {
font-size: 1em;
line-height: 1.5;
color: #6c757d;
margin: 0;
}
.diagnosis-content {
padding: 24px 20px;
margin-bottom: 24px;
border-radius: 12px;
background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border: 1px solid #e9ecef;
}
.diagnosis-info {
padding: 24px 20px;
border-radius: 12px;
background: #f8f9fa;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
border: 1px solid #e9ecef;
}
.diagnosis-info h3 {
font-size: 1.2em;
margin-bottom: 16px;
color: #2c3e50;
}
.diagnosis-info li {
font-size: 15px;
line-height: 1.6;
padding: 8px 0 8px 20px;
margin-bottom: 8px;
color: #495057;
}
/* 診断フォーム内の要素 */
.diagnosis-form .form-group {
margin-bottom: 20px;
}
.diagnosis-form label {
font-size: var(--mobile-font-size);
font-weight: 600;
margin-bottom: 8px;
display: block;
}
.diagnosis-form input[type="text"],
.diagnosis-form input[type="email"],
.diagnosis-form select,
.diagnosis-form textarea {
width: 100%;
padding: 12px;
font-size: var(--mobile-font-size);
border-radius: var(--mobile-border-radius);
border: 2px solid #e1e5e9;
transition: border-color 0.3s ease;
}
.diagnosis-form input:focus,
.diagnosis-form select:focus,
.diagnosis-form textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
}
/* ラジオボタンとチェックボックスの最適化 */
.diagnosis-form input[type="radio"],
.diagnosis-form input[type="checkbox"] {
width: 20px;
height: 20px;
margin-right: 12px;
vertical-align: middle;
}
.diagnosis-form .radio-group,
.diagnosis-form .checkbox-group {
display: flex;
flex-direction: column;
gap: 12px;
}
.diagnosis-form .radio-item,
.diagnosis-form .checkbox-item {
display: flex;
align-items: center;
padding: 12px;
background: #f8f9fa;
border-radius: var(--mobile-border-radius);
border: 2px solid transparent;
transition: all 0.3s ease;
cursor: pointer;
}
.diagnosis-form .radio-item:hover,
.diagnosis-form .checkbox-item:hover {
background: #e9ecef;
border-color: var(--primary-color);
}
.diagnosis-form .radio-item.selected,
.diagnosis-form .checkbox-item.selected {
background: rgba(0, 122, 204, 0.1);
border-color: var(--primary-color);
border-width: 3px;
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.15);
}
/* ボタンの最適化 */
.diagnosis-form .btn-submit,
.diagnosis-form .btn-next,
.diagnosis-form .btn-prev {
padding: 16px;
font-size: 16px;
font-weight: 600;
border-radius: var(--mobile-border-radius);
min-height: var(--touch-target-size);
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.diagnosis-form .btn-submit {
background: linear-gradient(135deg, var(--primary-color), #0056b3);
color: white;
width: 100%;
padding: 16px 24px;
font-size: 14px;
font-weight: 600;
border-radius: var(--mobile-border-radius);
min-height: var(--touch-target-size);
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.diagnosis-form .btn-submit:hover {
background: linear-gradient(135deg, #0056b3, #003d82);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 122, 204, 0.3);
}
/* 結果ページのモバイル最適化 */
.result-page {
padding: var(--mobile-padding);
}
.result-header {
padding: 30px var(--mobile-padding);
margin-bottom: 30px;
border-radius: var(--mobile-border-radius);
}
.result-title {
font-size: 1.6em;
line-height: 1.5;
margin-bottom: 12px;
}
.result-description {
font-size: var(--mobile-font-size);
line-height: var(--mobile-line-height);
}
.section-title {
font-size: 1.3em;
margin-bottom: 20px;
}
/* エージェントカードのモバイル最適化 */
.agents-grid {
display: flex;
flex-direction: column;
gap: var(--mobile-gap);
}
.agent-card {
padding: var(--mobile-padding);
border-radius: var(--mobile-border-radius);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.agent-card h3 {
font-size: 1.2em;
margin-bottom: 8px;
}
.agent-card p {
font-size: var(--mobile-font-size);
line-height: var(--mobile-line-height);
margin-bottom: 12px;
}
.agent-buttons {
display: flex;
flex-direction: column;
gap: 12px;
}
.agent-button {
width: 100%;
padding: 14px;
font-size: 16px;
font-weight: 600;
border-radius: var(--mobile-border-radius);
min-height: var(--touch-target-size);
text-align: center;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.agent-button.primary {
background: linear-gradient(135deg, var(--primary-color), #0056b3);
color: white;
}
.agent-button.secondary {
background: #f8f9fa;
color: var(--text-color);
border: 2px solid #e1e5e9;
}
.agent-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* サイドバーのモバイル対応 */
.side {
margin-top: var(--mobile-gap);
padding: var(--mobile-padding);
}
.sidebar-widget {
padding: var(--mobile-padding);
margin-bottom: var(--mobile-gap);
}
.widget-title {
font-size: 1.1em;
padding: 8px 12px;
}
/* ナビゲーションのモバイル最適化 */
.pagination {
margin: 30px 0;
}
.nav-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
}
.page-numbers {
min-width: var(--touch-target-size);
min-height: var(--touch-target-size);
display: flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border-radius: var(--mobile-border-radius);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.page-numbers.current {
background: var(--primary-color);
color: white;
}
.page-numbers:not(.current) {
background: #f8f9fa;
color: var(--text-color);
border: 2px solid #e1e5e9;
}
.page-numbers:hover:not(.current) {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* テキストの読みやすさ向上 */
body {
font-size: var(--mobile-font-size);
line-height: var(--mobile-line-height);
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.5;
}
/* 特殊文字表示の修正 */
.diagnosis-content * {
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* 改行の適切な処理 */
.diagnosis-content br {
display: block;
margin: 8px 0;
content: "";
}
/* リストのスタイル改善 */
ul, ol {
padding-left: 20px;
margin-bottom: 16px;
}
li {
font-size: 16px;
line-height: 1.6;
margin-bottom: 8px;
}
/* 画像のレスポンシブ対応 */
img {
max-width: 100%;
height: auto;
}
/* テーブルのモバイル対応 */
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-responsive table {
min-width: 100%;
font-size: var(--mobile-font-size);
}
/* フォーム要素の統一 */
input, select, textarea, button {
font-size: 16px; /* iOS のズーム防止 */
}
/* コンテナの調整 */
.container {
padding: 0 var(--mobile-padding);
}
/* ヘッダーのモバイル最適化 */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
}
.header-content {
padding: 0 var(--mobile-padding);
height: 60px;
}
.brand {
font-size: 18px;
}
/* フッターのモバイル最適化 */
.footer {
padding: 30px var(--mobile-padding) 20px;
}
.footer-content {
flex-direction: column;
gap: 20px;
text-align: center;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-links a {
padding: 8px 0;
font-size: var(--mobile-font-size);
}
}
/* より小さなモバイルデバイス用（480px以下） */
@media (max-width: 480px) {
:root {
--mobile-padding: 12px;
--mobile-gap: 16px;
--mobile-font-size: 13px;
--touch-target-size: 44px;
--mobile-border-radius: 6px;
}
.diagnosis-header h1 {
font-size: 1.6em;
}
.result-title {
font-size: 1.4em;
}
.section-title {
font-size: 1.2em;
}
.agent-card h3 {
font-size: 1.1em;
}
.brand {
font-size: 16px;
}
.header-content {
height: 55px;
}
}
/* 横画面モバイル用（768px以下、横画面） */
@media (max-width: 768px) and (orientation: landscape) {
.diagnosis-header {
padding: 20px 0;
}
.result-header {
padding: 20px var(--mobile-padding);
}
.hero {
padding: 20px 0;
}
.hero-title {
font-size: 1.8em;
}
}
/* 高解像度ディスプレイ用 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.agent-card,
.sidebar-widget,
.diagnosis-content {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
}
/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ダークモード対応（将来の拡張用） */
@media (prefers-color-scheme: dark) {
:root {
--text-color: #e5e7eb;
--text-light: #9ca3af;
--bg-white: #1f2937;
--bg-light: #111827;
}
}
@media screen and (max-width: 1200px){.engineer-dashboard{padding:10px}.dashboard-header{flex-direction:column;align-items:flex-start;gap:15px}.dashboard-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}.stats-grid{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:15px}.dashboard-row{grid-template-columns:1fr;gap:15px}}@media screen and (max-width: 768px){.engineer-dashboard{padding:5px}.dashboard-header h1{font-size:1.5em;margin-bottom:10px}.dashboard-actions{flex-direction:column;gap:10px}.dashboard-actions .button{width:100%;text-align:center;padding:12px 16px}.stats-grid{grid-template-columns:1fr;gap:10px}.stat-card{padding:15px;flex-direction:column;text-align:center}.stat-icon{margin-right:0;margin-bottom:10px;font-size:1.5em}.stat-number{font-size:1.8em}.widget-header{padding:10px 15px;flex-direction:column;align-items:flex-start;gap:10px}.widget-content{padding:15px}.action-buttons{grid-template-columns:1fr;gap:10px}.action-button{padding:15px;font-size:14px}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive table{min-width:600px}.form-table th,.form-table td{display:block;width:100%;padding:10px 0}.form-table th{font-weight:bold;margin-bottom:5px}.form-table input[type=text],.form-table input[type=url],.form-table input[type=number],.form-table textarea,.form-table select{width:100%;max-width:100%}.nav-tab-wrapper{display:flex;flex-wrap:wrap;gap:5px}.nav-tab{flex:1;min-width:120px;text-align:center;padding:10px 5px;font-size:14px}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}.modal-content{background:#fff;border-radius:8px;padding:20px;max-width:100%;max-height:90vh;overflow-y:auto}.card-grid{display:grid;grid-template-columns:1fr;gap:15px}.card{background:#fff;border:1px solid #ddd;border-radius:8px;padding:15px;box-shadow:0 2px 4px rgba(0,0,0,.1)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #eee}.card-title{font-size:1.1em;font-weight:bold;margin:0}.card-actions{display:flex;gap:5px}.card-actions .button{padding:5px 10px;font-size:14px}}@media screen and (max-width: 480px){.engineer-dashboard{padding:0}.wrap{margin:0;padding:10px}.dashboard-header h1{font-size:1.3em;margin-bottom:5px}.stat-card{padding:10px}.stat-number{font-size:1.5em}.widget-header{padding:8px 10px}.widget-content{padding:10px}.action-button{padding:12px;font-size:13px}.action-button .dashicons{font-size:16px}.button{padding:8px 12px;font-size:13px}.button-primary{padding:10px 16px;font-size:14px}input[type=text],input[type=url],input[type=number],input[type=email],textarea,select{font-size:16px;padding:8px}input[type=checkbox],input[type=radio]{transform:scale(1.2);margin-right:8px}select{background-size:20px 20px;background-position:right 8px center;padding-right:35px}textarea{min-height:100px;resize:vertical}.table-responsive table{font-size:14px}.table-responsive th,.table-responsive td{padding:8px 4px}.nav-tab{padding:8px 4px;font-size:13px}.notice{margin:10px 0;padding:10px}.notice p{margin:0;font-size:13px}.progress-bar{height:20px;background:#f0f0f0;border-radius:10px;overflow:hidden}.progress-fill{height:100%;background:#0073aa;transition:width .3s ease}.loading{display:flex;align-items:center;justify-content:center;padding:20px}.loading .spinner{width:20px;height:20px;border:2px solid #f3f3f3;border-top:2px solid #0073aa;border-radius:50%;animation:spin 1s linear infinite;margin-right:10px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.tooltip{position:relative;display:inline-block}.tooltip .tooltiptext{visibility:hidden;width:200px;background-color:#333;color:#fff;text-align:center;border-radius:6px;padding:8px;position:absolute;z-index:1;bottom:125%;left:50%;margin-left:-100px;font-size:14px}.tooltip:hover .tooltiptext{visibility:visible}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0px 8px 16px 0px rgba(0,0,0,.2);z-index:1;border-radius:4px}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown-content a:hover{background-color:#f1f1f1}.dropdown:hover .dropdown-content{display:block}}@media screen and (max-width: 768px)and (orientation: landscape){.dashboard-header{flex-direction:row;align-items:center}.dashboard-actions{flex-direction:row;flex-wrap:wrap}.stats-grid{grid-template-columns:repeat(2, 1fr)}.stat-card{flex-direction:row;text-align:left}.stat-icon{margin-right:15px;margin-bottom:0}}@media screen and (-webkit-min-device-pixel-ratio: 2){.stat-icon,.action-button .dashicons{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media print{.dashboard-actions,.action-buttons,.widget-actions{display:none}.engineer-dashboard{padding:0}.stat-card,.dashboard-widget{break-inside:avoid;margin-bottom:20px}.widget-content{padding:10px}}@media(prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}@media(prefers-color-scheme: dark){.engineer-dashboard{background-color:#1e1e1e;color:#fff}.stat-card,.dashboard-widget,.card{background-color:#2d2d2d;border-color:#404040;color:#fff}.widget-header{background-color:#3d3d3d;border-color:#404040}.action-button{background-color:#3d3d3d;border-color:#404040;color:#fff}.action-button:hover{background-color:#4d4d4d;border-color:#0073aa}.form-table input[type=text],.form-table input[type=url],.form-table input[type=number],.form-table textarea,.form-table select{background-color:#2d2d2d;border-color:#404040;color:#fff}}.age-based-diagnosis-wrap{max-width:1200px;margin:0 auto}.age-group-tabs{display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:8px;margin-bottom:20px;border-bottom:1px solid #ddd;padding-bottom:10px}.age-group-tab{display:flex;flex-direction:column;align-items:center;padding:12px 15px;background:#f7f7f7;border:1px solid #ddd;border-radius:8px 8px 0 0;cursor:pointer;transition:all .2s ease;text-align:center;min-height:80px;justify-content:center}.age-group-tab:hover{background:#e8f4f8;transform:translateY(-2px)}.age-group-tab.active{background:#0073aa;color:#fff;border-color:#0073aa}.tab-icon{font-size:24px;margin-bottom:5px}.tab-label{font-weight:600;font-size:14px;margin-bottom:2px}.tab-description{font-size:13px;opacity:.8;line-height:1.3}.control-area{display:flex;justify-content:space-between;align-items:center;margin:20px 0;padding:15px 20px;background:#f9f9f9;border-radius:8px;border:1px solid #e1e1e1}.control-left{display:flex;gap:10px;align-items:center}.control-right{flex:1;display:flex;justify-content:flex-end}.search-filter-area{display:flex;gap:10px;align-items:center}.filter-select{min-width:150px;padding:5px 10px;border:1px solid #ddd;border-radius:4px}.group-header{margin-bottom:30px}.group-header h2{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:#333}.group-icon{font-size:28px}.group-description{color:#666;font-size:16px;margin-bottom:20px}.group-controls{display:flex;justify-content:space-between;align-items:center;margin:20px 0;padding:15px;background:#fff;border:1px solid #ddd;border-radius:6px}.group-controls-left{display:flex;align-items:center;gap:20px}.display-mode-toggle{display:flex;align-items:center;gap:8px}.display-mode-toggle label{display:flex;align-items:center;gap:5px;font-weight:500;color:#333;cursor:pointer}.display-mode-toggle .description{font-size:13px;color:#666;font-style:italic}.view-toggle{display:flex;border:1px solid #ddd;border-radius:4px;overflow:hidden;background:#fff}.view-btn{border:none;background:#f7f7f7;padding:8px 15px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:5px;font-size:13px}.view-btn:hover{background:#e8f4f8}.view-btn.active{background:#0073aa;color:#fff}.rules-card-view{display:grid;grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));gap:20px;margin:20px 0}.rule-card{background:#fff;border:1px solid #ddd;border-radius:10px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:all .3s ease;position:relative}.rule-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.15);transform:translateY(-2px)}.rule-card.inactive{opacity:.6;background:#f8f8f8;border-color:#ccc}.rule-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px}.rule-conditions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}.condition-badge{padding:6px 12px;border-radius:20px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.condition-badge.experience{background:linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);color:#3f51b5;border:1px solid #9fa8da}.condition-badge.area{background:linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);color:#2e7d32;border:1px solid #81c784}.condition-badge.job-type{background:linear-gradient(135deg, #fff3e0 0%, #ffcc02 100%);color:#f57c00;border:1px solid #ffb74d}.rule-type-badge{padding:3px 8px;border-radius:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.rule-type-badge.basic{background:linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);color:#2e7d32;border:1px solid #81c784}.rule-type-badge.custom{background:linear-gradient(135deg, #f3e5f5 0%, #ce93d8 100%);color:#7b1fa2;border:1px solid #ba68c8}.rule-agents h4{font-size:14px;margin-bottom:10px;color:#333;font-weight:600}.agent-mini-card{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;margin:6px 0;background:linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);border-radius:6px;border-left:4px solid #0073aa;transition:all .2s ease}.agent-mini-card:hover{background:linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);border-left-color:#1976d2}.agent-info{display:flex;align-items:center;gap:10px}.agent-rank{background:linear-gradient(135deg, #0073aa 0%, #005177 100%);color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;box-shadow:0 2px 4px rgba(0,115,170,.3)}.agent-name{font-weight:500;color:#333}.more-agents{text-align:center;color:#666;font-size:14px;font-style:italic;padding:8px;background:#f0f0f0;border-radius:4px;margin-top:5px}.no-agents{text-align:center;color:#999;font-style:italic;padding:15px;background:#f9f9f9;border-radius:4px;border:2px dashed #ddd}.rule-actions{display:flex;gap:8px;margin-top:15px;padding-top:15px;border-top:1px solid #eee}.rule-actions .button{padding:6px 12px;font-size:14px;border-radius:4px;transition:all .2s ease}.edit-rule-btn{background:#0073aa;color:#fff;border-color:#0073aa}.edit-rule-btn:hover{background:#005177;border-color:#005177}.copy-rule-btn{background:#00a32a;color:#fff;border-color:#00a32a}.copy-rule-btn:hover{background:#007a1f;border-color:#007a1f}.delete-rule-btn{background:#dc3232;color:#fff;border-color:#dc3232}.delete-rule-btn:hover{background:#a00;border-color:#a00}.toggle-switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:24px}.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}input:checked+.toggle-slider{background-color:#0073aa}input:checked+.toggle-slider:before{transform:translateX(26px)}.rules-table-view table{width:100%;border-collapse:collapse;margin:20px 0;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1)}.rules-table-view th,.rules-table-view td{padding:12px 15px;text-align:left;border-bottom:1px solid #eee}.rules-table-view th{background:linear-gradient(135deg, #f7f7f7 0%, #e8e8e8 100%);font-weight:600;color:#333;text-transform:uppercase;font-size:14px;letter-spacing:.5px}.rules-table-view tr:hover{background:#f8f9fa}.rules-table-view tr.inactive{opacity:.6;background:#f5f5f5}.modal{position:fixed;z-index:10000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}.modal-content{background-color:#fff;margin:auto;padding:30px;border-radius:12px;width:90%;max-width:800px;max-height:90vh;overflow-y:auto;box-shadow:0 10px 30px rgba(0,0,0,.3);position:relative}.close{color:#aaa;float:right;font-size:28px;font-weight:bold;cursor:pointer;position:absolute;right:15px;top:15px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.close:hover{color:#333;background:#f0f0f0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:25px}.form-grid label{display:flex;flex-direction:column;gap:8px;font-weight:600;color:#333}.form-grid select,.form-grid input{padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;transition:border-color .2s ease}.form-grid select:focus,.form-grid input:focus{outline:none;border-color:#0073aa;box-shadow:0 0 0 2px rgba(0,115,170,.1)}#agents-editor h3{margin-bottom:15px;color:#333;border-bottom:2px solid #0073aa;padding-bottom:8px}.selected-agent{background:#fff;border:1px solid #ddd;border-radius:8px;padding:15px;margin-bottom:15px;transition:all .2s ease}.selected-agent:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}.agent-controls{display:flex;gap:5px;margin-left:auto}.agent-controls .button{padding:4px 8px;font-size:13px;min-height:auto}.agent-message{width:100%;min-height:60px;margin-top:10px;padding:8px;border:1px solid #ddd;border-radius:4px;resize:vertical;font-family:inherit}.agent-selector-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:15px;margin:20px 0}.agent-option{background:#fff;border:1px solid #ddd;border-radius:8px;padding:15px;transition:all .2s ease;cursor:pointer}.agent-option:hover{border-color:#0073aa;box-shadow:0 2px 8px rgba(0,115,170,.1)}.agent-option-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.agent-option h4{margin:0;color:#333}.agent-score{background:#ffb000;color:#fff;padding:2px 6px;border-radius:10px;font-size:13px;font-weight:bold}.agent-description{color:#666;font-size:13px;margin-bottom:10px;line-height:1.4}.agent-jobs{color:#0073aa;font-size:14px;font-weight:500}.preview-actions,.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:25px;padding-top:20px;border-top:1px solid #eee}.cancel-btn{background:#f0f0f0;color:#333;border-color:#ddd}.cancel-btn:hover{background:#e0e0e0;border-color:#ccc}.no-rules{text-align:center;color:#666;font-style:italic;padding:60px 20px;background:linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);border-radius:10px;border:2px dashed #ddd;margin:40px 0}.no-rules::before{content:"📋";display:block;font-size:48px;margin-bottom:15px}.preview-recommendations{margin:20px 0;padding:0}.preview-recommendation{background:#fff;border:1px solid #ddd;border-radius:8px;padding:15px;margin-bottom:15px;list-style:none;position:relative;padding-left:50px}.preview-recommendation::before{content:counter(list-item);counter-increment:list-item;position:absolute;left:15px;top:15px;background:#0073aa;color:#fff;width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:14px}.preview-recommendation h4{margin:0 0 10px 0;color:#333}.preview-recommendation p{margin:0;color:#666;line-height:1.4}@media(max-width: 768px){.age-group-tabs{grid-template-columns:repeat(2, 1fr);gap:5px}.age-group-tab{min-height:60px;padding:8px 10px;font-size:14px}.tab-icon{font-size:18px;margin-bottom:2px}.tab-label{font-size:14px;font-weight:600}.tab-description{font-size:9px;line-height:1.2}}@media(max-width: 480px){.age-group-tabs{grid-template-columns:1fr}.age-group-tab{flex-direction:row;justify-content:flex-start;text-align:left;padding:10px 12px;min-height:50px}.tab-icon{margin-right:10px;margin-bottom:0}}.control-area{flex-direction:column;gap:15px}.control-left,.control-right{width:100%;justify-content:center}.search-filter-area{flex-wrap:wrap;justify-content:center}.group-controls{flex-direction:column;gap:15px}.rules-card-view{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.agent-selector-grid{grid-template-columns:1fr}.modal-content{width:95%;padding:20px;margin:10px}.rule-conditions{flex-direction:column;align-items:flex-start}.rule-actions{flex-wrap:wrap}#loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:10001;display:flex;align-items:center;justify-content:center}.loading-spinner{background:#fff;padding:20px 30px;border-radius:8px;font-weight:500;color:#333;box-shadow:0 4px 12px rgba(0,0,0,.3)}.loading-spinner::after{content:"";display:inline-block;width:16px;height:16px;margin-left:10px;border:2px solid #f3f3f3;border-top:2px solid #0073aa;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.notice{margin:15px 0;padding:12px;border-left:4px solid #00a32a;background:#f0f6fc;border-radius:0 4px 4px 0}.notice.notice-error{border-left-color:#dc3232;background:#fef7f7}.notice.notice-warning{border-left-color:#ffb900;background:#fffbf0}.rule-card,.selected-agent,.agent-mini-card{animation:fadeInUp .3s ease-out}@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}button:focus,select:focus,input:focus,textarea:focus{outline:2px solid #0073aa;outline-offset:2px}@media(prefers-contrast: high){.condition-badge{border-width:2px}.rule-card{border-width:2px}.agent-mini-card{border-left-width:6px}}*{box-sizing:border-box}body{font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,.btn,input[type=button],input[type=submit],.clickable,a,.agent-card,.ranking-item{min-height:44px;min-width:44px;padding:12px 16px;-webkit-tap-highlight-color:rgba(0,0,0,0)}input,select,textarea{font-size:16px;-webkit-appearance:none;border-radius:4px}img{max-width:100%;height:auto;loading:lazy;decoding:async}.container{width:100%;max-width:100%;padding:0 16px;margin:0 auto}@media(max-width: 768px){.mobile-hidden{display:none !important}.mobile-full-width{width:100% !important}.mobile-stack{flex-direction:column !important}.mobile-center{text-align:center !important}}.agent-card,.sidebar-widget,.diagnosis-content{will-change:transform;transform:translateZ(0)}@media(prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}@media(prefers-color-scheme: dark){:root{--text-color: #e5e7eb;--text-light: #9ca3af;--bg-white: #1f2937;--bg-light: #111827}}:root{--primary: #007AD2;--primary-dark: #052F87;--primary-light: #F4FCFF;--secondary: #0071BD;--accent: #1BADDD;--muted: #6B7280;--text-primary: #052F87;--text-secondary: #0071BD;--background-main: #FFFFFF;--background-section: #F4FCFF;--background-light: #F4FCFF;--border-light: #E2E8F0;--border-gray: #E5E7EB;--white: #fff;--secondary-light: #E6F7FF;--error: #ef4444;--error-light: rgba(239,68,68,.1);--error-dark: rgba(239,68,68,.2);--gradient-hero: linear-gradient(135deg, #F4FCFF 0%, #F4FCFF 50%, #FFFFFF 100%);--gradient-cta: linear-gradient(135deg, #007AD2 0%, #052F87 100%);--gradient-accent: linear-gradient(135deg, #1BADDD 0%, #0071BD 100%);--gradient-primary: linear-gradient(135deg, #007AD2 0%, #052F87 100%);--font-xs: 14px;--font-sm: 16px;--font-base: 18px;--font-lg: 20px;--font-xl: 22px;--font-2xl: 26px;--font-3xl: 34px;--font-4xl: 50px;--weight-bold: 800;--weight-semibold: 700;--weight-medium: 600;--weight-normal: 500;--shadow-soft: 0 10px 25px -3px rgba(0,0,0,.1);--shadow-medium: 0 20px 25px -5px rgba(0,0,0,.1);--shadow-warm: 0 10px 25px -3px rgba(59,130,246,.15);--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 50px;--transition-fast: 0.2s ease;--transition-base: 0.3s ease;--transition-slow: 0.5s ease}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--gradient-hero);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic","Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;line-height:1.8;font-size:18px;position:relative}.container{max-width:1200px;margin:0 auto;padding:24px}.u-row.is-right_sidebar{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start;max-width:1200px;margin:0 auto;padding:0 20px}@media screen and (max-width: 1024px){.u-row.is-right_sidebar{grid-template-columns:1fr;gap:24px;padding:0 16px}}.l-content__main{flex:1;min-width:0;overflow:hidden}.sidebar{background:#f8f9fa;padding:20px;border-radius:8px;height:fit-content;width:300px;flex-shrink:0}.articleFooter__relation{margin-top:80px;padding:60px 0;background:linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);position:relative;overflow:hidden;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.08)}.articleFooter__relation .caption{font-size:2.2rem;margin:0 0 50px;color:#1a1a1a;font-weight:800;text-align:center;position:relative;letter-spacing:-0.02em}.articleFooter__relation .caption::before{content:"";position:absolute;left:50%;top:-20px;transform:translateX(-50%);width:60px;height:4px;background:linear-gradient(135deg, #007AD2 0%, #052F87 100%);border-radius:2px}.articleList.articleListRelation{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;padding:0 20px;max-width:1200px;margin:0 auto}.articleList.articleListRelation .articleList__item{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.08);transition:all .3s ease;border:1px solid #e5e7eb}.articleList.articleListRelation .articleList__item:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,.15);border-color:#007ad2}.articleList.articleListRelation .xw-article-media{display:block;text-decoration:none;color:inherit}.articleList.articleListRelation .articleList__item--fig{position:relative;overflow:hidden;aspect-ratio:16/9}.articleList.articleListRelation .articleList__item--fig img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.articleList.articleListRelation .articleList__item:hover .articleList__item--fig img{transform:scale(1.05)}.articleList.articleListRelation .xw-article-media__body{padding:20px}.articleList.articleListRelation .xw-article-media__body--title{font-size:1.1rem;font-weight:600;line-height:1.4;margin-bottom:12px;color:#1a1a1a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.articleList.articleListRelation .xw-article-media__body--extra{font-size:.9rem;color:#6b7280}.articleList.articleListRelation .article-date{display:flex;align-items:center;gap:6px}.articleList.articleListRelation .article-date i{color:#007ad2}@media(max-width: 768px){.articleFooter__relation{margin-top:60px;padding:40px 0}.articleFooter__relation .caption{font-size:1.8rem;margin-bottom:30px}.articleList.articleListRelation{grid-template-columns:1fr;gap:16px;padding:0 16px}}.article-thumbnail{position:relative;width:100%;margin:20px 0;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.1)}.responsive-thumbnail{width:100%;height:auto;display:block;object-fit:cover;transition:transform .3s ease}.responsive-thumbnail:hover{transform:scale(1.02)}.is-thumbnail-style-wide{aspect-ratio:16/9}.is-thumbnail-style-wide .responsive-thumbnail{width:100%;height:100%;object-fit:cover}.article-body img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.08);margin:20px 0;transition:transform .3s ease}.article-body img:hover{transform:scale(1.01)}.side{background:#f8f9fa;padding:20px;border-radius:8px;height:fit-content;width:300px;flex-shrink:0;position:static}.widget-area{margin-bottom:20px}.sidebar-sticky{position:sticky;top:20px}.side .widget{background:#fff;border-radius:8px;padding:20px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,.05);border:1px solid #e5e7eb}.side .widget-title{font-size:1.1rem;font-weight:600;margin:0 0 16px 0;color:#1a1a1a;border-bottom:2px solid #007ad2;padding-bottom:8px}.search-form{position:relative}.search-input-wrapper{display:flex;border:2px solid #e5e7eb;border-radius:6px;overflow:hidden;transition:border-color .3s ease}.search-input-wrapper:focus-within{border-color:#007ad2}.search-field{flex:1;padding:12px 16px;border:none;outline:none;font-size:14px}.search-submit{background:#007ad2;color:#fff;border:none;padding:12px 16px;cursor:pointer;transition:background-color .3s ease}.search-submit:hover{background:#052f87}.recent-posts-list{list-style:none;padding:0;margin:0}.recent-post-item{border-bottom:1px solid #f0f0f0;padding:12px 0}.recent-post-item:last-child{border-bottom:none}.recent-post-link{display:block;text-decoration:none;color:inherit;transition:color .3s ease}.recent-post-link:hover{color:#007ad2}.recent-post-title{display:block;font-weight:500;font-size:14px;line-height:1.4;margin-bottom:4px}.recent-post-date{display:block;font-size:14px;color:#6b7280}.recent-comments-list{list-style:none;padding:0;margin:0}.recent-comment-item{border-bottom:1px solid #f0f0f0;padding:12px 0}.recent-comment-item:last-child{border-bottom:none}.recent-comment-link{display:block;text-decoration:none;color:inherit;transition:color .3s ease}.recent-comment-link:hover{color:#007ad2}.comment-author{display:block;font-weight:600;font-size:13px;color:#007ad2;margin-bottom:4px}.comment-text{display:block;font-size:13px;line-height:1.4;color:#4b5563;margin-bottom:4px}.comment-date{display:block;font-size:13px;color:#9ca3af}.widget-content{font-size:14px;line-height:1.6}.widget-content p{margin:0 0 12px 0}.widget-content p:last-child{margin-bottom:0}.no-posts,.no-comments{color:#6b7280;font-style:italic;text-align:center;padding:20px 0;margin:0}.blockTitle{margin-bottom:20px}.blockTitle__ja{font-size:1.2rem;font-weight:600;color:#1a1a1a;border-bottom:2px solid #007ad2;padding-bottom:8px}.thumb-widget{margin:20px 0;padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.05);border:1px solid #e5e7eb}.article-bottom-widget{margin:30px 0;padding:20px;background:#f8f9fa;border-radius:8px;border-left:4px solid #007ad2}.mainVisualBottom{margin:40px 0;padding:30px;background:linear-gradient(135deg, #007AD2 0%, #052F87 100%);color:#fff;border-radius:12px}.footerTop{margin:40px 0 20px 0;padding:30px;background:#f8f9fa;border-radius:8px}.footTitle{font-size:1.1rem;font-weight:600;color:#1a1a1a;margin-bottom:15px;border-bottom:2px solid #007ad2;padding-bottom:8px}.mobile-widget{margin:15px 0;padding:15px;background:#fff;border-radius:6px;border:1px solid #e5e7eb}.MobileNavTitle{font-size:1rem;font-weight:600;color:#1a1a1a;margin-bottom:10px}@media(max-width: 768px){.article-thumbnail{margin:16px 0;border-radius:8px}.article-body img{margin:16px 0;border-radius:6px}}.section{padding:80px 0;position:relative}.section-header{text-align:center;margin-bottom:60px}.section-header h2{font-size:2.5rem;font-weight:800;color:var(--text-primary);margin:0 0 16px;line-height:1.3}.section-subtitle{font-size:1.1rem;color:var(--text-secondary);text-align:center;margin-bottom:60px;line-height:1.6}.site-header{background:var(--primary);padding:20px 0;position:static;box-shadow:var(--shadow-medium)}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 24px}.brand{font:700 24px "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;color:var(--white);text-shadow:0 2px 4px rgba(0,0,0,.1);text-decoration:none}.brand:hover{color:#f0f9ff}.pr-label{color:var(--white);font-size:14px;font-weight:700;background:hsla(0,0%,100%,.2);padding:4px 8px;border-radius:4px;text-shadow:0 1px 2px rgba(0,0,0,.1)}.btn{display:inline-block;padding:12px 24px;border:none;border-radius:var(--radius-md);font-size:var(--font-base);font-weight:var(--weight-semibold);text-decoration:none;text-align:center;cursor:pointer;transition:var(--transition-base)}.btn-primary{background:var(--gradient-primary);color:var(--white)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-warm)}.btn-secondary{background:var(--white);color:var(--primary);border:2px solid var(--primary)}.btn-secondary:hover{background:var(--primary);color:var(--white)}.form-group{margin-bottom:var(--space-lg)}.form-label{display:block;margin-bottom:var(--space-sm);font-weight:var(--weight-medium);color:var(--text-primary)}.form-input{width:100%;padding:12px 16px;border:2px solid var(--border-light);border-radius:var(--radius-md);font-size:var(--font-base);transition:var(--transition-base)}.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,122,210,.1)}.form-error{color:var(--error);font-size:14px;margin-top:5px}.card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:var(--space-xl);transition:var(--transition-base)}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-medium)}.card-header{margin-bottom:var(--space-lg)}.card-title{font-size:1.5rem;font-weight:var(--weight-bold);color:var(--text-primary);margin:0 0 8px}.card-subtitle{color:var(--text-secondary);font-size:var(--font-sm)}.grid{display:grid;gap:var(--space-lg)}.grid-2{grid-template-columns:repeat(auto-fit, minmax(300px, 1fr))}.grid-3{grid-template-columns:repeat(auto-fit, minmax(250px, 1fr))}.grid-4{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--space-xs)}.mb-2{margin-bottom:var(--space-sm)}.mb-3{margin-bottom:var(--space-md)}.mb-4{margin-bottom:var(--space-lg)}.mb-5{margin-bottom:var(--space-xl)}.mt-0{margin-top:0}.mt-1{margin-top:var(--space-xs)}.mt-2{margin-top:var(--space-sm)}.mt-3{margin-top:var(--space-md)}.mt-4{margin-top:var(--space-lg)}.mt-5{margin-top:var(--space-xl)}.p-0{padding:0}.p-1{padding:var(--space-xs)}.p-2{padding:var(--space-sm)}.p-3{padding:var(--space-md)}.p-4{padding:var(--space-lg)}.p-5{padding:var(--space-xl)}@media screen and (max-width: 768px){.container{padding:16px}.section{padding:40px 0}.section-header h2{font-size:2rem}.brand{font-size:20px}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.btn{width:100%;margin-bottom:var(--space-sm)}}@media screen and (max-width: 480px){.brand{font-size:18px}.pr-label{font-size:10px;padding:2px 5px}.section-header h2{font-size:1.8rem}}.realtime-dashboard,.ad-analytics,.data-management{max-width:1200px}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:20px;margin:20px 0}.kpi-card{background:#fff;border:1px solid #ccd0d4;border-radius:8px;padding:20px;box-shadow:0 2px 4px rgba(0,0,0,.1);display:flex;align-items:center;gap:15px}.kpi-icon{font-size:2.5em;opacity:.7}.kpi-content{flex:1}.kpi-value{font-size:2.2em;font-weight:bold;color:#0073aa;margin:0;line-height:1}.kpi-label{font-size:.9em;color:#666;margin:5px 0 0 0}.kpi-change{font-size:.8em;padding:2px 6px;border-radius:3px;font-weight:bold}.kpi-change.positive{background:#d4edda;color:#155724}.kpi-change.negative{background:#f8d7da;color:#721c24}.kpi-change.neutral{background:#e2e3e5;color:#383d41}.alerts-section,.highlights-section{background:#fff;border:1px solid #ccd0d4;border-radius:8px;padding:20px;margin:20px 0;box-shadow:0 2px 4px rgba(0,0,0,.1)}.alerts-section h3,.highlights-section h3{margin:0 0 15px 0;color:#333;font-size:16px;border-bottom:1px solid #eee;padding-bottom:10px}.alert{padding:10px 15px;margin:5px 0;border-radius:4px;border-left:4px solid}.alert-info{background:#d1ecf1;border-color:#bee5eb;color:#0c5460}.alert-success{background:#d4edda;border-color:#c3e6cb;color:#155724}.alert-warning{background:#fff3cd;border-color:#ffeaa7;color:#856404}.alert-error{background:#f8d7da;border-color:#f5c6cb;color:#721c24}.highlights-list{list-style:none;margin:0;padding:0}.highlights-list li{padding:8px 0;border-bottom:1px solid #eee}.highlights-list li:last-child{border-bottom:none}.highlights-list li:before{content:"✓";color:#28a745;font-weight:bold;margin-right:8px}.analytics-section{background:#fff;border:1px solid #ccd0d4;border-radius:8px;padding:20px;margin:20px 0;box-shadow:0 2px 4px rgba(0,0,0,.1)}.analytics-section h3{margin:0 0 15px 0;color:#333;font-size:16px;border-bottom:1px solid #eee;padding-bottom:10px}.date-filter{background:#f8f9fa;border:1px solid #dee2e6;border-radius:4px;padding:15px;margin:20px 0;display:flex;align-items:center;gap:15px}.date-filter label{font-weight:bold;margin:0}.date-filter select,.date-filter input[type=date]{padding:5px 10px;border:1px solid #ccc;border-radius:4px}.wp-list-table{margin:0}.wp-list-table th,.wp-list-table td{padding:12px 8px;vertical-align:middle}.wp-list-table th{background:#f8f9fa;font-weight:bold;border-bottom:2px solid #dee2e6}.export-section,.import-section{background:#fff;border:1px solid #ccd0d4;border-radius:8px;padding:20px;margin:20px 0;box-shadow:0 2px 4px rgba(0,0,0,.1)}.export-section h3,.import-section h3{margin:0 0 15px 0;color:#333;font-size:16px;border-bottom:1px solid #eee;padding-bottom:10px}.form-group{margin:15px 0;display:flex;align-items:center;gap:10px}.form-group label{min-width:100px;font-weight:bold;margin:0}.form-group input,.form-group select{padding:5px 10px;border:1px solid #ccc;border-radius:4px}.loading{text-align:center;padding:20px;color:#666;font-style:italic}.no-data{text-align:center;padding:40px 20px;color:#666;font-style:italic}@media(max-width: 768px){.kpi-grid{grid-template-columns:1fr}.kpi-card{flex-direction:column;text-align:center}.date-filter{flex-direction:column;align-items:stretch}.form-group{flex-direction:column;align-items:stretch}.form-group label{min-width:auto}}.notice{padding:10px 15px;margin:10px 0;border-radius:4px;border-left:4px solid}.notice-success{background:#d4edda;border-color:#28a745;color:#155724}.notice-error{background:#f8d7da;border-color:#dc3545;color:#721c24}.notice-info{background:#d1ecf1;border-color:#17a2b8;color:#0c5460}.diagnosis-result-page{max-width:1200px;margin:0 auto;padding:20px}.result-header{text-align:center;margin-bottom:40px;background:linear-gradient(135deg, rgba(0, 122, 210, 0.08) 0%, rgba(5, 47, 135, 0.08) 100%);padding:40px 20px;border-radius:16px;box-shadow:0 10px 25px -3px rgba(0,0,0,.08);border:2px solid #e5e7eb}.result-badge{display:inline-block;background:linear-gradient(135deg, #007AD2, #052F87);color:#fff;padding:12px 24px;border-radius:25px;font-weight:bold;margin-bottom:20px}.result-title{font-size:2.2rem;font-weight:800;color:#052f87;margin-bottom:12px}.result-description{font-size:1.05rem;color:#0071bd;max-width:800px;margin:0 auto}.section-title{font-size:2rem;font-weight:800;color:#052f87;text-align:center;margin:40px 0 24px;position:relative}.section-title::after{content:"";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:80px;height:4px;background:linear-gradient(135deg, #FF6B6B, #FF8E53, #FF6B6B);border-radius:2px}.c-results{background:#fff;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.08);padding:24px;margin:0 auto 50px;max-width:1200px}.c-inner{max-width:1100px;margin:0 auto}.c-results-list{display:flex;flex-direction:column;gap:24px}.c-case-item{border:1.5px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;transition:all .2s ease}.c-case-item:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.08);border-color:#007ad2}.c-case-item__title{display:flex;align-items:center;justify-content:space-between;background:#f4fcff;color:#052f87;margin:0;padding:16px 18px;border-bottom:1px solid #e5e7eb}.c-case-item__product{font-weight:700}.c-case-item__general{display:flex;align-items:center;gap:10px;color:#0071bd}.c-case-item__score{font-size:1.1rem;font-weight:800;color:#007ad2}.c-case-item__body{display:flex;gap:22px;padding:18px}.c-case-item__left{flex:0 0 300px}.c-case-item__thumb img{width:100%;height:auto;border-radius:8px;border:1px solid #e5e7eb}.c-case-item__right{flex:1}.c-case-item__recommend-title{font-weight:700;margin:0 0 8px;color:#0071bd}.c-case-item__recommend-txt{line-height:1.9;color:#052f87}.c-case-item__benefits{display:grid;grid-template-columns:repeat(4, 1fr);border-top:1px solid #e5e7eb}.c-case-item__benefits dl{margin:0;padding:14px 16px;border-right:1px solid #e5e7eb}.c-case-item__benefits dl:last-child{border-right:none}.c-case-item__btn-search{display:flex;gap:14px;justify-content:center;padding:18px;border-top:1px solid #e5e7eb}.c-btn{display:inline-block;background:linear-gradient(135deg, #FF6B6B, #FF8E53, #FF6B6B);color:#fff;text-decoration:none;font-weight:800;padding:12px 22px;border-radius:8px;min-width:220px;text-align:center;box-shadow:0 8px 20px rgba(255,107,107,.3);text-shadow:0 1px 2px rgba(0,0,0,.15)}.c-btn:hover{filter:brightness(0.98) saturate(1.05);transform:translateY(-1px)}.c-btn02{display:inline-block;background:#fff;color:#007ad2;border:2px solid #007ad2;text-decoration:none;font-weight:800;padding:12px 22px;border-radius:8px;min-width:200px;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.05)}.c-btn02:hover{background:linear-gradient(135deg, #007AD2 0%, #052F87 100%);color:#fff;border-color:rgba(0,0,0,0)}.c-case-item__star{color:#ffd54f}.c-rank{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg, #007AD2 0%, #052F87 100%);color:#fff;border-radius:50%;width:32px;height:32px;font-weight:800;margin-right:8px}@media(max-width: 768px){.c-case-item__body{flex-direction:column;gap:14px;padding:14px}.c-case-item__left{flex:auto}.c-case-item__benefits{grid-template-columns:1fr}.c-case-item__btn-search{flex-direction:column}}.wrap{max-width:1400px}.matrix-controls{background:#f9f9f9;padding:15px;border:1px solid #ddd;border-radius:5px;margin:20px 0}.matrix-controls button{margin-right:10px;margin-bottom:5px}.matrix-controls .button-primary{background:#0073aa}.matrix-controls .button-primary:hover{background:#005a87}.matrix-filters{background:#fff;padding:20px;border:1px solid #ddd;border-radius:5px;margin:20px 0}.matrix-filters label{display:inline-block;margin-right:20px;margin-bottom:10px;font-weight:600}.matrix-filters select{margin-left:5px;padding:5px 8px;border:1px solid #ddd;border-radius:3px}#matrix-table-container{background:#fff;border:1px solid #ddd;border-radius:5px;overflow-x:auto;margin:20px 0}#rule-matrix-table{width:100%;border-collapse:collapse;font-size:14px}#rule-matrix-table th{background:#f1f1f1;border-bottom:2px solid #ddd;padding:12px 8px;text-align:left;font-weight:600;position:sticky;top:0;z-index:10}#rule-matrix-table td{padding:10px 8px;border-bottom:1px solid #eee;vertical-align:middle}#rule-matrix-table tr:hover{background-color:#f9f9f9}#rule-matrix-table tr:nth-child(even){background-color:#fafafa}#rule-matrix-table tr:nth-child(even):hover{background-color:#f0f0f0}.agent-select{width:150px;padding:5px;border:1px solid #ddd;border-radius:3px;font-size:13px}.priority-input{width:60px;padding:5px;border:1px solid #ddd;border-radius:3px;text-align:center}.active-checkbox{transform:scale(1.2);margin:0}.pagination{text-align:center;margin:20px 0}.page-btn{display:inline-block;padding:8px 12px;margin:0 3px;border:1px solid #ddd;background:#fff;color:#0073aa;text-decoration:none;border-radius:3px;cursor:pointer;font-size:14px;transition:all .2s}.page-btn:hover{background:#f9f9f9;border-color:#0073aa}.page-btn.active{background:#0073aa;color:#fff;border-color:#0073aa}.page-btn:disabled{background:#f5f5f5;color:#999;cursor:not-allowed}.modal{position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);animation:fadeIn .2s}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.modal-content{background-color:#fefefe;margin:5% auto;padding:30px;border:1px solid #888;width:90%;max-width:600px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.3);animation:slideIn .3s}@keyframes slideIn{from{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.close{color:#aaa;float:right;font-size:28px;font-weight:bold;cursor:pointer;line-height:1}.close:hover,.close:focus{color:#000;text-decoration:none}.bulk-conditions,.bulk-actions{margin:20px 0;padding:15px;border:1px solid #ddd;border-radius:5px;background:#f9f9f9}.bulk-conditions h3,.bulk-actions h3{margin-top:0;color:#333;font-size:16px}.bulk-conditions label,.bulk-actions label{display:block;margin:12px 0;font-weight:600}.bulk-conditions select,.bulk-actions select{width:100%;max-width:200px;padding:8px;border:1px solid #ddd;border-radius:3px;margin-left:10px}@media(max-width: 1200px){#rule-matrix-table{font-size:14px}#rule-matrix-table th,#rule-matrix-table td{padding:8px 6px}.agent-select{width:120px;font-size:14px}}@media(max-width: 768px){.matrix-filters label{display:block;margin-bottom:10px}.matrix-filters select{width:100%;max-width:200px}.matrix-controls button{display:block;width:100%;margin-bottom:10px;margin-right:0}.modal-content{width:95%;margin:10% auto;padding:20px}#rule-matrix-table{font-size:13px}.agent-select{width:100px}.priority-input{width:50px}}#loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center}#loading-overlay>div{background:#fff;padding:30px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.3);font-size:16px;font-weight:600;color:#333}.status-success{color:#46b450;font-weight:600}.status-error{color:#dc3232;font-weight:600}.status-warning{color:#ffb900;font-weight:600}.csv-buttons{display:inline-block;margin-left:20px}.csv-buttons button{background:#f7f7f7;border:1px solid #ccc}.csv-buttons button:hover{background:#e9e9e9}.agent-doda{background-color:#e3f2fd}.agent-recruit{background-color:#f3e5f5}.agent-levtech{background-color:#e8f5e8}.agent-green{background-color:#fff3e0}.agent-bizreach{background-color:#fce4ec}.priority-1{border-left:4px solid #dc3232}.priority-2{border-left:4px solid #ffb900}.priority-3{border-left:4px solid #46b450}.filter-active{background:#0073aa !important;color:#fff !important}.sortable{cursor:pointer;user-select:none}.sortable:hover{background:#e9e9e9}.sort-asc:after{content:" ↑"}.sort-desc:after{content:" ↓"}
/* ===== CSP対応: インラインスタイルの代替 ===== */
.btn-submit-hidden {
display: none !important;
}
.btn-submit-visible {
display: inline-block !important;
}
/* ボタンの状態管理 */
.btn-hidden {
display: none !important;
}
/* より強力な非表示ルール */
button.btn-hidden,
.next-btn button.btn-hidden,
.change-btn button.btn-hidden,
button[type="submit"].btn-hidden {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.btn-visible {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* より具体的なセレクタで確実に表示 */
button.btn-visible,
.next-btn button.btn-visible,
.change-btn button.btn-visible {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* 診断結果ボタンの表示制御を強化 */
.next-btn button[type="submit"] {
display: none !important;
}
.next-btn button[type="submit"].btn-visible {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* 最も強力な非表示ルール - 他のCSSを上書き */
button[type="submit"].btn-hidden,
.next-btn button[type="submit"].btn-hidden,
.change-btn button[type="submit"].btn-hidden {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
.btn-disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
}
.btn-enabled {
opacity: 1 !important;
cursor: pointer !important;
}
/* Q()未選択ボタンの上の余白を削減 - モバイルとタブレット */
@media (max-width: 768px) {
.change-btn {
margin-top: 2px !important;
}
.diagnosis-form .change-btn {
margin-top: 2px !important;
}
.next-btn {
margin-top: 2px !important;
}
.diagnosis-form .next-btn {
margin-top: 2px !important;
}
/* より具体的なセレクタで強制的に適用 */
.diagnosis-form .change-btn-wrapper {
margin-top: 2px !important;
}
.diagnosis-form .next-btn-wrapper {
margin-top: 2px !important;
}
/* ボタン自体のマージンも調整 */
button[type="submit"] {
margin-top: 2px !important;
}
.diagnosis-form button[type="submit"] {
margin-top: 2px !important;
}
}
@media (max-width: 480px) {
.change-btn {
margin-top: 1px !important;
}
.diagnosis-form .change-btn {
margin-top: 1px !important;
}
.next-btn {
margin-top: 1px !important;
}
.diagnosis-form .next-btn {
margin-top: 1px !important;
}
/* より具体的なセレクタで強制的に適用 */
.diagnosis-form .change-btn-wrapper {
margin-top: 1px !important;
}
.diagnosis-form .next-btn-wrapper {
margin-top: 1px !important;
}
/* ボタン自体のマージンも調整 */
button[type="submit"] {
margin-top: 1px !important;
}
.diagnosis-form button[type="submit"] {
margin-top: 1px !important;
}
}
/* さらに強力な余白削減ルール */
@media (max-width: 768px) {
/* 診断フォーム全体の余白を削減 */
.diagnosis-form {
margin-bottom: 0 !important;
}
.diagnosis-form .form-group:last-child {
margin-bottom: 0 !important;
}
.diagnosis-form .question-group:last-child {
margin-bottom: 0 !important;
}
/* ボタンラッパーの余白を最小限に */
.change-btn-wrapper,
.next-btn-wrapper {
margin-top: 0 !important;
padding-top: 2px !important;
}
/* ボタン自体の余白も削減 */
.change-btn button,
.next-btn button,
button[type="submit"] {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
@media (max-width: 480px) {
/* 診断フォーム全体の余白を削減 */
.diagnosis-form {
margin-bottom: 0 !important;
}
.diagnosis-form .form-group:last-child {
margin-bottom: 0 !important;
}
.diagnosis-form .question-group:last-child {
margin-bottom: 0 !important;
}
/* ボタンラッパーの余白を最小限に */
.change-btn-wrapper,
.next-btn-wrapper {
margin-top: 0 !important;
padding-top: 1px !important;
}
/* ボタン自体の余白も削減 */
.change-btn button,
.next-btn button,
button[type="submit"] {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
/* 全デバイス用のheroセクションの高さとパディングを調整 */
/* PC用 */
.hero {
padding: 60px 0 30px 0 !important;
min-height: auto !important;
height: auto !important;
}
/* タブレット用 */
@media (max-width: 1024px) {
.hero {
padding: 50px 0 25px 0 !important;
min-height: auto !important;
height: auto !important;
}
}
/* モバイル用 */
@media (max-width: 768px) {
.hero {
padding: 40px 0 20px 0 !important;
min-height: auto !important;
height: auto !important;
}
}
@media (max-width: 480px) {
.hero {
padding: 30px 0 15px 0 !important;
min-height: auto !important;
height: auto !important;
}
}
/* 「無料で診断する」ボタンの下に余白を追加 */
.hero-cta {
margin-bottom: 30px !important;
}
/* タブレット用 */
@media (max-width: 1024px) {
.hero-cta {
margin-bottom: 25px !important;
}
}
@media (max-width: 768px) {
.hero-cta {
margin-bottom: 20px !important;
}
}
@media (max-width: 480px) {
.hero-cta {
margin-bottom: 15px !important;
}
}
/* ファーストビューのサイズを大きくする */
.hero-large {
padding: 120px 0 80px 0 !important;
min-height: 80vh !important;
}
.hero-content-large {
max-width: 1000px !important;
}
.hero-title-large {
font-size: 4.5rem !important;
font-weight: 900 !important;
line-height: 1.1 !important;
margin: 0 0 40px !important;
}
.hero-subtitle-large {
font-size: 1.5rem !important;
margin: 0 0 60px !important;
line-height: 1.7 !important;
}
.hero-cta-large {
padding: 20px 40px !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
border-radius: 15px !important;
min-width: 300px !important;
}
/* 非表示セクション */
.hidden-section {
display: none !important;
}
/* レスポンシブ対応 */
@media (max-width: 1024px) {
.hero-large {
padding: 100px 0 60px 0 !important;
min-height: 70vh !important;
}
.hero-title-large {
font-size: 3.5rem !important;
}
.hero-subtitle-large {
font-size: 1.3rem !important;
}
.hero-cta-large {
padding: 18px 36px !important;
font-size: 1.2rem !important;
}
}
@media (max-width: 768px) {
.hero-large {
padding: 80px 0 50px 0 !important;
min-height: 60vh !important;
}
.hero-title-large {
font-size: 2.8rem !important;
margin: 0 0 30px !important;
}
.hero-subtitle-large {
font-size: 1.2rem !important;
margin: 0 0 40px !important;
}
.hero-cta-large {
padding: 16px 32px !important;
font-size: 1.1rem !important;
min-width: 280px !important;
}
}
@media (max-width: 480px) {
.hero-large {
padding: 60px 0 40px 0 !important;
min-height: 50vh !important;
}
.hero-title-large {
font-size: 2.2rem !important;
margin: 0 0 24px !important;
}
.hero-subtitle-large {
font-size: 1.1rem !important;
margin: 0 0 32px !important;
}
.hero-cta-large {
padding: 14px 28px !important;
font-size: 1rem !important;
min-width: 260px !important;
}
}
/* モバイル版ヒーロータイトルの強制調整 */
@media screen and (max-width: 480px) {
.hero-section .hero-title,
.hero-section h1.hero-title,
.hero-title {
font-size: 24px !important; /* 固定サイズに変更 */
line-height: 1.3 !important;
}
}
@media screen and (max-width: 375px) {
.hero-section .hero-title,
.hero-section h1.hero-title,
.hero-title {
font-size: 20px !important; /* 固定サイズに変更 */
line-height: 1.3 !important;
}
}
/* ===== ファーストビュー内転職エージェント横スクロール ===== */
.hero-agent-scroll {
margin-top: 40px;
padding: 30px 0;
background: transparent;
width: 100%;
overflow: hidden;
position: relative;
}
.agent-scroll-container {
position: relative;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.agent-scroll-wrapper {
overflow: hidden;
position: relative;
width: 100%;
}
.agent-scroll-track {
display: flex;
animation: scroll 30s linear infinite;
padding: 20px 0;
gap: 20px;
align-items: center;
will-change: transform;
width: max-content;
}
.agent-logo-item {
flex: 0 0 auto;
width: 140px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border-radius: 12px;
padding: 15px 20px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid #e9ecef;
margin: 0 5px;
}
.hero-agent-scroll .agent-logo-item {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.agent-logo-item:hover {
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
border-color: #007bff;
}
.agent-logo-text {
font-size: 13px;
font-weight: 600;
color: #2c3e50;
text-align: center;
line-height: 1.2;
white-space: nowrap;
}
.agent-logo-item img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.agent-logo-fallback {
font-size: 13px;
font-weight: 600;
color: #2c3e50;
text-align: center;
line-height: 1.2;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* より滑らかなスクロール効果 */
.agent-scroll-track:hover {
animation-play-state: paused;
}
/* PC専用の最適化 */
@media (min-width: 1025px) {
.hero-title {
white-space: pre-line !important;
line-height: 1.4 !important;
}
.hero-agent-scroll {
margin-top: 50px;
padding: 40px 0;
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
.agent-scroll-container {
width: 100vw;
max-width: none;
}
.agent-logo-item {
width: 180px;
height: 90px;
padding: 25px 30px;
margin: 0 8px;
}
.agent-scroll-track {
gap: 30px;
}
.agent-logo-text {
font-size: 15px;
font-weight: 700;
}
}