/* =============================================
 活用術ページ 統合最適化CSS
 作成日:2025-01-22
 3つのCSSファイルを統合・軽量化
 ============================================= */


* {
 margin:0;
 padding:0;
 box-sizing:border-box;
}

html {
 overflow-x:hidden;
 max-width:100vw;
 width:100%;
 scrollbar-gutter:stable;
}

body {
 font-family:'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 line-height:1.6;
 color:white;
 background-color:#0a0a0f;
 min-height:100vh;
 overflow-x:hidden;
 font-size:16px;
 padding-top:80px;
 width:100%;
 position:relative;
}


.unified-header {
 position:fixed;
 top:0;
 left:0;
 right:0;
 height:80px;
 background:linear-gradient(to bottom, rgba(10, 10, 15, 0.98), rgba(10, 10, 15, 0.95));
 backdrop-filter:blur(20px);
 -webkit-backdrop-filter:blur(20px);
 border-bottom:1px solid rgba(79, 172, 254, 0.3);
 z-index:10000;
 transition:all 0.3s ease;
 box-shadow:0 2px 20px rgba(0, 0, 0, 0.3);
}

.unified-header.scrolled {
 background:rgba(10, 10, 15, 0.99);
 box-shadow:0 5px 30px rgba(0, 0, 0, 0.6);
}

.header-container {
 width:100%;
 max-width:100%;
 margin:0 auto;
 height:100%;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:0 40px;
}

.unified-header .logo {
 flex-shrink:0;
 display:flex;
 align-items:center;
}

.unified-header .logo a {
 display:block;
 text-decoration:none;
}

.unified-header .logo img {
 height:55px;
 width:auto;
 transition:all 0.3s ease;
 filter:drop-shadow(0 0 10px rgba(79, 172, 254, 0.3));
}

.unified-header .logo:hover img {
 transform:scale(1.05);
 filter:drop-shadow(0 0 15px rgba(79, 172, 254, 0.5));
}


.pc-nav {
 display:none !important;
}


.mobile-menu-btn {
 display:block !important;
 width:50px;
 height:50px;
 background:rgba(79, 172, 254, 0.1);
 border:2px solid rgba(79, 172, 254, 0.5);
 border-radius:50%;
 cursor:pointer;
 position:relative;
 transition:all 0.3s ease;
}

.mobile-menu-btn span {
 position:absolute;
 left:50%;
 transform:translateX(-50%);
 width:22px;
 height:2px;
 background:#4facfe;
 transition:all 0.3s ease;
 border-radius:2px;
}

.mobile-menu-btn span:nth-child(1) { top:15px;}
.mobile-menu-btn span:nth-child(2) { top:50%;transform:translate(-50%, -50%);}
.mobile-menu-btn span:nth-child(3) { bottom:15px;}

.mobile-menu-btn:hover {
 background:rgba(79, 172, 254, 0.2);
 border-color:rgba(79, 172, 254, 0.8);
 box-shadow:0 0 25px rgba(79, 172, 254, 0.5);
 transform:scale(1.05);
}

.mobile-menu-btn.active span:nth-child(1) {
 top:50%;
 transform:translate(-50%, -50%) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2) {
 opacity:0;
}

.mobile-menu-btn.active span:nth-child(3) {
 bottom:50%;
 transform:translate(-50%, 50%) rotate(-45deg);
}


.mobile-nav {
 position:fixed;
 top:80px;
 right:-100%;
 width:80%;
 max-width:400px;
 height:calc(100vh - 80px);
 background:linear-gradient(to right, rgba(15, 15, 25, 0.98), rgba(15, 15, 25, 0.95));
 backdrop-filter:blur(20px);
 transition:right 0.3s ease;
 overflow-y:auto;
 z-index:9999;
}

.mobile-nav.active {
 right:0;
 box-shadow:-5px 0 30px rgba(0, 0, 0, 0.7);
}

.mobile-nav-list {
 list-style:none;
 padding:20px 0;
 margin:0;
}

.mobile-nav-item {
 border-bottom:1px solid rgba(79, 172, 254, 0.1);
}

.mobile-nav-link {
 display:block;
 padding:20px 30px;
 color:rgba(255, 255, 255, 0.9);
 text-decoration:none;
 font-size:16px;
 transition:all 0.3s ease;
 position:relative;
}

.mobile-nav-link:hover {
 color:#4facfe;
 background:rgba(79, 172, 254, 0.05);
 padding-left:40px;
}

.mobile-nav-item.active > .mobile-nav-link {
 color:#4facfe;
 background:rgba(79, 172, 254, 0.05);
}


.overlay {
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:rgba(0, 0, 0, 0.7);
 opacity:0;
 visibility:hidden;
 transition:all 0.3s ease;
 z-index:9998;
}

.overlay.active {
 opacity:1;
 visibility:visible;
}


#star-field {
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 z-index:-10;
 background:#0a0a0f;
}

.star {
 position:absolute;
 background:white;
 border-radius:50%;
 animation:twinkle 5s infinite;
}

@keyframes twinkle {
 0%, 100% { opacity:0.3;}
 50% { opacity:1;}
}

.shooting-star {
 position:fixed;
 width:2px;
 height:2px;
 background:white;
 z-index:-8;
 animation:shoot 3s linear infinite;
}

.shooting-star::before {
 content:'';
 position:absolute;
 width:300px;
 height:2px;
 background:linear-gradient(90deg, white, transparent);
 transform:translateX(-300px);
}

@keyframes shoot {
 0% {
 transform:rotate(-45deg) translateX(-500px);
 opacity:1;
 }
 100% {
 transform:rotate(-45deg) translateX(1000px);
 opacity:0;
 }
}

.galaxy-fog {
 position:fixed;
 width:200%;
 height:200%;
 top:-50%;
 left:-50%;
 background:radial-gradient(ellipse at center, transparent 0%, rgba(79, 172, 254, 0.05) 50%, transparent 100%);
 animation:rotate 200s linear infinite;
 z-index:-5;
}

@keyframes rotate {
 from { transform:rotate(0deg);}
 to { transform:rotate(360deg);}
}


.container {
 width:100%;
 max-width:100%;
 padding:0 20px;
 margin:0 auto;
}

section {
 padding:80px 0;
 width:100%;
 overflow-x:hidden;
 max-width:100vw;
}

.section-title {
 font-size:2.5rem;
 color:white;
 text-align:center;
 margin-bottom:40px;
 font-weight:700;
}


.target-card *,
.main-menu,
.before-box,
.after-box,
.ba-content,
.benefit-card {
 scrollbar-width:none;
 -ms-overflow-style:none;
}

.target-card *::-webkit-scrollbar,
.main-menu::-webkit-scrollbar,
.before-box::-webkit-scrollbar,
.after-box::-webkit-scrollbar,
.ba-content::-webkit-scrollbar,
.benefit-card::-webkit-scrollbar {
 display:none !important;
}


.hero-section {
 padding:120px 0 80px;
 color:white;
 text-align:center;
 position:relative;
 overflow:hidden;
 background:transparent;
 isolation:isolate;
}

.hero-section::before {
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-image:url('./images/hero/main-collection.jpg');
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 opacity:0.5;
 z-index:0;
 transition:background-image 1s ease, opacity 1s ease;
}

.hero-section::after {
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:linear-gradient(to bottom,
 rgba(26, 26, 46, 0.8) 0%,
 rgba(15, 15, 30, 0.9) 50%,
 rgba(4, 4, 8, 0.95) 100%);
 z-index:1;
}

.hero-section .container {
 position:relative;
 z-index:2;
}

.hero-title {
 font-size:3em;
 margin-bottom:20px;
 text-shadow:2px 2px 4px rgba(0,0,0,0.5);
 animation:fadeInDown 1s ease;
}

.hero-subtitle {
 font-size:1.8em;
 margin-bottom:30px;
 color:#4facfe;
 text-shadow:1px 1px 3px rgba(0,0,0,0.5);
 animation:fadeInUp 1s ease 0.3s both;
}

.hero-description {
 font-size:1.2em;
 line-height:1.8;
 max-width:800px;
 margin:0 auto 40px;
 opacity:0.95;
 text-shadow:1px 1px 2px rgba(0,0,0,0.5);
 animation:fadeInUp 1s ease 0.5s both;
}


.benefit-section {
 padding:100px 0;
 background:linear-gradient(135deg, rgba(10, 10, 15, 0.8) 0%, rgba(26, 26, 46, 0.8) 100%);
 position:relative;
 overflow-x:hidden;
 max-width:100vw;
}

.benefit-section .container {
 max-width:100%;
 margin:0 auto;
 padding:0 60px;
 box-sizing:border-box;
 overflow:hidden;
}

.benefit-title {
 text-align:center;
 margin-bottom:60px;
}

.benefit-title h2 {
 font-size:2.5rem;
 color:white;
 margin-bottom:20px;
 font-weight:bold;
 text-shadow:0 0 20px rgba(79, 172, 254, 0.3);
}

.target-cards {
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(600px, 1fr));
 gap:40px;
 margin-bottom:60px;
 max-width:2400px;
 margin-left:auto;
 margin-right:auto;
}

.target-card {
 background:rgba(20, 20, 30, 0.8);
 border:1px solid rgba(79, 172, 254, 0.3);
 border-radius:20px;
 padding:30px;
 transition:all 0.3s ease;
 position:relative;
 overflow:hidden;
}

.target-card::before {
 content:'';
 position:absolute;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
 background:radial-gradient(circle, rgba(79, 172, 254, 0.1) 0%, transparent 70%);
 opacity:0;
 transition:opacity 0.3s ease;
}

.target-card:hover {
 transform:translateY(-5px);
 box-shadow:0 10px 30px rgba(79, 172, 254, 0.3);
}

.target-card:hover::before {
 opacity:1;
}

.target-header {
 display:flex;
 align-items:center;
 margin-bottom:30px;
}

.target-icon {
 font-size:2rem;
 margin-right:15px;
 filter:drop-shadow(0 0 10px currentColor);
}

.target-name {
 font-size:1.3rem;
 color:white;
 font-weight:bold;
}

.before-after {
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:30px;
}

.before-box, .after-box {
 padding:30px;
 border-radius:15px;
 position:relative;
 overflow-y:scroll;
 overflow-x:hidden;
 max-height:400px;
 -webkit-overflow-scrolling:touch;
}

.before-box {
 background:rgba(50, 30, 30, 0.5);
 border:1px solid rgba(255, 100, 100, 0.3);
}

.after-box {
 background:rgba(30, 50, 70, 0.5);
 border:1px solid rgba(79, 172, 254, 0.5);
}

.ba-label {
 font-size:0.9rem;
 font-weight:bold;
 margin-bottom:12px;
 display:flex;
 align-items:center;
 gap:8px;
 color:white;
}

.before-box .ba-label { color:#ff9999;}
.after-box .ba-label { color:#79acfe;}

.ba-content {
 color:rgba(255, 255, 255, 0.9);
 line-height:1.8;
 font-size:1.1rem;
}

.ba-content p {
 margin-bottom:10px;
}


.nfc-demo-section {
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 padding:80px 0;
 color:white;
 text-align:center;
}

.nfc-demo-section .container {
 max-width:100%;
 padding:0 20px;
}

.nfc-demo-container {
 max-width:1000px;
 margin:0 auto;
 position:relative;
}

.phone-animation {
 display:inline-block;
 position:relative;
 animation:phoneMove 3s ease-in-out infinite;
}

@keyframes phoneMove {
 0%, 100% { transform:translateX(0) rotate(0deg);}
 50% { transform:translateX(50px) rotate(-5deg);}
}

.nfc-features {
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
 gap:30px;
 margin-top:50px;
 max-width:100%;
}

.nfc-feature {
 background:rgba(255,255,255,0.1);
 padding:30px;
 border-radius:15px;
 backdrop-filter:blur(10px);
}

.nfc-feature-icon {
 font-size:2.5em;
 margin-bottom:15px;
}


.nfc-function-section {
 background:linear-gradient(135deg, rgba(15, 15, 30, 0.9) 0%, rgba(26, 26, 46, 0.8) 100%);
 padding:100px 0;
 color:white;
 text-align:center;
 position:relative;
 overflow:hidden;
}

.nfc-function-section .container {
 max-width:100%;
 padding:0 20px;
}

.nfc-function-container {
 max-width:1200px;
 margin:0 auto;
 position:relative;
 z-index:1;
}

.nfc-function-title {
 font-size:2.5rem;
 margin-bottom:20px;
 color:white;
 font-weight:bold;
}

.nfc-function-subtitle {
 font-size:1.3rem;
 color:rgba(255, 255, 255, 0.9);
 margin-bottom:40px;
}

.nfc-function-card {
 background:rgba(20, 20, 30, 0.8);
 border:1px solid rgba(79, 172, 254, 0.3);
 border-radius:30px;
 padding:50px;
 margin:0 auto;
 max-width:100%;
 display:flex;
 align-items:center;
 gap:40px;
 box-shadow:0 20px 40px rgba(0, 0, 0, 0.3);
}

.nfc-function-icon {
 font-size:5rem;
 color:#4facfe;
 flex-shrink:0;
}

.nfc-function-content {
 flex:1;
 text-align:left;
}

.nfc-function-content h3 {
 font-size:2rem;
 margin-bottom:30px;
 color:white;
}

.nfc-function-features {
 display:grid;
 gap:20px;
 margin-bottom:30px;
}

.feature-item {
 display:flex;
 align-items:center;
 gap:15px;
 font-size:1.1rem;
}

.feature-icon {
 font-size:1.5rem;
 color:#4facfe;
}

.nfc-extension-info {
 background:rgba(79, 172, 254, 0.1);
 border:1px solid rgba(79, 172, 254, 0.3);
 border-radius:20px;
 padding:30px;
 margin-top:30px;
}

.nfc-extension-info h4 {
 display:flex;
 align-items:center;
 gap:10px;
 font-size:1.5rem;
 margin-bottom:15px;
 color:white;
}

.extension-steps {
 display:grid;
 grid-template-columns:repeat(3, 1fr);
 gap:20px;
 margin-top:30px;
}

.step-card {
 background:rgba(255, 255, 255, 0.05);
 border-radius:15px;
 padding:20px;
 text-align:center;
}

.step-number {
 font-size:2rem;
 font-weight:bold;
 color:#FF6B35;
 margin-bottom:10px;
}


.management-plan-section {
 background:white;
 padding:100px 0;
 text-align:center;
}

.management-plan-section .container {
 max-width:100%;
 padding:0 20px;
}

.management-plan-container {
 max-width:1200px;
 margin:0 auto;
}

.management-plan-title {
 font-size:2.5rem;
 color:#00427B;
 margin-bottom:20px;
 font-weight:bold;
}

.management-plan-subtitle {
 font-size:1.3rem;
 color:#666;
 margin-bottom:60px;
}

.management-plan-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
 gap:40px;
 max-width:100%;
 margin:0 auto;
}

.management-plan-card {
 background:#f8f9fa;
 border-radius:25px;
 padding:50px;
 position:relative;
 transition:all 0.3s ease;
 box-shadow:0 10px 30px rgba(0, 0, 0, 0.1);
}

.management-plan-card:hover {
 transform:translateY(-10px);
 box-shadow:0 20px 40px rgba(0, 0, 0, 0.15);
}

.plan-icon {
 font-size:4rem;
 margin-bottom:20px;
 color:#4facfe;
}

.plan-name {
 font-size:1.8rem;
 color:#00427B;
 margin-bottom:15px;
 font-weight:bold;
}

.plan-price {
 font-size:2.5rem;
 color:#DD6500;
 font-weight:bold;
 margin-bottom:30px;
}

.plan-features {
 list-style:none;
 padding:0;
 margin-bottom:30px;
 text-align:left;
}

.plan-features li {
 padding:10px 0;
 color:#555;
 display:flex;
 align-items:center;
 gap:10px;
}

.plan-features li::before {
 content:'✓';
 color:#4CAF50;
 font-weight:bold;
 font-size:1.2rem;
}

.plan-recommendation {
 background:rgba(79, 172, 254, 0.1);
 padding:15px;
 border-radius:10px;
 color:#333;
 font-size:0.95rem;
}


.content-examples-section {
 background:linear-gradient(135deg, rgba(15, 15, 30, 0.9) 0%, rgba(26, 26, 46, 0.8) 100%);
 padding:100px 0;
 color:white;
 position:relative;
 overflow:hidden;
}

.content-examples-section .container {
 max-width:100%;
 padding:0 20px;
}

.content-examples-section::before {
 content:'';
 position:absolute;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
 background:radial-gradient(circle, rgba(79, 172, 254, 0.05) 0%, transparent 70%);
 animation:pulse 15s ease-in-out infinite;
}

.examples-title {
 font-size:2.5rem;
 text-align:center;
 margin-bottom:20px;
 position:relative;
 z-index:1;
}

.examples-title .emoji {
 font-size:3rem;
 display:inline-block;
 margin-right:10px;
 animation:float 3s ease-in-out infinite;
}

.examples-subtitle {
 text-align:center;
 font-size:1.3rem;
 color:rgba(255, 255, 255, 0.9);
 margin-bottom:60px;
 position:relative;
 z-index:1;
}

.examples-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
 gap:40px;
 max-width:100%;
 margin:0 auto;
 position:relative;
 z-index:1;
}

.example-card {
 background:rgba(20, 20, 30, 0.8);
 border:1px solid rgba(79, 172, 254, 0.3);
 border-radius:20px;
 padding:40px;
 text-align:center;
 transition:all 0.3s ease;
 position:relative;
 overflow:hidden;
}

.example-card::before {
 content:'';
 position:absolute;
 top:-100%;
 left:-100%;
 width:300%;
 height:300%;
 background:radial-gradient(circle, rgba(79, 172, 254, 0.1) 0%, transparent 60%);
 opacity:0;
 transition:opacity 0.5s ease;
}

.example-card:hover {
 transform:translateY(-10px);
 box-shadow:0 20px 40px rgba(79, 172, 254, 0.3);
 border-color:rgba(79, 172, 254, 0.6);
}

.example-card:hover::before {
 opacity:1;
}

.example-icon {
 font-size:4rem;
 margin-bottom:20px;
 color:#4facfe;
 position:relative;
 z-index:1;
}

.example-card:nth-child(1) .example-icon {
 color:#ff6b6b;
}

.example-card:nth-child(2) .example-icon {
 color:#ffd93d;
}

.example-card:nth-child(3) .example-icon {
 color:#6bcf7f;
}

.example-name {
 font-size:1.5rem;
 margin-bottom:15px;
 color:white;
 position:relative;
 z-index:1;
}

.example-description {
 color:rgba(255, 255, 255, 0.8);
 line-height:1.6;
 margin-bottom:20px;
 position:relative;
 z-index:1;
}

.example-features {
 list-style:none;
 padding:0;
 margin-bottom:20px;
 text-align:left;
 position:relative;
 z-index:1;
}

.example-features li {
 padding:8px 0;
 padding-left:25px;
 position:relative;
 color:rgba(255, 255, 255, 0.7);
}

.example-features li::before {
 content:'✓';
 position:absolute;
 left:0;
 color:#4facfe;
 font-weight:bold;
}

.example-badge {
 display:inline-block;
 background:rgba(79, 172, 254, 0.2);
 border:1px solid rgba(79, 172, 254, 0.5);
 padding:8px 20px;
 border-radius:20px;
 font-size:0.9rem;
 color:#79acfe;
 position:relative;
 z-index:1;
}

.examples-cta {
 text-align:center;
 margin-top:60px;
 position:relative;
 z-index:1;
}

.cta-text {
 font-size:1.3rem;
 margin-bottom:30px;
 color:rgba(255, 255, 255, 0.9);
 line-height:1.8;
}

.example-detail-btn {
 display:inline-block;
 background:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
 color:white;
 padding:18px 50px;
 border-radius:50px;
 text-decoration:none;
 font-size:1.2rem;
 font-weight:bold;
 transition:all 0.3s ease;
 box-shadow:0 10px 30px rgba(79, 172, 254, 0.3);
 position:relative;
 overflow:hidden;
}

.example-detail-btn::before {
 content:'';
 position:absolute;
 top:50%;
 left:50%;
 width:0;
 height:0;
 background:rgba(255, 255, 255, 0.2);
 border-radius:50%;
 transform:translate(-50%, -50%);
 transition:width 0.6s, height 0.6s;
}

.example-detail-btn:hover {
 transform:translateY(-3px);
 box-shadow:0 15px 40px rgba(79, 172, 254, 0.4);
}

.example-detail-btn:hover::before {
 width:300px;
 height:300px;
}

.example-detail-btn i {
 margin-right:10px;
}


.guidelines-section {
 padding:100px 0;
 background:rgba(10, 10, 15, 0.5);
}

.guidelines-section .container {
 max-width:1200px;
 margin:0 auto;
 padding:0 40px;
}

.guideline-block {
 background:rgba(20, 20, 30, 0.8);
 border:1px solid rgba(79, 172, 254, 0.3);
 border-radius:20px;
 padding:40px;
 margin-bottom:40px;
}

.guideline-block h3 {
 color:#79acfe;
 font-size:1.8rem;
 margin-bottom:20px;
 display:flex;
 align-items:center;
 gap:10px;
}


.product-section {
 background:white;
 padding:80px 0;
}

.product-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
 gap:30px;
 max-width:1600px;
 margin:0 auto;
 padding:0 20px;
}

.product-card {
 background:#f8f9fa;
 border-radius:20px;
 overflow:hidden;
 box-shadow:0 10px 30px rgba(0,0,0,0.1);
 transition:all 0.3s ease;
 display:flex;
 flex-direction:column;
 height:100%;
}

.product-card:hover {
 transform:translateY(-10px);
 box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.product-image {
 width:100%;
 height:250px;
 object-fit:cover;
 image-rendering:crisp-edges;
 background-color:#f0f0f0;
 transition:transform 0.3s ease;
}

.product-card:hover .product-image {
 transform:scale(1.05);
}

.product-info {
 padding:30px;
 flex:1;
 display:flex;
 flex-direction:column;
}

.product-name {
 font-size:1.5em;
 margin-bottom:10px;
 color:#00427B;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 font-weight:bold;
}


.video-container {
 position:relative;
 padding-bottom:56.25%;
 height:0;
 overflow:hidden;
 max-width:800px;
 margin:0 auto;
 border-radius:10px;
 box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.video-container iframe {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 border-radius:10px;
}


.cta-section {
 background:linear-gradient(45deg, #667eea, #764ba2);
 padding:80px 0;
 text-align:center;
 color:white;
}

.cta-buttons {
 display:flex;
 gap:30px;
 justify-content:center;
 flex-wrap:wrap;
 margin-top:40px;
}

.cta-button {
 display:inline-block;
 padding:18px 40px;
 background:#DD6500;
 color:white;
 text-decoration:none;
 border-radius:50px;
 font-weight:bold;
 font-size:1.1em;
 transition:all 0.3s ease;
 box-shadow:0 5px 20px rgba(0,0,0,0.2);
}

.cta-button:hover {
 transform:translateY(-3px);
 box-shadow:0 8px 30px rgba(0,0,0,0.3);
 background:#ff7700;
}

.cta-button.secondary {
 background:transparent;
 border:2px solid white;
}

.cta-button.secondary:hover {
 background:white;
 color:#667eea;
}


.site-footer {
 background:rgba(10, 10, 15, 0.8);
 border-top:1px solid rgba(79, 172, 254, 0.2);
 padding:30px 0;
 text-align:center;
 width:100%;
 box-sizing:border-box;
}

.footer-logo {
 margin-bottom:15px;
}

.footer-logo img {
 max-width:150px;
 height:auto;
}

.copyright {
 font-size:0.9rem;
 color:rgba(255, 255, 255, 0.7);
 font-weight:400;
}


@keyframes fadeInDown {
 from {
 opacity:0;
 transform:translateY(-30px);
 }
 to {
 opacity:1;
 transform:translateY(0);
 }
}

@keyframes fadeInUp {
 from {
 opacity:0;
 transform:translateY(30px);
 }
 to {
 opacity:1;
 transform:translateY(0);
 }
}

@keyframes float {
 0%, 100% { transform:translateY(0);}
 50% { transform:translateY(-20px);}
}

@keyframes pulse {
 0%, 100% { opacity:0;transform:translate(-50%, -50%) scale(0.8);}
 50% { opacity:1;transform:translate(-50%, -50%) scale(1.2);}
}


@media (max-width:1399px) {
 .target-cards {
 grid-template-columns:1fr;
 gap:40px;
 max-width:900px;
 }
}

@media (max-width:768px) {
 body {
 padding-top:70px;
 }
 
 .unified-header {
 height:70px;
 }
 
 .header-container {
 padding:0 20px;
 }
 
 .unified-header .logo img {
 height:45px;
 }
 
 .mobile-menu-btn {
 width:45px;
 height:45px;
 }
 
 .mobile-nav {
 top:70px;
 height:calc(100vh - 70px);
 }
 
 .hero-title {
 font-size:2em;
 }
 
 .hero-subtitle {
 font-size:1.4em;
 }
 
 .benefit-section .container {
 padding:0 30px;
 }
 
 .benefit-title h2 {
 font-size:2rem;
 }
 
 .target-cards {
 grid-template-columns:1fr;
 gap:30px;
 max-width:100%;
 }
 
 .target-card {
 padding:30px 25px;
 }
 
 .before-after {
 grid-template-columns:1fr;
 gap:20px;
 }
 
 .product-grid {
 grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
 gap:20px;
 padding:0 15px;
 }
 
 .cta-buttons {
 flex-direction:column;
 align-items:center;
 }
 
 .video-container {
 margin:0 20px;
 }
 
 
 .nfc-function-card {
 flex-direction:column;
 text-align:center;
 padding:40px 30px;
 }
 
 .nfc-function-content {
 text-align:center;
 }
 
 .extension-steps {
 grid-template-columns:1fr;
 gap:15px;
 }
 
 
 .management-plan-grid {
 grid-template-columns:1fr;
 gap:30px;
 }
 
 
 .examples-grid {
 grid-template-columns:1fr;
 gap:30px;
 }
}

@media (max-width:480px) {
 body {
 padding-top:60px;
 }
 
 .unified-header {
 height:60px;
 }
 
 .header-container {
 padding:0 15px;
 }
 
 .unified-header .logo img {
 height:35px;
 }
 
 .mobile-menu-btn {
 width:40px;
 height:40px;
 }
 
 .mobile-nav {
 top:60px;
 height:calc(100vh - 60px);
 width:85%;
 }
 
 .benefit-section {
 padding:80px 0;
 }
 
 .benefit-title h2 {
 font-size:1.8rem;
 }
 
 .target-card {
 padding:25px 20px;
 }
 
 .target-header {
 flex-direction:column;
 text-align:center;
 }
 
 .target-icon {
 margin-right:0;
 margin-bottom:10px;
 }
 
 .guidelines-section {
 padding:80px 0;
 }
 
 .guideline-block {
 padding:25px 20px;
 }
 
 .product-section {
 padding:60px 0;
 }
 
 .product-grid {
 grid-template-columns:1fr;
 gap:20px;
 padding:0 15px;
 }
}


@media (min-width:1600px) {
 .header-container {
 padding:0 60px;
 }
 
 .container {
 max-width:1600px;
 padding:0 60px;
 }
 
 .benefit-section {
 padding:120px 0;
 }
 
 .target-cards {
 grid-template-columns:repeat(2, 1fr);
 gap:60px;
 }
 
 .target-card {
 padding:50px;
 }
 
 
 .nfc-function-container {
 max-width:1400px;
 }
 
 .nfc-function-card {
 padding:70px;
 max-width:1200px;
 }
 
 .nfc-function-title {
 font-size:3rem;
 }
 
 .nfc-function-subtitle {
 font-size:1.5rem;
 }
 
 
 .management-plan-container {
 max-width:1400px;
 }
 
 .management-plan-grid {
 grid-template-columns:repeat(2, 1fr);
 gap:60px;
 max-width:1000px;
 }
 
 
 .content-examples-section .container {
 max-width:1600px;
 padding:0 60px;
 }
 
 .examples-grid {
 grid-template-columns:repeat(3, 1fr);
 gap:60px;
 max-width:1400px;
 }
 
 .example-card {
 padding:50px;
 }
}

@media (min-width:1920px) {
 .header-container {
 padding:0 80px;
 }
 
 .container {
 max-width:1800px;
 padding:0 80px;
 }
 
 .target-cards {
 gap:80px;
 }
 
 .target-card {
 padding:60px;
 }
 
 .product-grid {
 grid-template-columns:repeat(3, 1fr);
 gap:80px;
 max-width:1800px;
 }
 
 
 .nfc-function-container {
 max-width:1600px;
 }
 
 .nfc-function-card {
 max-width:1400px;
 }
 
 
 .management-plan-container {
 max-width:1600px;
 }
 
 .management-plan-grid {
 max-width:1200px;
 }
 
 
 .content-examples-section .container {
 max-width:1800px;
 padding:0 80px;
 }
 
 .examples-grid {
 max-width:1600px;
 }
}


#animation-reducer {
 display:none !important;
}

.content-wrapper {
 padding-top:0 !important;
}


.plan-section {
 display:none !important;
}