/* ========================================
アニメーション定義
======================================== */
/* 人影の演出 */
@keyframes person-lurk {
0%, 100% { transform:translateY(10px);opacity:0.3;}
50% { transform:translateY(0);opacity:0.8;}
}
/* 視線の光線効果 */
@keyframes ray-scan {
0% { opacity:0;transform:scaleX(0) rotate(var(--rotation, 0deg));}
50% { opacity:1;transform:scaleX(1.5) rotate(var(--rotation, 0deg));}
100% { opacity:0;transform:scaleX(0) rotate(var(--rotation, 0deg));}
}
@keyframes pulse-border {
0% {
box-shadow:0 0 0 0 rgba(255, 193, 7, 0.7);
}
70% {
box-shadow:0 0 0 15px rgba(255, 193, 7, 0);
}
100% {
box-shadow:0 0 0 0 rgba(255, 193, 7, 0);
}
}
@keyframes icon-pulse {
0%, 100% { transform:scale(1);}
50% { transform:scale(1.2);}
}
@keyframes counter-blink {
0%, 100% { opacity:0.8;transform:scale(1);}
50% { opacity:1;transform:scale(1.05);}
}
@keyframes number-change {
0% { content:'2,847';}
20% { content:'2,853';}
40% { content:'2,861';}
60% { content:'2,869';}
80% { content:'2,874';}
100% { content:'2,847';}
}
@keyframes fade-in {
from {
opacity:0;
transform:translateX(-10px);
}
to {
opacity:1;
transform:translateX(0);
}
}
@keyframes pulse {
0% {
transform:scale(1);
box-shadow:0 0 0 0 rgba(255, 193, 7, 0.7);
}
50% {
transform:scale(1.05);
box-shadow:0 0 0 15px rgba(255, 193, 7, 0);
}
100% {
transform:scale(1);
box-shadow:0 0 0 0 rgba(255, 193, 7, 0);
}
}
/* 衝撃の事実セクション */
@keyframes banner-pulse {
0%, 100% { transform:scale(1);}
50% { transform:scale(1.05);}
}
@keyframes icon-blink {
0%, 100% { opacity:1;}
50% { opacity:0.5;}
}
@keyframes dot-pulse {
0% {
box-shadow:0 0 0 0 rgba(255, 82, 82, 0.7),
0 0 0 0 rgba(255, 82, 82, 0.5);
}
50% {
box-shadow:0 0 0 20px rgba(255, 82, 82, 0),
0 0 0 40px rgba(255, 82, 82, 0);
}
100% {
box-shadow:0 0 0 0 rgba(255, 82, 82, 0),
0 0 0 0 rgba(255, 82, 82, 0);
}
}
@keyframes log-slide-in {
from {
transform:translateX(100%);
opacity:0;
}
to {
transform:translateX(0);
opacity:1;
}
}
@keyframes device-pulse {
0%, 100% {
transform:scale(1);
opacity:0.8;
}
50% {
transform:scale(1.1);
opacity:1;
}
}
@keyframes blink {
0%, 100% {
opacity:1;
}
50% {
opacity:0.7;
}
}
@keyframes rotate-sun {
0% { transform:rotate(0deg);}
100% { transform:rotate(360deg);}
}
@keyframes shine {
0%, 100% { opacity:0.5;}
50% { opacity:1;}
}
@keyframes sparkle-float {
0%, 100% {
transform:translateY(0) scale(1);
opacity:0;
}
50% {
transform:translateY(-20px) scale(1.5);
opacity:1;
}
}
@keyframes rainbow-flow {
0% { background-position:0% 50%;}
100% { background-position:200% 50%;}
}
@keyframes dark-pulse {
0%, 100% { transform:scale(1);opacity:0.5;}
50% { transform:scale(1.1);opacity:0.8;}
}
@keyframes cloud-float {
0%, 100% { transform:translate(0, 0);}
50% { transform:translate(-20px, 10px);}
}
@keyframes glow-pulse {
0%, 100% { box-shadow:0 0 30px rgba(255, 193, 7, 0.3);}
50% { box-shadow:0 0 60px rgba(255, 193, 7, 0.6);}
}
@keyframes rainbow-sweep {
0% { transform:translateX(-100%) translateY(-100%) rotate(0deg);}
100% { transform:translateX(100%) translateY(100%) rotate(45deg);}
}
@keyframes confetti-fall {
0% {
transform:translateY(-20px) rotate(0deg);
opacity:0;
}
20% {
opacity:1;
}
100% {
transform:translateY(100px) rotate(720deg);
opacity:0;
}
}
@keyframes item-shine {
0%, 100% {
transform:scale(1);
box-shadow:0 3px 20px rgba(76, 175, 80, 0.4);
}
50% {
transform:scale(1.05);
box-shadow:0 5px 30px rgba(76, 175, 80, 0.8);
}
}
@keyframes sparkle-rotate {
0% { transform:rotate(0deg) scale(1);}
50% { transform:rotate(180deg) scale(1.2);}
100% { transform:rotate(360deg) scale(1);}
}
@keyframes success-appear {
0% {
opacity:0;
transform:translateY(20px);
}
100% {
opacity:1;
transform:translateY(0);
}
}
@keyframes magic-wand {
0%, 100% { transform:rotate(-10deg) scale(1);}
50% { transform:rotate(10deg) scale(1.2);}
}
@keyframes sparkle-burst {
0% { transform:scale(0) rotate(0deg);opacity:0;}
50% { transform:scale(1.5) rotate(180deg);opacity:1;}
100% { transform:scale(2) rotate(360deg);opacity:0;}
}
@keyframes pulse-light {
0%, 100% {
transform:scale(1);
filter:drop-shadow(0 0 20px rgba(255, 193, 7, 0.6));
}
50% {
transform:scale(1.2);
filter:drop-shadow(0 0 40px rgba(255, 193, 7, 1));
}
}
@keyframes icon-bounce {
0%, 100% { transform:translateY(0);}
50% { transform:translateY(-10px);}
}
@keyframes pulse-button {
0% {
box-shadow:0 10px 30px rgba(255, 193, 7, 0.4);
}
50% {
box-shadow:0 10px 50px rgba(255, 193, 7, 0.8);
}
100% {
box-shadow:0 10px 30px rgba(255, 193, 7, 0.4);
}
}
@keyframes fadeIn {
from {
opacity:0;
transform:translateY(20px);
}
to {
opacity:1;
transform:translateY(0);
}
}
@keyframes slideIn {
from {
opacity:0;
transform:translateX(-50px);
}
to {
opacity:1;
transform:translateX(0);
}
}
/* 追加アニメーション */
@keyframes shake {
0%, 100% { transform:translateX(0);}
10%, 30%, 50%, 70%, 90% { transform:translateX(-5px);}
20%, 40%, 60%, 80% { transform:translateX(5px);}
}
@keyframes magic-pulse {
0% { transform:scale(1) rotate(0deg);}
50% { transform:scale(1.5) rotate(360deg);}
100% { transform:scale(1) rotate(720deg);}
}
@keyframes success-glow {
0% {
box-shadow:0 0 30px rgba(255, 193, 7, 0.3);
filter:brightness(1);
}
50% {
box-shadow:0 0 60px rgba(255, 193, 7, 0.8);
filter:brightness(1.2);
}
100% {
box-shadow:0 0 30px rgba(255, 193, 7, 0.3);
filter:brightness(1);
}
}
@keyframes super-sparkle {
0% {
transform:scale(0) rotate(0deg);
opacity:0;
}
50% {
transform:scale(2) rotate(180deg);
opacity:1;
}
100% {
transform:scale(3) rotate(360deg);
opacity:0;
}
}
@keyframes blink {
0%, 50% { opacity:1;}
51%, 100% { opacity:0;}
}
@keyframes appearSuggest {
to {
opacity:1;
transform:translateY(0);
}
}
@keyframes growBar {
from { width:0 !important;}
}
@keyframes shake {
0%, 100% { transform:translateX(0);}
25% { transform:translateX(-5px);}
75% { transform:translateX(5px);}
}
@keyframes pulse-ring {
0% {
transform:translate(-50%, -50%) scale(1);
opacity:1;
}
100% {
transform:translate(-50%, -50%) scale(2);
opacity:0;
}
}
@keyframes device-float-dynamic {
0% {
transform:translate(0, 0) scale(0.8);
opacity:0;
}
10% {
transform:translate(20px, -20px) scale(1);
opacity:1;
}
50% {
transform:translate(-30px, 30px) scale(1.1);
opacity:1;
}
90% {
transform:translate(10px, -10px) scale(1);
opacity:1;
}
100% {
transform:translate(0, 0) scale(0.8);
opacity:0;
}
}
@keyframes wifi-pulse {
0%, 100% {
transform:scale(1);
opacity:0.7;
}
50% {
transform:scale(1.2);
opacity:1;
}
}
@keyframes data-flow {
0% {
transform:translateY(-100px);
opacity:0;
}
10% {
opacity:1;
}
90% {
opacity:1;
}
100% {
transform:translateY(calc(100% + 100px));
opacity:0;
}
}
@keyframes wave-expand {
0% {
transform:scale(0);
opacity:1;
}
100% {
transform:scale(3);
opacity:0;
}
}
@keyframes particle-flow {
0% {
transform:translateY(-20px) translateX(0);
opacity:0;
}
10% {
opacity:1;
}
30% {
transform:translateY(100px) translateX(20px);
}
50% {
transform:translateY(200px) translateX(-10px);
}
70% {
transform:translateY(300px) translateX(15px);
}
90% {
opacity:1;
}
100% {
transform:translateY(400px) translateX(0);
opacity:0;
}
}
@keyframes count-pulse {
0%, 100% {
transform:scale(1);
box-shadow:0 0 0 0 rgba(255, 82, 82, 0.7);
}
50% {
transform:scale(1.1);
box-shadow:0 0 0 10px rgba(255, 82, 82, 0);
}
}
@keyframes slide-in-right {
from {
transform:translateX(100%);
opacity:0;
}
to {
transform:translateX(0);
opacity:1;
}
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@keyframes slideInRight {
from {
transform: translateX(100px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInUp {
from {
transform: translateY(100px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* ========================================
3. フローティングロゴ
======================================== */
@keyframes floatLogo {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(5deg);
}
}
@keyframes matrixFall {
0% { transform: translateY(-100%); }
100% { transform: translateY(200%); }
}
@keyframes ipChange {
0% { content: '192.168.1.1'; opacity: 1; }
25% { content: '10.0.0.5'; opacity: 0.8; }
50% { content: '172.16.0.3'; opacity: 1; }
75% { content: '203.0.113.7'; opacity: 0.8; }
100% { content: '198.51.100.2'; opacity: 1; }
}
/* デバイスアニメーション */
@keyframes deviceFloat {
0%, 100% {
transform: translateY(0) scale(1);
filter: brightness(1);
}
25% {
transform: translateY(-3px) scale(1.02);
filter: brightness(1.1);
}
50% {
transform: translateY(-5px) scale(1.03);
filter: brightness(1.2);
}
75% {
transform: translateY(-3px) scale(1.02);
filter: brightness(1.1);
}
}
@keyframes dataFlow {
0% {
transform: translateX(-100%) translateY(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateX(100%) translateY(0);
opacity: 0;
}
}
@keyframes statusPulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.7;
}
}
@keyframes devicePulse {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes screenGlow {
0% { opacity: 0.3; }
100% { opacity: 0.9; }
}
@keyframes statusBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@keyframes dataFlow {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes scanLine {
0% { left: -100%; }
100% { left: 100%; }
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); }
50% { box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); }
}
@keyframes typewriter {
from { width: 0; }
to { width: 100%; }
}
@keyframes sendQuery {
0% {
transform: scale(0) translateY(0);
opacity: 0;
}
10% {
transform: scale(1) translateY(-5px);
opacity: 1;
}
50% {
transform: scale(1) translateY(-30px);
opacity: 1;
}
100% {
transform: scale(0.8) translateY(-60px);
opacity: 0;
}
}
@keyframes searchPulse {
0% {
width: 0;
opacity: 0;
}
50% {
width: 60px;
opacity: 1;
}
100% {
width: 0;
opacity: 0;
}
}
@keyframes counterGlow {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.8;
}
}
@keyframes requestFlow {
0% {
width: 0;
opacity: 0;
}
10% {
width: 0;
opacity: 1;
}
90% {
width: 200px;
opacity: 1;
}
100% {
width: 200px;
opacity: 0;
}
}
@keyframes pingEffect {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(3);
opacity: 0;
}
}
@keyframes methodPop {
0% {
transform: translateX(-50%) scale(0);
opacity: 0;
}
20% {
transform: translateX(-50%) scale(1.2);
opacity: 1;
}
80% {
transform: translateX(-50%) scale(1);
opacity: 1;
}
100% {
transform: translateX(-50%) scale(0.8);
opacity: 0;
}
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(10deg); }
}
@keyframes scanLine {
0% { left: -100%; }
100% { left: 100%; }
}
@keyframes pulse {
0%, 100% { transform:scale(0.8);}
50% { transform:scale(1.2);}
}
@keyframes rotate {
from { transform:rotate(0deg);}
to { transform:rotate(360deg);}
}
@keyframes fadeInUp {
from {
opacity:0;
transform:translateY(30px);
}
to {
opacity:1;
transform:translateY(0);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform:translateY(0);
}
40% {
transform:translateY(-10px);
}
60% {
transform:translateY(-5px);
}
}
@keyframes rotate {
0% { transform:rotate(0deg);}
100% { transform:rotate(360deg);}
}
@keyframes badge-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* アニメーション */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.1); opacity: 0.3; }
}
@keyframes wave-expand {
0% {
width: 40px;
height: 40px;
opacity: 1;
}
100% {
width: 180px;
height: 180px;
opacity: 0;
}
}
@keyframes rotate {
from { transform:rotate(0deg);}
to { transform:rotate(360deg);}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform:translateY(0);
}
40% {
transform:translateY(-20px);
}
60% {
transform:translateY(-10px);
}
}
@keyframes slideRight {
0%, 100% { transform:translateX(0);}
50% { transform:translateX(10px);}
}
@keyframes bounce {
0%, 100% { transform:translateY(0);}
50% { transform:translateY(-10px);}
}
/* ロゴスタイルは logo-styles.css に移動済み */
/* 基本スタイル */
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
padding-bottom:80px;/* 固定フッター分の間隔 */
}
/* 共通ヘッダー・フッタースタイル */
/* ヘッダー */
header {
position:fixed;
top:0;
left:0;
right:0;
background:#fff;
z-index:9999;
height:70px;
box-shadow:0 2px 20px rgba(0,0,0,0.08);
}
.header-content {
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 24px;
}
.header-cta-button {
background:#00B900;
padding:10px 24px;
border-radius:30px;
font-size:0.95rem;
font-weight:600;
text-decoration:none;
transition:all 0.3s ease;
display:inline-flex;
align-items:center;
gap:8px;
box-shadow:0 2px 10px rgba(0,185,0,0.2);
}
.header-cta-button:hover {
transform:translateY(-2px);
box-shadow:0 4px 20px rgba(0,185,0,0.3);
}
/* フッター */
.footer {
background:#333;
color:white;
padding:40px 0 20px;
}
.footer .container {
max-width:1200px;
margin:0 auto;
padding:0 20px;
}
.footer-content {
justify-content:space-between;
align-items:flex-start;
}
.footer-logo h3 {
font-size:1.5rem;
margin-bottom:10px;
}
.footer-logo p {
color:#ccc;
}
.footer-contact h4 {
font-size:1.2rem;
margin-bottom:10px;
}
.footer-contact p {
color:#ccc;
margin-bottom:15px;
}
.contact-button:hover {
background:#009900;
}
.footer-bottom {
color:#ccc;
}
.desktop-nav a {
text-decoration:none;
color:#333;
font-weight:500;
display:flex;
align-items:center;
gap:8px;
}
.desktop-nav a:hover,
.desktop-nav a.active {
color:#4fc3f7;
}
.desktop-nav a i {
font-size:1.1rem;
width:16px;
text-align:center;
}
/* デスクトップボタン群 */
.desktop-buttons {
display:flex;
align-items:center;
gap:15px;
}
/* 料金シミュレーターボタン */
.price-simulator-btn {
display:inline-flex;
align-items:center;
gap:8px;
background:linear-gradient(135deg, #e74c3c, #c0392b);
color:white;
padding:10px 20px;
border-radius:25px;
text-decoration:none;
font-weight:bold;
transition:all 0.3s;
white-space:nowrap;
box-shadow:0 2px 10px rgba(231, 76, 60, 0.4);
}
.price-simulator-btn:hover {
background:linear-gradient(135deg, #c0392b, #a93226);
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(231, 76, 60, 0.5);
}
.price-simulator-btn i {
font-size:1.1rem;
}
/* ヘッダーLINEボタン */
.header-line-button {
display:inline-flex;
align-items:center;
gap:8px;
background:#00B900;
color:white;
padding:10px 20px;
border-radius:25px;
text-decoration:none;
font-weight:bold;
transition:all 0.3s;
white-space:nowrap;
}
.header-line-button:hover {
background:#00A000;
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(0, 185, 0, 0.3);
}
.header-line-button i {
font-size:1.2rem;
}
/* ハンバーガーメニュー */
.hamburger-menu {
display:flex;
flex-direction:column;
background:rgba(255,255,255,0.9);
border:1px solid #ddd;
border-radius:4px;
cursor:pointer;
padding:8px;
gap:4px;
transition:all 0.3s;
}
.hamburger-menu:hover {
background:#f5f5f5;
border-color:#999;
}
.hamburger-menu span {
width:25px;
height:3px;
background:#000;
transition:all 0.3s;
border-radius:2px;
box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.hamburger-menu.active span:nth-child(1) {
transform:rotate(45deg) translate(6px, 6px);
}
.hamburger-menu.active span:nth-child(2) {
opacity:0;
}
.hamburger-menu.active span:nth-child(3) {
transform:rotate(-45deg) translate(6px, -6px);
}
/* モバイルナビゲーション内の検索ボックス */
.mobile-nav .search-examples-container {
display:block;
margin-top:20px;
}
.mobile-nav .search-example {
background:#f8f9fa;
padding:15px;
margin-bottom:15px;
border-radius:10px;
}
.mobile-nav .search-example h3 {
font-size:0.9rem;
margin-bottom:10px;
color:#333;
}
.mobile-nav .search-box-demo {
background:white;
padding:8px 12px;
border-radius:20px;
margin-bottom:5px;
font-size:0.85rem;
}
.mobile-nav .suggest-dropdown {
background:white;
border-radius:8px;
overflow:hidden;
box-shadow:none;
border:1px solid #e0e0e0;
}
.mobile-nav .suggest-item {
padding:6px 10px;
font-size:0.8rem;
border-bottom:1px solid #f0f0f0;
}
.mobile-nav .suggest-item:last-child {
border-bottom:none;
}
.mobile-nav .negative-word {
font-size:0.75rem;
padding:1px 5px;
background:rgba(211, 47, 47, 0.1);
color:#d32f2f;
border-radius:3px;
margin-left:5px;
}
.mobile-nav-menu li {
margin-bottom:15px;
}
.mobile-nav-menu a {
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:#333;
font-weight:500;
padding:15px 20px;
border-bottom:1px solid #eee;
transition:color 0.3s;
}
.mobile-nav-menu a i {
font-size:1.2rem;
width:20px;
text-align:center;
}
.mobile-nav-menu a:hover,
.mobile-nav-menu a.active {
color:#4fc3f7;
}
/* セクション共通 */
.section-title {
font-size:2.5rem;
text-align:center;
margin-bottom:50px;
color:#0d47a1;
}
/* フッター */
.site-footer {
background:#333;
color:white;
padding:50px 0 20px;
margin-top:100px;
}
.footer-content {
display:grid;
grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
gap:40px;
margin-bottom:30px;
}
.footer-section h3 {
margin-bottom:20px;
color:#4fc3f7;
}
.footer-section ul {
list-style:none;
}
.footer-section ul li {
margin-bottom:10px;
}
.footer-section a {
color:white;
text-decoration:none;
transition:color 0.3s;
}
.footer-section a:hover {
color:#4fc3f7;
}
.footer-line-button:hover {
background:#00A000;
transform:translateY(-3px);
box-shadow:0 5px 20px rgba(0, 185, 0, 0.4);
}
.footer-line-button i {
font-size:1.5rem;
}
/* フッター料金シミュレーターボタン */
.footer-price-btn {
display:inline-flex;
align-items:center;
gap:10px;
background:linear-gradient(135deg, #e74c3c, #c0392b);
color:white !important;
padding:15px 30px;
border-radius:30px;
text-decoration:none;
font-weight:bold;
transition:all 0.3s;
margin-bottom:10px;
box-shadow:0 3px 15px rgba(231, 76, 60, 0.4);
}
.footer-price-btn:hover {
background:linear-gradient(135deg, #c0392b, #a93226);
transform:translateY(-3px);
box-shadow:0 5px 20px rgba(231, 76, 60, 0.5);
}
.footer-price-btn i {
font-size:1.3rem;
}
.price-note {
opacity:0.8;
margin-top:5px;
}
.footer-info h3,
.footer-links h3 {
margin-bottom:20px;
color:#4fc3f7;
}
.footer-links ul {
list-style:none;
}
.footer-links a {
color:white;
text-decoration:none;
line-height:2;
transition:color 0.3s;
}
.footer-links a:hover {
color:#4fc3f7;
}
.footer-philosophy h3 {
color:#4fc3f7;
margin-bottom:30px;
font-size:1.5rem;
font-weight:bold;
}
.philosophy-logo img {
max-width:200px;
height:auto;
filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
.philosophy-icon i {
font-size:3rem;
padding:15px;
border-radius:50%;
background:rgba(255, 255, 255, 0.1);
backdrop-filter:blur(10px);
}
.footer-bottom {
text-align:center;
padding-top:20px;
border-top:1px solid #555;
font-size:0.9rem;
}
/* ========== Hero Section ========== */
.hero {
position:relative;
background:linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
color:white;
padding:80px 0 60px;
overflow:visible;
min-height:600px;
}
/* 検索デバイスの背景アニメーション */
.search-devices-bg {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
z-index:1;
}
.device-float i {
font-size:3rem;
color:white;
}
@keyframes float {
0%, 100% {
transform:translate(0, 0) rotate(0deg);
}
25% {
transform:translate(30px, -30px) rotate(5deg);
}
50% {
transform:translate(-20px, 20px) rotate(-5deg);
}
75% {
transform:translate(40px, 10px) rotate(3deg);
}
}
.hero-content {
position:relative;
z-index:2;
}
/* 人の目と視線の演出 */
.watching-eyes-container {
position:relative;
height:150px;
margin-bottom:20px;
}
@keyframes container-pulse {
0%, 100% { transform:scale(1);}
50% { transform:scale(1.05);}
}
@keyframes eye-watch {
0%, 100% { transform:scale(1) rotate(0deg);}
25% { transform:scale(1.1) rotate(-5deg);}
75% { transform:scale(1.1) rotate(5deg);}
}
@keyframes glance-move {
0%, 100% { transform:rotate(0deg) scaleX(0);}
50% { transform:rotate(15deg) scaleX(1);}
}
@keyframes fade-blink {
0%, 100% { opacity:0;}
50% { opacity:1;}
}
/* 人影の演出 */
.shadow-people {
position:absolute;
bottom:0;
width:100%;
height:80px;
}
@keyframes person-lurk {
0%, 100% { transform:translateY(10px);opacity:0.3;}
50% { transform:translateY(0);opacity:0.8;}
}
/* 視線の光線効果 */
.gaze-rays {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:100%;
height:100%;
pointer-events:none;
}
@keyframes ray-scan {
0% { opacity:0;transform:scaleX(0) rotate(var(--rotation, 0deg));}
50% { opacity:1;transform:scaleX(1.5) rotate(var(--rotation, 0deg));}
100% { opacity:0;transform:scaleX(0) rotate(var(--rotation, 0deg));}
}
@keyframes pulse-border {
0% {
box-shadow:0 0 0 0 rgba(255, 193, 7, 0.7);
}
70% {
box-shadow:0 0 0 15px rgba(255, 193, 7, 0);
}
100% {
box-shadow:0 0 0 0 rgba(255, 193, 7, 0);
}
}
.emergency-text i.pulsing {
animation:icon-pulse 1s ease-in-out infinite;
}
@keyframes icon-pulse {
0%, 100% { transform:scale(1);}
50% { transform:scale(1.2);}
}
@keyframes counter-blink {
0%, 100% { opacity:0.8;transform:scale(1);}
50% { opacity:1;transform:scale(1.05);}
}
@keyframes number-change {
0% { content:'2,847';}
20% { content:'2,853';}
40% { content:'2,861';}
60% { content:'2,869';}
80% { content:'2,874';}
100% { content:'2,847';}
}
.hero-title {
font-weight:900;
text-align:center;
}
.hero-title .subtitle {
font-weight:400;
opacity:1;
}
/* 個人・企業の検索ボックス */
.search-visual-dual {
margin:30px 0;
}
.search-example {
background:rgba(255, 255, 255, 0.2);
backdrop-filter:blur(10px);
border-radius:20px;
padding:30px;
border:1px solid rgba(255, 255, 255, 0.2);
transition:transform 0.3s, box-shadow 0.3s;
}
.search-example:hover {
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0, 0, 0, 0.3);
}
.search-example h3 {
font-size:1.3rem;
margin-bottom:20px;
display:flex;
align-items:center;
gap:10px;
}
.search-example h3 i {
font-size:1.5rem;
color:#ffc107;
}
.search-box-demo {
color:#333;
}
.search-box-demo input {
border:none;
outline:none;
font-size:1.1rem;
flex:1;
background:transparent;
}
.suggest-dropdown {
background:white;
color:#333;
border-radius:10px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0, 0, 0, 0.2);
}
.suggest-item {
gap:10px;
}
@keyframes fade-in {
from {
opacity:0;
transform:translateX(-10px);
}
to {
opacity:1;
transform:translateX(0);
}
}
@keyframes pulse {
0% {
transform:scale(1);
box-shadow:0 0 0 0 rgba(255, 193, 7, 0.7);
}
50% {
transform:scale(1.05);
box-shadow:0 0 0 15px rgba(255, 193, 7, 0);
}
100% {
transform:scale(1);
box-shadow:0 0 0 0 rgba(255, 193, 7, 0);
}
}
/* 衝撃の事実セクション */
.shocking-fact {
background:rgba(255, 255, 255, 0.1);
backdrop-filter:blur(10px);
padding:40px;
border-radius:20px;
margin:50px auto;
max-width:1200px;
text-align:center;
}
@keyframes banner-pulse {
0%, 100% { transform:scale(1);}
50% { transform:scale(1.05);}
}
.search-alert-banner i {
margin-right:10px;
animation:icon-blink 1s ease-in-out infinite;
}
@keyframes icon-blink {
0%, 100% { opacity:1;}
50% { opacity:0.5;}
}
.shocking-fact .highlight {
color:#ffc107;
font-weight:bold;
font-size:1.2rem;
}
/* 日本地図検索演出 */
.japan-search-visualization {
margin:60px 0;
padding:40px;
background:rgba(0, 0, 0, 0.3);
border-radius:20px;
}
/* 検索ポイント */
.search-point {
position:absolute;
cursor:pointer;
}
@keyframes dot-pulse {
0% {
box-shadow:0 0 0 0 rgba(255, 82, 82, 0.7),
0 0 0 0 rgba(255, 82, 82, 0.5);
}
50% {
box-shadow:0 0 0 20px rgba(255, 82, 82, 0),
0 0 0 40px rgba(255, 82, 82, 0);
}
100% {
box-shadow:0 0 0 0 rgba(255, 82, 82, 0),
0 0 0 0 rgba(255, 82, 82, 0);
}
}
.search-point:hover .search-popup {
opacity:1;
}
/* リアルタイム検索ログ */
.realtime-search-log {
background:rgba(0, 0, 0, 0.5);
padding:30px;
border-radius:15px;
max-height:400px;
overflow:hidden;
}
@keyframes log-slide-in {
from {
transform:translateX(100%);
opacity:0;
}
to {
transform:translateX(0);
opacity:1;
}
}
.search-log-item:hover {
background:rgba(255, 82, 82, 0.2);
transform:translateX(10px);
}
/* 追加の警告 */
.additional-warning {
margin-top:60px;
padding:40px;
background:linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 82, 82, 0.2) 100%);
border-radius:20px;
border:2px solid #ffc107;
}
.warning-content strong {
color:#ff5252;
text-shadow:2px 2px 4px rgba(0, 0, 0, 0.3);
}
/* 検索されているイメージ */
.search-happening-now {
margin-top:40px;
padding:30px;
background:rgba(0, 0, 0, 0.2);
border-radius:15px;
}
.search-device span {
display:block;
}
@keyframes device-pulse {
0%, 100% {
transform:scale(1);
opacity:0.8;
}
50% {
transform:scale(1.1);
opacity:1;
}
}
@keyframes blink {
0%, 100% {
opacity:1;
}
50% {
opacity:0.7;
}
}
/* 希望の提示 */
.hope-message {
text-align:center;
margin-top:60px;
}
/* ========== Evidence Section ========== */
.evidence-section {
padding:80px 0;
background:#f5f5f5;
}
/* 晴れやかな演出（強化版） */
.sunshine-effect {
position:absolute;
top:-50px;
left:50%;
transform:translateX(-50%);
z-index:10;
pointer-events:none;
}
.sun-burst i {
font-size:100px;
color:#ffc107;
filter:drop-shadow(0 0 30px rgba(255, 193, 7, 0.8));
}
.sun-burst i.rotating {
animation:rotate-sun 20s linear infinite;
}
@keyframes rotate-sun {
0% { transform:rotate(0deg);}
100% { transform:rotate(360deg);}
}
@keyframes shine {
0%, 100% { opacity:0.5;}
50% { opacity:1;}
}
.sparkle-burst i {
position:absolute;
color:#ffc107;
font-size:20px;
animation:sparkle-float 4s ease-in-out infinite;
}
@keyframes sparkle-float {
0%, 100% {
transform:translateY(0) scale(1);
opacity:0;
}
50% {
transform:translateY(-20px) scale(1.5);
opacity:1;
}
}
@keyframes rainbow-flow {
0% { background-position:0% 50%;}
100% { background-position:200% 50%;}
}
.search-transformation h4 {
font-size:1.3rem;
margin-bottom:20px;
color:#0d47a1;
display:flex;
align-items:center;
gap:10px;
}
.before-state {
background:#263238;
padding:30px;
border-radius:15px;
position:relative;
overflow:hidden;
box-shadow:inset 0 0 50px rgba(0, 0, 0, 0.5);
}
.before-state.dark-mood::before {
content:'';
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:radial-gradient(circle, transparent 30%, rgba(0, 0, 0, 0.8) 70%);
animation:dark-pulse 5s ease-in-out infinite;
}
@keyframes dark-pulse {
0%, 100% { transform:scale(1);opacity:0.5;}
50% { transform:scale(1.1);opacity:0.8;}
}
@keyframes cloud-float {
0%, 100% { transform:translate(0, 0);}
50% { transform:translate(-20px, 10px);}
}
.after-state {
background:linear-gradient(135deg, #fff9c4 0%, #ffecb3 100%);
padding:30px;
border-radius:15px;
position:relative;
overflow:hidden;
box-shadow:0 0 50px rgba(255, 193, 7, 0.3);
}
@keyframes glow-pulse {
0%, 100% { box-shadow:0 0 30px rgba(255, 193, 7, 0.3);}
50% { box-shadow:0 0 60px rgba(255, 193, 7, 0.6);}
}
@keyframes rainbow-sweep {
0% { transform:translateX(-100%) translateY(-100%) rotate(0deg);}
100% { transform:translateX(100%) translateY(100%) rotate(45deg);}
}
.celebration-confetti i {
position:absolute;
color:#ffc107;
animation:confetti-fall 3s ease-in-out infinite;
}
@keyframes confetti-fall {
0% {
transform:translateY(-20px) rotate(0deg);
opacity:0;
}
20% {
opacity:1;
}
100% {
transform:translateY(100px) rotate(720deg);
opacity:0;
}
}
.search-item {
margin-bottom:15px;
gap:10px;
position:relative;
z-index:1;
}
@keyframes item-shine {
0%, 100% {
transform:scale(1);
box-shadow:0 3px 20px rgba(76, 175, 80, 0.4);
}
50% {
transform:scale(1.05);
box-shadow:0 5px 30px rgba(76, 175, 80, 0.8);
}
}
@keyframes sparkle-rotate {
0% { transform:rotate(0deg) scale(1);}
50% { transform:rotate(180deg) scale(1.2);}
100% { transform:rotate(360deg) scale(1);}
}
@keyframes success-appear {
0% {
opacity:0;
transform:translateY(20px);
}
100% {
opacity:1;
transform:translateY(0);
}
}
.success-message i {
color:#4caf50;
margin-right:10px;
font-size:1.2rem;
}
.transformation-arrow {
text-align:center;
}
.transformation-arrow {
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
}
.transformation-arrow i {
font-size:3rem;
display:block;
margin:10px 0;
color:#1976d2;
animation:magic-wand 2s ease-in-out infinite;
}
@keyframes magic-wand {
0%, 100% { transform:rotate(-10deg) scale(1);}
50% { transform:rotate(10deg) scale(1.2);}
}
.sparkle-effect i {
color:#ffc107;
font-size:1.5rem;
animation:sparkle-burst 1.5s ease-out infinite;
}
@keyframes sparkle-burst {
0% { transform:scale(0) rotate(0deg);opacity:0;}
50% { transform:scale(1.5) rotate(180deg);opacity:1;}
100% { transform:scale(2) rotate(360deg);opacity:0;}
}
/* ポジティブメッセージ */
.transformation-message {
text-align:center;
margin-top:50px;
padding:40px;
background:linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-radius:20px;
position:relative;
overflow:hidden;
}
.light-burst i {
font-size:4rem;
color:#ffc107;
filter:drop-shadow(0 0 20px rgba(255, 193, 7, 0.6));
}
.light-burst i.pulse-glow {
animation:pulse-light 2s ease-in-out infinite;
}
@keyframes pulse-light {
0%, 100% {
transform:scale(1);
filter:drop-shadow(0 0 20px rgba(255, 193, 7, 0.6));
}
50% {
transform:scale(1.2);
filter:drop-shadow(0 0 40px rgba(255, 193, 7, 1));
}
}
.future-icons i {
font-size:2.5rem;
color:#4caf50;
animation:icon-bounce 3s ease-in-out infinite;
}
@keyframes icon-bounce {
0%, 100% { transform:translateY(0);}
50% { transform:translateY(-10px);}
}
/* 数字で見る現実 */
.evidence-stats {
margin-top:60px;
}
.stat-box {
text-align:center;
transition:transform 0.3s;
}
.stat-box:hover {
transform:translateY(-10px);
}
/* ========== Empathy Section ========== */
.empathy-section {
padding:80px 0;
background:linear-gradient(to bottom, #f5f5f5, white);
}
.emotion-card:hover {
transform:translateY(-5px);
}
.emotion-card i {
font-size:3rem;
color:#1976d2;
margin-bottom:20px;
}
.turning-point h3 {
font-size:2rem;
margin-bottom:30px;
}
.story-content .highlight {
color:#ffc107;
font-weight:bold;
}
/* ========== Trust Section ========== */
.trust-section {
padding:80px 0;
background:#f5f5f5;
}
.platform-header h3 {
margin-bottom:20px;
}
.stars {
font-size:1.5rem;
}
.achievement-list li {
padding:10px 0;
display:flex;
align-items:center;
gap:10px;
}
.achievement-list i {
color:#4caf50;
}
/* 生の声 */
.client-voices {
background:white;
padding:40px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0, 0, 0, 0.1);
}
.client-voices h3 {
font-size:1.5rem;
color:#0d47a1;
margin-bottom:30px;
}
.voice-item {
padding:20px;
border-left:4px solid #1976d2;
margin-bottom:20px;
background:#f8f8f8;
transition:transform 0.3s;
}
.voice-item:hover {
transform:translateX(10px);
}
.voice-text {
font-size:1.1rem;
font-style:italic;
color:#333;
}
.more-reviews-link:hover {
color:#0d47a1;
}
/* ========== Uniqueness Section ========== */
.uniqueness-section {
padding:80px 0;
background:white;
}
.secret-reveal h3 {
text-align:center;
font-size:1.8rem;
color:#0d47a1;
margin-bottom:40px;
}
.approach-card h4 {
font-size:1.3rem;
margin-bottom:30px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}
.concrete-example h4 {
font-size:1.5rem;
color:#0d47a1;
margin-bottom:30px;
text-align:center;
}
.case-item {
background:white;
border-radius:10px;
box-shadow:0 3px 10px rgba(0, 0, 0, 0.1);
}
.case-item .fail {
color:#d32f2f;
font-weight:bold;
}
.case-item .success {
color:#4caf50;
font-weight:bold;
}
/* ========== Urgency Section ========== */
.urgency-section {
padding:80px 0;
background:#fff3cd;
}
.reason-content h3 {
font-size:1.3rem;
color:#0d47a1;
margin-bottom:10px;
}
.reason-content p {
color:#333;
}
.damage-timeline h3 {
font-size:1.5rem;
color:#d32f2f;
margin-bottom:30px;
text-align:center;
}
.timeline-item {
display:flex;
align-items:center;
padding:20px;
margin-bottom:15px;
background:#f8f8f8;
border-radius:10px;
transition:all 0.3s;
}
.timeline-item:hover {
transform:translateX(10px);
box-shadow:0 5px 15px rgba(0, 0, 0, 0.1);
}
/* ========== Limited Section ========== */
.limited-section {
padding:60px 0;
background:#ffebee;
}
.limited-message i {
font-size:3rem;
color:#d32f2f;
margin-bottom:20px;
}
.limited-message p {
font-size:1.1rem;
line-height:1.8;
color:#333;
}
.limited-message strong {
color:#d32f2f;
font-size:1.3rem;
}
/* ========== Pricing Preview Section ========== */
.pricing-section {
padding:80px 0;
background:#f5f5f5;
}
.highlight-card:hover {
transform:translateY(-10px);
}
.highlight-card i {
font-size:3rem;
color:#1976d2;
margin-bottom:20px;
}
.highlight-card h3 {
font-size:1.5rem;
color:#0d47a1;
margin-bottom:10px;
}
.highlight-card p {
color:#333;
margin-bottom:20px;
}
.pricing-link-button:hover {
background:#0d47a1;
transform:translateY(-3px);
box-shadow:0 10px 30px rgba(13, 71, 161, 0.4);
}
/* ========== Final CTA Section ========== */
.final-cta-section {
padding:100px 0;
background:linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
color:white;
}
.consultation-methods h3 {
font-size:2rem;
margin-bottom:40px;
}
.method-card:hover {
transform:translateY(-10px);
background:rgba(255, 255, 255, 0.2);
}
.method-card h4 {
font-size:1.3rem;
margin-bottom:10px;
}
.method-desc {
opacity:1;
}
.final-assurance h3 {
font-size:2rem;
margin-bottom:40px;
}
.assurance-item i {
font-size:2rem;
color:#ffc107;
margin-bottom:15px;
}
.assurance-item strong {
color:#4caf50;
}
/* プラットフォーム評価セクション */
.assurance-subtitle {
text-align:center;
color:#fff;
margin-bottom:30px;
font-size:1.1rem;
opacity:0.9;
}
.platform-review:hover {
transform:translateY(-5px);
box-shadow:0 8px 25px rgba(0,0,0,0.2);
}
.platform-header {
flex-direction:column;
margin-bottom:25px;
flex-shrink:0;
text-align:center;
}
.platform-header .header-top {
display:flex;
align-items:center;
gap:12px;
}
.platform-header h4 {
font-size:1.5rem;
color:#333;
margin:0;
}
.rating-stars i {
font-size:1.3rem;
color:#ffc107;
}
.platform-message p {
color:#555;
font-size:1rem;
line-height:1.6;
margin-bottom:25px;
flex-shrink:0;
min-height:60px;
display:flex;
align-items:center;
justify-content:center;
}
.trust-item {
display:flex;
align-items:center;
justify-content:flex-start;
gap:10px;
color:#4caf50;
font-size:1rem;
font-weight:500;
background:none;
padding:8px 16px;
width:100%;
max-width:200px;
border-radius:6px;
transition:background 0.2s;
text-align:left;
}
.trust-item i {
color:#4caf50;
font-size:1.1rem;
flex-shrink:0;
width:20px;
min-width:20px;
text-align:center;
}
.trust-item span {
flex:1;
text-align:left;
}
.platform-link {
display:inline-flex;
align-items:center;
gap:8px;
background:#4caf50;
color:white;
padding:12px 25px;
border-radius:8px;
text-decoration:none;
font-weight:500;
transition:all 0.3s ease;
justify-content:center;
border:none;
box-shadow:0 2px 8px rgba(76, 175, 80, 0.2);
flex-shrink:0;
margin-top:auto;
}
.platform-link:hover {
background:#45a049;
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(76, 175, 80, 0.3);
}
.platform-link i {
font-size:0.9rem;
transition:transform 0.3s ease;
}
.platform-link:hover i {
transform:translateX(3px);
}
.cta-button-container {
margin-top:40px;
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
}
@keyframes pulse-button {
0% {
box-shadow:0 10px 30px rgba(255, 193, 7, 0.4);
}
50% {
box-shadow:0 10px 50px rgba(255, 193, 7, 0.8);
}
100% {
box-shadow:0 10px 30px rgba(255, 193, 7, 0.4);
}
}
.button-subtitle {
opacity:0.8;
}
/* LINEボタン */
.line-button {
display:inline-flex;
align-items:center;
gap:15px;
background:#00B900;
color:white;
padding:20px 50px;
border-radius:50px;
text-decoration:none;
font-size:1.3rem;
font-weight:bold;
transition:all 0.3s;
box-shadow:0 10px 30px rgba(0, 185, 0, 0.3);
position:relative;
}
.line-button:hover {
background:#00A000;
color:white;
}
.line-button .button-subtitle {
font-size:0.85rem;
font-weight:normal;
opacity:0.9;
}
/* 固定フッター */
.fixed-footer {
position:fixed;
bottom:0;
left:0;
right:0;
background:rgba(255, 255, 255, 0.95);
backdrop-filter:blur(10px);
box-shadow:0 -2px 10px rgba(0, 0, 0, 0.1);
padding:10px;
z-index:999;
display:flex;
justify-content:center;
gap:15px;
align-items:center;
}
.fixed-line-button:hover {
background:#00A000;
transform:translateY(-2px);
box-shadow:0 5px 20px rgba(0, 185, 0, 0.5);
}
.fixed-line-button i {
font-size:2rem;
}
/* 固定フッター料金シミュレーターボタン */
.fixed-price-btn {
display:flex;
align-items:center;
gap:8px;
background:linear-gradient(135deg, #e74c3c, #c0392b);
color:white;
padding:12px 20px;
border-radius:25px;
text-decoration:none;
font-weight:bold;
transition:all 0.3s;
box-shadow:0 3px 10px rgba(231, 76, 60, 0.4);
}
.fixed-price-btn:hover {
background:linear-gradient(135deg, #c0392b, #a93226);
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(231, 76, 60, 0.5);
}
.fixed-price-btn i {
font-size:1.2rem;
}
/* アニメーション */
.animate-fade {
animation:fadeIn 1s ease-out;
}
@keyframes fadeIn {
from {
opacity:0;
transform:translateY(20px);
}
to {
opacity:1;
transform:translateY(0);
}
}
@keyframes slideIn {
from {
opacity:0;
transform:translateX(-50px);
}
to {
opacity:1;
transform:translateX(0);
}
}
/* 追加アニメーション */
@keyframes shake {
0%, 100% { transform:translateX(0);}
10%, 30%, 50%, 70%, 90% { transform:translateX(-5px);}
20%, 40%, 60%, 80% { transform:translateX(5px);}
}
@keyframes magic-pulse {
0% { transform:scale(1) rotate(0deg);}
50% { transform:scale(1.5) rotate(360deg);}
100% { transform:scale(1) rotate(720deg);}
}
@keyframes success-glow {
0% {
box-shadow:0 0 30px rgba(255, 193, 7, 0.3);
filter:brightness(1);
}
50% {
box-shadow:0 0 60px rgba(255, 193, 7, 0.8);
filter:brightness(1.2);
}
100% {
box-shadow:0 0 30px rgba(255, 193, 7, 0.3);
filter:brightness(1);
}
}
@keyframes super-sparkle {
0% {
transform:scale(0) rotate(0deg);
opacity:0;
}
50% {
transform:scale(2) rotate(180deg);
opacity:1;
}
100% {
transform:scale(3) rotate(360deg);
opacity:0;
}
}
/* 外部サービスセクション */
.external-services {
background:#f8f9fa;
padding:60px 0;
}
.service-card li {
margin-bottom:15px;
}
.service-card a {
color:#2980b9;
text-decoration:none;
display:flex;
align-items:center;
transition:0.3s;
}
.service-card a:hover {
color:#1e5c8a;
}
/* 信頼の証明セクション用スタイル */
.platform-header {
display:flex;
align-items:center;
margin-bottom:25px;
}
.platform-header i {
color:#2980b9;
margin-right:15px;
}
.platform-header h3 {
color:#333;
}
.service-list {
display:flex;
flex-direction:column;
gap:15px;
}
.service-item {
border-left:4px solid #2980b9;
}
.service-item span {
font-weight:500;
color:#333;
}
.eval-btn:hover {
background:#1e5c8a;
color:white !important;
transform:translateY(-2px);
box-shadow:0 4px 8px rgba(0,0,0,0.2);
}
/* お客様の声セクション */
.testimonial-section {
margin-top:60px;
padding-top:40px;
border-top:1px solid #e0e0e0;
}
.testimonial-section h3 {
text-align:center;
color:#333;
font-size:2rem;
margin-bottom:20px;
}
.category-title i {
font-size:1.2rem;
}
.testimonial-card {
transition:all 0.3s ease;
border-left:4px solid #2980b9;
}
.testimonial-card:hover {
transform:translateY(-3px);
box-shadow:0 8px 25px rgba(0,0,0,0.12);
}
.testimonial-header .stars {
color:#ffc107;
font-size:1.1rem;
font-weight:bold;
}
.testimonial-text {
margin:0;
}
/* 価格ページ追加スタイル */
.supplementary-service-note {
background:#f8f9fa;
padding:20px;
border-radius:10px;
margin-top:20px;
}
.supplementary-service-note .note-title {
font-weight:bold;
color:#0d47a1;
margin-bottom:10px;
}
.service-methods {
list-style:none;
padding-left:20px;
}
.service-methods li {
position:relative;
padding-left:20px;
margin-bottom:8px;
}
.service-methods li:before {
content:"✓";
position:absolute;
left:0;
color:#4caf50;
font-weight:bold;
}
.price-special-note {
background:#fff9c4;
padding:15px;
border-radius:8px;
margin-top:10px;
font-size:0.9rem;
}
.price-special-note i {
color:#f57c00;
margin-right:8px;
}
.price-note-inline {
font-size:0.85rem;
color:#ff5722;
font-weight:bold;
margin-top:5px;
}
/* 付帯サービス詳細 */
.supplementary-services-detail {
background:#f8f9fa;
padding:40px;
border-radius:20px;
margin-top:40px;
}
.service-detail-grid {
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:30px;
margin-top:30px;
}
.detail-card {
background:white;
padding:30px;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}
.detail-card h4 {
color:#0d47a1;
margin-bottom:20px;
font-size:1.2rem;
}
.detail-content .price-label {
font-size:0.95rem;
margin-bottom:10px;
}
.detail-content .price {
color:#1976d2;
font-weight:bold;
font-size:1.1rem;
}
.special-offer {
font-weight:bold;
}
.special-offer .emphasis {
color:#1b5e20;
font-size:1.1rem;
}
.support-list {
list-style:none;
padding:0;
}
.support-list li {
padding:8px 0;
padding-left:25px;
position:relative;
}
.support-list li:before {
content:"•";
position:absolute;
left:10px;
color:#1976d2;
}
.service-option {
margin-bottom:10px;
font-size:0.95rem;
}
.service-bottom-note {
text-align:center;
margin-top:30px;
padding:20px;
background:#e3f2fd;
border-radius:10px;
}
.service-bottom-note i {
color:#1976d2;
font-size:1.5rem;
margin-bottom:10px;
}
/* 口コミ施策料金表 */
.review-pricing-table {
margin-top:30px;
}
.review-pricing-table h3 {
color:#0d47a1;
margin-bottom:20px;
font-size:1.3rem;
}
/* 関連ワード非表示 */
.related-keyword-section {
margin-top:40px;
}
.retention-rate-info {
background:#e8f5e9;
padding:20px;
border-radius:10px;
margin-top:20px;
text-align:center;
}
.retention-rate-info i {
color:#4caf50;
font-size:1.5rem;
margin-bottom:10px;
}
/* セットプラン */
.plan-visual {
display:flex;
align-items:center;
justify-content:center;
gap:20px;
margin:30px 0;
flex-wrap:wrap;
}
.plan-description {
margin-bottom:20px;
}
.special-offer-box {
background:linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
color:white;
padding:30px;
border-radius:15px;
margin-top:20px;
text-align:center;
}
.offer-label {
letter-spacing:2px;
}
.offer-description {
font-size:0.95rem;
margin-bottom:15px;
}
.discount-amount {
text-shadow:2px 2px 4px rgba(0,0,0,0.2);
}
.discount-note {
font-size:0.85rem;
opacity:0.9;
}
.set-plan-note {
text-align:center;
color:#333;
font-size:0.95rem;
margin-top:30px;
padding:20px;
background:#f8f9fa;
border-radius:10px;
}
/* 動的サジェスト演出 */
.dynamic-suggest-demo {
margin:40px 0;
padding:30px;
background:rgba(255, 255, 255, 0.15);
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,0.3);
border:2px solid rgba(255, 255, 255, 0.3);
backdrop-filter:blur(10px);
}
.search-input-wrapper i {
color:#333;
font-size:1.1rem;
}
@keyframes blink {
0%, 50% { opacity:1;}
51%, 100% { opacity:0;}
}
.negative-suggest-list .suggest-item {
padding:12px 20px;
border-bottom:1px solid #f0f0f0;
opacity:0;
transform:translateY(-10px);
animation:appearSuggest 0.5s forwards;
background:white;
color:#333;
font-weight:500;
}
.negative-suggest-list .suggest-item:hover {
background:rgba(245, 245, 245, 0.8);
cursor:pointer;
transform:translateX(5px);
transition:all 0.2s ease;
}
.negative-suggest-list .suggest-item i {
color:#333;
margin-right:10px;
}
.negative-suggest-list .suggest-item:nth-child(1) { animation-delay:0.5s;}
.negative-suggest-list .suggest-item:nth-child(2) { animation-delay:1s;}
.negative-suggest-list .suggest-item:nth-child(3) { animation-delay:1.5s;}
.negative-suggest-list .suggest-item:nth-child(4) { animation-delay:2s;}
@keyframes appearSuggest {
to {
opacity:1;
transform:translateY(0);
}
}
.impact-text i {
color:#ffc107;
font-size:1.3rem;
margin-right:8px;
animation:pulse 2s infinite;
}
.impact-text .highlight {
color:#ffc107;
font-weight:bold;
text-shadow:2px 2px 4px rgba(0,0,0,0.7);
}
/* 日本地図拡張版 */
.japan-search-visualization.extended {
margin:60px 0;
padding:40px;
background:linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,0.2);
color:white;
}
.visualization-title i {
color:#ffc107;
margin-right:10px;
}
/* 検索統計 */
.search-statistics {
display:grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap:30px;
margin-bottom:40px;
}
.stat-item:hover {
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}
/* リアルタイム検索ログ拡張版 */
.realtime-search-log.extended {
background:rgba(255, 255, 255, 0.95);
border-radius:15px;
padding:30px;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
margin-top:40px;
border:2px solid rgba(255, 193, 7, 0.3);
}
.realtime-search-log h4 {
font-size:1.5rem;
margin-bottom:25px;
color:#333;
}
.realtime-search-log h4 i {
color:#ff5722;
margin-right:10px;
}
.search-log-container::-webkit-scrollbar {
width:6px;
}
.search-log-container::-webkit-scrollbar-thumb {
background:#ccc;
border-radius:3px;
}
/* 検索傾向分析 */
.search-trend-analysis {
margin-top:30px;
padding-top:30px;
border-top:2px solid #f0f0f0;
}
.search-trend-analysis h5 {
font-size:1.2rem;
margin-bottom:20px;
color:#333;
}
@keyframes growBar {
from { width:0 !important;}
}
/* 危機感メッセージ */
.crisis-message {
margin-top:60px;
}
.message-box.urgent i {
font-size:3rem;
color:#f44336;
margin-bottom:20px;
animation:shake 0.5s infinite;
}
@keyframes shake {
0%, 100% { transform:translateX(0);}
25% { transform:translateX(-5px);}
75% { transform:translateX(5px);}
}
.message-box h4 {
font-size:1.8rem;
color:#d32f2f;
margin-bottom:20px;
}
.message-box p {
font-size:1.1rem;
line-height:1.8;
color:#333;
}
.message-box .highlight {
background:yellow;
padding:2px 5px;
color:#333;
font-weight:bold;
}
/* PCとスマホからのアクセス演出 */
.access-devices-animation {
display:flex;
justify-content:center;
gap:40px;
margin:32px 0 24px 0;
}
.device-access i {
font-size:2.5rem;
color:#fff200;
filter:drop-shadow(0 2px 6px rgba(0,0,0,0.10));
margin-bottom:6px;
transition:color 0.2s;
}
.device-access:hover {
box-shadow:0 6px 18px rgba(0,0,0,0.10);
}
/* サブのデバイス表示（下部のグレー背景） */
.search-device-grid {
display:flex;
justify-content:center;
gap:32px;
margin:24px 0 12px 0;
}
.search-device i {
font-size:2rem;
color:#1976d2;
filter:drop-shadow(0 1px 3px rgba(0,0,0,0.08));
margin-bottom:2px;
}
.search-device span {
color:#1976d2;
font-size:0.98rem;
font-weight:500;
letter-spacing:0.02em;
}
@keyframes pulse-ring {
0% {
transform:translate(-50%, -50%) scale(1);
opacity:1;
}
100% {
transform:translate(-50%, -50%) scale(2);
opacity:0;
}
}
/* 動的アクセス演出 */
.dynamic-access-display {
margin:40px 0;
padding:40px;
background:rgba(255, 255, 255, 0.1);
border-radius:20px;
position:relative;
overflow:hidden;
border:2px solid rgba(255, 193, 7, 0.3);
backdrop-filter:blur(10px);
}
.device-icon-float i {
font-size:2.5rem;
color:#ffc107;
filter:drop-shadow(0 4px 8px rgba(255, 193, 7, 0.4));
text-shadow:0 0 10px rgba(255, 193, 7, 0.5);
}
@keyframes device-float-dynamic {
0% {
transform:translate(0, 0) scale(0.8);
opacity:0;
}
10% {
transform:translate(20px, -20px) scale(1);
opacity:1;
}
50% {
transform:translate(-30px, 30px) scale(1.1);
opacity:1;
}
90% {
transform:translate(10px, -10px) scale(1);
opacity:1;
}
100% {
transform:translate(0, 0) scale(0.8);
opacity:0;
}
}
.access-message i {
font-size:1.5rem;
color:#ffc107;
animation:wifi-pulse 2s infinite;
}
@keyframes wifi-pulse {
0%, 100% {
transform:scale(1);
opacity:0.7;
}
50% {
transform:scale(1.2);
opacity:1;
}
}
/* 追加のデバイスアクセス演出 */
.device-connection-lines {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
overflow:hidden;
}
@keyframes data-flow {
0% {
transform:translateY(-100px);
opacity:0;
}
10% {
opacity:1;
}
90% {
opacity:1;
}
100% {
transform:translateY(calc(100% + 100px));
opacity:0;
}
}
/* デバイスからの検索波 */
.search-wave {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:200px;
height:200px;
pointer-events:none;
}
@keyframes wave-expand {
0% {
transform:scale(0);
opacity:1;
}
100% {
transform:scale(3);
opacity:0;
}
}
/* 検索データストリーム */
.data-stream {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
pointer-events:none;
}
.data-particle {
border-radius:50%;
box-shadow:0 0 10px rgba(255, 193, 7, 0.8);
}
@keyframes particle-flow {
0% {
transform:translateY(-20px) translateX(0);
opacity:0;
}
10% {
opacity:1;
}
30% {
transform:translateY(100px) translateX(20px);
}
50% {
transform:translateY(200px) translateX(-10px);
}
70% {
transform:translateY(300px) translateX(15px);
}
90% {
opacity:1;
}
100% {
transform:translateY(400px) translateX(0);
opacity:0;
}
}
/* デバイスタイプ別のアイコンアニメーション */
.device-type-showcase {
display:flex;
justify-content:center;
gap:50px;
margin:40px 0;
flex-wrap:wrap;
}
.device-showcase-item i {
font-size:4rem;
color:#2196f3;
display:block;
margin-bottom:15px;
filter:drop-shadow(0 5px 15px rgba(33, 150, 243, 0.3));
transition:all 0.3s ease;
}
.device-showcase-item:hover i {
transform:scale(1.2) rotate(5deg);
color:#ffc107;
}
@keyframes count-pulse {
0%, 100% {
transform:scale(1);
box-shadow:0 0 0 0 rgba(255, 82, 82, 0.7);
}
50% {
transform:scale(1.1);
box-shadow:0 0 0 10px rgba(255, 82, 82, 0);
}
}
/* リアルタイムアクセスインジケーター */
.realtime-access-indicator {
position:fixed;
bottom:100px;
right:20px;
background:rgba(0, 0, 0, 0.8);
color:white;
padding:15px 25px;
border-radius:30px;
box-shadow:0 5px 20px rgba(0, 0, 0, 0.3);
z-index:100;
animation:slide-in-right 0.5s ease-out;
}
@keyframes slide-in-right {
from {
transform:translateX(100%);
opacity:0;
}
to {
transform:translateX(0);
opacity:1;
}
}
/* ================== 補助金ページスタイル ================== */
/* ページヒーロー */
.page-hero {
background:linear-gradient(135deg, #00bcd4, #2196f3);
padding:120px 0 80px;
margin-top:70px;
color:white;
text-align:center;
}
.importance-content {
max-width:1000px;
margin:0 auto;
}
.process-arrow {
margin:0 20px;
}
.important-points i {
margin-bottom:15px;
}
/* SEO対策例セクション */
.seo-example-box {
background:linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
color:#fff;
border-radius:16px;
padding:32px 24px;
font-size:1.2rem;
font-weight:bold;
box-shadow:0 8px 32px rgba(25, 118, 210, 0.15);
text-align:center;
margin-bottom:32px;
}
/* CTAボタンスタイル */
.cta-link {
margin-left: 20px;
}
.btn-line:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,195,0,0.3);
}
/* 固定フッター */
.site-footer.fixed-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
padding: 0;
margin-top: 0;
z-index: 998;
}
.fixed-footer .footer-container {
max-width: 100%;
padding: 0;
}
.footer-cta-fixed {
padding: 10px 20px;
text-align: center;
}
.footer-line-btn-fixed {
background: var(--line-green);
color: white !important;
padding: 12px 30px;
border-radius: 30px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 700;
transition: all 0.3s;
font-size: 1.1rem;
width: 100%;
max-width: 500px;
}
.footer-line-btn-fixed:hover {
background: var(--line-green-dark);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,195,0,0.4);
}
.footer-line-btn-fixed i {
font-size: 1.3rem;
}
.footer-line-btn-fixed span {
flex: 1;
}
/* メインコンテンツの余白調整 */
main {
padding-top: 60px; /* 固定ヘッダーの高さ分 */
padding-bottom: 80px; /* 固定フッターの高さ分 */
}
/* ボディ全体の余白調整 */
body {
padding-top: 60px; /* 固定ヘッダーの高さ分 */
}
/* 特定ページのpadding-top調整 */
.suggest-hero,
.lp-hero,
.page-hero {
margin-top: -60px; /* ヘッダーの高さ分を相殺 */
padding-top: 60px; /* ヘッダーの高さ分を追加 */
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
gap: 30px;
}
.mobile-nav .cta-link {
border-top: 2px solid #f0f0f0;
padding-top: 20px;
margin-top: 20px;
}
/* 固定フッターモバイル対応 */
.footer-line-btn-fixed {
font-size: 1rem;
padding: 10px 20px;
}
}
/* ボディのスクロール制御 */
body.menu-open {
overflow: hidden;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@keyframes slideInRight {
from {
transform: translateX(100px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* 固定CTAボタン（フッター） */
.fixed-cta-footer {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 996;
animation: slideInUp 0.5s ease;
}
.fixed-cta-footer .fixed-diagnosis-btn {
box-shadow: 0 -4px 20px rgba(0, 195, 0, 0.4);
}
@keyframes slideInUp {
from {
transform: translateY(100px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* モバイル対応 */
@media (max-width: 768px) {
.fixed-cta-footer {
bottom: 10px;
right: 10px;
left: 10px;
}
.fixed-cta-footer .fixed-diagnosis-btn {
width: 100%;
justify-content: center;
}
.fixed-diagnosis-btn {
font-size: 0.95rem;
padding: 10px 20px;
}
.fixed-diagnosis-btn .blink {
display: none;
}
}
/* ===== logo-styles.css ===== */
/* ========================================
ロゴスタイル専用CSS
リバースハック ブランディング
======================================== */
/* ========================================
2. ウォーターマーク
======================================== */
.logo-watermark {
position: fixed;
bottom: 100px;
right: 20px;
opacity: 0.4;
z-index: 999;
pointer-events: none;
width: 200px;
height: auto;
filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
mix-blend-mode: screen;
}
/* ========================================
3. フローティングロゴ
======================================== */
@keyframes floatLogo {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(5deg);
}
}
.floating-logo {
position: fixed;
top: 50%;
left: 20px;
width: 80px;
height: auto;
opacity: 0.3;
z-index: 100;
pointer-events: none;
animation: floatLogo 6s ease-in-out infinite;
filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
mix-blend-mode: multiply;
}
/* ========================================
4. セクション背景ロゴ
======================================== */
.section-with-logo-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('/assets/images/logo.png');
background-repeat: repeat;
background-size: 150px;
opacity: 0.03;
pointer-events: none;
z-index: 0;
filter: grayscale(100%);
}
.section-with-logo-bg > * {
position: relative;
z-index: 1;
}
/* ========================================
5. セクションロゴ装飾
======================================== */
.section-logo-decoration {
display: flex;
align-items: center;
justify-content: center;
margin: 40px 0;
position: relative;
}
.section-logo-decoration img {
width: 150px;
height: auto;
opacity: 0.6;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.section-logo-decoration::before,
.section-logo-decoration::after {
content: '';
flex: 1;
height: 2px;
background: linear-gradient(90deg, transparent, #1976d2, transparent);
margin: 0 30px;
}
/* ========================================
6. ロゴバッジ
======================================== */
.logo-badge {
position: absolute;
top: 20px;
right: 20px;
width: 60px;
height: auto;
opacity: 0.3;
z-index: 10;
}
/* ========================================
7. フッターロゴ
======================================== */
.footer-logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
justify-content: center;
}
.footer-logo-icon {
height: 40px;
width: auto;
}
.footer-logo-text {
height: 30px;
width: auto;
}
/* ========================================
8. モバイルナビゲーションロゴ
======================================== */
.mobile-logo-icon {
height: 35px;
width: auto;
}
/* ========================================
9. セクション内ロゴハイライト
======================================== */
.section-logo-highlight {
display: inline-block;
padding: 20px;
background: rgba(255,255,255,0.1);
border-radius: 20px;
backdrop-filter: blur(10px);
margin: 20px auto;
}
.section-logo-highlight img {
width: 120px;
height: auto;
filter: brightness(1.2);
}
.dark-section .floating-logo,
.trust-section .floating-logo,
.trust-section-dark .floating-logo {
mix-blend-mode: screen !important;
}
/* ダークセクション内のロゴを明るく */
.dark-section img[src*="logo"],
.trust-section img[src*="logo"],
.trust-section-dark img[src*="logo"] {
filter: brightness(1.5) contrast(1.1);
}
/* ========================================
レスポンシブ調整
======================================== */
@media (max-width: 480px) {
.logo-watermark {
width: 150px;
bottom: 80px;
right: 10px;
}
.floating-logo {
width: 60px;
left: 10px;
}
.section-logo-decoration img {
width: 100px;
}
}
/* ========================================
8. レスポンシブ表示制御
======================================== */
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.main-nav {
display: none;
}
}
/* ========================================
9. 小画面向け調整
======================================== */
@media (max-width: 480px) {
.mobile-nav {
width: 100%;
right: -100%;
}
}
/* ===== dark-section-styles.css ===== */
/* ========================================
ダークセクション視認性改善CSS
コントラストと可読性の最適化
======================================== */
/* ========================================
1. ダークセクション基本スタイル
======================================== */
.dark-section,
.trust-section-dark {
color: #ffffff;
position: relative;
padding: 80px 0;
}
/* グラデーション背景の追加 */
.dark-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(52, 152, 219, 0.2) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(46, 204, 113, 0.2) 0%, transparent 50%);
pointer-events: none;
}
/* ========================================
2. テキストの視認性向上
======================================== */
.dark-section h2,
.trust-section-dark h2 {
font-weight: 700;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
letter-spacing: 0.05em;
}
.dark-section h3,
.trust-section-dark h3 {
font-weight: 600;
}
.dark-section p,
.trust-section-dark p {
line-height: 1.8;
}
/* 説明テキストの改善 */
.dark-section .subtitle,
.trust-section-dark .subtitle {
color: #bdc3c7 !important;
font-size: 1.2rem;
font-weight: 500;
}
/* ========================================
3. カード・ボックスの改善
======================================== */
.dark-section .stat-box,
.trust-section-dark .stat-box {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 30px;
transition: all 0.3s ease;
}
.dark-section .stat-box:hover,
.trust-section-dark .stat-box:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
/* ========================================
4. 数値・統計の強調
======================================== */
.dark-section .stat-number,
.trust-section-dark .stat-number {
color: #3498db !important;
font-size: 3rem;
font-weight: 900;
text-shadow:
0 0 20px rgba(52, 152, 219, 0.5),
2px 2px 4px rgba(0, 0, 0, 0.3);
display: block;
margin-bottom: 10px;
}
.dark-section .stat-label,
.trust-section-dark .stat-label {
color: #ecf0f1 !important;
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* ========================================
5. ボタン・CTA改善
======================================== */
.dark-section .btn,
.trust-section-dark .btn {
background: linear-gradient(135deg, #3498db, #2ecc71);
color: #ffffff !important;
border: none;
padding: 15px 40px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
text-decoration: none;
display: inline-block;
}
.dark-section .btn:hover,
.trust-section-dark .btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
background: linear-gradient(135deg, #2980b9, #27ae60);
}
/* ========================================
6. アイコンの改善
======================================== */
.dark-section .icon,
.trust-section-dark .icon {
color: #3498db;
font-size: 2rem;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
/* ========================================
7. セクションヘッダーの改善
======================================== */
.dark-section .section-header,
.trust-section-dark .section-header {
text-align: center;
margin-bottom: 60px;
}
.dark-section .section-title,
.trust-section-dark .section-title {
font-size: clamp(2rem, 5vw, 3.5rem);
margin-bottom: 20px;
position: relative;
display: inline-block;
}
/* アンダーラインの追加 */
.dark-section .section-title::after,
.trust-section-dark .section-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, #3498db, #2ecc71);
border-radius: 2px;
}
/* ========================================
8. ロゴの明るさ調整
======================================== */
.dark-section .logo-watermark,
.trust-section-dark .logo-watermark {
filter: brightness(3) contrast(0.8) !important;
opacity: 0.15 !important;
mix-blend-mode: screen !important;
}
.dark-section .floating-logo,
.trust-section-dark .floating-logo {
filter: brightness(2.5) contrast(0.9) !important;
opacity: 0.2 !important;
}
.dark-section .section-logo-decoration img,
.trust-section-dark .section-logo-decoration img {
filter: brightness(2) invert(1) !important;
opacity: 0.3 !important;
}
/* ========================================
10. レスポンシブ対応
======================================== */
@media (max-width: 768px) {
.dark-section,
.trust-section-dark {
padding: 60px 20px;
}
.dark-section .stat-number,
.trust-section-dark .stat-number {
font-size: 2.5rem;
}
.dark-section .section-title,
.trust-section-dark .section-title {
font-size: 1.8rem;
}
}
/* ========================================
11. アクセシビリティ改善
======================================== */
/* ハイコントラストモード対応 */
@media (prefers-contrast: high) {
.dark-section,
.trust-section-dark {
background: #1a1a1a;
}
.dark-section *,
.trust-section-dark * {
color: #ffffff !important;
font-weight: 500 !important;
}
.dark-section .stat-number,
.trust-section-dark .stat-number {
color: #00ff00 !important;
}
}
/* ===== system-visual.css ===== */
/* ========================================
サジェスト対策システムビジュアルCSS
高度な技術力を表現
======================================== */
/* ========================================
1. システムセクション
======================================== */
.system-showcase {
padding: 100px 0;
background: linear-gradient(135deg, #0a0e27 0%, #151b3d 100%);
position: relative;
overflow: hidden;
}
.system-showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(0, 123, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(0, 255, 136, 0.1) 0%, transparent 50%);
pointer-events: none;
}
/* ========================================
2. デバイスグリッドビジュアル
======================================== */
.device-grid-visual {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 60px 20px;
}
.device-grid {
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
/* マトリックス背景エフェクト */
.matrix-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
opacity: 0.15;
pointer-events: none;
}
.matrix-column {
position: absolute;
top: -100%;
height: 100%;
animation: matrixFall 8s linear infinite;
animation-delay: calc(var(--col) * 0.3s);
}
@keyframes matrixFall {
0% { transform: translateY(-100%); }
100% { transform: translateY(200%); }
}
/* スマートフォンデバイス */
.device-phone {
width: 60px;
height: 100px;
background: linear-gradient(145deg, #1e2346, #2a3158);
border-radius: 8px;
position: relative;
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
animation: deviceFloat 4s ease-in-out infinite;
animation-delay: calc(var(--index) * 0.1s);
}
.device-phone::before {
content: '';
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 20px;
background: #000;
border-radius: 4px;
overflow: hidden;
}
/* デスクトップPC */
.device-desktop {
width: 90px;
height: 70px;
background: linear-gradient(145deg, #2a3158, #1e2346);
border-radius: 4px;
position: relative;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
animation: deviceFloat 5s ease-in-out infinite;
animation-delay: calc(var(--index) * 0.15s);
}
.device-desktop::before {
content: '';
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 15px;
background: #000;
border-radius: 2px;
overflow: hidden;
}
.device-desktop::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 10px;
background: linear-gradient(145deg, #1e2346, #2a3158);
border-radius: 0 0 4px 4px;
}
/* iPad/タブレット */
.device-tablet {
width: 75px;
height: 100px;
background: linear-gradient(145deg, #252d4f, #1e2346);
border-radius: 10px;
position: relative;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.35);
animation: deviceFloat 4.5s ease-in-out infinite;
animation-delay: calc(var(--index) * 0.12s);
}
.device-tablet::before {
content: '';
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
background: #000;
border-radius: 6px;
overflow: hidden;
}
/* ラップトップ */
.device-laptop {
width: 85px;
height: 60px;
background: linear-gradient(145deg, #2a3158, #1e2346);
border-radius: 4px 4px 0 0;
position: relative;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
animation: deviceFloat 5.5s ease-in-out infinite;
animation-delay: calc(var(--index) * 0.13s);
}
.device-laptop::before {
content: '';
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background: #000;
border-radius: 2px;
overflow: hidden;
}
.device-laptop::after {
content: '';
position: absolute;
bottom: -8px;
left: -5px;
right: -5px;
height: 8px;
background: linear-gradient(145deg, #1a1f3a, #141829);
border-radius: 0 0 8px 8px;
}
/* IPアドレス表示 */
.device-ip {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Courier New', monospace;
font-size: 8px;
color: #00ff88;
text-align: center;
font-weight: bold;
animation: ipChange 3s steps(1) infinite;
z-index: 2;
pointer-events: none;
}
@keyframes ipChange {
0% { content: '192.168.1.1'; opacity: 1; }
25% { content: '10.0.0.5'; opacity: 0.8; }
50% { content: '172.16.0.3'; opacity: 1; }
75% { content: '203.0.113.7'; opacity: 0.8; }
100% { content: '198.51.100.2'; opacity: 1; }
}
/* デバイスアニメーション */
@keyframes deviceFloat {
0%, 100% {
transform: translateY(0) scale(1);
filter: brightness(1);
}
25% {
transform: translateY(-3px) scale(1.02);
filter: brightness(1.1);
}
50% {
transform: translateY(-5px) scale(1.03);
filter: brightness(1.2);
}
75% {
transform: translateY(-3px) scale(1.02);
filter: brightness(1.1);
}
}
/* データストリーム */
.data-stream {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.data-particle {
position: absolute;
animation: dataFlow 2s linear infinite;
}
@keyframes dataFlow {
0% {
transform: translateX(-100%) translateY(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateX(100%) translateY(0);
opacity: 0;
}
}
/* ステータスインジケーター */
.device-status {
position: absolute;
bottom: 5px;
right: 5px;
width: 6px;
height: 6px;
background: #00ff88;
border-radius: 50%;
box-shadow: 0 0 10px #00ff88;
animation: statusPulse 2s ease-in-out infinite;
z-index: 3;
}
@keyframes statusPulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.7;
}
}
@keyframes devicePulse {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes screenGlow {
0% { opacity: 0.3; }
100% { opacity: 0.9; }
}
@keyframes statusBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* ========================================
3. ネットワーク接続線
======================================== */
.network-lines {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
.network-line {
position: absolute;
height: 2px;
background: linear-gradient(90deg, transparent, #00ff88, transparent);
animation: dataFlow 3s linear infinite;
}
@keyframes dataFlow {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ========================================
4. 統計ダッシュボード
======================================== */
.system-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 60px;
}
.stat-card {
border-radius: 16px;
padding: 30px;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.1), transparent);
animation: scanLine 4s linear infinite;
}
@keyframes scanLine {
0% { left: -100%; }
100% { left: 100%; }
}
.stat-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #0066ff, #00ff88);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(0, 255, 136, 0.3);
}
.stat-value {
font-size: 2.5rem;
font-weight: 900;
color: #00ff88;
margin-bottom: 10px;
}
/* ========================================
5. プロセスフロー図
======================================== */
.process-flow {
display: flex;
justify-content: space-between;
align-items: center;
margin: 80px 0;
position: relative;
}
.process-step {
position: relative;
z-index: 2;
}
.process-icon-wrapper {
width: 120px;
height: 120px;
margin: 0 auto 20px;
position: relative;
}
.process-icon {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1e2346, #2a3158);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
position: relative;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.3),
inset 0 2px 4px rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.process-icon::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: linear-gradient(135deg, #0066ff, #00ff88);
border-radius: 50%;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.process-step:hover .process-icon::before {
opacity: 1;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 接続線 */
.process-connector {
position: absolute;
top: 60px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #0066ff, #00ff88, transparent);
z-index: 1;
}
/* ========================================
6. リアルタイムモニター
======================================== */
.monitor-display {
background: #0a0e27;
border: 2px solid rgba(0, 255, 136, 0.3);
border-radius: 16px;
padding: 30px;
margin: 40px 0;
position: relative;
overflow: hidden;
}
.monitor-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.monitor-status {
width: 12px;
height: 12px;
background: #00ff88;
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); }
50% { box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); }
}
.monitor-title {
color: #00ff88;
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.monitor-content {
font-family: 'Courier New', monospace;
color: #00ff88;
line-height: 1.8;
font-weight: 600;
}
.monitor-line {
padding: 5px 0;
border-bottom: 1px solid rgba(0, 255, 136, 0.1);
animation: typewriter 2s steps(30) forwards;
}
@keyframes typewriter {
from { width: 0; }
to { width: 100%; }
}
/* ========================================
7. テクノロジーバッジ
======================================== */
.tech-badges {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin: 40px 0;
}
.tech-badge {
border-radius: 25px;
text-transform: uppercase;
letter-spacing: 0.1em;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.tech-badge::before {
content: '';
position: absolute;
top: 50%;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.3), transparent);
transform: translateY(-50%);
transition: left 0.5s ease;
}
.tech-badge:hover::before {
left: 100%;
}
.tech-badge:hover {
transform: scale(1.05);
box-shadow: 0 5px 20px rgba(0, 255, 136, 0.3);
}
/* ========================================
8. クエリ送信アニメーション
======================================== */
.query-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
z-index: 5;
}
@keyframes sendQuery {
0% {
transform: scale(0) translateY(0);
opacity: 0;
}
10% {
transform: scale(1) translateY(-5px);
opacity: 1;
}
50% {
transform: scale(1) translateY(-30px);
opacity: 1;
}
100% {
transform: scale(0.8) translateY(-60px);
opacity: 0;
}
}
/* 検索ボックスエフェクト */
.search-effect {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: linear-gradient(90deg, transparent, #00ff88, transparent);
animation: searchPulse 1s ease-out forwards;
}
@keyframes searchPulse {
0% {
width: 0;
opacity: 0;
}
50% {
width: 60px;
opacity: 1;
}
100% {
width: 0;
opacity: 0;
}
}
/* クエリカウンター */
.query-counter {
position: absolute;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.8);
border: 1px solid #00ff88;
border-radius: 10px;
padding: 10px 20px;
font-family: 'Courier New', monospace;
color: #00ff88;
font-size: 14px;
z-index: 10;
box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
backdrop-filter: blur(10px);
}
.query-counter::before {
content: '🔍 ';
margin-right: 5px;
}
@keyframes counterGlow {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.8;
}
}
/* リクエストライン */
.request-line {
position: absolute;
height: 1px;
background: linear-gradient(90deg, #00ff88, transparent);
animation: requestFlow 1s linear forwards;
pointer-events: none;
}
@keyframes requestFlow {
0% {
width: 0;
opacity: 0;
}
10% {
width: 0;
opacity: 1;
}
90% {
width: 200px;
opacity: 1;
}
100% {
width: 200px;
opacity: 0;
}
}
/* 送信成功エフェクト */
.success-ping {
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #00ff88;
border-radius: 50%;
animation: pingEffect 1s ease-out forwards;
pointer-events: none;
}
@keyframes pingEffect {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(3);
opacity: 0;
}
}
/* HTTP メソッド表示 */
.http-method {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
background: #00ff88;
color: #0a0e27;
padding: 2px 8px;
border-radius: 4px;
font-size: 8px;
font-weight: bold;
animation: methodPop 2s ease-out forwards;
}
@keyframes methodPop {
0% {
transform: translateX(-50%) scale(0);
opacity: 0;
}
20% {
transform: translateX(-50%) scale(1.2);
opacity: 1;
}
80% {
transform: translateX(-50%) scale(1);
opacity: 1;
}
100% {
transform: translateX(-50%) scale(0.8);
opacity: 0;
}
}
/* ========================================
9. レスポンシブ対応
======================================== */
@media (max-width: 768px) {
.device-grid {
display: flex;
}
.process-flow {
gap: 40px;
}
.process-connector {
display: none;
}
.system-stats {
grid-template-columns: 1fr;
}
}
/* ===== global-balance.css ===== */
/* 全ページ共通 見た目バランス調整CSS */
/* =================================
全体的なバランス調整
================================= */
/* セクション間の余白を統一 */
section {
padding: 80px 0;
}
/* コンテナの最大幅と中央配置 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* =================================
ヒーローセクションの調整
================================= */
.lp-hero {
/* 適切な高さに調整 */
min-height: 600px;
height: auto;
padding: 100px 0 80px;
display: flex;
align-items: center;
}
/* ロゴサイズの調整 */
.hero-logos {
margin-bottom: 40px;
}
/* キャッチコピーの調整 */
.hero-title {
font-size: clamp(24px, 5vw, 48px);
line-height: 1.4;
margin-bottom: 20px;
font-weight: 700;
}
.hero-subtitle {
font-size: clamp(16px, 3vw, 24px);
line-height: 1.6;
margin-bottom: 30px;
opacity: 0.9;
}
/* CTAボタンの調整 */
.hero-cta {
margin-top: 40px;
}
.hero-cta .lp-cta-button {
font-size: 18px;
padding: 16px 48px;
border-radius: 50px;
font-weight: 600;
}
@media (max-width: 768px) {
.hero-cta .lp-cta-button {
font-size: 16px;
padding: 14px 36px;
}
}
/* =================================
実績セクションの調整
================================= */
.achievement-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}
.achievement-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.achievement-number {
color: #1976d2;
line-height: 1;
margin-bottom: 10px;
}
/* =================================
問題提起セクションの調整
================================= */
.problem-content {
max-width: 900px;
margin: 0 auto;
}
/* =================================
サービスカードの調整
================================= */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.service-card::before {
width: 100%;
}
/* =================================
証拠セクションの調整
================================= */
.evidence-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}
.evidence-item:hover {
background: #e3f2fd;
transform: translateY(-3px);
}
/* =================================
お客様の声の調整
================================= */
.testimonials-slider {
max-width: 1000px;
margin: 50px auto 0;
}
.testimonial-card {
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
margin: 0 15px;
}
.testimonial-text {
font-size: 18px;
line-height: 1.8;
color: #333;
margin-bottom: 20px;
}
.testimonial-highlight {
background: linear-gradient(transparent 60%, #fff3cd 60%);
padding: 0 4px;
font-weight: 600;
}
/* =================================
CTAセクションの調整
================================= */
.cta-section {
background: linear-gradient(135deg, #1565c0, #1976d2);
color: white;
padding: 100px 0;
text-align: center;
}
.cta-content {
max-width: 800px;
margin: 0 auto;
}
.cta-title {
font-size: clamp(28px, 4vw, 42px);
margin-bottom: 20px;
font-weight: 700;
}
/* =================================
レスポンシブ調整
================================= */
@media (max-width: 768px) {
.achievement-grid,
.services-grid,
.evidence-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* =================================
アニメーション効果
================================= */
/* スクロールアニメーション */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}
/* =================================
なぜ95%以上の成功率セクション
================================= */
.why-success {
background: linear-gradient(135deg, #1565c0, #1976d2);
color: white;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.why-success::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: cover;
}
.why-success .section-title {
color: white;
font-size: clamp(32px, 4vw, 48px);
text-align: center;
margin-bottom: 60px;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.reasons-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 40px;
position: relative;
z-index: 1;
}
.reason-card {
background: rgba(255, 255, 255, 0.95);
padding: 40px;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
transform: translateY(0);
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: flex-start;
gap: 30px;
}
.reason-number {
background: linear-gradient(135deg, #ff6f00, #ff9800);
color: white;
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
font-weight: 900;
flex-shrink: 0;
box-shadow: 0 5px 15px rgba(255, 111, 0, 0.3);
}
.reason-content {
flex: 1;
}
.reason-title {
color: #1565c0;
font-size: 24px;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.3;
}
.reason-text {
color: #424242;
font-size: 16px;
line-height: 1.8;
font-weight: 400;
}
/* モバイル対応 */
@media (max-width: 768px) {
.why-success {
padding: 60px 0;
}
.reasons-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.reason-card {
padding: 30px;
gap: 20px;
}
.reason-number {
width: 60px;
height: 60px;
font-size: 2rem;
}
.reason-title {
font-size: 20px;
margin-bottom: 12px;
}
.reason-text {
font-size: 15px;
line-height: 1.7;
}
}
/* タブレット対応 */
@media (min-width: 769px) and (max-width: 1024px) {
.reasons-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
}
/* アクセシビリティ向上 */
@media (prefers-reduced-motion: reduce) {
.reason-card {
transition: none;
}
}
/* 本文テキスト - 読みやすさ重視 */
p, .text-content {
font-size: clamp(1rem, 2vw, 1.125rem);
line-height: 1.8;
margin-bottom: 18px;
letter-spacing: 0.03em;
}
/* サブタイトル・キャプション */
.subtitle, .page-subtitle, .caption {
/* 20.25px〜24.75px */
line-height: 1.6;
}
/* ボタンテキスト */
.cta-button, .btn, button, .button {
/* 20.25px〜22.5px */
line-height: 1.5;
}
/* カード内テキスト */
.card, .plan-card, .platform-card {
font-size: 1rem; /* 18px */
}
.card h3, .plan-name, .platform-name {
font-size: clamp(1.375rem, 2.5vw, 1.75rem) !important; /* 24.75px〜31.5px */
margin-bottom: 12px !important;
}
.card p, .plan-features li, .platform-stats {
font-size: clamp(1rem, 1.8vw, 1.125rem) !important; /* 18px〜20.25px */
line-height: 1.7;
}
/* ナビゲーション */
.main-nav a, .mobile-nav a {
letter-spacing: 0.03em;
}
/* フォームラベル・入力フィールド */
label {
font-size: 1.125rem !important; /* 20.25px */
font-weight: 600;
margin-bottom: 8px;
display: block;
}
input, textarea, select {
/* 20.25px */
line-height: 1.5;
}
/* テーブル */
table {
font-size: 1rem; /* 18px */
}
td {
/* 18px */
line-height: 1.6;
}
/* バッジ・ラベル */
.badge, .label, .tag, .trust-badge {
font-size: clamp(0.875rem, 1.5vw, 1rem) !important; /* 15.75px〜18px */
letter-spacing: 0.05em;
padding: 8px 16px !important;
}
/* コードブロック */
code, pre {
font-size: 1rem !important; /* 18px */
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}
/* 小さい注釈テキスト */
small, .small-text, .note {
font-size: clamp(0.875rem, 1.5vw, 1rem) !important; /* 15.75px〜18px */
line-height: 1.6;
opacity: 0.8;
}
/* 強調テキスト */
strong, b, .bold {
font-weight: 700;
}
.highlight, .emphasis {
font-size: 1.1em; /* 親要素の110% */
}
/* ===== trust-section-optimize.css ===== */
/* ===== 信頼セクション最適化CSS ===== */
/* 基本レイアウト */
.trust-section {
padding: 100px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e8f4fd 100%);
position: relative;
overflow: hidden;
}
/* タイトル部分 */
.trust-section .section-title {
font-size: clamp(2rem, 5vw, 3.5rem) !important;
color: #1a237e;
text-align: center;
margin-bottom: 3rem;
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1.4;
}
.trust-section .section-icon {
font-size: 1.2em;
margin-right: 0.5rem;
vertical-align: middle;
}
/* メッセージ部分 */
.trust-message {
text-align: center;
margin-bottom: 4rem;
}
.trust-text {
font-size: clamp(1.25rem, 3vw, 1.75rem);
line-height: 1.8;
color: #fff;
font-weight: 500;
letter-spacing: 0.03em;
max-width: 800px;
margin: 0 auto;
}
/* 統計情報 */
.trust-stats {
display: flex;
justify-content: center;
gap: clamp(2rem, 5vw, 4rem);
margin: 4rem 0;
flex-wrap: wrap;
}
.trust-stat {
text-align: center;
padding: 2rem;
border-radius: 20px;
min-width: 180px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.trust-stat::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #0066cc, #4caf50);
}
.trust-number {
display: block;
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 900;
margin-bottom: 0.5rem;
}
.trust-label {
display: block;
font-size: clamp(1.1rem, 2vw, 1.3rem);
color: #546e7a;
font-weight: 600;
letter-spacing: 0.05em;
}
/* 強調テキスト */
.trust-emphasis {
font-size: clamp(1.3rem, 3vw, 1.8rem);
color: #fff;
text-align: center;
margin: 2rem auto;
max-width: 700px;
line-height: 1.7;
font-weight: 500;
letter-spacing: 0.02em;
}
.trust-highlight {
font-size: clamp(1.8rem, 4vw, 2.8rem);
color: #d32f2f;
text-align: center;
margin: 3rem auto;
font-weight: 800;
letter-spacing: 0.03em;
position: relative;
display: inline-block;
width: 100%;
}
.trust-highlight::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, transparent, #d32f2f, transparent);
}
/* ミッションステートメント */
.mission-statement {
background: white;
padding: 3rem;
border-radius: 30px;
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
margin: 4rem auto;
max-width: 800px;
text-align: center;
position: relative;
}
.mission-statement::before {
content: '″';
position: absolute;
top: -20px;
left: 30px;
font-size: 80px;
color: #e3f2fd;
font-family: Georgia, serif;
}
.mission-text {
font-size: clamp(1.5rem, 3.5vw, 2.2rem);
color: #1a237e;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.6;
letter-spacing: 0.02em;
}
.mission-subtitle {
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
color: #333;
font-weight: 500;
letter-spacing: 0.03em;
}
/* 最終CTA */
.final-cta {
text-align: center;
margin-top: 5rem;
padding: 3rem 0;
background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.5));
border-radius: 30px;
}
.final-cta-text {
font-size: clamp(1.3rem, 3vw, 1.8rem);
color: #333;
margin-bottom: 2rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.final-action-button {
display: inline-flex;
align-items: center;
gap: 15px;
background: linear-gradient(135deg, #00c300, #00a000);
color: white;
padding: 20px 50px;
border-radius: 50px;
font-size: clamp(1.2rem, 2.5vw, 1.5rem);
font-weight: 700;
text-decoration: none;
box-shadow: 0 10px 30px rgba(0,195,0,0.3);
transition: all 0.3s ease;
letter-spacing: 0.02em;
}
.final-action-button:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,195,0,0.4);
background: linear-gradient(135deg, #00d400, #00b000);
}
.final-action-button i {
font-size: 1.5em;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.trust-section {
padding: 60px 20px;
}
.mission-statement {
padding: 2rem 1.5rem;
margin: 3rem 1rem;
}
.final-action-button {
padding: 15px 30px;
}
.trust-highlight::after {
bottom: -5px;
width: 60px;
height: 3px;
}
}
/* アクセシビリティ改善 */
@media (prefers-reduced-motion: reduce) {
.trust-section::before,
.trust-stat,
.final-action-button {
animation: none;
transition: none;
}
}
/* ダークモード対応（オプション） */
@media (prefers-color-scheme: dark) {
.trust-section {
background: linear-gradient(135deg, #2a2e3f 0%, #1a1f2e 100%);
}
.trust-section .section-title {
color: #ffffff !important;
}
.trust-stat,
.mission-statement {
background: #3a3e4f;
color: #ffffff;
border: 2px solid #4a4e5f;
}
.trust-text,
.trust-emphasis,
.final-cta-text,
.mission-text,
.mission-subtitle {
color: #e0e0e0 !important;
}
.trust-number {
color: #4fc3f7 !important;
}
.trust-label {
color: #b0b0b0 !important;
}
.trust-highlight {
color: #ffeb3b !important;
}
}
/* ========================================
12. レスポンシブ対応
======================================== */
/* ========================================
13. プリファレンス対応
======================================== */
@media (prefers-contrast: high) {
body {
color: #000000 !important;
}
p, li {
color: #000000 !important;
}
.dark-section p,
.trust-section-dark p,
[class*="dark"] p {
color: #ffffff !important;
background: rgba(0, 0, 0, 0.7);
padding: 2px 4px;
border-radius: 2px;
}
}
/* ========================================
14. 印刷時の最適化
======================================== */
@media print {
body {
color: #000000 !important;
background: #ffffff !important;
}
.dark-section,
.trust-section-dark,
[class*="dark"] {
background: #ffffff !important;
}
p, h1, h2, h3, h4, h5, h6 {
color: #000000 !important;
}
}
/* ===== no-grid-layout.css ===== */
/* ========================================
Grid非使用レイアウトCSS
FlexboxとBlock要素での再構築
======================================== */
/* ========================================
1. 汎用Flexレイアウト
======================================== */
/* グリッドの代替 - Flexboxカードレイアウト */
.problem-cards,
.key-points,
.benefit-cards,
.importance-items,
.case-cards,
.brand-examples,
.importance-points,
.challenge-cards,
.solution-cards,
.service-grid,
.solution-grid,
.stats-grid,
.features-grid,
.process-grid,
.testimonial-grid,
[class*="grid"],
[class*="cards"] {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
gap: 20px !important;
margin: 0 auto !important;
}
/* フレックスアイテムの基本設定 */
.problem-cards > *,
.key-points > *,
.benefit-cards > *,
.importance-items > *,
.case-cards > *,
.brand-examples > *,
.importance-points > *,
.challenge-cards > *,
.solution-cards > *,
.service-grid > *,
.solution-grid > *,
.stats-grid > *,
.features-grid > *,
[class*="grid"] > *,
[class*="cards"] > * {
flex: 1 1 300px !important;
margin-bottom: 20px !important;
}
.platform-display-card {
border-top: #4caf50 1rem solid;
padding: 3rem 4rem;
background-color: #f0f8ff;
}
.top-services > * {
flex: 1 1 22% !important;
min-width: 200px !important;
}
.coverage-table table {
border-collapse: collapse;
width: 70%;
margin: 0 auto;
}
.coverage-table table thead tr th {
border-bottom: 2px solid #2980b9;
}
.coverage-table table tbody tr th,
.coverage-table table tbody tr td {
padding: 0.5em 1em;
}
.coverage-table table tbody tr:first-child th,
.coverage-table table tbody tr:first-child td {
padding-top: 1.5em;
}
.device-phone,
.device-desktop,
.device-tablet,
.device-laptop {
margin: 10px !important;
}
.system-stats {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-around !important;
gap: 30px !important;
}
/* ========================================
3. 信頼性セクションの修正
======================================== */
.trust-stats {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 30px !important;
}
.trust-stat {
flex: 1 1 200px !important;
max-width: 300px !important;
}
/* ========================================
4. フッターレイアウト
======================================== */
.footer-content {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
gap: 40px !important;
}
/* ========================================
5. プロセスフロー
======================================== */
.process-flow {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-around !important;
align-items: center !important;
gap: 30px !important;
}
.process-step {
flex: 1 1 200px !important;
text-align: center !important;
}
/* ========================================
6. 価格テーブル
======================================== */
.pricing-table {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 30px !important;
}
/* ========================================
7. 特徴カード
======================================== */
.feature-cards {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
gap: 25px !important;
}
/* ========================================
8. タブレット対応
======================================== */
@media (max-width: 1024px) {
.problem-cards > *,
.key-points > *,
.benefit-cards > *,
[class*="grid"] > *,
[class*="cards"] > * {
flex: 1 1 45% !important;
}
.difficulty-cards > *,
.word-categories > *,
.bottom-effects > * {
flex: 1 1 45% !important;
max-width: calc(50% - 20px) !important;
}
.top-services > * {
flex: 1 1 45% !important;
max-width: calc(50% - 20px) !important;
}
}
/* ========================================
9. モバイル対応
======================================== */
@media (max-width: 768px) {
/* 全てシングルカラムに */
.problem-cards,
.key-points,
.benefit-cards,
.shimei-points,
.difficulty-cards,
.word-categories,
.cost-breakdown,
.importance-items,
.case-cards,
.top-services,
.bottom-effects,
.brand-examples,
.importance-points,
.price-comparison,
.challenge-cards,
.solution-cards,
.suggest-demo,
.trust-stats,
.process-flow,
.pricing-table,
.feature-cards,
[class*="grid"]:not(.device-grid),
[class*="cards"] {
flex-direction: column !important;
align-items: stretch !important;
}
.device-grid {
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
width: 100% !important;
}
.problem-cards > *,
.key-points > *,
.benefit-cards > *,
.shimei-points > *,
.difficulty-cards > *,
.word-categories > *,
.cost-breakdown > *,
.importance-items > *,
.case-cards > *,
.top-services > *,
.bottom-effects > *,
.brand-examples > *,
.importance-points > *,
.price-comparison > *,
.challenge-cards > *,
.solution-cards > *,
.suggest-demo > *,
.trust-stat,
.process-step,
.price-plan,
.feature-card,
.footer-column,
[class*="grid"] > *,
[class*="cards"] > * {
flex: 1 1 100% !important;
max-width: 100% !important;
width: 100% !important;
}
/* デバイスグリッドのモバイル調整 */
.device-phone,
.device-desktop,
.device-tablet,
.device-laptop {
flex: 0 0 auto !important;
margin: 5px !important;
}
}
/* ========================================
10. Flexユーティリティクラス
======================================== */
.flex-container {
display: flex !important;
flex-wrap: wrap !important;
}
/* ========================================
11. ブロック要素での代替
======================================== */
.block-layout {
display: block !important;
}
.block-layout > * {
display: block !important;
width: 100% !important;
margin-bottom: 20px !important;
}
.inline-block-layout > * {
display: inline-block !important;
vertical-align: top !important;
font-size: 1rem !important;
width: calc(33.333% - 20px) !important;
margin: 0 10px 20px !important;
}
@media (max-width: 768px) {
.inline-block-layout > * {
width: 100% !important;
margin: 0 0 20px !important;
}
}
/* ========================================
12. フロートレイアウト（レガシー対応）
======================================== */
.float-layout::after {
content: "";
display: table;
clear: both;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* ========================================
13. テーブルレイアウト（特殊用途）
======================================== */
.table-layout {
display: table !important;
width: 100% !important;
}
/* ===== flat-design.css ===== */
/* ========================================
フラットデザイン変換CSS
グラデーション削除・単色化
======================================== */
/* ========================================
1. 背景のフラット化
======================================== */
body {
background: #ffffff !important;
}
.dark-section,
.system-showcase {
background: #1a2332 !important;
}
.trust-section {
background-color: #f0f4f8;
background-image: url(../images/back.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.problem-section {
background: #ffffff !important;
}
.solution-section {
background: #f8f9fa !important;
}
.cta-section {
background: #1976d2 !important;
}
.site-footer {
background: #263238 !important;
}
/* ========================================
2. ボタンのフラット化
======================================== */
.cta-button {
border: none !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
.cta-button:hover {
background: #0052a3 !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
color: #fff;
}
.cta-button-secondary {
background: #00c300 !important;
border: none !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
.cta-button-secondary:hover {
background: #00a000 !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}
.fixed-diagnosis-btn {
background: #00c300 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}
.fixed-diagnosis-btn:hover {
background: #00a000 !important;
border-color: #008000 !important;
}
.btn-line:hover,
.btn-line-mobile:hover {
background: #00a000 !important;
}
/* ========================================
3. カードのフラット化
======================================== */
.problem-card,
.solution-card,
.stat-card,
.trust-stat,
.feature-card,
.price-plan {
background: #ffffff !important;
border: 1px solid #e0e0e0 !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}
/* ========================================
4. バッジのフラット化
======================================== */
.trust-badge {
background: #ffffff !important;
border: 2px solid #0066cc !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}
.trust-badge:not(.no-hover):hover {
background: #f0f7ff !important;
border-color: #0052a3 !important;
}
.trust-badge.trust-link:hover {
background: #0066cc !important;
color: #ffffff !important;
border-color: #0052a3 !important;
}
.tech-badge {
background: #e8f5e9 !important;
border: 2px solid #4caf50 !important;
color: #2e7d32 !important;
}
.tech-badge:hover {
background: #4caf50 !important;
color: #ffffff !important;
}
/* ========================================
5. ヘッダー・フッターのフラット化
======================================== */
.site-header {
background: #ffffff !important;
border-bottom: 1px solid #e0e0e0 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
.mobile-nav {
background: #ffffff !important;
box-shadow: -2px 0 8px rgba(0,0,0,0.1) !important;
}
/* ========================================
6. セクション装飾のフラット化
======================================== */
.section-title {
color: #1a237e;
padding-bottom: 10px;
display: inline-block;
}
.section-title div {
display: block;
font-size: 1rem;
text-align: center;
}
.section-title div:after {
content: "";
display: block;
width: 6rem;
height: 3px;
background: #1a237e;
margin: 1.2em auto 1.5em;
}
.dark-section .section-title,
.trust-section-dark .section-title {
color: #ffffff !important;
border-bottom-color: #00ff88 !important;
}
/* ========================================
7. プロセスアイコンのフラット化
======================================== */
.process-icon {
background: #f5f5f5 !important;
border: 3px solid #0066cc !important;
}
.process-icon::before {
display: none !important;
}
.process-step:hover .process-icon {
background: #0066cc !important;
color: #ffffff !important;
}
/* ========================================
8. 統計値のフラット化
======================================== */
.stat-value,
.trust-number {
background: none !important;
color: #0066cc !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: #0066cc !important;
background-clip: unset !important;
opacity: 1 !important;
visibility: visible !important;
}
.highlight-number {
opacity: 1 !important;
visibility: visible !important;
}
/* ========================================
9. デバイスビジュアルのフラット化
======================================== */
.device-phone,
.device-desktop,
.device-tablet,
.device-laptop {
background: #2a3158 !important;
border: 2px solid #1e2346 !important;
}
/* ========================================
10. アニメーション要素のフラット化
======================================== */
.query-bubble {
background: #00ff88 !important;
border: 2px solid #00cc6a !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}
/* ========================================
11. フォームのフラット化
======================================== */
input,
textarea,
select {
background: #ffffff !important;
border: 2px solid #e0e0e0 !important;
box-shadow: none !important;
}
input:focus,
textarea:focus,
select:focus {
border-color: #0066cc !important;
box-shadow: 0 0 0 3px rgba(0,102,204,0.1) !important;
}
/* ========================================
12. その他の要素のフラット化
======================================== */
.search-box {
background: #ffffff !important;
border: 2px solid #e0e0e0 !important;
}
.suggest-list {
background: #ffffff !important;
border: 1px solid #e0e0e0 !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
.monitor-display {
background: #0a0e27 !important;
border: 2px solid #00ff88 !important;
}
/* ========================================
13. グラデーションテキストの単色化
======================================== */
.gradient-text,
[class*="gradient"] {
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: unset !important;
background-clip: unset !important;
}
/* ========================================
14. 疑似要素のフラット化
======================================== */
/* ボーダーグラデーションを単色に */
[style*="border-image"] {
border-image: none !important;
}
/* ========================================
15. トランジション調整
======================================== */
* {
transition-duration: 0.2s !important;
transition-timing-function: ease !important;
}
/* ========================================
16. 影の統一
======================================== */
.card,
[class*="card"] {
box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}
/* ========================================
17. オーバーレイのフラット化
======================================== */
.overlay,
[class*="overlay"] {
background: rgba(0,0,0,0.7) !important;
}
/* ========================================
18. プログレスバーのフラット化
======================================== */
.progress-bar {
background: #e0e0e0 !important;
}
/* ========================================
19. タブのフラット化
======================================== */
.tab {
background: #f5f5f5 !important;
border: 1px solid #e0e0e0 !important;
}
/* ========================================
20. モーダルのフラット化
======================================== */
.modal {
background: #ffffff !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}
/* ===== header-fix.css ===== */
/* ========================================
ヘッダー要素の見切れ防止CSS
rem単位での調整
======================================== */
/* ========================================
5. タブレット対応 (1024px以下)
======================================== */
@media (max-width: 1024px) {
.main-nav ul {
gap: 1rem !important; /* 16px */
}
.main-nav a {
font-size: 0.875rem !important; /* 14px */
}
}
/* ========================================
6. モバイル対応 (768px以下)
======================================== */
@media (max-width: 768px) {
.logo-icon {
height: 1.75rem !important; /* 28px */
}
.logo-text {
height: 1.5rem !important; /* 24px */
}
/* デスクトップナビゲーションを非表示 */
.main-nav.desktop-nav {
display: none !important;
}
/* ハンバーガーメニューを表示 */
.hamburger {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
}
/* ========================================
7. 小画面対応 (480px以下)
======================================== */
@media (max-width: 480px) {
.header-container {
padding: 0.5rem 0.75rem !important;
gap: 0.75rem !important;
}
.logo {
gap: 0.5rem !important;
}
.logo-icon {
height: 1.5rem !important; /* 24px */
}
.logo-text {
height: 1.25rem !important; /* 20px */
}
}
/* ========================================
9. ページコンテンツのマージン調整
======================================== */
@media (max-width: 768px) {
body {
padding-top: 3.5rem !important;
}
}
/* ========================================
10. Z-indexの整理
======================================== */
.mobile-nav {
z-index: 999 !important;
}
/* ===== device-grid-fullwidth.css ===== */
/* ========================================
デバイスグリッド フルワイド表示CSS
画面いっぱいに広がるかっこいいエフェクト
======================================== */
/* ========================================
1. デバイスグリッドセクションのフルワイド化
======================================== */
.system-showcase {
padding: 100px 0 !important;
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
position: relative !important;
overflow: hidden !important;
background: linear-gradient(135deg, #0a0e27 0%, #151b3d 100%) !important;
}
.device-grid-visual {
width: 100% !important;
max-width: 100% !important;
padding: 60px 40px !important;
margin: 0 !important;
}
.device-grid {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
padding: 60px !important;
margin: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-evenly !important;
align-items: center !important;
gap: 30px !important;
background: rgba(0, 0, 0, 0.6) !important;
border: 2px solid #00ff88 !important;
border-radius: 0 !important;
box-shadow:
0 0 100px rgba(0, 255, 136, 0.3),
inset 0 0 50px rgba(0, 255, 136, 0.1) !important;
}
/* ========================================
2. デバイスのサイズ調整
======================================== */
.device-phone {
width: 80px !important;
height: 120px !important;
flex: 0 0 auto !important;
}
.device-desktop {
width: 110px !important;
height: 85px !important;
flex: 0 0 auto !important;
}
.device-tablet {
width: 90px !important;
height: 120px !important;
flex: 0 0 auto !important;
}
.device-laptop {
width: 100px !important;
height: 75px !important;
flex: 0 0 auto !important;
}
/* ========================================
3. 背景エフェクトの強化
======================================== */
.matrix-bg {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
opacity: 0.3 !important;
overflow: hidden !important;
}
.matrix-column {
width: 30px !important;
opacity: 0.4 !important;
background: linear-gradient(180deg,
transparent 0%,
#00ff88 30%,
#00ff88 70%,
transparent 100%) !important;
}
/* ========================================
4. クエリバブルの拡大
======================================== */
.query-bubble {
padding: 12px 20px !important;
font-size: 16px !important;
font-weight: 900 !important;
box-shadow:
0 0 40px rgba(0, 255, 136, 1),
0 0 80px rgba(0, 255, 136, 0.5) !important;
}
/* ========================================
5. 統計カードの配置改善
======================================== */
.system-stats {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-evenly !important;
gap: 40px !important;
margin-top: 80px !important;
padding: 0 40px !important;
}
.stat-card {
max-width: 3.5rem;
}
/* ========================================
6. サイト全体での表示
======================================== */
/* 固定背景エフェクト */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(0, 123, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(0, 255, 136, 0.05) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
/* 各セクションにサイバーエフェクト追加 */
section {
position: relative;
overflow: hidden;
}
/* ========================================
7. デバイスアニメーションの強化
======================================== */
.device-phone,
.device-desktop,
.device-tablet,
.device-laptop {
animation: deviceFloat 4s ease-in-out infinite !important;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.5),
0 0 30px rgba(0, 255, 136, 0.2) !important;
}
.device-phone:hover,
.device-desktop:hover,
.device-tablet:hover,
.device-laptop:hover {
transform: translateY(-10px) scale(1.1) !important;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.6),
0 0 50px rgba(0, 255, 136, 0.4) !important;
}
/* ========================================
8. IPアドレス表示の強化
======================================== */
.device-ip {
font-size: 10px !important;
font-weight: bold !important;
color: #00ff88 !important;
text-shadow: 0 0 10px rgba(0, 255, 136, 1) !important;
}
/* ========================================
9. タブレット対応
======================================== */
@media (max-width: 1024px) {
.device-grid {
padding: 40px 30px !important;
gap: 25px !important;
}
.device-phone,
.device-desktop,
.device-tablet,
.device-laptop {
transform: scale(0.9);
}
}
/* ========================================
10. モバイル対応
======================================== */
@media (max-width: 768px) {
.system-showcase {
padding: 60px 0 !important;
}
.device-grid-visual {
padding: 40px 20px !important;
}
.device-grid {
padding: 30px 20px !important;
gap: 20px !important;
border-radius: 10px !important;
}
.device-phone {
width: 50px !important;
height: 80px !important;
}
.device-desktop {
width: 70px !important;
height: 55px !important;
}
.device-tablet {
width: 60px !important;
height: 80px !important;
}
.device-laptop {
width: 65px !important;
height: 50px !important;
}
.system-stats {
gap: 20px !important;
padding: 0 20px !important;
}
}
/* ========================================
11. 小画面対応
======================================== */
@media (max-width: 480px) {
.device-grid {
padding: 20px 15px !important;
gap: 15px !important;
}
.device-phone {
width: 40px !important;
height: 65px !important;
}
.device-desktop {
width: 55px !important;
height: 45px !important;
}
.device-tablet {
width: 45px !important;
height: 65px !important;
}
.device-laptop {
width: 50px !important;
height: 40px !important;
}
}
/* ========================================
12. データストリームエフェクト
======================================== */
.data-stream {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
overflow: visible !important;
}
.data-particle {
width: 40px !important;
height: 3px !important;
background: linear-gradient(90deg, transparent, #00ff88, transparent) !important;
opacity: 0.8 !important;
}
/* ========================================
13. カウンターの配置改善
======================================== */
.query-counter {
position: absolute !important;
top: 30px !important;
right: 30px !important;
background: rgba(0, 0, 0, 0.9) !important;
border: 2px solid #00ff88 !important;
padding: 15px 25px !important;
font-size: 16px !important;
box-shadow:
0 0 30px rgba(0, 255, 136, 0.5),
inset 0 0 20px rgba(0, 255, 136, 0.1) !important;
}
/* ========================================
14. セクション間の接続線
======================================== */
.section-connector {
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100px;
background: linear-gradient(180deg, #00ff88, transparent);
opacity: 0.5;
}
/* ========================================
15. パフォーマンス最適化
======================================== */
/* 問題提示セクション */
.problem-intro {
padding:100px 0;
background:linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.problem-title {
font-size:2.2rem;
text-align:center;
margin-bottom:50px;
color:var(--text-dark);
font-weight:600;
}
.problem-card p {
font-size:1.1rem;
line-height:1.6;
color:var(--text-dark);
}
.solution-message {
text-align:center;
margin-top:60px;
font-size:1.4rem;
background:white;
padding:40px;
border-radius:30px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
max-width:800px;
margin-left:auto;
margin-right:auto;
}
.solution-message i {
color:#ffab00;
font-size:3rem;
display:block;
margin-bottom:20px;
}
.solution-message p {
color:var(--text-dark);
font-weight:500;
}
.text-danger {
color:#ff4081;
font-weight:700;
}
/* サジェスト重要性セクション */
.suggest-importance {
padding:100px 0;
background:white;
}
.importance-cards {
justify-content:center;
margin-bottom:60px;
flex-wrap:wrap;
}
.importance-card {
flex:1;
min-width:280px;
max-width:350px;
}
.importance-card::before {
border-radius:50%;
animation:pulse 4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform:scale(0.8);}
50% { transform:scale(1.2);}
}
.importance-card h3 {
font-weight:600;
}
.key-points {
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
margin-top:40px;
}
.key-point {
display:flex;
align-items:center;
background:#f0f8ff;
padding:20px;
border-radius:10px;
}
.key-point i {
font-size:2rem;
color:#ffc107;
margin-right:20px;
}
/* サジェスト関係性セクション */
.suggest-relation {
padding:100px 0;
background:linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.search-examples {
flex-wrap:wrap;
}
.example-box {
border:2px solid rgba(0,136,255,0.1);
}
.example-box h4 {
color:#0088ff;
margin-bottom:20px;
font-size:1.2rem;
}
.search-item {
background:linear-gradient(90deg, #f8f9fa 0%, #ffffff 100%);
padding:15px 25px;
margin:12px 0;
border-radius:10px;
display:flex;
align-items:center;
border:1px solid #e0e0e0;
transition:all 0.2s;
}
.search-item:hover {
background:white;
transform:translateX(5px);
box-shadow:0 3px 10px rgba(0,136,255,0.1);
}
.search-item i {
margin-right:15px;
color:#444;
font-size:1.1rem;
}
.suggest-benefit {
background:linear-gradient(135deg, #ffe082 0%, #ffca28 100%);
padding:50px;
text-align:center;
border-radius:25px;
margin:50px auto;
max-width:900px;
box-shadow:0 10px 30px rgba(255,193,7,0.2);
position:relative;
overflow:hidden;
}
.suggest-benefit::before {
content:'';
position:absolute;
top:-20px;
right:-20px;
width:100px;
height:100px;
background:rgba(255,255,255,0.3);
border-radius:50%;
}
.suggest-benefit p {
font-size:1.2rem;
line-height:1.8;
color:#5d4037;
font-weight:500;
position:relative;
z-index:1;
}
.suggest-benefits {
margin-top:60px;
}
.suggest-benefits h3 {
text-align:center;
font-size:1.8rem;
margin-bottom:40px;
color:#0088ff;
font-weight:600;
}
.benefit-cards {
grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
margin-top:40px;
}
.benefit-card {
background:var(--primary-gradient);
color:white;
padding:40px 30px;
text-align:center;
border-radius:20px;
box-shadow:0 10px 30px rgba(13,71,161,0.3);
transition:all 0.3s;
}
.benefit-card:hover {
transform:translateY(-5px);
box-shadow:0 15px 40px rgba(13,71,161,0.4);
}
.benefit-card h4 {
font-size:1.3rem;
font-weight:600;
line-height:1.4;
}
/* 指名検索セクション */
.shimei-search {
padding:80px 0;
}
.shimei-highlight {
font-size:1.3rem;
text-align:center;
color:var(--primary-dark);
font-weight:bold;
margin-bottom:40px;
}
.search-behavior {
display:flex;
justify-content:center;
align-items:center;
gap:40px;
margin:40px 0;
}
.speech-bubble {
border:2px solid #333;
}
.shimei-points {
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:30px;
margin-top:40px;
}
.point-box {
background:#e8f5e9;
padding:30px;
border-radius:10px;
text-align:center;
}
/* SEO対策比較セクション */
.seo-vs-suggest {
padding:80px 0;
background:var(--bg-light);
}
.seo-difficulty {
margin-top:40px;
}
.seo-difficulty h3 {
text-align:center;
background:#ddd;
padding:20px;
border-radius:10px;
margin-bottom:30px;
}
.difficulty-cards {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:30px;
}
.difficulty-card {
background:#666;
color:white;
padding:40px;
text-align:center;
border-radius:10px;
}
.key-message {
text-align:center;
margin-top:50px;
font-size:1.3rem;
}
/* 悪いサジェスト対策セクション */
.negative-suggest {
padding:80px 0;
}
.negative-suggest-content h3 {
text-align:center;
font-size:1.5rem;
margin-bottom:40px;
color:var(--primary-dark);
}
.suggest-transformation {
display:flex;
justify-content:center;
align-items:center;
gap:40px;
margin:40px 0;
}
.suggest-list p {
padding:5px 10px;
margin:5px 0;
}
/* パッケージタイトルセクション */
.package-title {
background:linear-gradient(135deg, #00d4ff 0%, #0088ff 100%);
padding:120px 0;
text-align:center;
color:white;
position:relative;
overflow:hidden;
}
.package-title::before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url('data:image/svg+xml,');
background-size:cover;
}
.package-subtitle {
font-size:1.6rem;
margin-bottom:20px;
font-weight:400;
position:relative;
z-index:1;
background:rgba(255,255,255,0.2);
display:inline-block;
padding:10px 30px;
border-radius:30px;
backdrop-filter:blur(10px);
}
.package-main-title {
font-size:3.5rem;
font-weight:900;
position:relative;
z-index:1;
text-shadow:0 5px 20px rgba(0,0,0,0.2);
}
.package-main-title .highlight {
display:block;
font-size:2.2rem;
margin-top:25px;
color:#ffeb3b;
font-weight:700;
position:relative;
}
.package-main-title .highlight::after {
content:'';
position:absolute;
bottom:-10px;
left:50%;
transform:translateX(-50%);
width:200px;
height:4px;
background:#ffeb3b;
border-radius:2px;
}
/* Google Playセクション */
.google-play-suggest {
padding:80px 0;
background:var(--bg-light);
}
.highlight-title {
text-align:center;
font-size:1.8rem;
color:var(--primary-dark);
margin-bottom:40px;
}
.play-benefits {
display:flex;
justify-content:center;
align-items:center;
gap:60px;
}
/* 比較表セクション */
.comparison-table {
padding:80px 0;
}
.comparison {
width:100%;
max-width:800px;
border-collapse:collapse;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.comparison th,
.comparison td {
padding:20px;
text-align:center;
border:1px solid #ddd;
}
.comparison th {
background:#7986cb;
color:white;
}
.comparison .row-header {
background:#7986cb;
color:white;
font-weight:bold;
}
/* おすすめワードセクション */
.recommended-words {
padding:80px 0;
background:var(--bg-light);
}
.word-category h4 {
text-align:center;
margin-bottom:20px;
color:#2e7d32;
}
.word-category ul {
list-style:none;
padding:0;
}
.word-category li {
padding:10px;
margin:5px 0;
}
/* 料金プランセクション */
.pricing-suggest,
.set-pricing-maintenance,
.set-pricing-improvement,
.set-pricing-special {
padding:80px 0;
}
.pricing-table table,
.plan-table table {
max-width:1000px;
margin:0 auto;
border-collapse:collapse;
}
.badge {
font-size:0.9rem;
margin-right:10px;
}
.note {
display:flex;
align-items:center;
background:#e3f2fd;
padding:20px;
margin-top:30px;
border-radius:10px;
}
.note i {
font-size:2rem;
color:#ffc107;
margin-right:20px;
}
/* 特別割引セクション */
.plan-table-special {
position:relative;
}
.special-offer {
position:relative;
}
/* 活用例セクション */
.plan-usage-example,
.plan-cost-example {
padding:80px 0;
background:var(--bg-light);
}
/* 費用例セクション */
.cost-breakdown {
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
max-width:1000px;
margin:0 auto;
}
.service-list,
.plan-price {
background:white;
border-radius:10px;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
/* CTAセクション */
.cta-section {
background:linear-gradient(135deg, #0088ff 0%, #00d4ff 100%);
padding:120px 0;
text-align:center;
color:white;
position:relative;
overflow:hidden;
}
.cta-section::before {
left:-50%;
animation:rotate 20s linear infinite;
}
@keyframes rotate {
from { transform:rotate(0deg);}
to { transform:rotate(360deg);}
}
.cta-buttons {
display:flex;
justify-content:center;
gap:30px;
}
.cta-button {
flex-direction:column;
align-items:center;
}
.cta-button i {
font-size:1.5rem;
margin-bottom:10px;
}
.button-subtitle {
display:block;
font-size:0.9rem;
font-weight:normal;
margin-top:5px;
}
/* クチコミ重要性セクション */
.kuchikomi-importance {
padding:100px 0;
background:linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}
.importance-item:hover {
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}
.importance-item h3 {
color:var(--primary);
font-size:1.3rem;
font-weight:600;
}
.kuchikomi-message i {
font-size:2.5rem;
color:#ffc107;
margin-bottom:15px;
display:block;
}
.kuchikomi-message p {
font-size:1.2rem;
color:var(--text-dark);
font-weight:500;
}
/* アニメーション */
.fade-in {
animation:fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity:0;
transform:translateY(30px);
}
to {
opacity:1;
transform:translateY(0);
}
}
/* テーブルレスポンシブ */
.table-responsive {
overflow-x:auto;
-webkit-overflow-scrolling:touch;
margin-bottom:20px;
}
.table-responsive table {
min-width:600px;
}
/* レスポンシブ対応 */
@media (max-width:768px) {
.package-main-title {
font-size:2rem;
}
.importance-card {
min-width:250px;
}
.card-number {
font-size:3rem;
width:60px;
height:60px;
}
.problem-card {
text-align:center;
}
.problem-card i {
text-align:center;
}
}
/* 逆SEO対策セクション */
.reverse-seo-section {
padding:100px 0;
background:linear-gradient(135deg, #f0f4f8 0%, #e1e9f0 100%);
}
.reverse-seo-intro {
max-width:1200px;
margin:0 auto;
}
.reverse-seo-definition {
background:white;
padding:50px;
border-radius:25px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
text-align:center;
margin-bottom:50px;
}
.reverse-seo-definition h3 {
font-size:1.8rem;
color:var(--primary-dark);
margin-bottom:20px;
}
.reverse-seo-definition i {
font-size:3rem;
color:#0088ff;
margin-bottom:20px;
display:block;
}
.reverse-seo-definition p {
font-size:1.2rem;
line-height:1.8;
color:var(--text-dark);
}
.reverse-seo-benefits {
background:white;
padding:60px;
border-radius:25px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}
.reverse-seo-benefits h3 {
text-align:center;
font-size:1.8rem;
color:var(--primary-dark);
margin-bottom:50px;
}
.benefit-flow {
display:flex;
justify-content:center;
align-items:center;
gap:30px;
flex-wrap:wrap;
}
.benefit-flow .benefit-item {
background:linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
padding:40px 30px;
border-radius:20px;
text-align:center;
flex:1;
min-width:250px;
max-width:300px;
position:relative;
transition:all 0.3s ease;
}
.benefit-flow .benefit-item:hover {
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(0,136,255,0.2);
}
.benefit-flow .icon-wrapper {
background:white;
width:80px;
height:80px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 20px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}
.benefit-flow .icon-wrapper i {
font-size:2.5rem;
color:var(--success);
}
.benefit-flow .benefit-item h4 {
font-size:1.2rem;
color:#2e7d32;
margin-bottom:15px;
font-weight:600;
}
.benefit-flow .benefit-item p {
font-size:1rem;
color:var(--text-dark);
line-height:1.6;
}
.benefit-flow .plus-icon,
.benefit-flow .equals-icon {
font-size:2.5rem;
color:#0088ff;
font-weight:bold;
display:flex;
align-items:center;
justify-content:center;
}
.benefit-flow .benefit-item.result {
background:linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
border:3px solid #ff9800;
}
.benefit-flow .benefit-item.result .icon-wrapper {
background:linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}
.benefit-flow .benefit-item.result .icon-wrapper i {
color:white;
}
.benefit-flow .benefit-item.result h4 {
color:#e65100;
}
.reverse-seo-cases {
margin-top:80px;
}
.reverse-seo-cases h3 {
text-align:center;
font-size:1.8rem;
color:var(--primary-dark);
margin-bottom:50px;
}
.case-cards {
grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
max-width:900px;
}
.case-card {
overflow:hidden;
transition:all 0.3s ease;
}
.case-card:hover {
transform:translateY(-5px);
box-shadow:0 15px 40px rgba(0,0,0,0.15);
}
.case-header {
background:linear-gradient(135deg, #0088ff 0%, #00d4ff 100%);
color:white;
padding:20px;
}
.case-content {
padding:30px;
}
.case-content p {
margin:15px 0;
font-size:1.1rem;
line-height:1.6;
}
.case-content .problem {
color:#d32f2f;
font-weight:500;
}
.case-content .solution {
color:var(--primary);
font-weight:500;
}
.case-content .result {
color:#388e3c;
font-weight:600;
font-size:1.2rem;
}
/* トータルブランディング効果セクション */
.total-branding-effect {
padding:100px 0;
background:white;
}
.branding-flow {
max-width:1200px;
margin:0 auto;
padding:50px 20px;
background:linear-gradient(135deg, #f8fbff 0%, #e6f3ff 100%);
border-radius:30px;
box-shadow:0 10px 40px rgba(0,136,255,0.1);
}
.top-services {
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:30px;
margin-bottom:40px;
}
.service-box {
padding:30px;
border-radius:50px;
text-align:center;
font-size:1.3rem;
font-weight:600;
color:white;
box-shadow:0 5px 20px rgba(0,0,0,0.2);
transition:all 0.3s ease;
}
.service-box:hover {
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(0,0,0,0.3);
}
.flow-arrow {
text-align:center;
margin:30px 0;
}
.arrow-icon {
font-size:3rem;
color:#00bcd4;
animation:bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform:translateY(0);
}
40% {
transform:translateY(-10px);
}
60% {
transform:translateY(-5px);
}
}
.bottom-effects {
grid-template-columns:repeat(3, 1fr);
}
.effect-box {
text-align:center;
position:relative;
overflow:hidden;
}
.effect-box::before {
content:'';
position:absolute;
top:-50%;
right:-50%;
width:200%;
height:200%;
background:rgba(255,255,255,0.1);
border-radius:50%;
animation:pulse 4s ease-in-out infinite;
}
.effect-box p {
position:relative;
z-index:1;
}
@media (max-width:768px) {
.top-services,
.bottom-effects {
grid-template-columns:1fr;
}
.service-box,
.effect-box {
font-size:1.1rem;
padding:25px;
}
}
/* ===== branded-search.css ===== */
/* 指名検索対策ページ専用スタイル */
/* Hero Section */
.suggest-hero {
background:linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color:white;
padding:120px 0 80px;
position:relative;
overflow:hidden;
}
.suggest-hero::before {
content:'';
position:absolute;
top:-50%;
right:-50%;
width:200%;
height:200%;
background:radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
animation:rotate 30s linear infinite;
}
@keyframes rotate {
0% { transform:rotate(0deg);}
100% { transform:rotate(360deg);}
}
.suggest-hero .hero-content {
position:relative;
z-index:1;
text-align:center;
}
.suggest-hero .page-title {
font-size:3rem;
font-weight:900;
margin-bottom:1rem;
animation:fadeInUp 0.8s ease-out;
}
.suggest-hero .subtitle {
display:block;
font-size:1.5rem;
font-weight:400;
margin-top:1rem;
opacity:0.9;
}
/* ブランド比較 */
.brand-comparison {
margin-top:3rem;
animation:fadeInUp 0.8s ease-out 0.3s both;
}
.brand-examples {
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}
.brand-example {
background:rgba(255,255,255,0.1);
border-radius:15px;
padding:2rem;
text-align:center;
transition:all 0.3s ease;
backdrop-filter:blur(10px);
}
.brand-example:hover {
transform:translateY(-5px);
background:rgba(255,255,255,0.2);
}
.brand-example .category {
font-size:0.9rem;
opacity:0.8;
margin-bottom:0.5rem;
}
.brand-example .brand-name {
font-size:1.8rem;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
gap:0.5rem;
}
.brand-message {
font-size:1.2rem;
line-height:1.8;
margin-top:3rem;
}
.brand-message .emphasis {
display:inline-block;
font-size:1.5rem;
font-weight:700;
color:#ffd700;
margin-top:1rem;
}
/* 重要性セクション */
.importance-section {
padding:80px 0;
background:var(--bg-light);
}
.flow-arrow {
font-size:2rem;
color:var(--text-light);
}
.search-result {
flex:1;
}
.search-box {
overflow:hidden;
}
.search-box input {
width:100%;
padding:15px 20px;
}
.suggest-list {
border-top:1px solid #eee;
}
.point-card h3 {
color:var(--text-dark);
line-height:1.8;
font-size:1.2rem;
}
/* SEOリスクセクション */
.seo-risk-section {
padding:80px 0;
background:#fff;
}
.risk-case-study {
margin-top:3rem;
}
.case-header {
text-align:center;
}
.case-header h3 {
font-size:1.5rem;
line-height:1.8;
color:var(--text-dark);
}
.case-visual {
display:flex;
flex-direction:column;
align-items:center;
gap:2rem;
}
.website-example {
background:var(--bg-light);
border:2px solid #ddd;
border-radius:10px;
overflow:hidden;
max-width:500px;
width:100%;
}
.case-site-header {
background:#333;
color:white;
padding:1rem;
text-align:center;
font-weight:bold;
}
.site-content {
padding:2rem;
text-align:center;
}
.result-arrow {
text-align:center;
}
.result-arrow i {
font-size:3rem;
color:var(--accent);
}
.result-text {
display:block;
margin-top:0.5rem;
font-size:1.2rem;
color:var(--accent);
}
.result-graph {
background:#ffebee;
padding:2rem;
border-radius:15px;
text-align:center;
max-width:600px;
width:100%;
}
.graph-visual {
margin-top:1rem;
position:relative;
height:100px;
}
.graph-line {
position:absolute;
top:20px;
left:50px;
right:50px;
height:2px;
background:var(--accent);
transform:rotate(15deg);
}
.rank-fall {
display:block;
font-size:1.5rem;
color:var(--accent);
font-weight:bold;
margin-top:2rem;
}
.final-result {
text-align:center;
margin-top:2rem;
}
.result-impact {
font-size:1.5rem;
color:var(--accent);
font-weight:bold;
margin-bottom:1rem;
}
.result-lesson {
font-size:1.2rem;
color:var(--text-light);
line-height:1.6;
}
.case-bottom {
margin-top:4rem;
text-align:center;
}
.case-bottom h3 {
font-size:1.3rem;
line-height:1.8;
color:var(--text-dark);
margin-bottom:2rem;
}
.name-search-visual {
display:flex;
align-items:center;
justify-content:center;
gap:2rem;
margin:2rem 0;
}
.thought-bubble {
color:var(--text-dark);
font-weight:500;
}
.thought-bubble::after {
bottom:-10px;
border-style:solid;
border-width:10px 10px 0 10px;
border-color:#ffd54f transparent transparent transparent;
}
.user-icon {
font-size:3rem;
color:var(--primary);
}
.arrow-to-search {
display:flex;
flex-direction:column;
align-items:center;
color:var(--primary);
}
.arrow-to-search i {
font-size:2rem;
}
.arrow-to-search span {
margin-top:0.5rem;
font-weight:500;
}
.name-search-benefit {
background:#e8f5e9;
padding:3rem;
border-radius:20px;
margin-top:3rem;
text-align:center;
}
.name-search-benefit h4 {
font-size:1.5rem;
color:#2e7d32;
margin-bottom:1rem;
}
.benefit-arrow {
font-size:2rem;
color:var(--success);
margin:1rem 0;
}
.benefit-result {
display:inline-block;
box-shadow:0 4px 20px rgba(0,0,0,0.1);
}
.benefit-result p {
font-size:1.3rem;
color:#2e7d32;
font-weight:bold;
margin-bottom:1rem;
}
.benefit-result i {
font-size:3rem;
color:#ffd700;
}
/* ブランド化メリット */
.branding-merit {
padding:80px 0;
background:var(--bg-light);
}
.price-comparison {
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
margin:3rem 0;
}
.without-brand,
.with-brand {
background:#fff;
padding:2rem;
border-radius:15px;
box-shadow:0 4px 20px rgba(0,0,0,0.1);
}
.without-brand h3 {
color:var(--accent);
margin-bottom:1.5rem;
}
.with-brand h3 {
color:var(--success);
margin-bottom:1.5rem;
}
.comparison-content p {
margin:1rem 0;
font-size:1.1rem;
line-height:1.6;
}
.brand-power-message {
background:#e3f2fd;
padding:2rem;
border-radius:15px;
text-align:center;
margin-top:3rem;
}
.brand-power-message i {
font-size:3rem;
color:var(--primary);
margin-bottom:1rem;
}
.brand-power-message p {
font-size:1.3rem;
line-height:1.8;
color:var(--primary-dark);
font-weight:500;
}
/* SEO限界セクション */
.seo-limitation {
padding:80px 0;
}
.solution-card .card-icon {
font-size:3rem;
color:var(--success);
margin-bottom:1rem;
}
.comparison-info h3 {
text-align:center;
margin-bottom:2rem;
}
.domain-rating-info h3 {
margin-bottom:2rem;
}
.suggest-solution h3 {
color:var(--primary);
font-size:2rem;
margin-bottom:1rem;
}
/* プロモーション効果 */
.promotion-effect {
padding:80px 0;
background:var(--bg-light);
}
.suggest-demo {
grid-template-columns:1fr 1fr;
align-items:center;
margin-top:3rem;
}
.search-demo-box {
background:white;
border-radius:25px;
box-shadow:0 6px 30px rgba(0,0,0,0.1);
overflow:hidden;
}
.search-demo-box input {
width:100%;
padding:15px 20px;
border:none;
font-size:1.1rem;
}
.suggest-dropdown {
max-height:400px;
overflow-y:auto;
}
.benefit-message {
text-align:center;
}
.speech-bubble {
color:var(--text-dark);
margin:1rem;
}
.speech-bubble::after {
border-style:solid;
border-width:10px 10px 0 10px;
border-color:#ffd54f transparent transparent transparent;
}
.benefit-result {
background:#e3f2fd;
padding:2rem;
border-radius:15px;
text-align:center;
font-size:1.2rem;
margin-top:2rem;
}
/* Google重要視 */
.google-importance {
padding:80px 0;
}
.google-quote {
background:var(--bg-light);
padding:3rem;
border-radius:20px;
box-shadow:0 6px 30px rgba(0,0,0,0.1);
text-align:center;
}
.google-quote blockquote {
font-size:1.3rem;
line-height:1.8;
color:var(--text-dark);
margin:2rem 0;
position:relative;
}
.google-quote blockquote::before {
content:'"';
font-size:4rem;
color:var(--primary);
position:absolute;
top:-20px;
left:-20px;
opacity:0.3;
}
.google-quote cite {
display:block;
font-size:1rem;
color:var(--text-light);
margin-top:2rem;
}
/* CTA */
.suggest-cta {
padding:100px 0;
background:linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color:white;
text-align:center;
}
.suggest-cta .cta-title {
font-size:2.5rem;
margin-bottom:2rem;
}
.suggest-cta .cta-message {
font-size:1.3rem;
line-height:1.8;
margin-bottom:3rem;
}
/* レスポンシブ */
@media (max-width:768px) {
.suggest-hero .page-title {
font-size:2rem;
}
.brand-examples {
grid-template-columns:repeat(2, 1fr);
gap:1rem;
}
.suggest-demo {
grid-template-columns:1fr;
}
.price-comparison {
grid-template-columns:1fr;
}
.name-search-visual {
flex-direction:column;
}
}
/* ===== price.css ===== */
/* ===================================
料金ページ専用スタイル
モダンでわかりやすいデザイン
全画面幅対応
=================================== */
/* ベース設定 - レスポンシブ対応 */
.pricing-page {
background: #f8f9fa;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.pricing-section {
padding: 60px 0;
flex: 1;
display: flex;
flex-direction: column;
}
/* ページタイトル - コンパクト化 */
.page-title {
font-size: clamp(1.8rem, 4vw, 2.5rem);
text-align: center;
color: #1a1a1a;
margin-bottom: 10px;
font-weight: 800;
letter-spacing: -0.02em;
}
/* ナビゲーションタブ - コンパクト化 */
.pricing-nav-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 30px;
background: white;
padding: 15px;
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
position: sticky;
top: 80px;
z-index: 100;
}
.nav-tab {
padding: 12px 24px;
background: #f5f5f5;
border-radius: 30px;
text-decoration: none;
color: #666;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
white-space: nowrap;
}
.nav-tab:hover {
background: #e8f4ff;
color: #1976D2;
transform: translateY(-2px);
}
/* セクション共通スタイル */
.pricing-section-item {
background: white;
border-radius: 20px;
padding: 40px 30px;
margin-bottom: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.pricing-section-item h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
color: #1a1a1a;
margin-bottom: 15px;
text-align: center;
font-weight: 700;
}
.section-desc {
text-align: center;
color: #666;
font-size: 1rem;
margin-bottom: 25px;
}
/* 重要なお知らせ */
.important-notice {
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
padding: 20px 25px;
border-radius: 15px;
text-align: center;
margin-bottom: 25px;
border-left: 5px solid #ff9800;
font-size: 1rem;
line-height: 1.6;
}
.important-notice i {
color: #ff6f00;
margin-right: 10px;
font-size: 1.3rem;
}
.important-notice .highlight {
color: #e65100;
font-weight: 700;
font-size: 1.3rem;
}
/* サービスフロー図 */
.service-flow-diagram {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
padding: 60px 40px;
border-radius: 25px;
margin: 50px 0;
}
.flow-title {
font-size: clamp(1.5rem, 3vw, 2.2rem);
color: #0d47a1;
text-align: center;
margin-bottom: 50px;
font-weight: 700;
}
.flow-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.flow-step-item {
background: white;
padding: 30px 20px;
border-radius: 20px;
text-align: center;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.flow-step-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.step-number {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 45px;
height: 45px;
background: #1976D2;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
font-weight: 700;
box-shadow: 0 4px 15px rgba(25, 118, 210, 0.4);
}
.step-icon {
font-size: 3rem;
color: #1976D2;
margin-bottom: 20px;
}
.step-content h4 {
font-size: 1.3rem;
color: #1a1a1a;
margin-bottom: 10px;
font-weight: 700;
}
.step-content p {
color: #666;
font-size: 0.95rem;
line-height: 1.6;
}
/* フロー矢印（デスクトップのみ） */
@media (min-width: 769px) {
.flow-steps {
display: flex;
align-items: center;
gap: 20px;
}
.flow-arrow {
flex: 0 0 auto;
font-size: 2rem;
color: #1976D2;
opacity: 0.5;
}
}
/* サービスカテゴリー */
.service-categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin: 50px 0;
}
.service-category {
background: #f8f9fa;
padding: 40px 30px;
border-radius: 20px;
position: relative;
overflow: hidden;
}
.main-services {
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}
.sub-services {
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}
.service-category h3 {
font-size: 1.8rem;
color: #1a1a1a;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 15px;
}
.service-category h3 i {
font-size: 1.5rem;
}
.main-services h3 i {
color: #2e7d32;
}
.sub-services h3 i {
color: #f57c00;
}
/* サービスカードグリッド */
.service-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.service-card {
text-align: center;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #1976D2, #42a5f5);
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.service-card:hover::before {
transform: translateX(0);
}
.service-card i {
font-size: 2.5rem;
color: #1976D2;
margin-bottom: 20px;
}
.service-card h4 {
font-size: 1.3rem;
color: #1a1a1a;
margin-bottom: 10px;
font-weight: 700;
}
.service-card p {
font-size: 0.95rem;
margin-bottom: 10px;
}
.service-detail {
color: #999;
font-size: 0.85rem;
font-style: italic;
}
/* 料金グリッド（シンプル版） */
.pricing-grid-simple {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin: 40px 0;
}
.price-card {
background: white;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
position: relative;
border: 2px solid #e0e0e0;
transition: all 0.3s ease;
}
.price-card:hover {
border-color: #1976D2;
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(25, 118, 210, 0.15);
}
.price-card h3 {
font-size: 1.5rem;
color: #1a1a1a;
margin-bottom: 20px;
font-weight: 700;
}
.price-amount {
font-size: 2.5rem;
color: #1976D2;
font-weight: 800;
margin-bottom: 10px;
line-height: 1.2;
}
.price-amount span {
font-size: 1rem;
color: #666;
font-weight: 400;
}
.price-monthly {
font-size: 1rem;
color: #666;
margin-bottom: 15px;
}
.price-timeline {
font-size: 0.95rem;
color: #999;
padding: 10px 0;
border-top: 1px solid #e0e0e0;
margin-top: 20px;
}
.price-badge {
position: absolute;
top: -15px;
right: 20px;
background: #ff4757;
color: white;
padding: 8px 20px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3);
}
/* 料金テーブル */
.table-responsive {
overflow-x: auto;
margin: 30px 0;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.price-table {
width: 100%;
min-width: 600px;
background: white;
border-collapse: collapse;
}
.price-table thead {
background: linear-gradient(135deg, #1976D2, #1565c0);
color: white;
}
.price-table th {
padding: 20px;
text-align: left;
font-weight: 600;
font-size: 1.1rem;
letter-spacing: 0.5px;
}
.price-table td {
padding: 20px;
border-bottom: 1px solid #f0f0f0;
font-size: 1rem;
}
.price-table tbody tr:hover {
background: #f8f9fa;
}
.price-table tbody tr:last-child td {
border-bottom: none;
}
/* 重要な注意ボックス */
.important-notice-box {
background: linear-gradient(135deg, #ffebee, #ffcdd2);
padding: 30px;
border-radius: 15px;
margin: 40px 0;
border-left: 5px solid #f44336;
display: flex;
align-items: center;
gap: 20px;
}
.important-notice-box i {
font-size: 2rem;
color: #d32f2f;
flex-shrink: 0;
}
.important-notice-box p {
margin: 0;
color: #b71c1c;
font-size: 1.05rem;
line-height: 1.8;
}
/* レビュー価格グリッド */
.review-price-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin: 40px 0;
}
.review-price-card {
background: linear-gradient(135deg, #fff, #f8f9fa);
padding: 35px 25px;
border-radius: 20px;
text-align: center;
border: 2px solid #e8e8e8;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.review-price-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background: linear-gradient(135deg, rgba(25, 118, 210, 0.1), rgba(25, 118, 210, 0));
opacity: 0;
transition: opacity 0.3s ease;
}
.review-price-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
border-color: #1976D2;
}
.review-price-card:hover::before {
opacity: 1;
}
.review-price-card > i {
font-size: 3rem;
color: #1976D2;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.review-price-card h3 {
font-size: 1.4rem;
color: #1a1a1a;
margin-bottom: 20px;
font-weight: 700;
position: relative;
z-index: 1;
}
.review-features {
text-align: left;
position: relative;
z-index: 1;
}
.feature-item {
margin-bottom: 12px;
color: #666;
font-size: 0.95rem;
}
.feature-item i {
color: #4caf50;
}
/* セットプラングリッド */
.set-plan-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
margin: 50px 0;
}
.set-plan-card {
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
.set-plan-card:hover {
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.set-plan-card.recommended:hover {
transform: scale(1.02) translateY(-5px);
}
.plan-badge {
z-index: 1;
}
@keyframes badge-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.plan-subtitle {
color: #666;
font-size: 0.95rem;
padding: 0 30px 10px;
margin: -10px 0 0;
}
.plan-contents {
padding: 0 30px 20px;
}
.plan-contents h4 {
font-size: 1.1rem;
color: #333;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.service-list {
list-style: none;
padding: 0;
}
.service-list li {
padding: 8px 0;
position: relative;
padding-left: 25px;
color: #555;
font-size: 0.95rem;
}
.service-list li i {
position: absolute;
left: 0;
color: #4caf50;
top: 10px;
}
.price-note {
background: #f8f9fa;
padding: 15px 30px;
border-top: 1px solid #eee;
font-size: 0.9rem;
color: #666;
}
.price-note strong {
color: #ff6b6b;
}
.recommend-label {
position: absolute;
top: 20px;
right: 20px;
background: #ff6f00;
color: white;
padding: 8px 20px;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
box-shadow: 0 4px 15px rgba(255, 111, 0, 0.3);
}
.set-plan-card h3 {
font-size: 1.8rem;
color: #1a1a1a;
padding: 30px 30px 20px;
font-weight: 700;
}
.plan-description {
padding: 0 30px 20px;
font-size: 1.05rem;
}
.set-plan-price {
font-size: 2.2rem;
color: #1976D2;
font-weight: 800;
text-align: center;
padding: 20px;
background: #f8f9fa;
margin: 20px 0;
}
.plan-benefits {
padding: 30px;
}
.plan-benefits h5 {
font-size: 1.2rem;
color: #1a1a1a;
margin-bottom: 20px;
font-weight: 600;
}
.plan-benefits ul {
list-style: none;
padding: 0;
}
.plan-benefits li {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
color: #666;
font-size: 1rem;
}
.plan-benefits li i {
color: #4caf50;
font-size: 1.2rem;
}
/* 特別オファーボックス */
.special-offer-box {
background: linear-gradient(135deg, #fff9c4, #fff59d);
padding: 30px;
margin: 20px 30px;
border-radius: 15px;
text-align: center;
border: 2px dashed #f9a825;
}
.offer-label {
display: inline-block;
background: #f57c00;
color: white;
padding: 5px 15px;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 15px;
}
/* CTA セクション */
.line-cta-section {
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
padding: 80px 40px;
border-radius: 25px;
text-align: center;
margin: 50px 0;
}
.line-cta-content h3 {
font-size: clamp(1.5rem, 3vw, 2.2rem);
color: #0d47a1;
margin-bottom: 25px;
font-weight: 700;
}
.line-cta-content p {
font-size: 1.15rem;
color: #1565c0;
line-height: 1.8;
margin-bottom: 40px;
}
.line-cta-content a {
display: inline-block;
background: #00B900;
color: white;
padding: 20px 50px;
border-radius: 50px;
text-decoration: none;
font-size: 1.2rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 20px rgba(0, 185, 0, 0.3);
}
.line-cta-content a:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 185, 0, 0.4);
}
/* モバイル対応 */
@media (max-width: 1024px) {
.pricing-section {
padding: 60px 0 80px;
}
.pricing-section-item {
padding: 40px 30px;
}
.service-flow-diagram {
padding: 40px 20px;
}
}
@media (max-width: 768px) {
.container {
padding: 0 15px;
}
.pricing-nav-tabs {
padding: 15px;
gap: 8px;
top: 60px;
}
.pricing-section-item {
padding: 30px 20px;
margin-bottom: 20px;
}
.pricing-section-item h2 {
font-size: 1.8rem;
}
.service-categories {
grid-template-columns: 1fr;
gap: 20px;
}
.service-cards-grid {
grid-template-columns: 1fr;
}
.pricing-grid-simple {
grid-template-columns: 1fr;
gap: 20px;
}
.set-plan-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.price-table {
font-size: 0.9rem;
}
.price-table th,
.price-table td {
padding: 15px 10px;
}
}
@media (max-width: 480px) {
.section-subtitle {
font-size: 1.1rem;
margin-bottom: 40px;
}
.pricing-nav-tabs {
padding: 10px;
gap: 5px;
}
.nav-tab {
padding: 8px 15px;
font-size: 0.8rem;
}
.pricing-section-item {
padding: 25px 15px;
}
.service-flow-diagram {
padding: 30px 15px;
}
.flow-step-item {
padding: 20px 15px;
}
.step-icon {
font-size: 2.5rem;
}
.service-card {
padding: 25px 15px;
}
.price-card {
padding: 30px 20px;
}
.price-amount {
font-size: 2rem;
}
.set-plan-card h3 {
font-size: 1.5rem;
padding: 20px 20px 15px;
}
.plan-description {
padding: 0 20px 15px;
font-size: 0.95rem;
}
.set-plan-price {
font-size: 1.8rem;
}
}
/* アニメーション */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.pricing-section-item {
animation: fadeInUp 0.6s ease-out;
}
/* スクロールバー デザイン */
.table-responsive::-webkit-scrollbar {
height: 8px;
}
.table-responsive::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.table-responsive::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* 新しいセットプランデザイン */
.achievement-badge {
display: inline-flex;
align-items: baseline;
gap: 10px;
background: linear-gradient(135deg, #1976D2, #1565c0);
color: white;
padding: 15px 30px;
border-radius: 50px;
margin: 20px auto;
box-shadow: 0 5px 20px rgba(25, 118, 210, 0.3);
}
.achievement-number {
font-size: 2.5rem;
font-weight: 800;
}
.achievement-text {
font-size: 1rem;
font-weight: 500;
}
.feature-highlight-item:hover {
background: #e3f2fd;
transform: translateY(-5px);
}
.feature-highlight-item i {
font-size: 2rem;
color: #1976D2;
margin-bottom: 10px;
}
.feature-highlight-item h4 {
font-size: 1.1rem;
color: #1a1a1a;
margin-bottom: 5px;
font-weight: 700;
}
.feature-highlight-item p {
font-size: 0.85rem;
color: #666;
margin: 0;
}
/* Before/After変換例 */
.transformation-example {
background: #f8f9fa;
padding: 30px;
border-radius: 20px;
margin: 30px 0;
}
.transformation-example h4 {
text-align: center;
font-size: 1.3rem;
color: #1a1a1a;
margin-bottom: 30px;
font-weight: 600;
}
.before-after-container {
display: flex;
align-items: center;
justify-content: space-around;
gap: 30px;
flex-wrap: wrap;
}
.before-state,
.after-state {
flex: 1;
min-width: 200px;
}
.state-label {
font-size: 0.9rem;
font-weight: 600;
padding: 5px 20px;
border-radius: 20px;
text-align: center;
margin-bottom: 15px;
}
.search-preview {
background: white;
border: 2px solid #e0e0e0;
border-radius: 15px;
padding: 20px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.search-query {
display: block;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #e0e0e0;
}
.search-preview ul {
list-style: none;
padding: 0;
margin: 0;
}
.search-preview li {
padding: 8px 0;
color: #666;
display: flex;
align-items: center;
gap: 10px;
}
.search-preview li::before {
content: '🔍';
font-size: 0.9rem;
}
.search-preview.negative li {
color: #d32f2f;
}
.search-preview.positive li {
color: #388e3c;
}
.transformation-arrow {
font-size: 2rem;
color: #1976D2;
flex: 0 0 auto;
}
/* プラン構成表示 */
.plan-composition {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin: 30px 0;
flex-wrap: wrap;
}
.composition-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px;
background: #f8f9fa;
border-radius: 15px;
min-width: 120px;
transition: all 0.3s ease;
}
.composition-item:hover {
background: #e3f2fd;
transform: translateY(-3px);
}
.composition-item i {
font-size: 2rem;
color: #1976D2;
}
.composition-item.highlight i {
color: #f57c00;
}
.composition-item span {
font-size: 0.9rem;
color: #666;
font-weight: 600;
}
.composition-plus {
font-size: 1.5rem;
color: #666;
font-weight: 300;
}
/* 特別オファーボックス改善 */
.offer-header {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 15px;
}
.offer-header i {
font-size: 1.5rem;
color: #f57c00;
}
.special-offer-box .discount-amount {
display: flex;
align-items: baseline;
justify-content: center;
gap: 5px;
}
.special-offer-box .discount-amount span {
font-size: 1.2rem;
font-weight: 400;
}
/* セットプランノート */
.set-plan-note {
text-align: center;
margin-top: 40px;
padding: 20px;
background: #e3f2fd;
border-radius: 15px;
}
.set-plan-note i {
color: #1976D2;
margin-right: 10px;
}
/* お問い合わせセクション */
.contact-main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
margin-top: 40px;
}
.contact-flow {
background: #f8f9fa;
padding: 40px;
border-radius: 20px;
}
.contact-flow h3 {
font-size: 1.5rem;
color: #1a1a1a;
margin-bottom: 30px;
text-align: center;
font-weight: 700;
}
.contact-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
}
.contact-step {
text-align: center;
position: relative;
padding: 20px;
}
.step-num {
width: 50px;
height: 50px;
background: #1976D2;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
margin: 0 auto 15px;
box-shadow: 0 4px 15px rgba(25, 118, 210, 0.3);
}
.contact-step h4 {
font-size: 1.1rem;
color: #1a1a1a;
margin-bottom: 10px;
font-weight: 600;
}
.contact-step p {
font-size: 0.9rem;
color: #666;
margin: 0;
}
/* LINE連絡ボックス */
.line-contact-box {
background: linear-gradient(135deg, #00B900, #00a000);
padding: 50px 40px;
border-radius: 20px;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.line-contact-box::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.1); opacity: 0.3; }
}
.contact-header {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.contact-header i {
font-size: 3rem;
}
.contact-header h3 {
font-size: 1.8rem;
font-weight: 700;
margin: 0;
}
.contact-desc {
font-size: 1.1rem;
margin-bottom: 30px;
line-height: 1.8;
position: relative;
z-index: 1;
}
.line-button {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 10px;
background: white;
color: #00B900;
padding: 20px 60px;
border-radius: 50px;
text-decoration: none;
font-size: 1.3rem;
font-weight: 700;
transition: all 0.3s ease;
position: relative;
z-index: 1;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.line-button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.line-button i {
font-size: 2rem;
}
.line-button span {
font-size: 0.9rem;
font-weight: 400;
opacity: 0.9;
}
.contact-features {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 40px;
position: relative;
z-index: 1;
}
.contact-features .feature {
display: flex;
align-items: center;
gap: 8px;
font-size: 1rem;
}
.contact-features i {
font-size: 1.2rem;
}
/* モバイル対応追加 */
@media (max-width: 768px) {
.before-after-container {
flex-direction: column;
}
.transformation-arrow {
transform: rotate(90deg);
}
.plan-composition {
flex-direction: column;
}
.composition-plus {
transform: rotate(90deg);
}
.contact-main {
grid-template-columns: 1fr;
}
.contact-steps {
grid-template-columns: 1fr;
}
.contact-features {
flex-direction: column;
gap: 15px;
}
.line-contact-box {
padding: 40px 20px;
}
.line-button {
padding: 15px 40px;
font-size: 1.1rem;
}
}
/* 効果判定セクションのスタイル */
/* 地域差の視覚化 */
.regional-visualization {
margin-top: 30px;
}
.map-legend h4 {
text-align: center;
font-size: 1.3rem;
color: #1a1a1a;
margin-bottom: 30px;
}
.platform-label i {
font-size: 1.5rem;
}
.platform-label span {
font-size: 1.2rem;
font-weight: 600;
}
.epicenter i {
font-size: 2rem;
color: #f44336;
}
@keyframes wave-expand {
0% {
width: 40px;
height: 40px;
opacity: 1;
}
100% {
width: 180px;
height: 180px;
opacity: 0;
}
}
.instant-coverage i {
font-size: 3rem;
color: #1976D2;
}
.instant-coverage span {
font-size: 1.5rem;
font-weight: 700;
color: #0d47a1;
}
.tip-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.tip-card i {
font-size: 2.5rem;
margin-bottom: 15px;
}
.tip-card.popular i {
color: #f44336;
}
.tip-card.niche i {
color: #4caf50;
}
.tip-card h4 {
font-size: 1.2rem;
color: #1a1a1a;
margin-bottom: 10px;
}
.tip-card p {
font-size: 0.95rem;
color: #666;
line-height: 1.6;
}
/* サジェストワードの種類 */
.suggest-types-visual {
margin-top: 30px;
}
.search-bar-demo i {
color: #666;
font-size: 1.2rem;
}
.search-bar-demo input {
flex: 1;
border: none;
outline: none;
font-size: 1.1rem;
background: transparent;
}
.suggest-dropdown {
padding: 10px 0;
}
.suggest-item-demo:hover {
background: #f5f5f5;
}
.suggest-item-demo i {
color: #666;
font-size: 0.9rem;
}
.related-keywords-demo h5 {
font-size: 1rem;
color: #f57c00;
margin-bottom: 10px;
}
.platform-suggest-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.platform-icon {
width: 60px;
height: 60px;
margin: 0 auto 15px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
.platform-suggest-card h4 {
font-size: 1.2rem;
margin-bottom: 15px;
color: #1a1a1a;
}
.suggest-note-box i {
font-size: 1.5rem;
color: #1976D2;
}
/* スペースの視覚化 */
.space-visual-explanation {
margin-top: 30px;
}
.space-comparison-visual h4 {
text-align: center;
font-size: 1.3rem;
color: #1a1a1a;
margin-bottom: 30px;
}
.company-label i {
color: #ffc107;
}
.pricing-card h4 {
font-size: 1.2rem;
color: #1a1a1a;
margin-bottom: 20px;
}
.feature-item {
display: flex;
align-items: center;
gap: 10px;
}
.feature-item i {
font-size: 1.2rem;
}
.feature-item.highlight i {
color: #ff9800;
}
.feature-item.negative i {
color: #f44336;
}
.space-important-note i {
font-size: 1.5rem;
color: #d32f2f;
}
/* Google状況の視覚化 */
.google-situation-visual {
margin-top: 30px;
}
.deletion-rate-chart {
background: white;
padding: 40px;
border-radius: 20px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
margin-bottom: 30px;
}
.deletion-rate-chart h4 {
font-size: 1.3rem;
color: #1a1a1a;
margin-bottom: 30px;
}
.rate-display {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
flex-wrap: wrap;
}
.rate-circle {
position: relative;
width: 150px;
height: 150px;
}
.rate-circle svg {
width: 100%;
height: 100%;
}
.rate-number {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: baseline;
gap: 5px;
}
.rate-value {
font-size: 3rem;
font-weight: 700;
color: #f44336;
}
.rate-unit {
font-size: 1.5rem;
color: #666;
}
.rate-description {
text-align: left;
}
.rate-label {
font-size: 1.2rem;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 10px;
}
.rate-note {
font-size: 1rem;
color: #666;
line-height: 1.6;
}
.solution-proposal {
margin-top: 40px;
}
.solution-proposal h4 {
text-align: center;
font-size: 1.3rem;
color: #1a1a1a;
margin-bottom: 30px;
}
.solution-comparison {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.solution-card {
border-radius: 15px;
text-align: center;
min-width: 250px;
position: relative;
}
.method-label {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: #666;
color: white;
padding: 5px 20px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
.method-icon {
font-size: 3rem;
margin: 20px 0;
}
.method-icon i {
color: #f44336;
}
.method-icon.success i {
color: #4caf50;
}
.solution-card h5 {
font-size: 1.3rem;
color: #1a1a1a;
margin-bottom: 15px;
}
.price-tag {
font-size: 1.5rem;
font-weight: 700;
color: #1976D2;
margin-bottom: 15px;
}
.method-desc {
font-size: 0.95rem;
color: #666;
line-height: 1.6;
}
.method-features {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.method-features li {
padding: 5px 0;
color: #666;
font-size: 0.95rem;
}
.method-features li::before {
content: '✓ ';
color: #4caf50;
font-weight: 700;
}
.google-notice-summary {
background: #e3f2fd;
padding: 20px;
border-radius: 15px;
display: flex;
align-items: center;
gap: 15px;
margin-top: 30px;
}
.google-notice-summary i {
font-size: 1.5rem;
color: #1976D2;
}
/* 成果取得タイミング */
.timing-visual-explanation {
margin-top: 30px;
}
.daily-timeline h4 {
text-align: center;
font-size: 1.3rem;
color: #1a1a1a;
margin-bottom: 30px;
}
.check-icon {
width: 40px;
height: 40px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
.check-info .status {
font-size: 0.85rem;
color: #666;
}
.check-info .result {
font-size: 0.85rem;
font-weight: 600;
margin-top: 5px;
}
.explanation-item i {
font-size: 1.5rem;
color: #1976D2;
}
.explanation-item.important i {
color: #f44336;
}
.achievement-examples h4 {
text-align: center;
font-size: 1.3rem;
color: #1a1a1a;
margin-bottom: 30px;
}
.case-card {
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
background: linear-gradient(0deg, #fff 65%, #2980b9 66%, #2980b9 100%);
}
.case-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.case-header i {
font-size: 1.5rem;
}
.case-card.billing .case-header i {
color: #4caf50;
}
.case-card.no-billing .case-header i {
color: #f44336;
}
.case-header span {
font-size: 1.2rem;
font-weight: 600;
}
.point {
text-align: center;
}
.point .time {
display: block;
font-size: 0.9rem;
color: #666;
margin-bottom: 5px;
}
.point .status {
display: inline-block;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
/* 印刷対応 */
@media print {
.pricing-section-item {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
}
/* ===== pricing.css ===== */
/* 料金ページ専用スタイル */
/* Header Section */
.pricing-header {
background:linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color:#fff;
padding:80px 0 60px;
text-align:center;
}
.header-content {
max-width:800px;
margin:0 auto;
}
.page-subtitle {
font-weight:400;
}
/* Service Overview Section */
.service-overview {
padding:80px 0;
background:#f8f9fa;
}
.highlight {
color:#e74c3c;
font-weight:700;
}
.notice-text i {
color:#f39c12;
margin-right:10px;
}
/* Supplementary Services Section */
.supplementary-services {
padding:80px 0;
background:#fff;
}
.service-card {
background:#f8f9fa;
border-radius:10px;
padding:40px 30px;
transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}
.service-icon {
font-size:3rem;
color:#3498db;
margin-bottom:20px;
}
.service-card h3 {
font-size:1.3rem;
color:#2c3e50;
margin-bottom:20px;
}
.service-card p {
color:#555;
line-height:1.7;
}
.service-card ul {
list-style:none;
padding:0;
}
.service-card ul li {
padding:8px 0;
padding-left:25px;
position:relative;
}
.service-card ul li:before {
content:"✓";
position:absolute;
left:0;
color:#27ae60;
font-weight:bold;
}
.note {
color:#7f8c8d;
font-style:italic;
}
.survey-options p,
.distribution-options p {
margin:10px 0;
padding:10px;
background:#ecf0f1;
border-radius:5px;
}
.implementation-methods h3 {
font-size:1.5rem;
color:#2c3e50;
margin-bottom:20px;
}
.implementation-methods ul {
list-style:none;
padding:0;
}
.implementation-methods ul li {
padding:10px 0;
font-size:1.1rem;
}
/* Pricing Tables */
.pricing-plans {
padding:80px 0;
background:#f8f9fa;
}
.pricing-table {
margin:40px 0;
overflow-x:auto;
}
.pricing-table table {
width:100%;
background:#fff;
border-radius:10px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
}
.pricing-table td {
text-align:center;
border-bottom:1px solid #ecf0f1;
}
.pricing-table tr:hover {
background:#f8f9fa;
}
.note-highlight i {
color:#f39c12;
margin-right:10px;
}
/* Set Plans Section */
.set-plans {
padding:80px 0;
background:#fff;
}
.set-plan-card {
background:#f8f9fa;
border-radius:15px;
padding:40px;
position:relative;
transition:transform 0.3s ease;
}
.set-plan-card:hover {
transform:translateY(-5px);
}
.plan-name {
color:#2c3e50;
text-align:center;
}
.plan-description {
text-align:center;
line-height:1.8;
color:#555;
}
.surprised-character p {
margin:0;
font-weight:bold;
color:#333;
}
/* Set Pricing Tables */
.set-pricing-table {
margin:40px 0;
}
.set-pricing-table h3 {
font-size:1.3rem;
color:#2c3e50;
margin-bottom:20px;
}
.special-offer {
background:#e74c3c;
color:#fff;
padding:3px 10px;
border-radius:15px;
font-size:0.9rem;
margin-right:10px;
}
/* Special Discount Box */
.special-discount {
background:#ffd700;
border-radius:15px;
padding:30px;
text-align:center;
margin-top:30px;
position:relative;
}
.special-discount h4 {
font-size:2rem;
color:#e74c3c;
margin-bottom:20px;
font-weight:900;
}
.discount-amount {
font-size:2.5rem;
color:#e74c3c;
font-weight:900;
display:block;
margin:20px 0;
}
/* Important Notes Section */
.important-notes {
padding:80px 0;
background:#f8f9fa;
}
.note-card h3 {
font-size:1.5rem;
color:#2c3e50;
margin-bottom:30px;
padding-bottom:20px;
border-bottom:2px solid #ecf0f1;
}
.engine-item h4 {
color:#2c3e50;
margin-bottom:15px;
}
.device-difference,
.space-difference,
.timing-example,
.region-comparison {
margin-top:30px;
padding:20px;
background:#f8f9fa;
border-radius:10px;
}
.search-example {
max-width:400px;
margin:20px auto;
}
.search-box {
align-items:center;
margin-bottom:10px;
}
.search-box input {
border:none;
outline:none;
flex:1;
font-size:1rem;
}
.suggest-results {
background:#fff;
border:1px solid #ddd;
border-radius:10px;
padding:15px;
}
.suggest-results p {
margin:5px 0;
padding:5px 10px;
}
.result-comparison {
display:flex;
align-items:center;
justify-content:center;
gap:30px;
margin:30px 0;
}
.result-box {
border:2px solid #3498db;
}
.arrow {
font-size:2rem;
color:#3498db;
}
/* CTA Section */
.pricing-cta {
background:linear-gradient(135deg, #3498db 0%, #2980b9 100%);
padding:80px 0;
text-align:center;
color:#fff;
}
.cta-content h2 {
font-size:2.5rem;
margin-bottom:20px;
}
.cta-content p {
font-size:1.3rem;
margin-bottom:40px;
opacity:0.9;
}
/* Footer */
.site-footer {
background:#2c3e50;
color:#fff;
padding:30px 0;
text-align:center;
}
/* Responsive */
@media (max-width:768px) {
.pricing-table {
overflow-x:scroll;
}
.pricing-table table {
min-width:600px;
}
.result-comparison {
flex-direction:column;
}
}
/* ===== subsidy.css ===== */
/* 補助金ページ専用スタイル */
/* ページヒーロー */
.subsidy-hero {
background:linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
padding:120px 0 80px;
margin-top:70px;
color:white;
text-align:center;
position:relative;
overflow:hidden;
}
.subsidy-hero::before {
content:'';
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation:rotate 30s linear infinite;
}
@keyframes rotate {
from { transform:rotate(0deg);}
to { transform:rotate(360deg);}
}
.page-title {
font-weight:900;
letter-spacing:0.05em;
}
.hero-message {
background:rgba(255,255,255,0.15);
backdrop-filter:blur(10px);
padding:40px 50px;
border-radius:20px;
display:inline-block;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
border:1px solid rgba(255,255,255,0.2);
}
.highlight-text {
color:#ffffff;
line-height:1.5;
}
.sub-text {
font-weight:500;
}
/* 課題セクション */
.problem-section {
padding:100px 0;
background:#f8f9fa;
}
.problem-cards {
margin-bottom:60px;
margin-left:auto;
margin-right:auto;
}
.problem-card {
border:2px solid transparent;
}
.problem-card:hover {
border-color:#1976d2;
}
.problem-card i {
display:block;
}
.problem-card h3 {
font-weight:700;
line-height:1.5;
}
.solution-arrow {
animation:bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform:translateY(0);
}
40% {
transform:translateY(-20px);
}
60% {
transform:translateY(-10px);
}
}
.solution-box {
box-shadow:0 10px 40px rgba(25, 118, 210, 0.3);
}
.solution-box h3 {
font-weight:700;
}
.solution-box p {
font-size:1.3rem;
opacity:0.95;
}
/* サービスと効果 */
.service-effect {
padding:100px 0;
background:white;
}
.service-flow {
max-width:1000px;
margin:0 auto;
}
.service-column,
.effect-column {
text-align:center;
flex:1;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
}
.service-column h3,
.effect-column h3 {
background:#00bcd4;
padding:15px 30px;
border-radius:30px;
font-size:1.5rem;
font-weight:700;
}
.service-items,
.effect-items {
flex-direction:column;
}
.service-item {
font-size:1.3rem;
justify-content:center;
background:white;
padding:20px;
border-radius:15px;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
}
.service-item i {
font-size:1.5rem;
}
.effect-item {
color:white;
font-weight:600;
font-size:1.2rem;
box-shadow:0 5px 15px rgba(33, 150, 243, 0.3);
}
.arrow-right {
animation:slideRight 2s ease-in-out infinite;
}
@keyframes slideRight {
0%, 100% { transform:translateX(0);}
50% { transform:translateX(10px);}
}
/* サジェスト重要性 */
.suggest-importance {
padding:100px 0;
background:linear-gradient(135deg, #f5f7fa 0%, #e8eaf6 100%);
}
.importance-points {
margin-bottom:60px;
max-width:900px;
margin-left:auto;
margin-right:auto;
}
.point-item {
transition:all 0.3s ease;
}
.point-item:hover {
transform:translateY(-10px);
box-shadow:0 20px 50px rgba(0,0,0,0.15);
}
.point-number {
box-shadow:0 5px 20px rgba(25, 118, 210, 0.4);
}
.point-item h3 {
font-size:1.4rem;
font-weight:700;
}
.importance-message {
box-shadow:0 10px 30px rgba(0,0,0,0.1);
border:3px solid #ffc107;
}
.importance-message i {
color:#ffc107;
display:block;
}
.importance-message p {
font-size:1.3rem;
color:#333;
font-weight:600;
line-height:1.8;
}
/* サジェスト関係性 */
.suggest-relation {
padding:100px 0;
background:white;
}
.relation-content {
max-width:1000px;
margin:0 auto;
}
.example-box {
margin-bottom:60px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
}
.search-column h4 {
background:white;
padding:15px 25px;
font-size:1.2rem;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
}
.example-message {
background:linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
padding:30px;
border-radius:20px;
font-size:1.2rem;
font-weight:600;
box-shadow:0 5px 20px rgba(255, 193, 7, 0.3);
}
.benefit-box {
text-align:center;
}
.benefit-box h3 {
background:linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
padding:25px;
font-size:1.8rem;
border-radius:15px;
font-weight:700;
}
.benefit-item {
color:white;
transition:all 0.3s ease;
}
.benefit-item:hover {
transform:translateY(-5px);
box-shadow:0 15px 40px rgba(13, 71, 161, 0.4);
}
.benefit-item h4 {
font-weight:700;
}
/* 指名検索重要性 */
.branded-search-importance {
padding:100px 0;
background:#f8f9fa;
}
.search-issue h3 {
background:linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
padding:25px;
border-radius:15px;
font-weight:700;
}
.speech-bubble {
font-size:1.2rem;
font-weight:600;
}
.speech-bubble::after {
bottom:-15px;
left:50%;
border-right:15px solid transparent;
}
.search-box {
display:inline-block;
font-size:1.1rem;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
}
.issue-points {
max-width:900px;
margin:0 auto;
}
.point {
line-height:1.8;
font-size:1.1rem;
}
.google-point {
background:#ffebee;
border:2px solid #ef5350;
}
.brand-point {
background:#e3f2fd;
border:2px solid #2196f3;
}
/* クチコミ重要性 */
.review-importance {
padding:100px 0;
background:white;
}
.review-importance .importance-points {
margin-bottom:40px;
}
/* レビュー監視 */
.review-monitoring {
padding:100px 0;
background:#f8f9fa;
}
.monitoring-content {
max-width:800px;
margin:0 auto;
}
.review-card i {
font-size:2.5rem;
margin-bottom:15px;
}
.review-card p {
font-size:1.5rem;
color:#333;
font-weight:700;
}
.monitoring-label {
font-weight:600;
}
.issue-text {
margin:40px 0;
font-size:1.2rem;
}
.solution-text {
box-shadow:0 5px 20px rgba(33, 150, 243, 0.15);
}
.solution-text h3 {
font-size:1.8rem;
font-weight:700;
}
.solution-text p {
font-size:1.2rem;
color:#1565c0;
font-weight:600;
}
/* ブランディング効果 */
.branding-effect {
padding:100px 0;
background:white;
}
.effect-diagram {
max-width:700px;
margin:0 auto;
}
.effect-top {
box-shadow:0 10px 30px rgba(0, 188, 212, 0.3);
}
.effect-top h3 {
font-size:2rem;
font-weight:700;
}
.effect-items,
.result-items {
margin-bottom:40px;
}
.result-items {
grid-template-columns:repeat(3, 1fr);
}
.effect-box,
.result-box {
color:white;
font-weight:700;
font-size:1.2rem;
}
.cost-alert {
font-size:2.5rem;
color:#ff6b6b;
font-weight:900;
}
.alert-text {
background:#ff6b6b;
color:white;
padding:10px 25px;
border-radius:30px;
font-size:1.5rem;
}
/* 補助金メリット */
.subsidy-merit {
padding:100px 0;
background:#f8f9fa;
}
.merit-content h3 {
font-weight:700;
}
.example-list {
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}
.example-list > p {
font-size:1.3rem;
font-weight:700;
margin-bottom:25px;
color:#0d47a1;
}
.example-list ul {
margin:25px 0;
}
.example-list li {
font-size:1.3rem;
font-weight:600;
color:#333;
}
.example-list .sub-text {
display:block;
font-size:1rem;
color:#666;
margin-top:8px;
font-weight:400;
}
.partner-box {
flex:1;
max-width:350px;
}
.partner-box h4 {
font-size:1.5rem;
color:#0d47a1;
margin-bottom:20px;
font-weight:700;
}
.partner-box p {
font-size:1.1rem;
line-height:1.8;
color:#333;
}
.arrow-exchange {
text-align:center;
}
.arrow-exchange i {
font-size:3.5rem;
color:#1976d2;
}
.arrow-exchange p {
font-size:1.2rem;
color:#1976d2;
font-weight:700;
margin-top:10px;
}
.win-win-title {
font-weight:900;
}
.win-win-message {
background:linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
padding:25px;
font-weight:700;
display:inline-block;
margin:0 auto;
border-radius:50px;
box-shadow:0 5px 20px rgba(255, 193, 7, 0.4);
}
/* 補助金プロセス */
.subsidy-process {
padding:100px 0;
background:white;
}
.subsidy-process .section-title {
line-height:1.8;
font-size:2.2rem;
}
.company-intro h3 {
font-size:2rem;
color:#0d47a1;
margin-bottom:15px;
font-weight:700;
}
.company-intro p {
font-size:1.3rem;
color:#333;
}
.process-flow h3 {
font-size:2rem;
font-weight:700;
}
.process-step p {
font-size:1.3rem;
color:#0d47a1;
}
.step-detail {
font-weight:400;
line-height:1.5;
}
.process-note {
max-width:800px;
margin:0 auto 50px;
box-shadow:0 5px 20px rgba(255, 193, 7, 0.2);
}
.process-note p {
font-size:1.2rem;
line-height:2;
color:#333;
margin-bottom:20px;
}
.highlight-note {
color:white;
font-weight:700;
font-size:1.2rem;
}
.important-points {
max-width:900px;
margin:0 auto;
}
.important-points .point {
display:flex;
align-items:center;
gap:20px;
}
.important-points i {
font-size:2.5rem;
flex-shrink:0;
}
.important-points i.fa-exclamation-circle {
color:#ffc107;
}
.important-points i.fa-check-circle {
color:#4caf50;
}
.important-points p {
font-size:1.2rem;
line-height:1.8;
color:#333;
}
/* お問い合わせセクション */
.subsidy-contact {
padding:100px 0;
background:#f8f9fa;
}
.contact-message {
text-align:center;
color:#333;
}
.contact-info {
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:50px;
max-width:700px;
margin:0 auto 60px;
}
.contact-item {
text-align:center;
}
.contact-item i {
font-size:3.5rem;
color:#1976d2;
margin-bottom:20px;
}
.contact-item h3 {
font-size:1.6rem;
color:#333;
font-weight:700;
}
.company-info table {
width:100%;
background:white;
border-radius:15px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}
.company-info th,
.company-info td {
padding:25px;
text-align:left;
border-bottom:2px solid #e0e0e0;
font-size:1.1rem;
}
.company-info th {
background:#1976d2;
color:white;
width:30%;
font-weight:700;
}
.company-info td {
color:#333;
}
.company-info tr:last-child th,
.company-info tr:last-child td {
border-bottom:none;
}
.company-info a {
color:#1976d2;
text-decoration:none;
font-weight:600;
}
.line-cta .line-button {
display:inline-flex;
align-items:center;
gap:15px;
background:#00B900;
color:white;
padding:25px 50px;
border-radius:50px;
text-decoration:none;
font-size:1.5rem;
font-weight:700;
transition:all 0.3s ease;
box-shadow:0 10px 30px rgba(0, 185, 0, 0.3);
}
.line-cta .line-button:hover {
background:#00A800;
transform:translateY(-5px);
box-shadow:0 15px 40px rgba(0, 185, 0, 0.4);
}
.line-cta .line-button i {
font-size:2rem;
}
/* レスポンシブ対応 */
@media (max-width:768px) {
.problem-cards {
grid-template-columns:1fr;
gap:20px;
}
.issue-points {
grid-template-columns:1fr;
}
.contact-info {
grid-template-columns:1fr;
}
}
.container {
width:100%;
max-width:min(1400px, 95vw);
margin:0 auto;
padding:0 var(--container-padding);
}
/* セクション共通のレスポンシブ設定 */
section {
padding:var(--section-padding) 0;
}
/* 見出しのレスポンシブ */
h1 { font-size:clamp(2rem, 6vw, 4rem);}
/* タッチデバイス最適化 */
@media (hover:none) and (pointer:coarse) {
button, a, .clickable {
min-height:44px;
min-width:44px;
}
}
/* LINEフローティングボタン */
.line-float-btn {
position:fixed;
bottom:100px;
right:20px;
z-index:9999;
width:56px;
height:56px;
background:#00B900;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
box-shadow:0 4px 8px rgba(0,0,0,0.3);
animation:bounce 2s infinite;
transition:all 0.3s ease;
}
.line-float-btn:hover {
transform:scale(1.1);
box-shadow:0 6px 12px rgba(0,0,0,0.4);
}
.line-float-btn i {
color:white;
font-size:30px;
}
@keyframes bounce {
0%, 100% { transform:translateY(0);}
50% { transform:translateY(-10px);}
}
/* フレキシブルグリッドシステム */
.grid-responsive {
display:grid;
grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));
gap:var(--gap-size);
width:100%;
max-width:100%;
}
/* ヘッダーの最適化 */
.header {
position:sticky;
top:0;
z-index:1000;
backdrop-filter:blur(10px);
background:rgba(10, 10, 10, 0.9);
}
/* 大画面デスクトップ */
@media (min-width:1400px) {
.container {
--container-padding:40px;
}
}
/* 標準デスクトップ */
@media (max-width:1399px) and (min-width:1024px) {
.container {
padding:0 30px;
}
}
/* コンテナクエリのサポート */
@supports (container-type:inline-size) {
@container (max-width:768px) {
.responsive-container > * {
flex-direction:column;
}
}
}
/* タブレットファーストビュー最適化 */
@media (min-width:769px) and (max-width:1024px) {
.hero {
padding:8px 0;
min-height:100vh;
height:100vh;
overflow:hidden;
}
.hero-content {
display:flex;
flex-direction:column;
gap:4px;
padding-top:55px;
height:100vh;
overflow:hidden;
}
/* ロゴ */
.company-logo {
margin:4px auto !important;
}
.company-logo img {
max-height:28px !important;
}
/* サジェストビフォーアフター */
.suggest-before-after {
padding:12px 10px !important;
margin-bottom:8px !important;
max-width:400px !important;
}
.suggest-before-after h2 {
font-size:14px !important;
margin-bottom:10px !important;
}
.hero-content div[style*="width:100px;height:100px"],
.hero-content div[style*="width:40px;height:40px"] {
width:45px !important;
height:45px !important;
}
.hero-content div[style*="width:100px;height:100px"] i,
.hero-content div[style*="width:40px;height:40px"] i {
font-size:22px !important;
}
.hero-content div[style*="font-size:60px"],
.hero-content div[style*="font-size:25px"] {
font-size:28px !important;
}
.hero-content div[style*="font-size:28px"],
.hero-content div[style*="font-size:13px"] {
font-size:14px !important;
}
/* CTAボタン */
.cta-container a {
padding:10px 30px !important;
font-size:16px !important;
}
/* 不要な要素を非表示 */
.floating-reviews-container,
.search-visual-main-section,
.evidence-showcase,
.integrated-review-showcase,
.lawyer-impossible-section,
.shocking-fact,
.suggest-visual-section,
.solution-carousel,
.hero-content > div[style*="background:white"][style*="padding:30px 20px"][style*="border-radius:20px"] {
display:none !important;
}
}
/* タブレット（横向き） - より滑らかな遷移 */
@media (max-width:1024px) {
.container {
padding:0 25px;
max-width:100%;
}
.section-title {
font-size:2rem;
}
/* ヘッダー - 1行表示を優先、より洗練された調整 */
.desktop-nav {
display: none;
}
.price-simulator-btn span,
.header-line-button span {
display:none;
}
.price-simulator-btn i,
.header-line-button i {
font-size:0.9rem;
}
}
/* タブレット（縦向き）・小型タブレット */
@media (max-width:768px) and (min-width:481px) {
.container {
padding:0 25px;
}
/* セクション共通 */
.section-title {
font-size:1.5rem;
}
/* フッター */
.footer-content {
grid-template-columns:repeat(2, 1fr);
gap:30px;
}
/* 固定フッター - 1行表示を優先 */
.fixed-footer {
flex-direction:row;
gap:10px;
padding:10px;
flex-wrap:nowrap;
justify-content:center;
}
}
/* スマートフォン - モバイルファースト最適化 */
@media (max-width:768px) {
/* 横スクロール防止 */
html, body {
overflow-x:hidden;
max-width:100vw;
position:relative;
}
.container {
padding:0 15px;
max-width:100%;
}
/* ヒーローセクション全体の最適化 */
/* 問題提起セクション - 超強調 */
.problem-section {
margin:10px auto 15px !important;
padding:20px 15px !important;
background:var(--bg-light) !important;
border:3px solid var(--accent) !important;
box-shadow:0 5px 20px rgba(255,0,0,0.2) !important;
}
.problem-title {
font-size:24px !important;
line-height:1.3 !important;
color:var(--accent) !important;
font-weight:900 !important;
margin-bottom:12px !important;
}
.search-frequency .highlight-red {
font-size:22px !important;
font-weight:900 !important;
}
/* 対策ソリューション - 拡大表示 */
.hero-content > div[style*="background:white"][style*="border:2px solid #1976D2"] {
padding:15px !important;
margin-bottom:15px !important;
border-width:3px !important;
}
.hero-content h3[style*="font-size:16px"] {
font-size:20px !important;
margin-bottom:12px !important;
}
/* 実績画像の拡大 */
.hero-content div[style*="flex:1"][style*="background:#f8f9fa"] {
padding:15px !important;
}
.hero-content img[src*="vengoshi"],
.hero-content img[src*="google"] {
width:80px !important;
height:60px !important;
margin-bottom:8px !important;
}
.hero-content p[style*="font-size:10px"] {
font-size:13px !important;
line-height:1.4 !important;
font-weight:700 !important;
}
/* バッジの拡大 */
.hero-content span[style*="font-size:11px"][style*="border-radius:15px"] {
font-size:14px !important;
padding:8px 12px !important;
font-weight:700 !important;
}
.hero-content span[style*="font-size:11px"][style*="border-radius:15px"] i {
font-size:12px !important;
}
/* サジェストビジュアル - 見やすく */
.suggest-visual-section {
margin:15px auto 20px !important;
}
/* ハンバーガーメニューへの切り替え */
.desktop-nav,
.desktop-buttons {
display:none;
}
/* スクロールパフォーマンスの最適化 */
.mobile-nav-menu {
padding:20px;
will-change:transform;
}
.mobile-nav-menu a {
display:flex;
align-items:center;
gap:12px;
padding:16px 20px;
font-size:1.1rem;
border-radius:12px;
transition:all 0.2s ease;
-webkit-tap-highlight-color:transparent;
color: #fff !important;
text-decoration: none;
}
.mobile-nav-menu a:hover {
background:rgba(255, 255, 255, 0.1);
color: #4fc3f7 !important;
}
.mobile-nav-menu a:active {
transform:scale(0.98);
background:rgba(79, 195, 247, 0.2);
}
}
/* モバイルナビゲーション修正 */
@media (max-width:768px) {
/* ヘッダー高さ調整 */
.header {
min-height:50px;
padding:10px 0;
position:fixed;
width:100%;
top:0;
z-index:1000;
}
/* ファーストビュー下部の要素 */
.shocking-fact.extended {
padding:30px 20px !important;
margin:20px auto !important;
}
/* レビューカードのモバイル対応 */
.floating-review {
position:relative !important;
transform:none !important;
margin:15px auto !important;
width:100% !important;
max-width:350px !important;
animation:none !important;
}
/* 信頼の実績セクション */
.hero-content > div[style*="background:white"][style*="padding:25px"] {
padding:20px !important;
margin:20px auto !important;
}
.hero-content > div[style*="background:white"][style*="padding:25px"] h3 {
font-size:22px !important;
margin-bottom:20px !important;
}
.hero-content > div[style*="background:white"][style*="padding:25px"] img {
width:100% !important;
max-width:280px !important;
height:auto !important;
margin:0 auto !important;
}
/* 実績カード */
.hero-content div[style*="background:#1976D2"],
.hero-content div[style*="background:#ff6b6b"] {
padding:25px !important;
}
.hero-content div[style*="background:#1976D2"] i,
.hero-content div[style*="background:#ff6b6b"] i {
font-size:2.5rem !important;
}
.hero-content div[style*="font-size:1.5rem"][style*="font-weight:700"] {
font-size:1.3rem !important;
}
.hero-content div[style*="font-size:2rem"][style*="font-weight:900"] {
font-size:1.8rem !important;
}
/* 検索被害のリアルタイム状況 */
.hero-content > div[style*="background:linear-gradient"][style*="padding:40px"] {
padding:25px 15px !important;
margin:20px auto !important;
}
.hero-content h2[style*="font-size:1.8rem"] {
font-size:1.4rem !important;
line-height:1.5 !important;
}
.hero-content p[style*="font-size:1.3rem"] {
font-size:1.1rem !important;
}
.hero-content div[style*="font-size:2rem"][style*="font-weight:800"] {
font-size:1.6rem !important;
}
.hero-content span[style*="font-size:2.3rem"] {
font-size:1.8rem !important;
}
/* 検索ボックスのレイアウト修正 */
.search-examples-container {
grid-template-columns:1fr;
gap:20px;
padding:0 10px;
margin:0 auto;
max-width:100%;
}
/* 検索フォーム上部のテキスト */
.search-example .search-help-text {
font-size:0.8rem;
padding:15px;
text-align:center;
line-height:1.4;
}
.search-example {
background:rgba(255, 255, 255, 0.05);
border-radius:12px;
border:1px solid rgba(79, 195, 247, 0.2);
}
.search-example h3 {
font-size:0.9rem;
margin-bottom:10px;
}
.search-box-demo {
margin-bottom:5px;
font-size:0.9rem;
border-radius:8px;
}
.suggest-dropdown {
max-width:100%;
overflow:hidden;
}
.suggest-item {
justify-content:space-between;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
}
/* 小型スマホファーストビュー最適化 */
@media (max-width:480px) {
.hero {
padding:3px 0;
min-height:100vh;
height:100vh;
overflow:hidden;
}
.company-logo img {
max-height:20px !important;
}
/* サジェストビフォーアフター */
.suggest-before-after {
padding:6px 6px !important;
margin-bottom:4px !important;
}
.suggest-before-after h2 {
font-size:11px !important;
margin-bottom:6px !important;
line-height:1.1 !important;
}
.suggest-before-after > div[style*="margin-bottom"] {
margin-bottom:4px !important;
}
.suggest-before-after div[style*="padding:15px 20px"],
.suggest-before-after div[style*="padding:10px 15px"],
.suggest-before-after div[style*="padding:5px 10px"],
.suggest-before-after div[style*="padding:4px 8px"] {
padding:3px 6px !important;
}
.suggest-before-after div[style*="padding:15px 20px"] i,
.suggest-before-after div[style*="padding:10px 15px"] i,
.suggest-before-after div[style*="padding:5px 10px"] i,
.suggest-before-after div[style*="padding:4px 8px"] i {
font-size:8px !important;
}
.suggest-before-after div[style*="padding:15px 20px"] span,
.suggest-before-after div[style*="padding:10px 15px"] span,
.suggest-before-after div[style*="padding:5px 10px"] span,
.suggest-before-after div[style*="padding:4px 8px"] span {
font-size:8px !important;
}
/* サジェストアイテムを減らす */
.suggest-negative-item:nth-child(3),
.suggest-negative-item:nth-child(4),
.suggest-positive-item:nth-child(3),
.suggest-positive-item:nth-child(4) {
display:none !important;
}
.suggest-negative-item span,
.suggest-positive-item span {
font-size:8px !important;
}
.suggest-negative-item strong,
.suggest-positive-item strong {
font-size:9px !important;
}
/* 矢印部分 */
.suggest-before-after div[style*="padding:20px 0"],
.suggest-before-after div[style*="padding:12px 0"],
.suggest-before-after div[style*="padding:8px 0"],
.suggest-before-after div[style*="padding:5px 0"],
.suggest-before-after div[style*="padding:3px 0"] {
padding:2px 0 !important;
}
.suggest-before-after div[style*="font-size:40px"],
.suggest-before-after div[style*="font-size:28px"],
.suggest-before-after div[style*="font-size:20px"],
.suggest-before-after div[style*="font-size:16px"],
.suggest-before-after div[style*="font-size:14px"] {
margin-bottom:1px !important;
}
.hero-content div[style*="width:100px;height:100px"],
.hero-content div[style*="width:40px;height:40px"],
.hero-content div[style*="width:35px;height:35px"] {
width:30px !important;
height:30px !important;
}
.hero-content div[style*="width:100px;height:100px"] i,
.hero-content div[style*="width:40px;height:40px"] i,
.hero-content div[style*="width:35px;height:35px"] i {
font-size:15px !important;
}
.hero-content div[style*="font-size:60px"],
.hero-content div[style*="font-size:25px"],
.hero-content div[style*="font-size:22px"] {
font-size:18px !important;
margin-bottom:1px !important;
}
.hero-content div[style*="font-size:28px"],
.hero-content div[style*="font-size:13px"],
.hero-content div[style*="font-size:11px"] {
font-size:10px !important;
}
.hero-content div[style*="font-size:16px"][style*="color:#666"],
.hero-content div[style*="font-size:10px"][style*="color:#666"],
.hero-content div[style*="font-size:9px"][style*="color:#666"] {
font-size:8px !important;
}
.hero-content div[style*="position:absolute"][style*="width:35px"],
.hero-content div[style*="position:absolute"][style*="width:18px"],
.hero-content div[style*="position:absolute"][style*="width:16px"] {
width:14px !important;
height:14px !important;
font-size:6px !important;
top:-1px !important;
right:-1px !important;
}
.hero-content div[style*="width:2px"][style*="height:120px"],
.hero-content div[style*="width:2px"][style*="height:60px"] {
display:none !important;
}
/* CTAボタン */
.cta-container {
margin:4px 0 6px !important;
}
.cta-container a {
padding:6px 16px !important;
font-size:12px !important;
}
.cta-container p {
font-size:8px !important;
margin-top:2px !important;
}
/* カルーセル非表示 */
.solution-carousel {
display:none !important;
}
/* 不要な要素を非表示 */
.floating-reviews-container,
.search-visual-main-section,
.evidence-showcase,
.integrated-review-showcase,
.lawyer-impossible-section,
.shocking-fact,
.suggest-visual-section,
.hero-content > div[style*="background:white"][style*="padding:30px 20px"][style*="border-radius:20px"] {
display:none !important;
}
}
/* 小型スマートフォン */
@media (max-width:480px) {
.container {
padding:0 10px;
max-width:100%;
width:100%;
overflow-x:hidden;
}
/* ファーストビュー最適化 */
.hero {
padding:5px 0 15px !important;
}
.hero-content {
padding:0 8px !important;
}
/* ロゴ */
.company-logo {
margin:8px auto 10px !important;
}
/* 問題提起 */
.problem-section {
margin:8px auto 12px !important;
padding:15px 12px !important;
}
.problem-title {
font-size:20px !important;
line-height:1.3 !important;
}
.search-frequency .highlight-red {
font-size:18px !important;
}
/* 対策ソリューション */
.hero-content > div[style*="background:white"][style*="border:2px solid #1976D2"] {
padding:12px !important;
margin-bottom:12px !important;
}
.hero-content h3[style*="font-size:16px"] {
font-size:18px !important;
}
/* 実績画像 */
.hero-content div[style*="flex:1"][style*="background:#f8f9fa"] {
padding:12px !important;
}
.hero-content img[src*="vengoshi"],
.hero-content img[src*="google"] {
width:70px !important;
height:50px !important;
}
.hero-content p[style*="font-size:10px"] {
font-size:11px !important;
line-height:1.3 !important;
}
/* バッジ */
.hero-content span[style*="font-size:11px"][style*="border-radius:15px"] {
font-size:12px !important;
padding:6px 10px !important;
}
/* サジェストビジュアル */
.suggest-visual-section {
margin:12px auto 15px !important;
}
.search-box-suggest input {
font-size:16px !important;
}
/* CTAボタン */
.cta-button.primary {
font-size:18px !important;
padding:18px 40px !important;
}
/* セクション間隔調整 */
section {
padding:40px 0;
overflow-x:hidden;
width:100%;
}
/* 見出しサイズ調整 */
h1 { font-size:1.5rem;}
h2 { font-size:1.3rem;}
h3 { font-size:1.1rem;}
h4 { font-size:1rem;}
/* ヘッダー */
.header-nav {
padding:15px 0;
}
.section-title {
font-size:1.3rem;
}
/* モバイルナビゲーション */
.mobile-nav {
padding:15px;
}
.mobile-nav-menu a {
font-size:1.1rem;
padding:12px 0;
}
/* フッター */
.footer-section h3 {
font-size:1.3rem;
}
/* 固定フッター - モバイル最適化 */
.fixed-footer {
flex-direction:row;
gap:8px;
padding:10px;
justify-content:space-between;
align-items:stretch;
width:100%;
max-width:100vw;
}
/* テーブル */
table {
font-size:0.9rem;
width:100%;
overflow-x:auto;
display:block;
}
th, td {
padding:10px 5px;
white-space:nowrap;
}
}
/* Hero Section - フルードタイポグラフィ */
.hero {
padding:clamp(60px, 15vw, 100px) 0;
min-height:clamp(60vh, 100vw, 100vh);
}
/* ファーストビュー最適化 - 全画面サイズ対応 */
@media (max-width:1920px) {
.hero {
padding:10px 0;
min-height:100vh;
height:100vh;
overflow:hidden;
display:flex;
align-items:flex-start;
}
.hero-content {
display:flex;
flex-direction:column;
gap:5px;
padding-top:60px;/* ヘッダー分 */
height:100vh;
overflow:hidden;
}
/* ロゴ縮小 */
.company-logo {
margin:5px auto !important;
}
.company-logo img {
max-height:30px !important;
}
/* サジェストビフォーアフター圧縮 */
.suggest-before-after {
padding:15px 10px !important;
margin-bottom:10px !important;
max-width:450px !important;
}
.suggest-before-after h2 {
font-size:16px !important;
margin-bottom:10px !important;
line-height:1.1 !important;
}
.suggest-before-after > div[style*="margin-bottom"] {
margin-bottom:8px !important;
}
.suggest-before-after div[style*="padding:15px 20px"],
.suggest-before-after div[style*="padding:10px 15px"] {
padding:5px 10px !important;
}
.suggest-before-after div[style*="padding:15px 20px"] i,
.suggest-before-after div[style*="padding:10px 15px"] i {
font-size:12px !important;
}
.suggest-before-after div[style*="padding:15px 20px"] span,
.suggest-before-after div[style*="padding:10px 15px"] span {
font-size:12px !important;
}
.suggest-negative-item span,
.suggest-positive-item span {
font-size:11px !important;
}
.suggest-negative-item strong,
.suggest-positive-item strong {
font-size:12px !important;
}
/* 矢印部分を最小化 */
.suggest-before-after div[style*="padding:20px 0"],
.suggest-before-after div[style*="padding:12px 0"],
.suggest-before-after div[style*="padding:8px 0"] {
padding:5px 0 !important;
}
.suggest-before-after div[style*="font-size:40px"],
.suggest-before-after div[style*="font-size:28px"],
.suggest-before-after div[style*="font-size:20px"] {
font-size:16px !important;
margin-bottom:2px !important;
}
.hero-content div[style*="width:100px;height:100px"] {
width:40px !important;
height:40px !important;
}
.hero-content div[style*="width:100px;height:100px"] i {
font-size:20px !important;
}
.hero-content div[style*="font-size:60px"] {
font-size:25px !important;
margin-bottom:2px !important;
}
.hero-content div[style*="font-size:28px"] {
font-size:13px !important;
}
.hero-content div[style*="font-size:16px"][style*="color:#666"] {
font-size:10px !important;
}
.hero-content div[style*="position:absolute"][style*="width:35px"] {
width:18px !important;
height:18px !important;
font-size:8px !important;
top:-2px !important;
right:-2px !important;
}
.hero-content div[style*="width:2px"][style*="height:120px"] {
height:60px !important;
}
/* CTAボタンの圧縮 */
.cta-container {
margin:8px 0 10px !important;
}
.cta-container a {
padding:10px 25px !important;
font-size:16px !important;
}
.cta-container p {
font-size:10px !important;
margin-top:3px !important;
}
/* カルーセル非表示 */
.solution-carousel {
display:none !important;
}
/* 不要な要素を非表示 */
.floating-reviews-container,
.search-visual-main-section,
.evidence-showcase,
.integrated-review-showcase,
.lawyer-impossible-section,
.shocking-fact,
.suggest-visual-section,
.hero-content > div[style*="background:white"][style*="padding:30px 20px"][style*="border-radius:20px"] {
display:none !important;
}
}
.hero-title {
font-size:clamp(2rem, 8vw, 4.5rem);
line-height:1.1;
margin-bottom:clamp(20px, 5vw, 40px);
}
.hero-title .subtitle {
font-size:clamp(1.2rem, 4vw, 2rem);
display:block;
margin-top:clamp(10px, 2vw, 20px);
}
/* モバイルのファーストビュー最適化 */
@media (max-width:768px) {
.hero {
height:100vh;
}
.hero-content {
display:flex;
flex-direction:column;
gap:3px;
padding-top:50px;/* ヘッダー分 */
height:100vh;
overflow:hidden;
}
/* ロゴ */
.company-logo {
margin:3px auto !important;
}
.company-logo img {
max-height:25px !important;
}
/* サジェストビフォーアフター */
.suggest-before-after {
padding:8px 8px !important;
margin-bottom:5px !important;
}
.suggest-before-after h2 {
font-size:13px !important;
margin-bottom:8px !important;
line-height:1.1 !important;
}
.suggest-before-after > div[style*="margin-bottom"] {
margin-bottom:5px !important;
}
.suggest-before-after div[style*="padding:15px 20px"],
.suggest-before-after div[style*="padding:10px 15px"] {
padding:4px 8px !important;
}
.suggest-before-after div[style*="padding:15px 20px"] i,
.suggest-before-after div[style*="padding:10px 15px"] i {
font-size:10px !important;
}
.suggest-before-after div[style*="padding:15px 20px"] span,
.suggest-before-after div[style*="padding:10px 15px"] span {
font-size:10px !important;
}
/* サジェストアイテムを減らす */
.suggest-negative-item:nth-child(3),
.suggest-negative-item:nth-child(4),
.suggest-positive-item:nth-child(3),
.suggest-positive-item:nth-child(4) {
display:none !important;
}
.suggest-negative-item span,
.suggest-positive-item span {
font-size:9px !important;
}
.suggest-negative-item strong,
.suggest-positive-item strong {
font-size:10px !important;
}
/* 矢印部分 */
.suggest-before-after div[style*="padding:20px 0"],
.suggest-before-after div[style*="padding:12px 0"],
.suggest-before-after div[style*="padding:8px 0"],
.suggest-before-after div[style*="padding:5px 0"] {
padding:3px 0 !important;
}
.suggest-before-after div[style*="font-size:40px"],
.suggest-before-after div[style*="font-size:28px"],
.suggest-before-after div[style*="font-size:20px"],
.suggest-before-after div[style*="font-size:16px"] {
font-size:14px !important;
margin-bottom:2px !important;
}
.hero-content div[style*="width:100px;height:100px"],
.hero-content div[style*="width:40px;height:40px"] {
width:35px !important;
height:35px !important;
}
.hero-content div[style*="width:100px;height:100px"] i,
.hero-content div[style*="width:40px;height:40px"] i {
font-size:18px !important;
}
.hero-content div[style*="font-size:60px"],
.hero-content div[style*="font-size:25px"] {
font-size:22px !important;
margin-bottom:2px !important;
}
.hero-content div[style*="font-size:28px"],
.hero-content div[style*="font-size:13px"] {
font-size:11px !important;
}
.hero-content div[style*="font-size:16px"][style*="color:#666"],
.hero-content div[style*="font-size:10px"][style*="color:#666"] {
font-size:9px !important;
}
.hero-content div[style*="position:absolute"][style*="width:35px"],
.hero-content div[style*="position:absolute"][style*="width:18px"] {
width:16px !important;
height:16px !important;
font-size:7px !important;
top:-2px !important;
right:-2px !important;
}
.hero-content div[style*="width:2px"][style*="height:120px"],
.hero-content div[style*="width:2px"][style*="height:60px"] {
display:none !important;
}
/* CTAボタン */
.cta-container {
margin:5px 0 8px !important;
}
.cta-container a {
padding:8px 20px !important;
font-size:14px !important;
}
.cta-container p {
font-size:9px !important;
margin-top:2px !important;
}
/* カルーセル非表示 */
.solution-carousel {
display:none !important;
}
/* 不要な要素を非表示 */
.floating-reviews-container,
.search-visual-main-section,
.evidence-showcase,
.integrated-review-showcase,
.lawyer-impossible-section,
.shocking-fact,
.suggest-visual-section,
.hero-content > div[style*="background:white"][style*="padding:30px 20px"][style*="border-radius:20px"] {
display:none !important;
}
}
/* Hero Section Responsive */
@media (max-width:768px) {
.hero {
text-align:center;
padding:40px 0;
min-height:auto;
overflow:hidden;
width:100%;
}
.hero-content {
padding:0 15px;
}
.hero-title {
font-size:1.6rem;
line-height:1.3;
margin-bottom:20px;
}
.hero-title .highlight {
font-size:1.8rem;
display:block;
margin:10px 0;
}
.hero-title .subtitle {
font-size:1.1rem;
margin-top:15px;
}
.search-example {
padding:20px;
}
.search-box-demo {
padding:10px 15px;
}
/* 検索デバイスグリッド */
.search-device-grid {
gap:20px;
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
padding:20px;
}
.search-device i {
font-size:2.5rem;
color:var(--primary);
margin-bottom:8px;
}
.search-device span {
font-size:0.9rem;
white-space:nowrap;
}
/* 矢印アイコン */
.arrow-device {
font-size:1.5rem;
color:#ffc107;
margin:0 10px;
}
}
/* Evidence Section - アダプティブレイアウト */
.transformation-content {
display:grid;
grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));
gap:clamp(20px, 4vw, 40px);
align-items:center;
width:100%;
}
/* Evidence Section Responsive */
@media (max-width:768px) {
/* 変換矢印 */
.transformation-arrow {
transform:rotate(90deg);
margin:20px 0;
font-size:2rem;
}
/* 数字で見る現実セクション */
.stats-container {
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:15px;
padding:20px 10px;
}
.stat-box {
background:rgba(255, 255, 255, 0.05);
padding:20px 15px;
border-radius:15px;
text-align:center;
border:1px solid rgba(79, 195, 247, 0.3);
}
.stat-label {
font-size:1.5rem;
line-height:1.3;
}
}
/* Trust Section - カードレイアウト最適化 */
.platform-achievements {
display:grid;
grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap:clamp(20px, 3vw, 30px);
width:100%;
padding:0 10px;
}
/* Urgency Section Responsive */
@media (max-width:768px) {
.reason-card {
padding:25px;
}
.reason-number {
width:50px;
height:50px;
font-size:1.5rem;
}
.timeline-item {
flex-direction:column;
text-align:center;
padding:15px;
}
}
/* Final CTA Section Responsive */
@media (max-width:768px) {
.cta-title {
font-size:2rem;
}
/* プラットフォーム評価 */
.platform-review {
padding:20px;
}
.platform-header {
flex-direction:column;
text-align:center;
gap:8px;
}
.platform-header .header-top {
gap:8px;
}
.platform-header h4 {
font-size:1.3rem;
}
.rating-stars i {
font-size:1.1rem;
}
.platform-message p {
font-size:0.9rem;
}
.trust-item {
font-size:0.8rem;
}
.platform-link {
width:100%;
padding:15px 20px;
}
/* フッター哲学セクション */
.footer-philosophy {
padding:30px 20px;
}
.philosophy-logo img {
max-width:150px;
}
.philosophy-icon i {
font-size:2.5rem;
padding:12px;
}
/* お客様の声セクション */
.testimonial-section h3 {
font-size:1.5rem;
}
.testimonial-card {
padding:20px;
}
.testimonial-text {
font-size:0.9rem;
line-height:1.6;
}
.cta-button {
padding:20px 40px;
font-size:1.2rem;
}
.button-subtitle {
font-size:0.8rem;
}
/* LINEボタン */
.line-button {
padding:18px 35px;
font-size:1.1rem;
width:100%;
max-width:300px;
justify-content:center;
}
.line-button i {
font-size:1.5rem;
}
}
/* ダークモード対応 */
@media (prefers-color-scheme:dark) {
:root {
--bg-primary:#0a0a0a;
--text-primary:#ffffff;
--accent-color:var(--primary);
}
}
/* 印刷最適化 */
@media print {
.no-print,
.hamburger-menu,
.fixed-footer,
.line-float-btn {
display:none !important;
}
body {
line-height:1.5;
}
}
/* 小型デバイス用追加調整 - より細かな制御 */
@media (max-width:480px) {
.hero-title {
font-size:1.5rem;
}
.hero-title .subtitle {
font-size:1.1rem;
}
.search-example h3 {
font-size:1.1rem;
}
.platform-card {
padding:25px;
}
.emphasis {
font-size:1.2rem;
}
}
/* 価格ページレスポンシブ */
@media (max-width:768px) {
.price-special-note {
font-size:0.8rem;
padding:10px;
}
.service-detail-grid {
grid-template-columns:1fr;
gap:20px;
}
.special-offer-box {
padding:20px;
}
.discount-amount {
font-size:2rem;
}
.supplementary-services-detail {
padding:25px 15px;
}
}
/* スマホ用フローティングボタン調整 */
@media (max-width:768px) {
/* フローティングボタン共通設定 */
.fixed-footer {
position:fixed;
bottom:0;
left:0;
right:0;
background:rgba(10, 10, 10, 0.95);
backdrop-filter:blur(10px);
padding:8px;
z-index:1000;
display:flex;
gap:8px;
justify-content:center;
box-shadow:0 -2px 10px rgba(0, 0, 0, 0.3);
}
.fixed-price-btn i,
.fixed-line-button i {
font-size:1rem;
}
/* LINEフローティングボタン */
.line-float-btn {
display:none;
}
/* 他のCTAバナーを非表示 */
.line-consultation-banner,
.fixed-cta-banner {
display:none !important;
}
}
/* アスペクト比の保持 */
.aspect-ratio-16-9 {
position:relative;
padding-bottom:56.25%;
}
/* レスポンシブイメージ */
img {
max-width:100%;
height:auto;
display:block;
object-fit:contain;
}
/* レスポンシブビデオ */
video,
iframe {
max-width:100%;
height:auto;
}
/* フォーカス状態の改善 */
:focus {
outline:2px solid var(--accent-color, #4fc3f7);
outline-offset:2px;
}
:focus:not(:focus-visible) {
outline:none;
}
:focus-visible {
outline:2px solid var(--accent-color, #4fc3f7);
outline-offset:2px;
}
/* ================== 補助金ページレスポンシブ ================== */
/* タブレット */
@media (max-width:1024px) {
/* ページヒーロー */
.page-hero {
padding:80px 0 60px;
}
.page-title {
font-size:2.5rem;
}
.highlight-text {
font-size:1.5rem;
}
/* 課題セクション */
.problem-cards {
grid-template-columns:repeat(2, 1fr);
}
}
/* スマートフォン */
@media (max-width:768px) {
/* ページヒーロー */
.page-hero {
padding:60px 0 40px;
margin-top:60px;
}
.page-title {
font-size:2rem;
}
.page-subtitle {
font-size:1.2rem;
}
.hero-message {
padding:20px;
}
.highlight-text {
font-size:1.3rem;
}
.sub-text {
font-size:1rem;
}
/* 課題セクション */
.problem-cards {
grid-template-columns:1fr;
gap:20px;
}
.problem-card {
padding:20px;
}
.problem-card i {
font-size:2.5rem;
}
.solution-arrow {
font-size:2.5rem;
margin:20px 0;
}
.solution-box {
padding:25px;
}
.solution-box h3 {
font-size:1.5rem;
}
/* サービスと効果 */
.service-flow {
flex-direction:column;
gap:30px;
width:100%;
overflow:hidden;
}
.arrow-right {
transform:rotate(90deg);
margin:20px 0;
}
.service-column,
.effect-column {
padding:30px 20px;
}
/* サジェスト重要性 */
.importance-points {
grid-template-columns:1fr;
gap:40px;
}
.point-item {
padding:30px 20px;
}
.importance-message {
padding:20px;
}
/* サジェスト関係性 */
.lead-text {
font-size:1rem;
margin-bottom:30px;
}
.example-box {
padding:20px;
}
.search-examples {
flex-direction:column;
gap:20px;
}
.benefit-items {
grid-template-columns:1fr;
gap:15px;
}
/* 指名検索 */
.issue-points {
grid-template-columns:1fr;
gap:20px;
}
.point {
padding:20px;
}
/* ブランディング効果 */
.effect-items {
grid-template-columns:1fr;
}
.result-items {
grid-template-columns:1fr;
}
/* 補助金メリット */
.example-list {
padding:25px;
}
.example-list li {
font-size:1rem;
}
.win-win-diagram {
flex-direction:column;
gap:30px;
}
.partner-box {
padding:30px 20px;
}
.arrow-exchange {
transform:rotate(90deg);
}
.win-win-title {
font-size:2rem;
}
/* 補助金プロセス */
.process-diagram {
flex-direction:column;
gap:20px;
width:100%;
padding:0 10px;
}
.process-step {
min-width:100%;
padding:25px;
}
.process-arrow {
transform:rotate(90deg);
margin:10px 0;
}
.process-note {
padding:20px;
}
.important-points {
grid-template-columns:1fr;
gap:20px;
}
/* お問い合わせ */
.contact-info {
grid-template-columns:1fr;
gap:30px;
width:100%;
padding:0 10px;
}
.contact-item h3 {
font-size:1.3rem;
}
.company-info th,
.company-info td {
padding:15px;
font-size:0.9rem;
}
.line-cta .line-button {
padding:15px 30px;
font-size:1.1rem;
}
}
/* 小型スマートフォン */
@media (max-width:480px) {
/* ページヒーロー */
.page-title {
font-size:1.6rem;
}
.page-subtitle {
font-size:1rem;
}
.highlight-text {
font-size:1.1rem;
line-height:1.5;
}
/* 課題セクション */
.problem-card h3 {
font-size:1rem;
}
/* サービスと効果 */
.service-item {
font-size:1rem;
}
.effect-item {
font-size:0.9rem;
padding:15px;
}
/* 補助金プロセス */
.subsidy-process .section-title {
font-size:1.3rem;
line-height:1.6;
}
.process-step i {
font-size:2rem;
}
/* お問い合わせ */
.company-info table {
font-size:0.8rem;
}
.company-info th,
.company-info td {
padding:10px;
}
}
/* ナビゲーションアイコンのレスポンシブ調整 */
@media (max-width:768px) {
.desktop-nav a i {
font-size:1rem;
width:14px;
}
.mobile-nav-menu a i {
font-size:1.1rem;
width:18px;
}
}
@media (max-width:480px) {
.desktop-nav a i {
font-size:0.9rem;
width:12px;
}
.mobile-nav-menu a i {
font-size:1rem;
width:16px;
}
}
/* ================== レビューカードレスポンシブ ================== */
/* レビューカード - モバイル対応 */
@media (max-width:768px) {
/* レビューセクション全体 */
.reviews-section,
.testimonials-section,
.customer-voice-section {
padding:40px 0;
overflow:visible;
width:100%;
}
/* レビューカードの重なり解除 */
.reviews-container,
.reviews-wrapper,
.review-cards {
display:flex;
flex-direction:column;
gap:20px;
width:100%;
overflow:visible;
}
.review-card {
position:relative !important;
transform:none !important;
margin:0 !important;
width:100%;
max-width:100%;
opacity:1 !important;
z-index:1;
transition:all 0.3s ease;
}
/* 各カードの位置リセット */
.review-card:nth-child(1),
.review-card:nth-child(2),
.review-card:nth-child(3) {
position:relative !important;
transform:translateX(0) translateY(0) !important;
margin-left:0 !important;
margin-top:0 !important;
left:0 !important;
top:0 !important;
}
/* ホバー効果の調整 */
.review-card:hover {
transform:scale(1.02) !important;
box-shadow:0 5px 20px rgba(0, 0, 0, 0.2);
z-index:2;
}
/* カード内のテキスト調整 */
.review-card .review-text {
font-size:0.9rem;
line-height:1.6;
}
.review-card .reviewer-info {
font-size:0.85rem;
}
/* スターレーティング調整 */
.review-card .stars {
font-size:1rem;
margin-bottom:10px;
}
}
/* リアルタイム検索ログ - モバイル対応 */
@media (max-width:768px) {
.realtime-search-log h3 {
font-size:1.2rem;
margin-bottom:15px;
text-align:center;
}
/* 自動的に表示のメッセージ */
.search-log-note {
display:flex;
align-items:center;
gap:8px;
font-size:0.8rem;
color:#ffc107;
margin-top:10px;
padding:10px;
background:rgba(255, 193, 7, 0.1);
border-radius:6px;
}
.search-log-note i {
font-size:1rem;
flex-shrink:0;
}
}
/* 小型スマートフォン対応 */
@media (max-width:480px) {
.review-card {
padding:20px;
border-radius:12px;
}
.review-card .review-text {
font-size:0.85rem;
}
.review-card .reviewer-info {
font-size:0.8rem;
}
/* カード間の余白調整 */
.reviews-container,
.reviews-wrapper,
.review-cards {
gap:15px;
padding:0 10px;
}
}
/* ================== 動的サジェスト演出レスポンシブ ================== */
/* 動的サジェスト演出 - モバイル対応 */
@media (max-width:768px) {
/* メインコンテナ */
.shocking-fact.extended {
padding:20px 10px;
overflow:visible;
width:100%;
margin:20px auto;
}
/* 検索アラートバナー */
.search-alert-banner {
font-size:1rem;
padding:15px 25px;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
flex-wrap:wrap;
font-weight:700;
}
.search-alert-banner i {
font-size:1.2rem;
}
/* 動的サジェストデモ全体 */
.dynamic-suggest-demo {
margin:30px 0;
padding:0 10px;
}
/* 検索ボックスアニメーション */
.search-box-animation {
max-width:100%;
margin:0 auto;
padding:0 10px;
}
.search-input-wrapper i {
font-size:1.2rem;
color:var(--primary);
flex-shrink:0;
}
/* ネガティブサジェストリスト */
.negative-suggest-list {
background:rgba(255, 255, 255, 0.05);
border-radius:10px;
padding:10px;
max-height:300px;
overflow-y:auto;
}
.suggest-item {
display:flex;
align-items:center;
gap:12px;
padding:15px 18px;
margin-bottom:12px;
background:rgba(255, 255, 255, 0.05);
border-radius:12px;
font-size:1rem;
transition:all 0.3s ease;
border:1px solid rgba(79, 195, 247, 0.2);
min-height:50px;
}
.suggest-item i {
font-size:1.1rem;
color:#999;
flex-shrink:0;
}
.suggest-text span {
color:var(--accent);
font-weight:700;
margin-left:8px;
}
/* インパクトメッセージ */
.search-impact-message {
margin-top:20px;
padding:15px;
background:rgba(255, 193, 7, 0.1);
border-radius:10px;
text-align:center;
}
.impact-text i {
font-size:1rem;
color:#ffc107;
margin-right:8px;
}
.impact-text .highlight {
color:#ffc107;
font-weight:bold;
}
/* メインメッセージ */
.main-message {
font-size:1.05rem;
line-height:1.8;
text-align:center;
padding:25px 20px;
margin:25px 0;
font-weight:500;
}
/* 追加の警告 */
.additional-warning {
background:rgba(255, 82, 82, 0.1);
border-radius:10px;
padding:20px;
margin:20px 0;
text-align:center;
}
}
/* 小型スマートフォン対応 */
@media (max-width:480px) {
.suggest-item {
font-size:0.9rem;
padding:10px 12px;
margin-bottom:8px;
}
.suggest-item i {
font-size:1rem;
}
}
/* アニメーション定義 */
@keyframes slideIn {
from {
opacity:0;
transform:translateY(10px);
}
to {
opacity:1;
transform:translateY(0);
}
}
/* 新しいLPコンテンツのレスポンシブ対応 */
@media (max-width: 768px) {
/* ヒーローセクションの問題提起 */
.hero-content > div[style*="background: linear-gradient(135deg, #1a1a1a"] {
padding: 25px 15px !important;
margin-bottom: 15px !important;
}
.hero-content h1[style*="font-size: 28px"] {
font-size: 20px !important;
margin-bottom: 20px !important;
}
.hero-content span[style*="font-size: 32px"] {
font-size: 22px !important;
}
.hero-content span[style*="font-size: 24px"] {
font-size: 18px !important;
}
/* Google検索ビジュアル */
.hero-content div[style*="max-width: 600px"] {
max-width: 100% !important;
margin: 20px auto !important;
}
.hero-content input[style*="font-size: 18px"] {
font-size: 16px !important;
}
/* 弁護士が諦めた理由セクション */
.hero-content > div[style*="border: 3px solid #ff6b00"] {
padding: 20px 15px !important;
margin-bottom: 15px !important;
}
.hero-content h2[style*="font-size: 24px"] {
font-size: 18px !important;
}
.hero-content h3[style*="font-size: 22px"] {
font-size: 18px !important;
}
/* 2つの武器セクション */
.hero-content div[style*="display: grid; grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 15px !important;
}
.hero-content h3[style*="font-size: 20px"] {
font-size: 18px !important;
}
/* プラットフォーム実績セクション */
section[style*="background: linear-gradient(135deg, #f5f5f5"] div[style*="display: grid; grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 30px !important;
}
section h2[style*="font-size: 2.5rem"] {
font-size: 1.8rem !important;
}
section h3[style*="font-size: 2.2rem"] {
font-size: 1.6rem !important;
}
section span[style*="font-size: 3rem"] {
font-size: 2.2rem !important;
}
/* 弁護士との決定的な違い */
section div[style*="display: grid; grid-template-columns: 1fr 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
/* CTAセクション */
section[style*="padding: 100px 0"] {
padding: 60px 0 !important;
}
section h2[style*="font-size: 3rem"] {
font-size: 2rem !important;
}
section h3[style*="font-size: 2.5rem"] {
font-size: 1.8rem !important;
}
section a[style*="padding: 25px 60px"] {
padding: 20px 40px !important;
font-size: 1.2rem !important;
}
/* ボタンのレスポンシブ */
.cta-button {
width: 100%;
max-width: 350px;
margin: 0 auto;
display: block;
text-align: center;
}
}
/* タブレット対応 */
@media (min-width: 769px) and (max-width: 1024px) {
/* コンテナの幅調整 */
.container {
max-width: 90%;
}
/* グリッドレイアウトの調整 */
section div[style*="display: grid; grid-template-columns: 1fr 1fr 1fr"] {
grid-template-columns: 1fr 1fr !important;
}
/* フォントサイズの微調整 */
section h2[style*="font-size: 2.5rem"] {
font-size: 2.2rem !important;
}
section h3[style*="font-size: 2.2rem"] {
font-size: 1.9rem !important;
}
}
/* 小さいスマホ対応 */
@media (max-width: 480px) {
/* さらに小さいフォントサイズ */
.hero-content h1[style*="font-size: 28px"] {
font-size: 18px !important;
line-height: 1.4 !important;
}
.hero-content span[style*="font-size: 32px"] {
font-size: 20px !important;
}
/* パディングの調整 */
section {
padding: 40px 0 !important;
}
.hero-content > div {
padding: 20px 10px !important;
}
/* ボタンサイズの調整 */
section a[style*="padding: 25px 60px"] {
padding: 18px 30px !important;
font-size: 1.1rem !important;
}
}
/* ===== responsive-optimize.css ===== */
/* ===================================
レスポンシブ最適化 共通スタイル
全ページ共通のスクロールなし設計
=================================== */
main {
flex: 1;
}
/* タイトル最適化 */
.page-title,
h1 {
font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important;
margin-bottom: 10px !important;
font-weight: 800;
}
.page-subtitle,
.subtitle {
font-size: clamp(0.95rem, 1.8vw, 1.15rem) !important;
margin-bottom: 15px !important;
}
.section-title,
h2 {
font-size: clamp(1.4rem, 2.8vw, 1.8rem) !important;
margin-bottom: 20px !important;
}
h3 {
font-size: clamp(1.1rem, 2vw, 1.3rem) !important;
margin-bottom: 10px;
}
/* セクション共通 */
section {
padding: 5rem 3rem !important;
}
/* カード共通最適化 */
.card,
.plan-card,
.problem-card,
.solution-card,
.importance-card,
.suggest-card,
.subsidy-type,
.case-item {
padding: 20px !important;
margin-bottom: 15px !important;
}
/* アイコン最適化 */
.icon,
.card-icon,
.problem-icon,
.solution-icon,
.suggest-card-icon {
font-size: 2rem !important;
margin-bottom: 10px !important;
}
/* ボタン共通 */
.cta-button,
.btn,
.button {
padding: 12px 35px !important;
font-size: 1rem !important;
transition: all 0.3s;
}
/* グリッド最適化 */
.grid,
.cards-grid,
.pricing-grid {
gap: 15px !important;
}
/* タブレット (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
section {
padding: 35px 15px !important;
}
}
/* モバイル (768px以下) */
@media (max-width: 768px) {
.hero-section,
.page-hero {
padding: 30px 15px !important;
}
section {
padding: 25px 15px !important;
}
.page-title,
h1 {
font-size: 1.5rem !important;
}
.section-title,
h2 {
font-size: 1.4rem !important;
margin-bottom: 15px !important;
}
h3 {
font-size: 1.1rem !important;
}
.card,
.plan-card,
.problem-card,
.solution-card,
.importance-card,
.suggest-card,
.subsidy-type,
.case-item {
padding: 15px !important;
}
.grid,
.cards-grid,
.pricing-grid,
.problem-cards,
.solution-cards,
.importance-cards {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.cta-button,
.btn,
.button {
padding: 10px 30px !important;
font-size: 0.95rem !important;
}
/* ナビゲーションタブ */
.pricing-nav-tabs,
.nav-tabs {
padding: 10px !important;
gap: 5px !important;
}
.nav-tab {
padding: 8px 15px !important;
font-size: 0.8rem !important;
}
}
/* 小画面 (480px以下) */
@media (max-width: 480px) {
.page-title,
h1 {
font-size: 1.4rem !important;
}
.page-subtitle,
.subtitle {
font-size: 0.9rem !important;
}
.section-title,
h2 {
font-size: 1.3rem !important;
}
h3 {
font-size: 1rem !important;
}
.cta-button,
.btn,
.button {
padding: 10px 25px !important;
font-size: 0.9rem !important;
}
/* 数字バッジ */
.card-number,
.step-number {
width: 35px !important;
height: 35px !important;
font-size: 1rem !important;
}
}
/* 超小画面 (360px以下) */
@media (max-width: 360px) {
body {
font-size: 14px !important;
}
.page-title,
h1 {
font-size: 1.2rem !important;
}
.section-title,
h2 {
font-size: 1.1rem !important;
}
section {
padding: 20px 10px !important;
}
}
/* 印刷対応 */
@media print {
.pricing-nav-tabs,
.nav-tabs,
.hamburger,
.mobile-nav,
.cta-button,
.btn {
display: none !important;
}
section {
break-inside: avoid;
padding: 20px !important;
}
body {
font-size: 12pt !important;
}
}
/* ===== INLINE CSS FROM PAGES ===== */
/* --- from: 404.html --- */
.error-container {
text-align: center;
padding: 100px 20px;
min-height: 70vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes backgroundMove {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes blink {
0%, 100% { background: #fff5f5; }
50% { background: #ffe5e5; }
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes ctaPulse {
0%, 100% {
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
}
50% {
box-shadow: 0 12px 35px rgba(0, 102, 204, 0.4);
}
}
@keyframes floatBackground {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(50px); }
}
@keyframes slideRight {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(10px); }
}
/* --- from: components/aisas-model.html --- */
.aisas-model-component {
margin: 40px 0;
padding: 40px;
background: #f0f8ff;
}
.aisas-section .section-title {
font-size: 32px;
text-align: center;
margin-bottom: 40px;
background: linear-gradient(to right, #b3e5fc, #4fc3f7);
padding: 15px;
border-radius: 50px;
}
.aisas-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.aisas-pyramid {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}
.aisas-item {
padding: 15px;
margin: 10px 0;
border-left: 5px solid #4fc3f7;
display: flex;
align-items: center;
}
.aisas-item .letter {
font-size: 36px;
font-weight: bold;
color: #4fc3f7;
margin-right: 20px;
width: 50px;
}
.aisas-item .term {
font-size: 18px;
}
.aisas-item .highlight {
font-weight: bold;
color: #f57c00;
}
.main-text {
margin-bottom: 20px;
}
.sub-text {
margin-bottom: 30px;
}
.info-box {
background: #1976d2;
color: white;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
}
.consumer-behavior {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 40px;
padding: 30px;
background: white;
border-radius: 10px;
}
.behavior-icon {
text-align: center;
}
.behavior-icon .fa-ban {
font-size: 48px;
color: #d32f2f;
}
.behavior-change {
display: flex;
align-items: center;
gap: 20px;
font-size: 20px;
}
.behavior-change .fa-lightbulb {
font-size: 48px;
color: #ffd700;
}
/* --- from: components/influence-weapon.html --- */
.influence-weapon-component {
background: #f5f5f5;
padding: 30px;
margin: 40px 0;
border-radius: 10px;
}
.influence-header {
text-align: center;
margin-bottom: 30px;
}
.emphasis {
font-weight: bold;
}
.influence-content {
border-top: 1px dashed #ccc;
border-bottom: 1px dashed #ccc;
padding: 20px 0;
margin: 20px 0;
}
.influence-effect {
text-align: center;
margin-top: 30px;
}
.effect-text {
color: #d32f2f;
font-weight: bold;
margin-bottom: 20px;
}
.effect-highlight {
background: #4a90e2;
color: white;
padding: 30px;
border-radius: 10px;
margin-top: 20px;
}
.effect-highlight h3 {
font-size: 28px;
margin-bottom: 20px;
}
.effect-image-placeholder {
padding: 30px;
background: rgba(255,255,255,0.2);
border-radius: 10px;
color: white;
}
.effect-image-placeholder i {
margin-bottom: 10px;
}
.effect-image-placeholder p {
margin: 0;
font-size: 16px;
}
/* --- from: components/price-simulator.html --- */
.price-simulator-component {
background: #f0f8ff;
padding: 30px;
border-radius: 10px;
margin: 30px 0;
text-align: center;
}
.price-simulator-component h3 {
font-size: 22px;
margin-bottom: 20px;
color: #1976d2;
}
.simulator-step {
display: none;
animation: fadeIn 0.3s;
}
.simulator-step h4 {
font-size: 18px;
margin-bottom: 20px;
color: #333;
}
/* Step 1 Styles */
.type-selection {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.type-card {
background: white;
padding: 30px;
border-radius: 10px;
border: 2px solid #e0e0e0;
cursor: pointer;
transition: all 0.3s;
min-width: 200px;
}
.type-card:hover {
border-color: #1976d2;
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.type-card i {
font-size: 48px;
color: #1976d2;
margin-bottom: 15px;
}
.type-card h5 {
font-size: 20px;
margin-bottom: 10px;
}
/* Step 2 Styles */
.measure-selection {
max-width: 400px;
margin: 0 auto 30px;
text-align: left;
}
.measure-item {
display: block;
background: white;
padding: 15px;
margin-bottom: 10px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}
.measure-item:hover {
background: #f5f5f5;
}
.measure-item input[type="checkbox"] {
margin-right: 10px;
}
/* Step 3 Styles */
.result-section {
margin: 30px 0;
padding: 20px;
background: white;
border-radius: 5px;
}
.selected-type, .selected-measures {
font-size: 16px;
margin-bottom: 10px;
color: #666;
}
.base-price {
font-size: 24px;
font-weight: bold;
color: #1976d2;
margin-top: 20px;
}
.base-price span {
color: #d32f2f;
}
/* Buttons */
.next-btn, .back-btn, .simulate-btn, .reset-btn {
padding: 12px 30px;
border: none;
border-radius: 50px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
margin: 5px;
}
.next-btn, .simulate-btn {
background: #1976d2;
color: white;
}
.next-btn:hover, .simulate-btn:hover {
background: #1565c0;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.back-btn, .reset-btn {
background: #f5f5f5;
color: #666;
}
.back-btn:hover, .reset-btn:hover {
background: #e0e0e0;
}
.action-buttons {
margin-top: 30px;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* --- from: components/pricing-table.html --- */
.pricing-table-component {
margin: 40px 0;
padding: 30px;
background: #f8f9fa;
border-radius: 10px;
}
.pricing-table-component h2 {
font-size: 24px;
margin-bottom: 20px;
text-align: center;
}
.pricing-table {
width: 100%;
border-collapse: collapse;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.pricing-table th {
background: #b3c9ff;
color: #333;
padding: 15px;
font-weight: bold;
text-align: center;
}
.pricing-table td {
padding: 20px;
border: 1px solid #e0e0e0;
}
.pricing-table tr:nth-child(even) {
background: #e8f0ff;
}
.category {
position: relative;
text-align: center;
}
.badge {
display: inline-block;
background: white;
padding: 5px 20px;
border-radius: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.media-list {
line-height: 1.8;
}
.price {
text-align: center;
font-size: 20px;
font-weight: bold;
color: #1976d2;
}
.pricing-note {
margin-top: 20px;
text-align: center;
}
.detail-link {
display: inline-block;
margin-top: 10px;
color: #1976d2;
text-decoration: none;
font-weight: bold;
}
/* --- from: components/reverse-seo-explanation.html --- */
.reverse-seo-explanation {
margin: 40px 0;
padding: 30px;
background: #f8f9fa;
}
.definition-box {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.badge-wrapper {
font-size: 24px;
margin-bottom: 20px;
}
.check-icon {
color: #4caf50;
font-size: 30px;
margin-right: 10px;
}
.highlight-badge {
background: #ffd700;
padding: 5px 20px;
border-radius: 20px;
font-weight: bold;
}
.main-text {
font-size: 18px;
line-height: 1.8;
margin: 20px 0;
}
.comparison {
margin: 30px 0;
padding: 20px;
background: #f5f5f5;
border-radius: 10px;
}
.highlight-text {
margin-top: 20px;
}
.red-text {
color: #d32f2f;
font-weight: bold;
}
.visual-explanation {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 40px;
}
.good-content, .bad-content {
text-align: center;
padding: 20px;
}
.good-content .fa-arrow-up {
color: #4caf50;
font-size: 48px;
}
.bad-content .fa-arrow-down {
color: #d32f2f;
font-size: 48px;
}
.hate-label {
display: block;
background: #d32f2f;
color: white;
padding: 10px 20px;
margin-top: 10px;
font-weight: bold;
transform: rotate(-15deg);
}
/* --- from: _backup/html/20250812_043635/404.html --- */
.error-container {
text-align: center;
padding: 100px 20px;
min-height: 70vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.error-code {
font-size: clamp(80px, 15vw, 150px);
font-weight: 900;
color: #1976D2;
line-height: 1;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.error-title {
font-size: clamp(24px, 4vw, 36px);
color: #333;
margin-bottom: 20px;
font-weight: 700;
}
.error-message {
font-size: clamp(16px, 2.5vw, 20px);
color: #666;
margin-bottom: 40px;
max-width: 600px;
line-height: 1.6;
}
.error-icon {
font-size: 60px;
color: #ff9800;
margin-bottom: 30px;
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.error-actions {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.error-button {
display: inline-block;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
font-size: 16px;
}
.error-button.primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(25,118,210,0.4);
}
.error-button.secondary:hover {
background: #f5f5f5;
}
.search-suggestion {
margin-top: 60px;
padding: 30px;
background: #f8f9fa;
border-radius: 15px;
max-width: 600px;
}
.search-suggestion h3 {
font-size: 20px;
color: #333;
margin-bottom: 15px;
}
.quick-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin-top: 20px;
}
.quick-link {
display: flex;
align-items: center;
gap: 8px;
color: #1976D2;
text-decoration: none;
padding: 10px;
border-radius: 8px;
transition: background 0.3s ease;
}
.quick-link:hover {
background: rgba(25,118,210,0.1);
}
.quick-link i {
font-size: 18px;
}
/* フッター固定CTAボタンの文字色を白に強制 */
.fixed-cta-footer .fixed-diagnosis-btn,
.fixed-cta-footer .fixed-diagnosis-btn *,
.fixed-cta-footer a,
.fixed-cta-footer span,
.fixed-cta-footer i {
color: white !important;
}
.fixed-diagnosis-btn {
color: #ffffff !important;
}
.fixed-diagnosis-btn span {
color: #ffffff !important;
}
.fixed-diagnosis-btn i {
color: #ffffff !important;
}
/* グローバルスタイル改善 */
body {
font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #ffffff;
color: #2c3e50;
line-height: 1.8;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* カスタムファーストビュー用追加スタイル */
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-headline h1 {
font-size: clamp(1.8rem, 4.5vw, 3rem);
font-weight: 900;
color: #000;
line-height: 1.3;
margin-bottom: 15px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
letter-spacing: 0.02em;
}
.hero-headline h3.subtitle {
font-size: clamp(1rem, 2.2vw, 1.3rem);
color: #555;
font-weight: 600;
letter-spacing: 0.01em;
margin: 1em 0;
}
.highlight-number {
color: #ff6b00 !important;
font-weight: 900 !important;
font-size: 1.3em !important;
display: inline-block !important;
background: none !important;
-webkit-text-fill-color: #ff6b00 !important;
-webkit-background-clip: text;
background-clip: text;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* 信頼性バッジ - コンパクトデザイン */
.trust-badges {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 15px;
flex-wrap: wrap;
animation: fadeInUp 0.8s ease-out 0.2s both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.trust-badge {
background: white;
border-radius: 30px;
font-weight: 700;
color: #0066cc;
border: 2px solid #e0e8f0;
box-shadow: 0 6px 20px rgba(0,102,204,0.12);
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 8px;
backdrop-filter: blur(10px);
}
.trust-badge:not(.no-hover):hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,102,204,0.2);
}
.trust-badge.trust-link:hover {
transform: translateY(-3px) scale(1.05);
}
.trust-badge.trust-link:hover::after {
transform: translateX(3px);
}
.trust-badge.trust-link:hover .star {
color: #ffd700;
}
.trust-badge .star {
color: #ffa500;
font-size: 1.1em;
}
/* メインコンテンツグリッド */
.main-content {
display: flex;
gap: 20px;
align-items: stretch;
justify-content: center;
animation: fadeIn 0.8s ease-out 0.4s both;
width: 100%;
max-width: 900px;
min-height: 250px;
margin: 2rem auto;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* サジェスト例 - コンパクトデザイン */
.search-demo {
background: white;
border-radius: 16px;
padding: 0 2rem 2rem 2rem;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
border: 1px solid rgba(0,102,204,0.1);
transition: all 0.3s;
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
}
.search-demo-title {
font-size: 1rem;
color: #333;
margin-bottom: 12px;
font-weight: 700;
text-align: center;
}
.search-box-demo {
background: white;
border: 2px solid #4285f4;
border-radius: 24px;
padding: 10px 18px;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 1rem;
box-shadow: 0 3px 10px rgba(66,133,244,0.15);
}
.search-box-demo i {
color: #4285f4;
font-size: 1.2rem;
}
.suggest-list {
border-radius: 12px;
overflow: visible;
min-height: auto;
}
.suggest-item {
padding: 10px 15px;
border-bottom: 1px solid #f0f0f0;
font-size: 0.9rem;
color: #333;
display: flex;
align-items: center;
justify-content: space-between;
transition: background 0.3s;
}
.suggest-item:last-child {
border-bottom: none;
}
.suggest-item.negative::before {
content: '⚠';
position: absolute;
left: 0.5em;
font-size: 0.9rem;
animation: pulse 2s ease-in-out infinite;
}
@keyframes blink {
0%, 100% { background: #fff5f5; }
50% { background: #ffe5e5; }
}
.suggest-item.negative::after {
content: "非表示可";
color: #333;
padding: 4px 10px;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
animation: pulse 2s ease-in-out infinite;
}
/* ソリューションセクション */
.solution-section {
width: 100%;
flex: 1;
border-radius: 1em;
}
.search-demo > h2.hero-h2,
.solution-section > h2.hero-h2 {
color: #000;
font-size: 1.2rem !important;
font-weight: 700;
margin: 2rem 0 0;
text-align: center;
}
/* ビジュアルコンテナ */
.solution-visual-container {
width: 100%;
min-height: 200px;
background: linear-gradient(135deg, #f0f4f8, #ffffff);
border-radius: 16px;
padding: 20px;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.solution-visual-item {
background: #fff;
color: #000;
border-radius: 16px;
border: 1px solid #e6eef7;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
padding: 22px 15px 22px 6rem;
text-align: left;
position: relative;
}
.solution-visual-item::before {
content: '';
position: absolute;
top: 1rem;
left: 1.5rem;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 2.5rem;
}
.solution-visual-item div {
font-size: 1.1rem;
font-weight: 700;
color: #333;
}
/* 各サービスの色分け */
.solution-visual-item.suggest::before {
content: '\f002';
color: #2196F3;
}
.solution-visual-item.seo::before {
content: '\f201';
color: #4CAF50;
}
.solution-visual-item.legal::before {
content: '\f0e3';
color: #FF9800;
}
/* CTA - 目立つボタン */
.hero-cta {
text-align: center;
animation: slideInUp 0.8s ease-out 0.6s both;
}
section.important-fact {
background-image: url(../images/important-fact.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.fact-text {
color: #fff;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
text-align: center;
font-size: 1.1rem;
font-weight: 700;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cta-button {
overflow: hidden;
animation: ctaPulse 3s ease-in-out infinite;
letter-spacing: 0.02em;
}
@keyframes ctaPulse {
0%, 100% {
box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
}
50% {
box-shadow: 0 12px 35px rgba(0, 102, 204, 0.4);
}
}
.cta-subtitle {
margin-top: 12px;
font-size: 0.95rem;
color: #000;
font-weight: 900;
animation: fadeIn 1s ease-out 0.8s both;
}
.cta-subtitle i {
color: #4caf50;
margin-right: 5px;
}
/* セクション */
.section {
padding: 80px 20px;
max-width: 1200px;
margin: 0 auto;
}
.section h2 {
font-size: 2.5rem;
text-align: center;
margin-bottom: 50px;
color: #1a1a1a;
font-weight: 800;
position: relative;
padding-bottom: 20px;
}
.section h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(to right, #0066cc, #4caf50);
border-radius: 2px;
}
/* ポジティブサジェストセクション */
.positive-section {
padding: 100px 20px;
background: linear-gradient(180deg, #ffffff 0%, #f0f8ff 50%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.positive-section::before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 200%;
height: 100%;
background:
radial-gradient(circle at 20% 50%, rgba(0,102,204,0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(76,175,80,0.03) 0%, transparent 50%);
animation: floatBackground 20s ease-in-out infinite;
}
@keyframes floatBackground {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(50px); }
}
.positive-section .container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.title-badge {
display: block;
background: linear-gradient(135deg, #0066cc, #4caf50);
color: white;
padding: 5px 20px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 20px;
animation: fadeInDown 0.8s ease-out;
width: 30%;
margin: 0 auto;
}
.section-title {
font-weight: 900;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
animation: fadeIn 1s ease-out 0.2s both;
}
.title-negative {
color: var(--accent-color);
text-decoration: line-through;
opacity: 0.6;
font-size: 0.9em;
white-space: nowrap;
display: inline-block;
}
.title-arrow {
color: #0066cc;
font-size: 1.2em;
animation: slideRight 1.5s ease-in-out infinite;
}
@keyframes slideRight {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(10px); }
}
.title-positive {
background: linear-gradient(135deg, #0066cc, #4caf50);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 900;
white-space: nowrap;
display: inline-block;
}
.section-subtitle {
text-align: center;
margin-bottom: 50px;
animation: fadeInUp 1s ease-out 0.4s both;
}
.subtitle-highlight {
display: inline-block;
background: #f0f8ff;
color: #0066cc;
padding: 3px 12px;
border-radius: 15px;
font-weight: 700;
margin-right: 10px;
border: 1px solid #cce0ff;
}
.platform-card {
background: white;
border-radius: 20px;
padding: 0;
transition: all 0.3s;
overflow: hidden;
border: 1px solid #f0f0f0;
}
.platform-header {
padding: 15px;
color: white;
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
}
.platform-header i {
font-size: 1.2rem;
}
.rakuten-logo {
font-weight: 900;
font-size: 1.2rem;
}
.platform-header h3 {
margin: 0;
font-size: 1.1rem;
}
.suggest-preview {
padding: 20px;
}
.search-input {
background: #f8f9fa;
border: 2px solid #ddd;
border-radius: 25px;
padding: 10px 15px;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
font-size: 0.95rem;
}
.search-input i {
color: #666;
}
.positive-suggests {
display: flex;
flex-direction: column;
gap: 8px;
}
.positive-item {
padding: 8px 12px;
background: #f0fff4;
border-left: 3px solid #4caf50;
border-radius: 5px;
font-size: 0.9rem;
transition: all 0.2s;
}
.positive-item:hover {
background: #e8f5e9;
transform: translateX(5px);
}
.positive-item .highlight {
color: #4caf50;
font-weight: 700;
}
.positive-cta {
text-align: center;
padding: 40px;
background: white;
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.cta-text {
font-size: 1.3rem;
margin-bottom: 20px;
color: #333;
font-weight: 700;
}
.cta-text i {
color: #4caf50;
margin-right: 10px;
}
.cta-button-secondary {
display: inline-block;
color: white;
padding: 15px 40px;
border-radius: 50px;
text-decoration: none;
transition: all 0.3s;
}
.positive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-bottom: 50px;
}
#positive-suggest .section-header::after {
content: "";
display: block;
width: 15rem;
height: 4rem;
background-image: url(../images/icons.png);
background-size: 15rem auto;
background-position: left top;
background-repeat: no-repeat;
margin: 1rem auto 2rem;
}
/* モバイル対応 */
@media (max-width: 768px) {
.section-title {
flex-direction: column;
gap: 10px;
}
.title-negative {
font-size: 0.85rem;
white-space: nowrap;
}
.title-arrow {
transform: rotate(90deg);
font-size: 1rem;
}
.title-positive {
font-size: 0.95rem;
white-space: nowrap;
}
.section-subtitle {
font-size: 0.9rem;
}
.subtitle-highlight {
display: block;
margin: 0 auto 10px;
width: fit-content;
}
.positive-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.platform-header h3 {
font-size: 1rem;
}
.cta-text {
font-size: 1.1rem;
}
}
/* モバイルレスポンシブ - 改善された視認性 */
@media (max-width: 768px) {
.hero-container {
padding: 20px 15px 80px;
justify-content: center;
gap: 15px;
margin-bottom: 20px;
}
.hero-headline {
margin-bottom: 10px;
}
.hero-headline h1 {
font-size: 1.5rem;
margin-bottom: 10px;
line-height: 1.4;
}
.hero-headline .subtitle {
font-size: 0.8rem;
}
.trust-badges {
gap: 8px;
margin-bottom: 20px;
padding-bottom: 10px;
}
.trust-badge {
font-size: 0.75rem;
padding: 6px 12px;
white-space: nowrap;
}
.main-content {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 15px;
align-items: center;
width: 100%;
max-width: 100%;
padding: 0 10px;
}
.search-demo {
padding: 12px;
max-width: 100%;
width: 100%;
margin-bottom: 40px;
}
.search-demo-title {
font-size: 0.8rem;
margin-bottom: 8px;
}
.search-box-demo {
padding: 6px 12px;
font-size: 0.85rem;
margin-bottom: 8px;
}
.suggest-item {
padding: 6px 10px;
font-size: 0.75rem;
}
/* ソリューションセクション - モバイル */
.solution-section {
margin-top: 12px;
width: 100%;
}
.solution-visual-container {
min-height: 150px;
padding: 15px;
gap: 10px;
}
.solution-visual-item i {
font-size: 2.5rem;
}
.cta-subtitle {
font-size: 0.8rem;
margin-top: 8px;
}
}
/* 料金プランカードのスタイル */
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.plan-card {
background: white;
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
position: relative;
transition: all 0.3s;
}
.plan-badge {
position: absolute;
top: -10px;
right: 20px;
background: linear-gradient(135deg, #ff6b6b, #ff4444);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
animation: pulse 2s ease-in-out infinite;
box-shadow: 0 4px 10px rgba(255,68,68,0.3);
}
.plan-card:first-child .plan-name {
color: #1a1a1a;
font-weight: 800;
}
.plan-name {
font-weight: 700;
}
.plan-target {
color: #666;
margin-bottom: 20px;
font-size: 0.95rem;
}
.plan-features {
list-style: none;
padding: 0;
}
.plan-features li {
position: relative;
padding-left: 25px;
margin-bottom: 12px;
}
.plan-features i {
position: absolute;
left: 0;
color: #4caf50;
}
.plan-card .plan-note {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #eee;
font-size: 0.85rem;
color: #ff6b6b;
font-weight: 600;
}
/* タブレット最適化 */
@media (min-width: 769px) and (max-width: 1024px) {
.hero-headline h1 {
font-size: 2rem;
}
.hero-headline .subtitle {
font-size: 1rem;
}
/* ソリューションセクション - タブレット */
.solution-visual-container {
min-height: 180px;
padding: 18px;
}
.solution-visual-item {
min-width: 95px;
min-height: 130px;
}
.solution-visual-item i {
font-size: 3rem;
}
.solution-visual-item span {
font-size: 0.95rem;
}
.pricing-grid {
grid-template-columns: 1fr;
max-width: 600px;
margin: 0 auto 30px;
}
}
/* 小さい画面用の追加調整 */
@media (max-width: 480px) {
.hero-section {
height: auto;
min-height: 100vh;
}
.hero-container {
height: auto;
min-height: calc(100vh - 70px);
}
}
/* --- from: _backup/html/20250812_043635/pages/branded-search/index.html --- */
/* ページ固有の調整 */
/* ブランド検索ページ特有 */
.subtitle {
font-size: clamp(0.9rem, 1.8vw, 1.1rem) !important;
display: block;
margin-top: 5px !important;
}
/* --- from: _backup/html/20250812_043635/pages/kuchikomi/index.html --- */
/* ページ固有の調整 */
/* --- from: _backup/html/20250812_043635/pages/kuchikomi/index.html --- */
/* クチコミページ専用スタイル */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
@keyframes attention {
0% {
box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
}
}
.highlight-text {
font-size: clamp(1.1rem, 2.2vw, 1.4rem) !important;
line-height: 1.4 !important;
}
/* ページヒーロー */
.page-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* --- from: pages/branded-search/index.html --- */
/* ページ固有の調整 */
/* ブランド検索ページ特有 */
.subtitle {
font-size: clamp(0.9rem, 1.8vw, 1.1rem) !important;
display: block;
margin-top: 5px !important;
}
.comparison-title {
font-size: clamp(1.2rem, 2.5vw, 1.6rem) !important;
margin-bottom: 15px !important;
}
/* モバイル時の追加調整 */
@media (max-width: 768px) {
.timeline-item {
padding-left: 40px !important;
}
}
@media (max-width: 480px) {
.comparison-title {
font-size: 1.1rem !important;
}
.case-title {
font-size: 1rem !important;
}
}
/* --- from: pages/kuchikomi/index.html --- */
/* ページ固有の調整 */
.card-number {
width: 40px !important;
height: 40px !important;
font-size: 1.2rem !important;
margin-bottom: 10px !important;
}
/* モバイル時の追加調整 */
@media (max-width: 480px) {
.card-number {
width: 35px !important;
height: 35px !important;
font-size: 1rem !important;
}
}
/* --- from: pages/kuchikomi/index.html --- */
/* クチコミページ専用スタイル */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.page-title {
margin: 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.page-title i {
margin-right: 1rem;
}
.page-subtitle {
margin: 0;
}
.kuchikomi-importance {
margin: 2rem 0;
background: #f8f9fa;
padding: 3rem 2rem;
border-radius: 20px;
}
.importance-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.importance-card {
background: linear-gradient(135deg, #4db8da 0%, #3498db 100%);
color: white;
border-radius: 15px;
text-align: center;
box-shadow: 0 5px 20px rgba(52, 152, 219, 0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.importance-card::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
transform: rotate(45deg);
}
.importance-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
}
.card-number {
background: rgba(255,255,255,0.9);
color: #3498db;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin: 0 auto 1rem;
position: relative;
z-index: 1;
}
.importance-card h3 {
font-size: 1.3rem;
margin-bottom: 0.8rem;
position: relative;
z-index: 1;
}
.importance-card p {
position: relative;
z-index: 1;
line-height: 1.6;
}
.highlight-box {
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
padding: 1.5rem 2rem;
border-radius: 10px;
text-align: center;
font-size: 1.1rem;
margin: 2rem 0 0 0;
border-left: 4px solid #f39c12;
box-shadow: 0 2px 10px rgba(243, 156, 18, 0.1);
color: #856404;
}
.highlight-box i {
color: #f39c12;
margin-right: 0.5rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.customer-mindset {
background: #f8f9fa;
padding: 4rem 2rem;
border-radius: 20px;
margin: 4rem 0;
}
.mindset-illustration {
display: flex;
align-items: center;
justify-content: center;
gap: 3rem;
margin-top: 2rem;
}
.customer-thoughts {
display: flex;
flex-direction: column;
gap: 1rem;
}
.thought-bubble {
background: white;
padding: 1rem 2rem;
border-radius: 20px;
position: relative;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.thought-bubble::after {
content: '';
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.customer-icon {
color: #3498db;
}
.review-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
margin: 3rem 0;
}
.positive-reviews, .negative-reviews {
padding: 2rem;
border-radius: 15px;
}
.positive-reviews {
background: #e8f5e9;
}
.negative-reviews {
background: #ffebee;
}
.review-item {
background: white;
padding: 1rem;
border-radius: 10px;
margin: 1rem 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
position: relative;
}
.stars {
color: #f39c12;
margin-bottom: 0.5rem;
}
.stars .fa-star {
margin-right: 2px;
}
.review-effect {
text-align: center;
color: #666;
margin-top: 1.5rem;
font-style: italic;
}
.review-characteristics ul {
list-style: none;
padding: 0;
}
.review-characteristics li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
}
.review-characteristics li::before {
content: '•';
position: absolute;
left: 0;
color: #e74c3c;
font-weight: bold;
}
.negative-impact {
margin: 4rem 0;
}
.impact-flow {
text-align: center;
}
.review-list {
max-width: 600px;
margin: 2rem auto;
}
.negative-highlight {
border: 2px solid #e74c3c;
animation: attention 2s infinite;
}
@keyframes attention {
0% {
box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
}
}
.fire-icon {
display: inline-block;
}
.impact-result {
background: #f8f9fa;
padding: 3rem;
border-radius: 20px;
margin-top: 2rem;
}
.customer-leaving {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
}
.customer-leaving i {
color: #e74c3c;
}
.thought {
background: white;
padding: 1rem 2rem;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.our-solution {
background: linear-gradient(135deg, #f0f8ff 0%, #e6f2ff 100%);
padding: 4rem 2rem;
border-radius: 20px;
margin: 4rem 0;
}
.solution-highlight {
text-align: center;
}
.monitoring-icon {
position: absolute;
top: 10px;
right: 10px;
background: #3498db;
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
}
.solution-benefits {
margin-top: 3rem;
}
.solution-benefits h4 {
color: #2c3e50;
font-size: 1.3rem;
line-height: 1.8;
margin-bottom: 2rem;
}
.solution-action {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
margin-top: 2rem;
}
.solution-action .highlight {
color: #e74c3c;
font-weight: bold;
font-size: 1.2rem;
}
.action-icon {
margin-top: 1rem;
color: #3498db;
}
.cta-section .section-title {
color: white;
}
.cta-section .section-title::after {
background: white;
}
.cta-section .section-title i {
color: white;
}
.cta-section p {
font-size: 1.2rem;
margin-bottom: 2rem;
position: relative;
z-index: 1;
}
.cta-button {
font-size: 1.1rem;
position: relative;
z-index: 1;
}
/* アニメーション */
.fade-in {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s ease forwards;
}
.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.2s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* インフルエンサー問題セクション */
.influencer-problem {
background: #fff;
padding: 4rem 0;
}
.ad-problem-content h3 {
color: #e74c3c;
font-size: 1.8rem;
text-align: center;
margin-bottom: 2rem;
}
.consumer-awareness {
text-align: center;
}
.main-point {
font-size: 1.3rem;
color: #2c3e50;
font-weight: bold;
margin-bottom: 3rem;
}
.twitter-examples {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.twitter-post {
background: #1a1a1a;
color: white;
padding: 1.5rem;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.post-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
color: #8899a6;
}
.post-header i {
font-size: 2rem;
}
.username {
font-size: 0.9rem;
}
.post-content p {
line-height: 1.6;
margin-bottom: 1rem;
}
.post-content .highlight-box {
background: #2d2d2d;
padding: 1rem;
border-radius: 10px;
margin-top: 1rem;
font-size: 0.9rem;
color: white;
border: none;
}
.ad-stats {
margin-top: 3rem;
}
.stat-box {
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
color: white;
padding: 2rem;
border-radius: 15px;
max-width: 600px;
margin: 0 auto;
box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
}
.stat-box h4 {
font-size: 1.5rem;
line-height: 1.8;
}
/* インフルエンサー欠点セクション */
.influencer-issues {
background: #f8f9fa;
padding: 4rem 0;
}
.initial-effect {
display: flex;
align-items: center;
justify-content: center;
gap: 3rem;
margin: 3rem 0;
flex-wrap: wrap;
}
.speech-bubble {
max-width: 200px;
text-align: center;
}
.speech-bubble::after {
content: '';
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.influencer-image {
color: #3498db;
}
.effect-description {
background: linear-gradient(135deg, #4db8da 0%, #3498db 100%);
color: white;
padding: 2rem;
border-radius: 15px;
max-width: 300px;
text-align: center;
position: relative;
}
.warning-badge {
position: absolute;
bottom: -20px;
right: -20px;
background: #e74c3c;
color: white;
padding: 1rem 2rem;
border-radius: 50px;
font-weight: bold;
font-size: 1.2rem;
box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
transform: rotate(-10deg);
}
.real-problems {
margin: 4rem 0;
}
.problem-cards {
max-width: 800px;
}
.problem-card {
color: white;
}
.problem-card h4 {
font-size: 1.3rem;
line-height: 1.8;
}
.influencer-failure {
text-align: center;
margin-top: 4rem;
}
.influencer-failure h3 {
font-size: 1.8rem;
color: #2c3e50;
margin-bottom: 2rem;
}
.search-result {
background: white;
padding: 2rem;
border-radius: 15px;
max-width: 700px;
margin: 2rem auto;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.site-info {
color: #666;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.site-info i {
color: #e74c3c;
margin-right: 0.5rem;
}
.url {
color: #999;
font-size: 0.8rem;
}
.result-item h5 {
color: #1a0dab;
font-size: 1.2rem;
margin: 0.5rem 0;
}
.result-item p {
color: #666;
line-height: 1.6;
}
.conclusion-box {
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
color: white;
padding: 2rem 3rem;
border-radius: 20px;
max-width: 600px;
margin: 3rem auto;
box-shadow: 0 10px 30px rgba(231, 76, 60, 0.3);
}
.conclusion-box h4 {
font-size: 1.5rem;
line-height: 1.8;
}
/* インフルエンサーマーケティング問題点セクション */
.influencer-marketing-problems {
padding: 4rem 0;
background: #fff;
}
.problems-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.problem-item {
background: #fff;
border: 2px solid #f0f0f0;
border-radius: 15px;
padding: 2rem;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
.problem-item:hover {
border-color: #e74c3c;
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(231, 76, 60, 0.15);
}
.problem-item .problem-number {
position: absolute;
top: -20px;
left: 20px;
background: #e74c3c;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
font-weight: bold;
box-shadow: 0 3px 10px rgba(231, 76, 60, 0.3);
}
.problem-item h3 {
color: #2c3e50;
font-size: 1.3rem;
margin-bottom: 1rem;
margin-top: 1rem;
}
.problem-item p {
color: #666;
line-height: 1.8;
}
.problem-summary {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 3rem;
border-radius: 20px;
text-align: center;
margin-top: 3rem;
border-left: 5px solid #3498db;
}
.problem-summary h3 {
color: #2c3e50;
font-size: 1.8rem;
margin-bottom: 1.5rem;
}
.problem-summary p {
font-size: 1.2rem;
line-height: 1.8;
color: #444;
}
.problem-summary .highlight {
color: #3498db;
font-weight: bold;
font-size: 1.3rem;
text-decoration-style: wavy;
text-decoration-color: #3498db;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.mindset-illustration {
flex-direction: column;
}
.thought-bubble::after {
display: none;
}
.review-comparison {
grid-template-columns: 1fr;
}
.customer-leaving {
flex-direction: column;
}
.problems-grid {
grid-template-columns: 1fr;
}
.problem-item .problem-number {
left: 50%;
transform: translateX(-50%);
}
}
/* --- from: pages/privacy/index.html --- */
/* プライバシーポリシー専用スタイル */
.privacy-container {
max-width: 900px;
margin: 40px auto;
padding: 0 20px;
}
.privacy-header {
text-align: center;
margin-bottom: 50px;
padding: 40px 20px;
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
border-radius: 15px;
}
.privacy-header h1 {
font-size: clamp(28px, 5vw, 40px);
color: #333;
margin-bottom: 15px;
font-weight: 700;
}
.privacy-header p {
font-size: clamp(14px, 2.5vw, 16px);
color: #666;
}
.last-updated {
display: inline-block;
background: white;
padding: 8px 20px;
border-radius: 20px;
font-size: 14px;
color: #666;
margin-top: 15px;
}
/* コンテンツカード */
.privacy-content {
background: white;
border-radius: 15px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* 目次 */
.table-of-contents {
background: #f8f9fa;
border-radius: 10px;
padding: 30px;
margin-bottom: 40px;
}
.table-of-contents h2 {
font-size: 20px;
color: #333;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.table-of-contents ol {
list-style: none;
counter-reset: toc-counter;
padding: 0;
}
.table-of-contents li {
counter-increment: toc-counter;
margin-bottom: 12px;
}
.table-of-contents li::before {
content: counter(toc-counter) ". ";
color: #2196F3;
font-weight: 600;
margin-right: 8px;
}
.table-of-contents a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.table-of-contents a:hover {
color: #2196F3;
}
/* セクション */
.privacy-section {
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid #e0e0e0;
}
.privacy-section:last-child {
border-bottom: none;
}
.privacy-section h2 {
font-size: 24px;
color: #333;
margin-bottom: 20px;
padding-left: 20px;
position: relative;
}
.privacy-section h2::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 24px;
background: #2196F3;
border-radius: 2px;
}
.privacy-section h3 {
font-size: 18px;
color: #333;
margin-top: 25px;
margin-bottom: 15px;
}
.privacy-section p,
.privacy-section li {
font-size: 15px;
line-height: 1.8;
color: #555;
}
.privacy-section ul,
.privacy-section ol {
margin-left: 25px;
margin-bottom: 20px;
}
.privacy-section li {
margin-bottom: 10px;
}
/* 会社情報テーブル */
.company-info-table {
background: #f8f9fa;
border-radius: 10px;
padding: 25px;
margin: 20px 0;
}
.company-info-table table {
width: 100%;
border-collapse: collapse;
}
.company-info-table th,
.company-info-table td {
text-align: left;
padding: 12px 15px;
border-bottom: 1px solid #e0e0e0;
}
.company-info-table th {
width: 30%;
font-weight: 600;
color: #333;
background: rgba(33,150,243,0.05);
}
.company-info-table td {
color: #555;
}
.company-info-table tr:last-child th,
.company-info-table tr:last-child td {
border-bottom: none;
}
/* 強調ボックス */
.highlight-box {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 20px;
margin: 20px 0;
border-radius: 5px;
}
.highlight-box p {
margin: 0;
color: #856404;
}
/* お問い合わせCTA */
.contact-cta {
background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
color: white;
padding: 40px;
border-radius: 15px;
text-align: center;
margin-top: 50px;
}
.contact-cta h3 {
font-size: 24px;
margin-bottom: 15px;
}
.contact-cta p {
font-size: 16px;
margin-bottom: 25px;
line-height: 1.6;
}
.contact-button {
display: inline-block;
background: white;
color: #2196F3;
padding: 14px 40px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
transition: all 0.3s ease;
}
.contact-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
/* レスポンシブ */
@media (max-width: 768px) {
.privacy-content {
padding: 25px 20px;
}
.privacy-section h2 {
font-size: 20px;
}
.company-info-table {
padding: 15px;
}
.company-info-table th,
.company-info-table td {
display: block;
width: 100%;
padding: 10px 15px;
}
.company-info-table th {
background: none;
font-weight: 700;
border-bottom: none;
padding-bottom: 5px;
}
.company-info-table td {
padding-top: 5px;
border-bottom: 1px solid #e0e0e0;
}
.company-info-table tr:last-child td {
border-bottom: none;
}
}
/* --- from: pages/subsidy/index.html --- */
/* ページ固有の調整 */
.highlight-text {
font-size: clamp(1.1rem, 2.2vw, 1.4rem) !important;
line-height: 1.4 !important;
}
/* --- from: pages/subsidy/index.html --- */
/* 補助金ページ専用スタイル */
/* ページヒーロー */
.page-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 50%);
animation: rotate 30s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.page-title {
position: relative;
z-index: 1;
}
.page-subtitle {
opacity: 0.9;
position: relative;
z-index: 1;
}
.hero-message {
position: relative;
z-index: 1;
}
.highlight-text {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1rem;
}
.sub-text {
opacity: 0.9;
}
/* 課題提示セクション */
.problem-section {
padding: 4rem 0;
background: #f8f9fa;
}
.problem-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin: 3rem 0;
}
.problem-card {
background: white;
border-radius: 10px;
text-align: center;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.problem-card i {
font-size: 2.5rem;
color: #667eea;
margin-bottom: 1rem;
}
.problem-card h3 {
font-size: 1rem;
color: #333;
}
.solution-arrow {
text-align: center;
font-size: 2rem;
color: #667eea;
margin: 2rem 0;
}
.solution-box {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2rem;
border-radius: 10px;
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.solution-box h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
/* サービスと効果 */
.service-effect {
padding: 4rem 0;
}
.service-flow {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.service-column, .effect-column {
background: #f8f9fa;
padding: 2rem;
border-radius: 10px;
min-width: 250px;
}
.service-column h3, .effect-column h3 {
color: #667eea;
margin-bottom: 1.5rem;
text-align: center;
}
.service-item {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.service-item i {
color: #28a745;
}
.arrow-right {
font-size: 2rem;
color: #667eea;
}
.effect-item {
background: white;
padding: 1rem;
border-radius: 5px;
margin-bottom: 1rem;
text-align: center;
}
/* 重要性セクション */
.suggest-importance, .review-importance {
padding: 4rem 0;
background: #f8f9fa;
}
.importance-points {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.point-item {
background: white;
padding: 2rem;
border-radius: 10px;
text-align: center;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
position: relative;
}
.point-number {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
background: #667eea;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
font-weight: bold;
}
.point-item h3 {
margin-top: 1rem;
color: #333;
}
.importance-message {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2rem;
border-radius: 10px;
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.importance-message i {
font-size: 2rem;
margin-bottom: 1rem;
}
/* 関係性セクション */
.suggest-relation {
padding: 4rem 0;
}
.lead-text {
text-align: center;
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 3rem;
color: #555;
}
.example-box {
background: #f8f9fa;
padding: 3rem;
border-radius: 10px;
margin: 2rem 0;
}
.search-examples {
display: flex;
justify-content: center;
gap: 4rem;
margin-bottom: 2rem;
}
.search-column h4 {
margin-bottom: 1rem;
color: #333;
}
.example-message {
text-align: center;
color: #555;
line-height: 1.8;
}
.benefit-box {
margin-top: 3rem;
}
.benefit-box h3 {
text-align: center;
color: #667eea;
margin-bottom: 2rem;
}
.benefit-items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.benefit-item {
background: white;
padding: 1.5rem;
border-radius: 10px;
text-align: center;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.benefit-item h4 {
color: #333;
font-size: 1.1rem;
}
/* 指名検索セクション */
.branded-search-importance {
padding: 4rem 0;
background: #f8f9fa;
}
.search-issue h3 {
text-align: center;
color: #667eea;
font-size: 1.8rem;
margin-bottom: 3rem;
}
.issue-content {
display: flex;
flex-direction: column;
align-items: center;
}
.issue-illustration {
text-align: center;
margin-bottom: 3rem;
}
.speech-bubble {
background: white;
padding: 1.5rem;
border-radius: 20px;
position: relative;
display: inline-block;
margin-bottom: 2rem;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.search-box {
background: #f8f9fa;
padding: 1.5rem;
border-radius: 10px;
border: 2px solid #ddd;
}
.issue-points {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
width: 100%;
}
.point {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.google-point {
border-left: 4px solid #4285f4;
}
.brand-point {
border-left: 4px solid #28a745;
}
/* クチコミ監視セクション */
.review-monitoring {
padding: 4rem 0;
}
.monitoring-content {
text-align: center;
}
.review-card {
background: white;
padding: 1.5rem;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
display: inline-block;
position: relative;
margin-bottom: 2rem;
}
.review-card i {
color: #ffc107;
margin-right: 0.5rem;
}
.monitoring-label {
position: absolute;
top: -10px;
right: -10px;
background: #dc3545;
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
}
.issue-text {
line-height: 1.8;
color: #555;
margin-bottom: 2rem;
}
.arrow-down {
font-size: 2rem;
color: #667eea;
margin: 2rem 0;
}
.solution-text {
background: #f8f9fa;
padding: 2rem;
border-radius: 10px;
display: inline-block;
}
.solution-text h3 {
color: #667eea;
margin-bottom: 0.5rem;
}
/* ブランディング効果 */
.branding-effect {
padding: 4rem 0;
background: #f8f9fa;
}
.effect-diagram {
text-align: center;
}
.effect-top {
background: #667eea;
color: white;
padding: 1.5rem 3rem;
border-radius: 10px;
display: inline-block;
margin-bottom: 2rem;
}
.effect-items, .result-items {
display: flex;
justify-content: center;
gap: 2rem;
margin: 2rem 0;
flex-wrap: wrap;
}
.effect-box, .result-box {
background: white;
padding: 1.5rem;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
min-width: 200px;
}
.cost-alert {
text-align: center;
margin-top: 3rem;
}
.cost-alert i {
font-size: 2rem;
color: #dc3545;
margin-right: 1rem;
}
.cost-alert span {
font-size: 1.5rem;
font-weight: bold;
color: #dc3545;
}
.alert-text {
margin-left: 0.5rem;
}
/* 補助金活用メリット */
.subsidy-merit {
padding: 4rem 0;
}
.merit-content h3 {
text-align: center;
color: #667eea;
font-size: 1.8rem;
margin-bottom: 3rem;
}
.example-list {
background: #f8f9fa;
padding: 2rem;
border-radius: 10px;
max-width: 600px;
margin: 0 auto 3rem;
}
.example-list ul {
list-style: none;
padding: 0;
}
.example-list li {
padding: 1rem;
border-bottom: 1px solid #ddd;
}
.example-list li:last-child {
border-bottom: none;
}
.sub-text {
font-size: 0.9rem;
color: #666;
}
.win-win-section {
margin-top: 3rem;
}
.win-win-diagram {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.partner-box {
background: white;
padding: 2rem;
border-radius: 10px;
text-align: center;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
min-width: 200px;
}
.partner-box i {
font-size: 3rem;
color: #667eea;
margin-bottom: 1rem;
}
.arrow-exchange {
font-size: 2rem;
color: #667eea;
}
.win-win-title {
text-align: center;
font-size: 2rem;
color: #667eea;
margin-bottom: 1rem;
}
.win-win-message {
text-align: center;
font-size: 1.2rem;
color: #555;
}
/* 補助金プロセス */
.subsidy-process {
padding: 4rem 0;
background: #f8f9fa;
}
.process-content {
max-width: 1000px;
margin: 0 auto;
}
.company-intro {
text-align: center;
margin-bottom: 3rem;
}
.company-intro i {
font-size: 3rem;
color: #667eea;
margin-bottom: 1rem;
}
.process-flow h3 {
text-align: center;
color: #667eea;
margin-bottom: 3rem;
}
.process-diagram {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.process-step {
background: white;
padding: 1.5rem;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
min-width: 150px;
}
.process-step i {
font-size: 2rem;
color: #667eea;
margin-bottom: 0.5rem;
}
.process-step p {
font-weight: bold;
margin-bottom: 0.5rem;
}
.step-detail {
font-size: 0.8rem;
color: #666;
}
.process-arrow {
font-size: 1.5rem;
color: #667eea;
}
.process-note {
background: white;
padding: 2rem;
border-radius: 10px;
margin-bottom: 3rem;
}
.highlight-note {
background: #fff3cd;
padding: 1rem;
border-radius: 5px;
margin-top: 1rem;
border-left: 4px solid #ffc107;
}
.important-points {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.important-points .point {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.important-points .point i {
font-size: 2rem;
margin-bottom: 1rem;
display: block;
text-align: center;
}
.important-points .point:first-child i {
color: #dc3545;
}
.important-points .point:last-child i {
color: #28a745;
}
/* お問い合わせセクション */
.subsidy-contact {
padding: 4rem 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
}
.subsidy-contact .section-title {
color: white;
}
.contact-message {
font-size: 1.2rem;
margin-bottom: 3rem;
}
.cta-buttons {
margin-top: 2rem;
}
.cta-button i {
margin-right: 0.5rem;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.search-examples {
flex-direction: column;
gap: 2rem;
}
.process-diagram {
flex-direction: column;
}
.process-arrow {
transform: rotate(90deg);
}
}