@charset "UTF-8";
/* CSS Document */
/* 2026/05/14 */

    /* コンテナ設定（最大幅730pxに最適化） */
	.hitsujun-container {
		max-width: 730px;
		margin: 30px auto;
		background: #fff;
		padding: 20px;
		border-radius: 12px;
		/* 枠線を追加してメリハリを出す */
		border: 1px solid #ddd;
		/* 影を少し強調 */
		box-shadow: 0 10px 30px rgba(0,0,0,0.12);
		color: #333;
		font-family: "游教科書体", "YuKyokasho", "UD デジタル 教科書体 N-R", "BIZ UDPMincho", "Helvetica Neue", Arial, sans-serif;
	}

    /* ナビゲーションボックス */
    .hitsujun-nav {
        margin: 20px 0;
        text-align: center;
    }
    .hitsujun-btn-nav {
        display: inline-block;
        padding: 10px 20px;
        background-color: #3498db;
        color: #fff !important;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
        transition: 0.3s;
    }
    .hitsujun-btn-nav:hover {
        background-color: #2980b9;
        transform: scale(1.05);
    }

    /* タイトル風スタイル（親ページのh1と競合させないためクラスで指定） */
    .hitsujun-title {
        border-left: 5px solid #3498db;
        padding-left: 15px;
        color: #2c3e50;
        font-size: 1.8em;
        margin: 10px 0 15px 0;
        font-weight: bold;
    }

    .hitsujun-intro {
        color: #666;
        margin-bottom: 30px;
        font-size: 0.95em;
        line-height: 1.6;
    }

    /* 五十音の各行レイアウト */
    .hitsujun-row {
        margin-bottom: 30px;
        border-bottom: 1px dashed #eee;
        padding-bottom: 15px;
    }

    /* あ、い、う...のラベル */
    .hitsujun-label {
        background: #34495e;
        color: #fff;
        display: inline-block;
        padding: 2px 15px;
        border-radius: 20px;
        font-size: 14px;
        margin-bottom: 12px;
        font-weight: normal;
    }

    /* 漢字リストのグリッド（50px幅） */
    .hitsujun-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
        gap: 8px;
    }

    /* 漢字ボタンのスタイル */
    .hitsujun-item {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: #fff;
        border: 1px solid #eee;
        height: 50px;
        font-size: 32px;
        color: #333;
        border-radius: 8px;
        transition: all 0.2s;
    }

    .hitsujun-item:hover {
        background: #3498db;
        color: #fff;
        border-color: #3498db;
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(52,152,219,0.3);
    }

    /* スマホ表示の微調整 */
    @media (max-width: 480px) {
        .hitsujun-container { padding: 15px; }
        .hitsujun-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
        .hitsujun-item { height: 45px; font-size: 28px; }
    }

	/* ナビゲーションメニュー全体のスタイル */
	.hitsujun-nav-menu {
		/* display: flex; を削除、または以下に変更 */
		margin-bottom: 30px;
		padding: 10px;
		background: #f8f9fa;
		border-radius: 10px;
		border: 1px solid #eee;
		text-align: center; /* グループを中央寄せに */
	}

	/* ナビゲーションのグループ（行）の設定 */
	.nav-group {
		display: flex;
		flex-wrap: wrap;       /* 折り返しを許可 */
		justify-content: center; /* 中央寄せ */
		gap: 8px 6px;          /* 縦の間隔 8px、横の間隔 6px */
		margin-bottom: 8px;    /* グループ同士の隙間 */
	}

	/* 各ナビゲーションボタンの基本設定 */
	.btn-nav-item {
		display: inline-block; /* 塊として認識させる */
		padding: 8px 14px;
		font-size: 15px;
		font-weight: bold;
		text-decoration: none;
		color: #555 !important;
		background: #fff;
		border: 2px solid #ddd;
		border-radius: 6px;
		transition: 0.3s;
		line-height: 1.2;      /* 行高を調整して重なりを防ぐ */
	}

	/* スマホ表示の微調整 */
	@media (max-width: 480px) {
		.btn-nav-item {
			font-size: 13px;    /* スマホでは少し文字を小さく */
			padding: 6px 10px;  /* 余白も少し詰める */
		}
		.nav-group {
			gap: 10px 5px;      /* スマホでは縦の間隔を少し広めに確保 */
		}
	}

	.btn-nav-item:hover {
		background: #f0f0f0;
		border-color: #3498db;
		color: #3498db !important;
	}

	/* 現在のページ (current) の強調スタイル */
	.btn-nav-item.current {
		background: #3498db;
		border-color: #3498db;
		color: #fff !important;
		box-shadow: 0 2px 8px rgba(52,152,219,0.4);
		cursor: default;
		pointer-events: none; /* 現在のページはクリック不可に */
	}

	/* 人名用など特定ボタンの特別色（必要に応じて） */
	.btn-nav-item.jinmei.current {
		background: #e67e22;
		border-color: #e67e22;
	}