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

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333; /* 文字は少し柔らかい黒 */
    line-height: 1.7; /* 行間を少し広げてクリーンに */
    background-color: #fcfdfe; /* 研究所のような超薄い青みグレー */
}

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

/* Typography with futuristic feel */
h1, h2, h3 {
    font-weight: 900;
    letter-spacing: 0.05em; /* 文字間を少し開ける */
}

.section-title {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 60px;
    line-height: 1.5;
    color: #0081c9; /* 明るいブルーをメインタイトルに */
}

/* Header - More flat and clean */
header {
    background: rgba(255, 255, 255, 0.95);
    padding: 15px 0;
    border-bottom: 1px solid #e1e7ec;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(5px); /* ガラスのような透過効果 */
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: 900;
    color: #0081c9; /* 明るいブルー */
    font-size: 1.3rem;
    letter-spacing: 0.1em;
}

/* Hero - Bright and optimistic, no heavy gradients */
.hero {
    background-color: #f3f9fc; /* とても薄いブルーグレー */
    color: #333;
    padding: 120px 0;
    text-align: center;
    border-bottom: 1px solid #e1e7ec;
}

.tagline {
    color: #0081c9;
    font-weight: bold;
    margin-bottom: 25px;
    display: inline-block;
    border: 2px solid #0081c9; /* 枠を少し太く、クリアに */
    padding: 8px 20px;
    border-radius: 5px; /* 角を少し残す */
    background-color: #fff;
}

.hero h1 {
    font-size: 3.2rem;
    margin-bottom: 35px;
    line-height: 1.3;
}

.hero h1 span {
    color: #e67e22; /* よりクリーンなオレンジ */
}

.sub-copy {
    font-size: 1.3rem;
    margin-bottom: 50px;
    color: #555;
    font-weight: 400;
}

/* Buttons - Cleaner and flatter */
.btn-main, .btn-sub, .btn-large, .btn-s {
    text-decoration: none;
    padding: 18px 45px;
    border-radius: 8px; /* 角丸を抑える */
    font-weight: bold;
    transition: 0.2s ease-out;
    display: inline-block;
}

.btn-main {
    background: #0081c9; /* 未来的なブルー */
    color: #fff;
    margin-right: 15px;
    border: 2px solid #0081c9;
}

.btn-sub {
    background: #fff;
    color: #0081c9;
    border: 2px solid #0081c9;
}

.btn-large {
    background: #e67e22; /* オレンジ */
    color: #fff;
    font-size: 1.6rem;
    padding: 25px 70px;
    border-radius: 10px;
}

.btn-s {
    background: transparent;
    color: #0081c9;
    padding: 8px 18px;
    font-size: 0.9rem;
    border: 1px solid #0081c9;
}

.btn-main:hover, .btn-sub:hover, .btn-large:hover {
    transform: translateY(-2px); /* 浮き上がる効果に */
    box-shadow: 0 5px 15px rgba(0, 129, 201, 0.2);
}

/* Problems - White cards on light gray background */
.problem {
    padding: 100px 0;
    background: #fff;
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-bottom: 60px;
}

.problem-item {
    background: #fdfefe; /* 超薄い青みグレー */
    padding: 35px;
    border-radius: 10px;
    border: 1px solid #e1e7ec;
    text-align: center;
}

.icon {
    color: #e74c3c; /* 鮮やかな赤 */
    font-size: 2.2rem;
    font-weight: bold;
    display: block;
    margin-bottom: 15px;
}

.conclusion {
    text-align: center;
    font-size: 1.9rem;
    font-weight: bold;
    border-top: 1px solid #e1e7ec;
    padding-top: 50px;
    color: #333;
}

.conclusion span {
    color: #e74c3c;
    border-bottom: 3px solid #e74c3c; /* 下線を追加 */
}

/* Concept Comparison - Panels like interface */
.concept {
    padding: 100px 0;
    background: #f3f9fc;
}

.comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 50px;
}

.comp-box {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    width: 320px;
    text-align: center;
    border: 1px solid #e1e7ec;
    box-shadow: none; /* シャドウをなくす */
}

.comp-box.highlight {
    background: #fff;
    border: 3px solid #0081c9; /* 枠線で強調 */
    color: #333;
}

.comp-box.highlight strong {
    color: #0081c9;
    font-size: 1.2em;
}

.comp-arrow {
    font-size: 2.5rem;
    color: #0081c9;
    font-family: serif; /* 矢印を細く、洗練されたものに */
}

.concept-message {
    text-align: center;
    font-size: 2.1rem;
    color: #0081c9;
    font-weight: 900;
}

/* Product Flow - Minimalistic numbers */
.product {
    padding: 100px 0;
    background: #fff;
}

.flow-container {
    display: flex;
    justify-content: space-between;
    margin: 60px 0;
    gap: 20px;
}

.flow-step {
    text-align: center;
    flex: 1;
    background: #fdfefe;
    border: 1px solid #e1e7ec;
    padding: 30px;
    border-radius: 8px;
}

.step-num {
    width: 50px;
    height: 50px;
    background: transparent;
    color: #0081c9;
    border: 2px solid #0081c9;
    border-radius: 5px; /* 四角を残す */
    line-height: 46px; /* 枠の太さ分調整 */
    margin: 0 auto 20px;
    font-weight: bold;
    font-size: 1.1rem;
}

.feature-highlight {
    background: #f3f9fc; /* 薄いブルーグレー */
    color: #0081c9; /* ブルー */
    text-align: center;
    padding: 25px;
    font-size: 1.3rem;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid #e1e7ec;
}

.feature-highlight strong {
    border-bottom: 2px solid #0081c9;
}

/* Benefit Cards - Clean white cards */
.benefit {
    padding: 100px 0;
    background: #fcfdfe;
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 30px;
}

.benefit-card {
    background: #fff;
    padding: 45px;
    border-radius: 12px;
    border: 1px solid #e1e7ec;
    text-align: center;
    box-shadow: none;
}

.value {
    font-size: 2.6rem;
    font-weight: 900;
    color: #0081c9;
    margin: 15px 0;
}

/* Pricing - Flat and direct */
.pricing {
    padding: 100px 0;
    background: #fff;
    text-align: center;
}

.price-box {
    display: inline-block;
    border: 2px solid #0081c9;
    border-radius: 12px;
    padding: 50px 90px;
    background: #f3f9fc;
}

.label {
    color: #555;
}

.amount {
    font-size: 4.2rem;
    font-weight: 900;
    color: #0081c9;
}

.amount span {
    font-size: 2.1rem;
}

/* Final CTA - Optimistic blue background */
.final-cta {
    background: #0081c9;
    color: #fff;
    padding: 120px 0;
    text-align: center;
}

.final-cta h2 {
    font-size: 2.7rem;
    margin-bottom: 25px;
}

.final-cta p {
    margin-bottom: 50px;
    font-size: 1.3rem;
    opacity: 0.95;
}

footer {
    padding: 40px 0;
    text-align: center;
    color: #999;
    font-size: 0.95rem;
    background: #fdfefe;
    border-top: 1px solid #e1e7ec;
}

/* Mobile Responsive - Refined for flat style */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.2rem; }
    .comparison { flex-direction: column; gap: 20px; }
    .flow-container { flex-direction: column; gap: 20px; }
    .btn-main { margin-bottom: 15px; margin-right: 0; width: 100%; }
    .btn-sub { width: 100%; }
    .price-box { padding: 30px 40px; width: 100%; }
    .amount { font-size: 3rem; }
}