@charset"UTF-8";


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

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
color: #1a1a1a;
line-height: 1.7;
overflow-x: hidden;
background: #ffffff;
}

/* プロフェッショナルなタイポグラフィ */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
letter-spacing: -0.5px;
}

/* スムーズなスクロール */
html {
scroll-behavior: smooth;
}

/* ナビゲーション - プロ仕様 */
nav {
background: rgba(255, 255, 255, 0.98);
color: #2c5aa0;
padding: 1.2rem 2rem;
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(20px);
box-shadow: 0 2px 20px rgba(44, 90, 160, 0.06);
border-bottom: 1px solid rgba(44, 90, 160, 0.08);
transition: all 0.3s ease;
}

nav.scrolled {
padding: 0.8rem 2rem;
box-shadow: 0 4px 30px rgba(44, 90, 160, 0.1);
}

nav .container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}

nav .logo {
font-size: 1.5rem;
font-weight: 900;
background: linear-gradient(135deg, #2c5aa0 0%, #4a7bb8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -1px;
}

nav ul {
list-style: none;
display: flex;
gap: 2.5rem;
}

nav a {
color: #2c5aa0;
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
position: relative;
transition: color 0.3s;
}

nav a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #2c5aa0, #5b8fc4);
transition: width 0.3s ease;
}

nav a:hover {
color: #5b8fc4;
}

nav a:hover::after {
width: 100%;
}
/* ハンバーガーボタン（PC時は非表示） */
.nav-toggle {
display: none;
width: 32px;
height: 32px;
padding: 0;
border: none;
background: none;
cursor: pointer;
}

.nav-toggle span {
display: block;
width: 100%;
height: 2px;
margin: 6px 0;
background: #4a7bb8;
transition: transform 0.2s ease, opacity 0.2s ease;
}
/* 共通 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}

/* HERO セクション - プロフェッショナル仕様 */
.hero {
height: 92vh;
background: linear-gradient(135deg, #2c5aa0 0%, #1e3a5f 50%, #2a4d7c 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}

.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('../img/main.png');
background-size: cover;
background-position: center;
opacity: 0.1;
z-index: 1;
}

/* 装飾的な背景要素 */
.hero::after {
content: '';
position: absolute;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(91, 143, 196, 0.12) 0%, transparent 70%);
border-radius: 50%;
top: -200px;
right: -200px;
z-index: 1;
animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 0.12;
}
50% {
transform: scale(1.1);
opacity: 0.18;
}
}

.hero-content {
text-align: center;
z-index: 2;
max-width: 900px;
animation: fadeInUp 1.2s ease-out;
}

.hero h1 {
font-size: 4rem;
margin-bottom: 1.5rem;
font-weight: 900;
letter-spacing: -3px;
line-height: 1.1;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.hero br {
 display:none;
}
.hero h1 span {
background: linear-gradient(90deg, #ffffff 0%, #b8d4f1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.hero .subtitle {
font-size: 1.5rem;
margin-bottom: 2.5rem;
opacity: 0.92;
font-weight: 300;
letter-spacing: 0.5px;
}
.hero .subtitle br{
display:none;
}

.hero .tagline {
font-size: 1.15rem;
margin: 2rem 0;
opacity: 0.88;
line-height: 2;
}

.hero .tagline p {
margin: 0;
padding: 0 1rem;
}

.cta-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
margin-top: 3rem;
flex-wrap: wrap;
}

.btn {
padding: 1.2rem 3rem;
font-size: 1.05rem;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
font-weight: 700;
text-decoration: none;
display: inline-block;
position: relative;
overflow: hidden;
letter-spacing: 0.5px;
}

.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s;
}

.btn:hover::before {
left: 100%;
}

.btn-primary {
background: linear-gradient(135deg, #5b8fc4 0%, #4a7bb8 100%);
color: white;
box-shadow: 0 10px 30px rgba(91, 143, 196, 0.25);
}

.btn-primary:hover {
background: linear-gradient(135deg, #4a7bb8 0%, #3d6ba3 100%);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(91, 143, 196, 0.3);
}

.btn-primary:active {
transform: translateY(-1px);
}

.btn-secondary {
background: rgba(255, 255, 255, 0.95);
color: #2c5aa0;
border: 2px solid rgba(91, 143, 196, 0.3);
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
background: white;
border-color: #5b8fc4;
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3);
}

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

/* このページでできること - プロ仕様 */
.what-you-can-do {
background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
padding: 3rem 2rem;
position: relative;
}

.what-you-can-do::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, #2c5aa0, #5b8fc4);
border-radius: 2px;
}

.what-you-can-do h2 {
text-align: center;
margin-bottom: 1rem;
}

.what-you-can-do > .container > p {
text-align: center;
color: #666;
font-size: 1.1rem;
margin-bottom: 3rem;
}

.what-you-can-do-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
margin-top: 3rem;
}

.feature-card {
background: white;
padding: 2.5rem;
border-radius: 20px;
box-shadow: 0 5px 30px rgba(44, 90, 160, 0.06);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 1px solid rgba(44, 90, 160, 0.06);
position: relative;
overflow: hidden;
}

.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #2c5aa0, #5b8fc4);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}

.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 50px rgba(44, 90, 160, 0.12);
}

.feature-card:hover::before {
transform: scaleX(1);
}

.feature-card h3 {
color: #2c5aa0;
margin-bottom: 1.2rem;
font-size: 1.3rem;
display: flex;
align-items: center;
gap: 0.5rem;
}

.feature-card p {
color: #555;
line-height: 1.5;
font-size: 1.05rem;
}

/* セクション共通 - プロフェッショナル */
section {
padding: 5rem 2rem;
position: relative;
}

section h2 {
font-size: 2.8rem;
			line-height: 1.3em;
position: relative;
/*display: inline-block;*/
}

section .subtitle {
font-size: 1.3rem;
color: #666;
margin-bottom: 4rem;
font-weight: 300;
line-height: 1.6;
}

section .subtitle_white {
color: #fff !important;
}

/* Up Next セクション */
.upnext {
background: white;
}

.section-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
margin-bottom: 3rem;
}

.section-image {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 60px rgba(44, 90, 160, 0.12);
position: relative;
transition: all 0.4s ease;
}

.section-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(44, 90, 160, 0.08), transparent);
z-index: 1;
opacity: 0;
transition: opacity 0.4s ease;
}

.section-image:hover::before {
opacity: 1;
}

.section-image:hover {
transform: scale(1.02);
box-shadow: 0 20px 70px rgba(44, 90, 160, 0.15);
}

.section-image img {
width: 115%;
height: 450px;
object-fit: cover;
transition: transform 0.4s ease;
			transform: scale(1.04);
}

.section-image:hover img {
transform: scale(1.05);
}

.section-text h3 {
color: #2c5aa0;
font-size: 1.8rem;
margin-bottom: 0.5rem;
line-height: 1.3;
}

.section-text > p {
font-size: 1.1rem;
color: #555;
margin-bottom: 2rem;
line-height: 1.8;
}

.benefits-list {
list-style: none;
margin-bottom: 2.5rem;
}

.benefits-list li {
margin-bottom: 2rem;
padding-left: 3rem;
position: relative;
transition: transform 0.3s ease;
}

.benefits-list li:hover {
transform: translateX(5px);
}

.benefits-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
color: #5b8fc4;
font-weight: bold;
font-size: 1.5rem;
width: 35px;
height: 35px;
background: linear-gradient(135deg, rgba(91, 143, 196, 0.12), rgba(44, 90, 160, 0.08));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.benefits-list strong {
color: #2c5aa0;
font-size: 1.1rem;
display: block;
margin-bottom: 0.5rem;
}

.benefits-list li br + text {
color: #666;
font-size: 1rem;
}

/* Ediphi セクション */
.ediphi {
background: #f8f9fa;
}

.ediphi .section-content {
grid-template-columns: 1fr 1fr;
}

.ediphi .section-content .section-image {
order: 2;
}

.ediphi .section-text {
order: 1;
}

/* 比較表 - プロフェッショナル */
.comparison {
background: white;
position: relative;
}
		.comparison > .container > h2 {
text-align: center;
font-size: 2.8rem;
color: #2c5aa0;
}

.comparison::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 300px;
background: linear-gradient(180deg, #f8f9fa 0%, transparent 100%);
z-index: 0;
}

.comparison .container {
position: relative;
z-index: 1;
}

.comparison-table {
width: 100%;
border-collapse: collapse;
margin-top: 3rem;
box-shadow: 0 10px 50px rgba(44, 90, 160, 0.08);
border-radius: 20px;
overflow: hidden;
background: white;
}

.comparison-table thead {
background: linear-gradient(135deg, #2c5aa0 0%, #2a4d7c 100%);
color: white;
}

.comparison-table th,
.comparison-table td {
padding: 1.8rem 2rem;
text-align: left;
border-bottom: 1px solid #f0f0f0;
}

.comparison-table tbody tr {
transition: all 0.3s ease;
}

.comparison-table tbody tr:hover {
background: linear-gradient(90deg, rgba(91, 143, 196, 0.04) 0%, transparent 100%);
transform: scale(1.01);
}

.comparison-table th {
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 0.5px;
}

.comparison-table td {
color: #555;
font-size: 1.05rem;
}

.comparison-table td:first-child {
font-weight: 600;
color: #2c5aa0;
}

.comparison-table tbody tr:last-child td {
border-bottom: none;
}

/* パララックスセクション全体 - プロ仕様 */
.parallax-section-wrapper {
padding: 3rem 0;
background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);
position: relative;
}

.parallax-section-wrapper > .container > h2 {
text-align: center;
font-size: 2.8rem;
color: #2c5aa0;
}

.parallax-section-wrapper > .container > p {
text-align: center;
margin-bottom: 3rem;
font-size: 1.2rem;
color: #666;
font-weight: 300;
}

/* パララックスセクション - 高度なデザイン */
.parallax {
position: relative;
height: 650px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: flex-start;
color: white;
/*margin: 3rem 0;
border-radius: 25px;*/
box-shadow: 0 15px 60px rgba(44, 90, 160, 0.12);
}

.parallax-bg {
position: absolute;
top: -4%;/* 余裕を多めにとる */
left: 0;
width: 100%;
height: 150%; /* 親よりかなり大きくする */
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
z-index: 1;
will-change: transform;
}

.parallax-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(131deg, rgba(0, 0, 0, 0.6) 0%, rgba(44, 90, 150, 0.05) 23%, rgba(0, 0, 0, 0.15) 50%);
z-index: 2;
}

.parallax-content {
position: relative;
z-index: 3;
padding: 2.2rem;
 max-width: 600px;
animation: slideIn 1s ease-out;
background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.parallax-content-left {
margin-right: 4rem;
margin-left: auto;
}

.parallax-content-right {
margin-left: 4rem;
margin-right: auto;
text-align: left;
}

.parallax-content-center {
margin: 0 auto;
text-align: center;
max-width: 650px;
}

.parallax-badge {
display: inline-block;
background: linear-gradient(135deg, #5b8fc4 0%, #4a7bb8 100%);
color: white;
padding: 0.6rem 1.5rem;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 1.5rem;
letter-spacing: 1px;
box-shadow: 0 5px 20px rgba(91, 143, 196, 0.25);
}

.parallax-content h3 {
color: white;
font-size: 2.5rem;
margin-bottom: 0.5rem;
font-weight: 800;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
line-height: 1.2;
}

.parallax-content p {
font-size: 1.1rem;
line-height: 1.5;
margin-bottom: 1rem;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.parallax-highlight {
font-size: 1.15rem;
font-weight: 700;
color: #fff;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #fff;
text-shadow: 0 0 10px rgba(184, 212, 241, 0.4);
}

@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

/* パララックス右寄せ用アニメーション */
.parallax-content-right {
animation: slideInRight 0.8s ease-out;
}

@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

/* 利用者の声 - プロ仕様 */
.testimonials {
background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
}

.testimonials h2 {
text-align: center;
}

.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 3rem;
margin-top: 3rem;
}

.testimonial-card {
background: white;
padding: 3rem;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(44, 90, 160, 0.08);
border-left: 5px solid #5b8fc4;
position: relative;
transition: all 0.4s ease;
}

.testimonial-card::before {
content: '"';
position: absolute;
top: 1.5rem;
left: 1.5rem;
font-size: 5rem;
color: rgba(91, 143, 196, 0.12);
font-family: Georgia, serif;
line-height: 1;
}

.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(44, 90, 160, 0.12);
border-left-width: 8px;
}

.testimonial-card .service {
color: #2c5aa0;
font-weight: 700;
margin-bottom: 1.5rem;
font-size: 1.1rem;
display: inline-block;
background: linear-gradient(135deg, rgba(44, 90, 160, 0.08), rgba(91, 143, 196, 0.08));
padding: 0.5rem 1rem;
border-radius: 10px;
}

.testimonial-card p {
color: #555;
font-style: italic;
line-height: 1.9;
font-size: 1.05rem;
position: relative;
z-index: 1;
}

/* 最終CTA - プロフェッショナル */
.final-cta {
background: linear-gradient(135deg, #2c5aa0 0%, #1e3a5f 50%, #2a4d7c 100%);
color: white;
position: relative;
overflow: hidden;
}

.final-cta::before {
content: '';
position: absolute;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(91, 143, 196, 0.08) 0%, transparent 70%);
border-radius: 50%;
top: -400px;
right: -400px;
animation: pulse 6s ease-in-out infinite;
}

.final-cta .container {
position: relative;
z-index: 1;
}

.final-cta h2 {
color: white;
text-align: center;
margin-bottom: 4rem;
font-size: 3rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.final-cta-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
margin-top: 3rem;
}

.final-cta-card {
background: rgba(255, 255, 255, 0.1);
padding: 3.5rem;
border-radius: 25px;
text-align: center;
backdrop-filter: blur(15px);
border: 2px solid rgba(255, 255, 255, 0.15);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}

.final-cta-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
transition: left 0.6s;
}

.final-cta-card:hover::before {
left: 100%;
}

.final-cta-card:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-10px);
border-color: rgba(184, 212, 241, 0.4);
box-shadow: 0 20px 60px rgba(91, 143, 196, 0.25);
}

.final-cta-card h3 {
font-size: 1.8rem;
margin-bottom: 1.5rem;
font-weight: 800;
}

.final-cta-card p {
margin-bottom: 2rem;
font-size: 1.1rem;
opacity: 0.92;
}

.final-cta-card .btn {
width: 100%;
}

/* フッター - プロフェッショナル */
footer {
background: linear-gradient(180deg, #001a66 0%, #000d33 100%);
color: white;
padding: 4rem 2rem 2rem;
position: relative;
}

footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(91, 143, 196, 0.4), transparent);
}

footer .container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 3rem;
margin-bottom: 2rem;
}

footer h4 {
margin-bottom: 1.5rem;
font-size: 1.1rem;
opacity: 1;
font-weight: 700;
color: #8eafd4;
letter-spacing: 1px;
}

footer a {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
font-size: 0.95rem;
display: block;
margin-bottom: 0.8rem;
transition: all 0.3s ease;
position: relative;
padding-left: 15px;
}

footer a::before {
content: '→';
position: absolute;
left: 0;
opacity: 0;
transition: all 0.3s ease;
}

footer a:hover {
color: #b8d4f1;
padding-left: 20px;
}

footer a:hover::before {
opacity: 1;
left: 0;
}

footer .copyright {
text-align: center;
padding-top: 2rem;
margin-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.55);
font-size: 0.9rem;
}



/* スクロール誘導 - プロ仕様 */
.scroll-indicator {
position: absolute;
bottom: 3rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
animation: bounce 2s infinite;
cursor: pointer;
}

.scroll-indicator svg {
width: 35px;
height: 35px;
fill: none;
stroke: white;
stroke-width: 2.5;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(-50%) translateY(0);
}
40% {
transform: translateX(-50%) translateY(12px);
}
60% {
transform: translateX(-50%) translateY(6px);
}
}

/* プログレスバー */
.progress-bar {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 7px;
background: linear-gradient(90deg, #2c5aa0, #5b8fc4);
z-index: 101;
transition: width 0.1s ease;
}
		
		
		
		
		


/********************************************************************************************************

 レスポンシブ 

*********************************************************************************************************/
@media (max-width: 768px) {
		.container {
		padding:0;
		}
		section {
padding: 1rem;
}
section .subtitle {
font-size: 1.1rem;
color: #666;
margin-bottom: 2rem;
font-weight: 300;
line-height: 1.3;
}
.section-content {
gap: 2rem;
margin-bottom: 1rem;
}
.section-text > p {
font-size: 1.1rem;
color: #555;
margin-bottom: 1rem;
line-height: 1.3;
}
.benefits-list li {
line-height: 1.4rem;
}
nav {
padding: 1.2rem 0.5rem;
}
		nav.scrolled {
padding: 0.8rem 0.5rem;
}
.hero {
height: 85vh;
padding: 0;
}
.hero::before {
left: -32%;
}
.hero h1 {
font-size: 3rem;
}
.hero br {
 display:block;
}
.hero .subtitle {
font-size: 1rem;
margin-bottom:1rem;
}
.hero .subtitle br{
display:block;
}
.hero .tagline p {
margin: 0;
padding: 0 1rem 1rem;
line-height: 1.4;
}

.section-content {
grid-template-columns: 1fr;
}
.ediphi .section-content {
grid-template-columns: 1fr;
}
.ediphi .section-content .section-image {
order: 1;
}

.ediphi .section-text {
order: 2;
}
.section-image img {
width: 153%;
}
.cta-buttons {
flex-direction: column;
}

.btn {
width: 100%;
				text-align: center;
}

.parallax {
height: 510px;
				display: block;
}

.parallax-content {
padding: 2rem;
max-width: 100%;
}

.parallax-content-left {
margin-left: 1rem;
}

.parallax-content-right {
margin-left: 1rem;
margin-right: 1rem;
text-align: left;
}

.parallax-content-center {
margin: 0 1rem;
}

.parallax-content h3 {
font-size: 1.6rem;
				margin-bottom: 0.5rem;
}

.parallax-content p {
font-size: 0.9rem;
				line-height: 1.5;
}
			.parallax-highlight {
font-size: 1.15rem;
font-weight: 700;
color: #fff;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #fff;
text-shadow: 0 0 10px rgba(184, 212, 241, 0.4);
}

nav ul {
gap: 1rem;
}

.final-cta-grid {
grid-template-columns: 1fr;
				margin-top: 1rem;
				gap: 1rem;
}
			.what-you-can-do {
			padding: 2rem 1rem 0;
			}
			section h2 {
			font-size: 2rem;
			}
			.section-text h3 br {
			display:none;
			}
			.what-you-can-do-grid {
margin-top: 2rem;
gap: 1rem;
}
.feature-card {
padding: 2.5rem 2rem;
}
.parallax-section-wrapper {
padding: 3rem 0 0;
}
.parallax-section-wrapper > .container > h2 {
text-align: center;
font-size: 2rem;
color: #2c5aa0;
}
.parallax-section-wrapper > .container > p {
margin-bottom: 2rem;
font-size: 1.1rem;
}
.parallax-content {
position: relative;
z-index: 3;
padding: 1rem;
max-width: 600px;
animation: slideIn 1s ease-out;
background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
top: 14rem;
margin: 0.5rem;
}
.comparison .container {
max-width: 800px;
overflow-x: auto;
}
.comparison > .container > h2 {
text-align: center;
font-size: 2rem;
color: #2c5aa0;
/*margin-top: 2rem;*/
}
.comparison-table {
margin-top: 1rem;
white-space: nowrap;
margin: 10px 0;
}
.comparison-table th, .comparison-table td {
padding: 0.8rem 1rem;
text-align: left;
border-bottom: 1px solid #f0f0f0;
line-height: 1.5rem;
}
.comparison-table .th_1 {
padding: 0.8rem 1rem;
text-align: left;
border-bottom: 1px solid #f0f0f0;
line-height: 1.5rem;
}
.testimonials {
padding: 1rem 1rem 3rem;
}
.testimonials > .container > h2 {
margin-top: 2rem;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.testimonial-card {
padding: 2rem 1rem;
}
.testimonial-card::before {
top: 0.5rem;
left: 0.5rem;
}
.testimonial-card p {
line-height: 1.6;
}
.final-cta h2 {
margin: 2rem 0 0;
font-size: 2rem;
}
.final-cta-card {
padding: 2rem 1.5rem;
}
.final-cta-card h3 {
font-size: 1.8rem;
margin-bottom: 0rem;
font-weight: 800;
}
.final-cta-card p {
margin-bottom: 1rem;
font-size: 1.1rem;
opacity: 0.92;
}
.parallax-bg01 {
left: -10%;
width: 1000px;
}
.parallax-bg02 {
left: -130%;
top: -18%;
width: 1000px;
}
			
.main-nav .container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}

/* ハンバーガーボタン表示 */
.nav-toggle {
display: block;
}

/* メニューリストを一旦非表示＆ドロップダウン風に */
.main-nav .container ul {
position: absolute;
top: 100%; /* ナビの真下からスタート */
right: 0;
left: 0;
margin: 0;
padding: 8px 16px;
list-style: none;
background: #fff;
display: none; /* 初期状態で非表示 */
flex-direction: column;
border-top: 1px solid #eee;
z-index: 999;
}

.main-nav .container ul li {
margin: 4px 0;
}

.main-nav .container ul li a {
display: block;
padding: 8px 0;
}

/* 開いているときだけ表示 */
.main-nav .container ul.is-open {
display: flex;
}
}

/* ボタンON時の「×」アニメーション（お好み） */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}