/* =========================================
   File: index.css
   Purpose: トップ画面（index.html）のスタイル
   Author: やぎさん
   Created: 2026-04-30：style.css から分割
   Updated: （なし）

   Notes:
   - 共通スタイルは common.css / layout.css を使用
   - トップ画面のレイアウト（メニュー・ビジュアル）を定義
========================================= */

/* トップメニュー（ボタン群レイアウト） */
.top-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 15px;
}

/* メインビジュアル領域 */
.hero-area {
    position: relative;
    max-width: 420px;
    margin: 10px auto 0;
    padding: 10px;
}

.runner-visual {
    width: 100%;
    max-width: 360px;
    display: block;
    margin: auto;
}

.menu-btn{
    display:inline-block;

    background:white;
    text-decoration:none;
    color:#333;

    font-size:1.2rem;
    font-weight:bold;

    padding:12px 26px;

    border-radius:40px;
    box-shadow:0 4px 12px rgba(0,0,0,.15);

    transition:.2s;
}

.menu-btn:hover{
    transform:scale(1.05);
}

.about-kotorun,
.news {
    margin: 20px auto;
    padding: 0px 15px 15px 15px;

    width: 90%;
    max-width: 700px;

    border: 1px solid #ddd;
    border-radius: 10px;

    background-color: #fafafa;

    text-align: left;
}

.about-kotorun h2,
.news h2 {
    margin-bottom: 10px;
}

.news ul {
    padding-left: 20px;
}

.contact-info {
    margin-top: 30px;
    text-align: center;
    color: #666;
}