<?php
session_start();

header("Content-type: text/html; charset=utf-8");

//クリックジャッキング対策
header('X-FRAME-OPTIONS: SAMEORIGIN');

//データベース接続
require_once("./functions/dbfunctions.php");
$dbh = db_connect();

$stm = db_prepare($dbh,'SELECT artist.id,artist_name,index_name,albums.jacket_list,reviews.album_id FROM artist left join albums ON artist.id = albums.artist_id
left join reviews on reviews.album_id = albums.id WHERE artist.flag =1 GROUP BY albums.artist_id order by index_name,artist_name');

$stm -> execute();
$albums = db_fetch($stm);
?>

<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-168593916-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  //gtag('config', 'UA-168593916-1');
</script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Collection-Recordsは名盤にレビューや採点して自分や皆さんのアルバムコレクションを楽しむサイトです。">
    <title>名盤アルバムレビュー〜Collection-Records</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="css/header.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
	<link rel="stylesheet" href="css/ranking.css">

	<style>
        .title{
			background-color: rgba(255,0,0,0.8);
        }
    
        .box6{
            background-color: white;
            float: left;
        }
        .box3{
            float: left;
            min-height: 100px;
            max-height: 100px;
        }
        .box4{
			text-align: center;
        }
        .box5{
			text-align: center;
            color: white; 
			border: 1px solid #a6a6a6;
        }
        .box7{
            float: left;
            min-height: 300px;
            max-height: 300px;
			border: 1px solid #000000;
        }
        .box8{
			text-align: center;
        }
        .box9{
            min-height: 30px;
            max-height: 30px;
        }
        .box10{
            min-height: 25px;
            max-height: 25px;
        }
        .box11{
			vertical-align: bottom;
        }
		h4 {
			margin-left: 2.8em;
			text-indent: -2.8em;
			line-height: 1.6em;
		}
		h4 img {
			margin-right: 7px;
			height: 30px;
			vertical-align: middle;
		}
	    .article-link {
            border: 1px solid #31538f;
            background-color: white;
            padding: 0.5em;
            margin-bottom: 0px;
            position: absolute;
            bottom: 48px;
            right: 30px;
            z-index: 1;
		}
		.top-mark {
			color: #00b0f0;
		}
        .genre_img:hover {
            background-color: white;
        }
    </style>

</head>
<body>

<?php include(dirname(__FILE__).'/layout/header.php'); ?>

<div class="container-fluid">

    <nav aria-label="パンくずリスト" class="bg-light mt-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="index.php"><a href="./">ホーム</a></li>
            <li class="breadcrumb-item active" aria-current="page">ジャンル</li>
        </ol>
    </nav>

    <h2 style="margin-top:2em; margin-bottom: 2em;font-size:1.4rem;font-weight: bold;">ジャンル一覧</h2>

<div class="row">
    <div class="col-md-2">
        <label for="label1" style="cursor: pointer;">
            <div class="row genre_img">
                <div class="col-12 text-center">
                    <img src='img/genre_rock.png' width="200px" height="200px" alt="ロック" />
                </div>
                <div class="col-12">
                    <div class="top-rack mx-auto" style="text-align: center;font-weight: bold;color: #31538f;width: 17em;">
                        ロック・ポップス
                    </div>
                </div>
            </div>
        </label>
    </div>
    <div class="col-md-2">
        <label for="label2" style="cursor: pointer;">
            <div class="row genre_img">
                <div class="col-12 text-center">
                    <img src='img/genre_HRHM.png' width="200px" height="200px" alt="#f2f2f2;" />
                </div>
                <div class="col-12">
                    <div class="top-rack mx-auto" style="text-align: center;font-weight: bold;color: #31538f;width: 17em;">
                        ヘヴィメタル
                    </div>
                </div>
            </div>
        </label>
    </div>
    <div class="col-md-2">
        <label for="label3" style="cursor: pointer;">
            <div class="row genre_img">
                <div class="col-12 text-center">
                    <img src='img/genre_punk.png' width="200px" height="200px" alt="パンク" />
                </div>
                <div class="col-12">
                    <div class="top-rack mx-auto" style="text-align: center;font-weight: bold;color: #31538f;width: 17em;">
                        パンク
                    </div>
                </div>
            </div>
        </label>
    </div>
    <div class="col-md-2">
        <label for="label4" style="cursor: pointer;background: #f2f2f2;">
            <div class="row genre_img">
                <div class="col-12 text-center">
                    <img src='img/genre_country.png' width="200px" height="200px" alt="カントリー" />
                </div>
                <div class="col-12 text-center">
                    <div class="top-rack mx-auto" style="text-align: center;font-weight: bold;color: #31538f;width: 17em;">
                        カントリー
                    </div>
                </div>
            </div>
        </label>
    </div>
    <div class="col-md-2">
        <label for="label5" style="cursor: pointer;background: #f2f2f2;">
            <div class="row genre_img">
                <div class="col-12 text-center">
                    <img src='img/genre_fork.png' width="200px" height="200px" alt="フォーク" />
                </div>
                <div class="col-12 text-center">
                    <div class="top-rack mx-auto" style="text-align: center;font-weight: bold;color: #31538f;width: 17em;">
                        フォーク
                    </div>
                </div>
            </div>
        </label>
    </div>
    <div class="col-md-2">
        <label for="label6" style="cursor: pointer;background: #f2f2f2;">
            <div class="row genre_img">
                <div class="col-12 text-center">
                    <img src='img/genre_blues.jpg' width="200px" height="200px" alt="ブルース" />
                </div>
                <div class="col-12 text-center">
                    <div class="top-rack mx-auto" style="text-align: center;font-weight: bold;color: #31538f;width: 17em;">
                        ブルース
                    </div>
                </div>
            </div>
        </label>
    </div>
</div>

<div class="accbox">

    <!-- <label for="label1">ロック・ポップス名盤アルバムランキング</label> -->
    <input type="checkbox" id="label1" class="cssacc" />
    <div class="accshow">
        <table class="table table-bordered" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=rock&title=ロック・ポップス全般">ロック・ポップス全般</a></th>
                    <th scope="col"><a href="various_ranking.php?year=1950&genre=rock&title=50年代ロック・ポップス">50年代ロック・ポップス</a></th>
                    <th scope="col"><a href="various_ranking.php?year=1960&genre=rock&title=60年代ロック・ポップス">60年代ロック・ポップス</a></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="col"><a href="various_ranking.php?year=1970&genre=rock&title=70年代ロック・ポップス">70年代ロック・ポップス</a></th>
                    <th scope="col"><a href="various_ranking.php?year=1980&genre=rock&title=80年代ロック・ポップス">80年代ロック・ポップス</a></th>
                    <th scope="col"><a href="various_ranking.php?year=1990&genre=rock&title=90年代ロック・ポップス">90年代ロック・ポップス</a></th>
                </tr>
                <tr>
                    <th scope="col"><a href="various_ranking.php?year=2000&genre=rock&title=00年代ロック・ポップス">00年代ロック・ポップス</a></th>
                    <th scope="col"><a href="various_ranking.php?year=2010&genre=rock&title=10年代ロック・ポップス">10年代ロック・ポップス</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=rockandroll&title=Rock'n'Roll">Rock'n'Roll</a></th>
                </tr>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=american-rock&title=アメリカンロック">アメリカンロック</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=UK-rock&title=UKロック">UKロック</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Progressive-rock&title=プログレッシロック">プログレッシブロック</a></th>
                </tr>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=Grunge-Alternative&title=グランジ・オルタナティブ">グランジ・オルタナティブ</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Psychedelic&title=サイケデリックロック">サイケデリックロック</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=newwave&title=ニューウェイブ">ニューウェイブ</a></th>
                </tr>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=Garage-Rock&title=ガレージロック">ガレージロック</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=fork-rock&title=フォークロック">フォークロック</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Shoegazer&title=シューゲイザー">シューゲイザー<a></th>
                </tr>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=Industrial&title=インダストリアル">インダストリアル</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Country-rock&title=カントリーロック">カントリーロック</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=West-Coast&title=ウエストコーストロック">ウエストコーストロック</a></th>
                </tr>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=Blues-rock&title=ブルースロック">ブルースロック</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Southern-Rock&title=サザンロック">サザンロック</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Glam-rock&title=グラムロック">グラムロック</a></th>
                </tr>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=Brass-rock&title=ブラスロック">ブラスロック</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Lo-Fi&title=ローファイ">ローファイ</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Singer-songwriter&title=シンガーソングライター">シンガーソングライター</a></th>
                </tr>
                <tr>
                    <th scope="col">デジタルロック</th>
                    <th scope="col">ラテンロック</th>
                    <th scope="col">ポストロック</th>
                </tr>
                <tr>
                    <th scope="col">ストーナーロック</th>
                    <th scope="col">ゴシックロック</th>
                    <th scope="col">ネオロカビリー</th>
                </tr>
                <tr>
                    <th scope="col">シティポップ</th>
                    <th scope="col">パワーポップ</th>
                    <th scope="col">ネオアコ</th>
                </tr>
                <tr>
                    <th scope="col">ブリットポップ</th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- <label for="label2">ハードロック・ヘヴィメタル名盤アルバムランキング一覧</label> -->
    <input type="checkbox" id="label2" class="cssacc" />
    <div class="accshow">
        <table class="table table-bordered" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=HRHM&title=ハードロック・ヘヴィメタル全般">ハードロック・ヘヴィメタル全般</a></th>
                    <th scope="col"><a href="various_ranking.php?year=1960&genre=HRHM&title=60年代ハードロック・ヘヴィメタル">60年代ハードロック・ヘヴィメタル</a></th>
                    <th scope="col"><a href="various_ranking.php?year=1970&genre=HRHM&title=70年代ハードロック・ヘヴィメタル">70年代ハードロック・ヘヴィメタル</a></th>
                </tr>
            </thead>
            <tbody>
            <tr>
                    <th scope="col"><a href="various_ranking.php?year=1980&genre=HRHM&title=80年代ハードロック・ヘヴィメタル">80年代ハードロック・ヘヴィメタル</a></th>
                    <th scope="col"><a href="various_ranking.php?year=1990&genre=HRHM&title=90年代ハードロック・ヘヴィメタル">90年代ハードロック・ヘヴィメタル</a></th>
                    <th scope="col"><a href="various_ranking.php?year=2000&genre=HRHM&title=00年代ハードロック・ヘヴィメタル">00年代ハードロック・ヘヴィメタル</a></th>
                </tr>
                <tr>
                    <th scope="col"><a href="various_ranking.php?year=2010&genre=HRHM&title=10年代ハードロック・ヘヴィメタル">10年代ハードロック・ヘヴィメタル</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Glam-metal&title=グラム・LAメタル">グラム・LAメタル</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=NWOBHM&title=NWOBHM">NWOBHM</a></th>
                </tr>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=Loud-rock&title=ラウドロック">ラウドロック</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Thrash-Metal&title=スラッシュメタル">スラッシュメタル</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Black-Metal&title=ブラックメタル">ブラックメタル</a></th>
                </tr>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=German-Metal&title=ジャーマンメタル">ジャーマンメタル</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Neo-Classical-Metal&title=ネオクラシカルメタル">ネオクラシカルメタル</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Progressive-Metal&title=プログレッシブメタル">プログレッシブメタル</a></th>
                </tr>
                <tr>
                    <th scope="col">ゴアグラインド</th>
                    <th scope="col">スピードメタル</th>
                    <th scope="col">デスメタル</th>
                </tr>
                <tr>
                    <th scope="col">パワーメタル</th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- <label for="label3">パンク名盤アルバムランキング一覧</label> -->
    <input type="checkbox" id="label3" class="cssacc" />
    <div class="accshow">
        <table class="table table-bordered" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=punk&title=パンク全般">パンク全般</th>
                    <th scope="col"><a href="various_ranking.php?genre=Hardcore-punk&title=ハードコアパンク">ハードコアパンク</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Pop-Punk&title=ポップパンク">ポップパンク</a></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="col">エモ</th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- <label for="label4">カントリー名盤アルバムランキング一覧</label> -->
    <input type="checkbox" id="label4" class="cssacc" />
    <div class="accshow">
        <table class="table table-bordered" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=Country&title=カントリー全般">カントリー全般</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Bluegrass&title=ブルーグラス">ブルーグラス</a></th>
                    <th scope="col"></th>
                </tr>
            </thead>
        </table>
    </div>

    <!-- <label for="label5">フォーク名盤アルバムランキング一覧</label> -->
    <input type="checkbox" id="label5" class="cssacc" />
    <div class="accshow">
        <table class="table table-bordered" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=fork&title=フォーク全般">フォーク全般</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=fork-rock&title=フォークロック">フォークロック</a></th>
                    <th scope="col">アシッドフォーク</th>
                </tr>
            </thead>
        </table>
    </div>

    <!-- <label for="label6">ブルース名盤アルバムランキング一覧</label> -->
    <input type="checkbox" id="label6" class="cssacc" />
    <div class="accshow">
        <table class="table table-bordered" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=blues&title=ブルース全般">ブルース全般</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Delta-Blues&title=カントリー・デルタブルース">カントリー・デルタブルース</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Chicago-Blues&title=モダン・シカゴブルース">モダン・シカゴブルース</a></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=Texas-Blues&title=テキサスブルース">テキサスブルース</a></th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </tbody>

        </table>
    </div>

    <div class="row">
    <div class="col-md-2">
            <label for="label7" style="cursor: pointer;background: #f2f2f2;">
                <div class="row genre_img">
                    <div class="col-12 text-center">
                        <img src='img/genre_soulrb.jpg' width="200px" height="200px" alt="ソウル・R&B" />
                    </div>
                    <div class="col-12 text-center">
                        <div class="top-rack mx-auto" style="text-align: center;font-weight: bold;color: #31538f;width: 17em;">
                        ソウル・R&B
                        </div>
                    </div>
                </div>
            </label>
        </div>
        <div class="col-md-2">
            <label for="label8" style="cursor: pointer;background: #f2f2f2;">
                <div class="row genre_img">
                    <div class="col-12 text-center">
                        <img src='img/genre_funk.jpg' width="200px" height="200px" alt="ファンク" />
                    </div>
                    <div class="col-12 text-center">
                        <div class="top-rack mx-auto" style="text-align: center;font-weight: bold;color: #31538f;width: 17em;">
                        ファンク
                        </div>
                    </div>
                </div>
            </label>
        </div>
        <div class="col-md-2">
            <label for="label9" style="cursor: pointer;background: #f2f2f2;">
                <div class="row genre_img">
                    <div class="col-12 text-center">
                        <img src='img/genre_hiphop.png' width="200px" height="200px" alt="ヒップホップ" />
                    </div>
                    <div class="col-12 text-center">
                        <div class="top-rack mx-auto" style="text-align: center;font-weight: bold;color: #31538f;width: 17em;">
                        ヒップホップ
                        </div>
                    </div>
                </div>
            </label>
        </div>
        <div class="col-md-2">
            <label for="label10" style="cursor: pointer;background: #f2f2f2;">
                <div class="row genre_img">
                    <div class="col-12 text-center">
                        <img src='img/genre_reggaeska.png' width="200px" height="200px" alt="レゲエ・スカ" />
                    </div>
                    <div class="col-12 text-center">
                        <div class="top-rack mx-auto" style="text-align: center;font-weight: bold;color: #31538f;width: 17em;">
                        レゲエ・スカ
                        </div>
                    </div>
                </div>
            </label>
        </div>
        <div class="col-md-2">
            <label for="label11" style="cursor: pointer;background: #f2f2f2;">
                <div class="row genre_img">
                    <div class="col-12 text-center">
                        <img src='img/genre_dance.jpg' width="200px" height="200px" alt="ダンス・クラブ・EDM" />
                    </div>
                    <div class="col-12 text-center">
                        <div class="top-rack mx-auto" style="text-align: center;font-weight: bold;color: #31538f;width: 17em;">
                        ダンス・クラブ・EDM
                        </div>
                    </div>
                </div>
            </label>
        </div>
        <div class="col-md-2">
            <label for="label12" style="cursor: pointer;background: #f2f2f2;">
                <div class="row genre_img">
                    <div class="col-12 text-center">
                        <img src='img/genre_jazz.jpg' width="200px" height="200px" alt="ジャズ" />
                    </div>
                    <div class="col-12 text-center">
                        <div class="top-rack mx-auto" style="text-align: center;font-weight: bold;color: #31538f;width: 17em;">
                        ジャズ
                        </div>
                    </div>
                </div>
            </label>
        </div>
    </div>

    <!-- <label for="label7">ソウル・R&B名盤アルバムランキング一覧</label> -->
    <input type="checkbox" id="label7" class="cssacc" />
    <div class="accshow">
        <table class="table table-bordered" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=soulrb&title=ソウル・Ｒ＆Ｂ全般">ソウル・Ｒ＆Ｂ全般</a></th>
                    <th scope="col">ネオソウル</th>
                    <th scope="col">ドゥーワップ</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="col">ゴスペル</th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- <label for="label8">ファンク名盤アルバムランキング一覧</label> -->
    <input type="checkbox" id="label8" class="cssacc" />
    <div class="accshow">
        <table class="table table-bordered" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=funk&title=ファンク全般">ファンク全般</a></th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </thead>
        </table>
    </div>

    <!-- <label for="label9">ヒップホップ名盤アルバムランキング一覧</label> -->
    <input type="checkbox" id="label9" class="cssacc" />
    <div class="accshow">
        <table class="table table-bordered" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=hiphop&title=ヒップホップ全般">ヒップホップ全般</th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </thead>
        </table>
    </div>

    <!-- <label for="label10">レゲエ・スカ名盤アルバムランキング一覧</label> -->
    <input type="checkbox" id="label10" class="cssacc" />
    <div class="accshow">
        <table class="table table-bordered" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=reggaeska&title=レゲエ・スカ全般">レゲエ・スカ全般</a></th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </thead>
        </table>
    </div>

    <!-- <label for="label11">ダンス・クラブ・ＥＤＭ名盤アルバムランキング一覧</label> -->
    <input type="checkbox" id="label11" class="cssacc" />
    <div class="accshow">
        <table class="table table-bordered" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=Dance&title=ダンス・クラブ・ＥＤＭ全般">ダンス・クラブ・ＥＤＭ全般</a></th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </thead>
        </table>
    </div>

    <!-- <label for="label12">ジャズ名盤アルバムランキング一覧</label> -->
    <input type="checkbox" id="label12" class="cssacc" />
    <div class="accshow">
        <table class="table table-bordered" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=Jazz&title=ジャズ全般">ジャズ全般</a></th>
                    <th scope="col">スウィングジャズ</th>
                    <th scope="col">ビバップ</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                    <th scope="col"><a href="various_ranking.php?genre=Jazz-Funk&title=ジャズファンク">ジャズファンク</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=Modern-Jazz&title=モダンジャズ">モダンジャズ</a></th>
                    <th scope="col">フリージャズ</th>
                </tr>
                <tr>
                    <th scope="col">アシッドジャズ</th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="row">
    <div class="col-md-2">
            <label for="label13" style="cursor: pointer;background: #f2f2f2;">
                <div class="row genre_img">
                    <div class="col-12 text-center">
                        <img src='img/genre_fusion.jpg' width="200px" height="200px" alt="フュージョン" />
                    </div>
                    <div class="col-12 text-center">
                        <div class="top-rack mx-auto" style="text-align: center;font-weight: bold;color: #31538f;width: 17em;">
                        フュージョン
                        </div>
                    </div>
                </div>
            </label>
        </div>
        <div class="col-md-2">
            <label for="label14" style="cursor: pointer;background: #f2f2f2;">
                <div class="row genre_img">
                    <div class="col-12 text-center">
                        <img src='img/genre_Latin.png' width="200px" height="200px" alt="ラテン・ボサノバ" />
                    </div>
                    <div class="col-12 text-center">
                        <div class="top-rack mx-auto" style="text-align: center;font-weight: bold;color: #31538f;width: 17em;">
                        ラテン・ボサノバ
                        </div>
                    </div>
                </div>
            </label>
        </div>
        <div class="col-md-2">
            <label for="label15" style="cursor: pointer;background: #f2f2f2;">
                <div class="row genre_img">
                    <div class="col-12 text-center">
                        <img src='img/genre_gakki.jpg' width="200px" height="200px" alt="楽器" />
                    </div>
                    <div class="col-12 text-center">
                        <div class="top-rack mx-auto" style="text-align: center;font-weight: bold;color: #31538f;width: 17em;">
                        楽器
                        </div>
                    </div>
                </div>
            </label>
        </div>
        <div class="col-md-2">
            <label for="label16" style="cursor: pointer;background: #f2f2f2;">
                <div class="row genre_img">
                    <div class="col-12 text-center">
                        <img src='img/genre_live.jpg' width="200px" height="200px" alt="ライブ" />
                    </div>
                    <div class="col-12 text-center">
                        <div class="top-rack mx-auto" style="text-align: center;font-weight: bold;color: #31538f;width: 17em;">
                        ライブ
                        </div>
                    </div>
                </div>
            </label>
        </div>
    </div>

    <!-- <label for="label13">フュージョン名盤アルバムランキング一覧</label> -->
    <input type="checkbox" id="label13" class="cssacc" />
    <div class="accshow">
        <table class="table table-bordered" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=Fusion&title=フュージョン全般">フュージョン全般</a></th>
                    <th scope="col"><a href="various_ranking.php?genre=AOR&title=ＡＯＲ">ＡＯＲ</a></th>
                    <th scope="col"></th>
                </tr>
            </thead>
        </table>
    </div>

    <!-- <label for="label14">ラテン・ボサノバ名盤アルバムランキング一覧</label> -->
    <input type="checkbox" id="label14" class="cssacc" />
    <div class="accshow">
        <table class="table table-bordered" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=Latin&title=ラテン・ボサノバ全般">ラテン・ボサノバ全般</a></th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </thead>
        </table>
    </div>

    <!-- <label for="label15">楽器名盤アルバムランキング一覧</label> -->
    <input type="checkbox" id="label15" class="cssacc" />
    <div class="accshow">
        <table class="table table-bordered" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th scope="col">ボーカル</th>
                    <th scope="col">ギター</th>
                    <th scope="col">ベース</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                    <th scope="col">ドラム</th>
                    <th scope="col">キーボード・ピアノ</th>
                    <th scope="col">ハーモニカ</th>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- <label for="label16">ライブアルバム名盤ランキング一覧</label> -->
    <input type="checkbox" id="label16" class="cssacc" />
    <div class="accshow">
        <table class="table table-bordered" style="table-layout: fixed;">
            <thead>
                <tr>
                    <th scope="col"><a href="various_ranking.php?genre=Live&title=ライブアルバム全般">ライブアルバム全般</a></th>
                    <th scope="col"><a href="various_ranking.php?year=1950&genre=Live&title=50年代ライブアルバム">50年代ライブアルバム</a></th>
                    <th scope="col"><a href="various_ranking.php?year=1960&genre=Live&title=60年代ライブアルバム">60年代ライブアルバム</a></th>
                </tr>
            </thead>
            <tbody>
            <tr>
                    <th scope="col"><a href="various_ranking.php?year=1970&genre=Live&title=70年代ライブアルバム">70年代ライブアルバム</a></th>
                    <th scope="col"><a href="various_ranking.php?year=1980&genre=Live&title=80年代ライブアルバム">80年代ライブアルバム</a></th>
                    <th scope="col"><a href="various_ranking.php?year=1990&genre=Live&title=90年代ライブアルバム">90年代ライブアルバム</a></th>
                </tr>
                <tr>
                    <th scope="col"><a href="various_ranking.php?year=2000&genre=Live&title=00年代ライブアルバム">00年代ライブアルバム</a></th>
                    <th scope="col"><a href="various_ranking.php?year=2010&genre=Live&title=10年代ライブアルバム">10年代ライブアルバム</a></th>
                    <th scope="col"><a href="various_ranking.php?year=2020&genre=Live&title=20年代ライブアルバム">20年代ライブアルバム</a></th>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="box3 col-12">
<?php include(dirname(__FILE__).'/layout/footer.html'); ?>
</div>
<?php include(dirname(__FILE__). '/layout/bootstrap_script.tpl') ?>
</body>
</html>