/* 全体リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Arial", sans-serif;
    line-height: 1.6;
    background: linear-gradient(to bottom, #62CDFF, #62CDFF);
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

/* 背景全体 */
.background {
    width: 100%;
    display: flex; /* 子要素を横並びに */
}

/* 左側コンテナ */
.left-container {
    flex: 1;
    flex-direction: column; /* 子要素を縦並びに */
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center;
}

.left-container h1 {
    margin-top: 10px;
    font-size: 70px;
}

.left-container img {
    width: 300px;
    height: auto;
}

/* 真ん中コンテナ */
.main-container {
    background-color: #ffffff;
    padding: 2rem;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 480px;
    flex: 1; /* 右側の領域を調整 */
    overflow: auto; /* メインコンテナのスクロールを有効化 */
    height: 100vh; /* 画面全体の高さ */
    position: relative; /
}

.features img {
    width: 100%; /* 幅を親要素に合わせる */
    height: auto; /* 高さは自動調整 */
    max-width: 100%; /* 親要素を超えない */
    display: block; /* 行間の余白を消す */
    border-radius: 10px; /* 画像の角丸を適用（任意） */
}

/* 右側コンテナ */
.right-container {
    width: 12%;
    height: 100%; /* 親要素の高さに合わせる */
}

/* ヘッダー */
header {
    text-align: center;
    margin-bottom: 1rem;
}

header h1 {
    color: #62CDFF;
    font-size: 70px;
}

header h2 {
    color: #62CDFF;
}

/* ナビゲーション */
nav {
    position: relative; /* 位置関係の基準として指定 */
    z-index: 10; /* 他の要素より前面に配置 */
}

.menu-toggle {
    position: fixed; /* 画面右上に固定 */
    top: 30px; /* 上からの距離 */
    right: 40px; /* 右からの距離 */
    width: 50px; /* ボタンの幅 */
    height: 50px; /* ボタンの高さ */
    background-color: #AA77FF; /* ボタンの背景色 */
    border: none; /* ボーダーを削除 */
    border-radius: 50%; /* 丸くする */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ボタンの影 */
    display: flex; /* 中央揃えに必要 */
    align-items: center; /* 縦方向の中央揃え */
    justify-content: center; /* 横方向の中央揃え */
    cursor: pointer; /* カーソルをポインタに */
    z-index: 20; /* メニューリンクよりも前面に表示 */
    flex-direction: column;
    gap: 0.1rem;
}

.menu-toggle .bar {
    width: 70%; /* 線の幅 */
    height: 3px; /* 線の高さ */
    background-color: #333; /* 線の色 */
    margin: 3px 0; /* 線同士の間隔 */
    border-radius: 2px; /* 角丸 */
}

/* ナビゲーションリンク */
.nav-links {
    list-style: none;
    display: flex; /* 初期状態は非表示にせず、スライドで対応 */
    flex-direction: column; /* 縦並び */
    position: fixed; /* 画面に固定 */
    top: 0;
    right: 0;
    background-color: #AA77FF; /* メニュー背景色 */
    width: 50%; /* メニューの幅 */
    height: 100vh; /* 画面全体の高さ */
    box-shadow: -4px 0 6px rgba(0, 0, 0, 0.1); /* 左側に影を追加 */
    padding: 3rem;
    font-size: 30px;
    z-index: 15;
    transform: translateX(100%); /* 初期状態では画面外に移動 */
    transition: transform 0.3s ease; /* スムーズな表示/非表示 */
}

.nav-links.active {
    transform: translateX(0); /* 表示時に画面内に移動 */
}

.nav-links li {
    margin-bottom: 1.5rem; /* 各リンクの間隔 */
}

.nav-links li a {
    text-decoration: none;
    font-weight: bold;
    color: #ffffff;
    transition: color 0.3s;
}

.nav-links li a:hover {
    color: #CDC1FF;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: #FFFFFF;
}

/* ヒーローセクション */
.hero {
    text-align: center;
    margin-bottom: 2rem;
}

.hero h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1rem;
    margin-bottom: 2rem;
}

/* 機能セクション */
.features {
    margin-bottom: 2rem;
}

.features h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    margin-top: 70px;
    font-size: 35px;
    color: #AA77FF;
}

.feature-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.feature-item h3 {
    font-size: 25px;
    text-align: center;
    margin-top: 45px;
    margin-bottom: 10px;
}

.feature-item p {
    margin-top: 10px;
}

/* フッター */
footer {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.9rem;
}

.highlight {
    color: #AA77FF;
    font-weight: bold; /* 太字（任意） */
    font-size: 20px;
}

/* レスポンシブデザイン */
@media (max-width: 767px) {
    .background {
        flex-direction: column; /* スマホでは縦並び */
        padding: 15px 20px;
    }

    .main-container {
        width: 100%; /* 横幅を全体に */
        height: auto; /* 高さを自動調整 */
        max-width: none;
        box-shadow: none;
        margin: 0px;
        overflow: visible; /* スクロールを無効化 */
    }

    /* 右側コンテナ */
     .right-container {
         display: none; /* 左側コンテナを非表示 */
     }

     .left-container > *:not(img) {
         display: none; /* 画像以外を非表示にする */
     }

     .left-container {
         flex: 0.1; /* 画像以外を非表示にする */
     }

     .nav-links {
        width: 100%;
     }
}