body { font-family: Arial, sans-serif; text-align: center; }
.container { max-width: 800px; margin: auto; }
input { width: 30px; margin: 2px; }
header {
    background: #e0f2fe; /* 淡い水色 */
    color: #0c4a6e;      /* 少し濃い文字色で読みやすく */
    padding: 20px 0;
    font-size: 24px;
    font-weight: bold;
}
.hero {
    background: linear-gradient(to right, #e0f2fe, #a5f3fc);
    color: #0c4a6e;
    padding: 60px 20px;
    font-size: 28px;
    border-radius: 0; /* コンテナ感を抑える */
}
.hero-p {
    color: #0c4a6e;
}
.cta-button {
    display: inline-block;
    margin-top: 20px;
    padding: 15px 30px;
    font-size: 18px;
    background: #e74c3c;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
}
h1 {
    color: #326693;			/* 見出しテキストの色を指定する */
    padding-left:10px;		/* ボックス内左側の余白を指定する */
    border-left: 10px solid #31a9ee;	/* ボーダー左側のスタイルを指定する */
    border-bottom: 1px dashed #31a9ee; 	/* ボーダー下部のスタイルを指定する */
}

h2 {
    background: linear-gradient(135deg, #2980b9, #3498db); /* 青系のグラデーション */
    color: white;  /* 文字色を白に */
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
    font-size: 24px;
}

p {
    color: #000000;			/* 段落テキストの色（黒）を指定する */
}
canvas { 
    max-width: 100%; 
    height: auto; 
    max-height: 400px;
}
@media screen and (max-width: 600px) {
    canvas {
        max-height: 400px; /* スマホでは高さを増やす */
    }
}
footer {
    background: #f0f9ff; /* ヘッダーよりさらに淡い水色 */
    color: #0c4a6e;      /* ヘッダーと同じ文字色 */
    padding: 20px;
    margin-top: 50px;
}

.button {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    font-weight: bold;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.pattern {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px; /* 要素間の間隔を調整 */
}


.text-container {
    text-align: left; /* 左寄せ */
    max-width: 800px; /* .container と同じ幅 */
    margin: auto; /* 中央配置 */
    padding: 10px;
}

ul, ol {
    margin: 10px 0;  /* 上下の余白だけ確保 */
    padding-left: 20px; /* 箇条書きのインデントは残す */
}

/* スマホ向け（画面幅600px以下を例に） */
@media (min-width: 601px) {
    input {
        width: 50px; /* スマホでは30px */
    }

}