@charset "utf-8";
/********************************
  メイン
********************************/
html, body {
    height: 100% !important; /* 背景画像をレスポンシブにするために強制的に100%に設定 */
}
body {
	background:url(img/haikei.jpg);
	background-attachment: fixed; /* 背景画像を固定 */
	background-size: cover;      /* 背景画像を画面全体に拡大・縮小して表示 */
	background-position: center; /* 背景画像を中央に配置 */
	background-repeat: no-repeat; /* 背景画像を繰り返さない */
    min-height: 100vh; /* ビューポートの高さ全体を最低限確保 */
}

#mainpage {
	width: 100%;
	font-size: 13px;
	font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	font-weight: 300;
	/*background: #fdd835;*/
	color: #333;
	padding: 0 0 20px 0;
    min-height: 100%; /* bodyの高さが100%になるように調整 */
    box-sizing: border-box; /* paddingを含めて高さ計算 */
}

#mainpage dl a {
	color: #069;
}

#mainpage dl a:hover,
#mainpage .final-box a:hover {
	text-decoration: underline;
}

#mainpage .final-box a {
	/*color: #fff;*/
}

.mainpage-inbox {
	width: 960px;
    min-width: 960px;
    margin: 0 auto;
    padding: 20px 0 0 0;
}

#header_second {
    position: relative;
    z-index: 19;
    -webkit-box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2);
            box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2);
}

/********************************
  メインビジュアル
********************************/
/*.mainvisual {
	background: #fdd835;
}*/

.mainvisual-inbox {
	width: 960px;
    min-width: 960px;
    padding: 15px 0 15px 0;
    margin: 0 auto;
}

/* ここから広告を囲むdiv要素のスタイル調整 */
/* PCで表示されるように高さを確保します。!important は使用しません。 */
.mainvisual-inbox > div[style*="margin:0px auto 20px auto;"] {
    display: block; /* 念のためdisplayをblockに設定 */
    height: auto;   /* 高さが0になっていないことを確認 */
    min-height: 100px; /* PCで広告が表示されるための最低限の高さを確保。AdSenseの推奨サイズに合わせて調整してください。 */
    /* デバッグ用に一時的に背景色やボーダーを設定することもできます */
    /* background-color: rgba(255, 255, 0, 0.3); */
    /* border: 1px solid red; */
}
/* ここまで広告を囲むdiv要素のスタイル調整 */


.mainvisual-inbox h1 img {
	margin: 0 auto;
	display: block;/
}

#mainpage p:nth-of-type(1) {
	/*color: #FFF;*/
	text-align: center;
	font-size: 17px;
	margin: 0 0 15px 0;
}

#mainpage p:nth-of-type(2) {
	/*color: #FFF;*/
	text-align: right;	
	font-size: 17px;
}

#mainpage p:nth-of-type(3) {
	/*color: #FFF;*/
	text-align: right;	
}

#mainpage p:nth-of-type(2) span {
	background: #fb7342;
	color: #FFF;
	font-size: 16px;
	margin-right: 5px;
	padding: 0px 5px;
}

.guess-box {
	display: none;
}

/********************************
  シェア欄
********************************/
.share-area {
	text-align: right;
	background: #333;
}

.share-inbox {
    width: 960px;
    min-width: 960px;
    display:inline-block;
    margin: 0 auto 0px auto;
    padding: 10px 0 0 0;
}

.share-inbox {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-moz-justify-content:flex-end;
	-webkit-box-pack:end;
	-ms-flex-pack:end;
	    justify-content:flex-end;
}

.share-inbox li {
    display: inline;
    padding: 0 5px;
}

.share-inbox li img {
    width: 30px;
    height: auto;
}


/********************************
  最終ボックス
********************************/
.final-box {
	text-align: center;
	margin: 20px 0 0 0;
}

/********************************
  タブレット設定
********************************/
@media screen and (min-width: 721px) and (max-width: 959px) {
	#mainpage a {
		-webkit-tap-highlight-color:rgba(0, 0, 0, 0.4) !important;
	}
	#mainpage {
		font-size: 1.5vw;
	}

	#mainpage h2 {
		text-align: center;
		font-size: 4vw;
	}

	.mainvisual-inbox {
		width: 100%;
		min-width: 100%;
		padding: 15px 100px;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
	}

	.share-inbox {
		width: 97%;
		min-width: 97%;		
	}

	#mainpage p:nth-of-type(1),
	#mainpage p:nth-of-type(2),
	#mainpage p:nth-of-type(2) span {
		font-size: 1.7vw;
	}

	#mainpage table td:nth-of-type(1) {
		width: 6%;
	}

	/* 5列目は削除されたため、このセレクタは影響しません */
	/* #mainpage table td:nth-of-type(5) {
		width: 9%;
	} */

	.mainvisual-inbox img {
		width: 100%;
	}

	.mainpage-inbox {
		width: 97%;
		min-width: 97%;
	}

	.pagenation-box b {
		font-size: 3vw;
	}

	.pagenation-box {
		font-size: 2.2vw;
	}

	.year-box {
		font-size: 2.7vw;
	}

	#header_sp_add {
		display: block !important;
	}

	#header {
		display: none !important;
	}

	header#sp > .right {
		width: unset !important;
		padding: 4px 15px 2px 4px !important;
	}

	#footer_contents{
		width:90%;
		margin:0 auto;
	}

	.f-left,.f-left_l,
	.f-left_s,.f-right,
	.f-right_l,.f-right_s,
	.f-left_ss,.f-right_ss,
	.f-left_ll,.f-right_ll{
		float:none;
		width:100% !important;
	}
	.tenpolist div{
		width:92%;
	}
	#topicpath{
		width:100%;
	}

	#footer dl.eventinfo{
		line-height:16px;
		float:none;
		margin:0;
		width:100%;
	}
	#footer dl.eventinfo dd a{
		padding:10px;
		border-top:1px solid #CCC;
	}
	#footer dl.eventinfo dd a:first-child{
		border-top:none;
	}

	#snsarea {
		width: 100%;
	}
	
	#header_second {
		padding: 5px 5px 5px 5px !important;
	}
	#snsarea {
		text-align: right;
	}
	h1.title {
		width: 100%;
	    padding: 0 5px 0 5px;
	    -webkit-box-sizing: border-box;
	            box-sizing: border-box;
	}
	#snsarea {
		width: 100%;
		text-align: right;
	}
	#topicpath {
		width: 100%;
	}
}

/********************************
　スマホ設定
********************************/
@media screen and (max-width: 720px) {
	#mainpage a {
		-webkit-tap-highlight-color:rgba(0, 0, 0, 0.4) !important;
	}
	#mainpage {
		width: 100%;
		font-size: 3.2vw;
		background: #f7f7f7;
	}
	#mainpage a {
		-webkit-transition: all 0s !important;
		-o-transition: all 0s !important;
		transition: all 0s !important;		
	}

	#mainpage p,
	#mainpage .final-box a {
		color: #333 !important;
	}

	#mainpage p:nth-of-type(3) {
		text-align: left;
	}
	
	#mainpage a:hover {
		opacity: 1 !important;
		text-decoration: none !important;
	}
	#mainpage p:nth-of-type(1) {
		font-size: 3.2vw;
		margin: 0 0 8px 0;
		text-align: left;
	}
	#mainpage p:nth-of-type(2),
	#mainpage p:nth-of-type(2) span {
		font-size: 3.2vw;
	}

	.guess-box {
		display: block;
		margin: 0 0 15px 0;
	}

	.mainvisual-inbox {
		width: 100%; /* スマホでは幅を100%に */
		min-width: unset; /* min-widthを解除 */
		padding: 15px 0; /* 左右のパディングを調整 */
	}

	.share-inbox {
		width: 100%;
		min-width: 100%;		
	}
		
	.mainpage-inbox {
		width: 96%;
		min-width: 96%;
		margin: 0 auto;
		padding: 15px 0 15px 0;
	}

	.share-inbox li img {
		width: 25px;
	}

	.area-change {
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap : wrap;
		flex-wrap : wrap;
		background: #f7f7f7;
	}
	.mainvisual {
		background: #f7f7f7;
	}
	.share-area {
		width: 100%;
		-webkit-box-ordinal-group:-1;
		-webkit-flex-order:-1;
		-moz-flex-order:-1;
		-moz-order:-1;
		-ms-order:-1;
		-ms-flex-order:-1;
		    order:-1;
		background: #f7f7f7;
	}


	#header_second {
		display: block;
		padding: 5px 5px 5px 5px !important;
	}
	#snsarea {
		margin: 5px 0 0 auto;
		width: 100%;
		text-align: right;
	}

	#twibtn {
		width: 100%;
	}
	
	h1.title {
		width: 100%;
	    padding: 0 5px 0 5px;
	    -webkit-box-sizing: border-box;
	            box-sizing: border-box;
	    border-bottom: 1px solid #a9a9a9;
	    border-left: none;
	    font-size: 4.5vw;
	}
	#topicpath {
		width: 100%;
	}

    /* ここから広告を囲むdiv要素のスマホ向け調整 */
    .mainvisual-inbox > div[style*="margin:0px auto 20px auto;"] {
        min-height: unset; /* min-heightを解除 */
        height: auto;     /* 高さを自動調整に */
        width: 100%;      /* 幅を100%に */
        max-width: 320px; /* スマホでスクエアに近い形にするための最大幅を設定 (例: 320px) */
        margin: 0 auto 10px auto; /* 中央寄せと下マージンを調整 */
        /* デバッグ用に一時的に背景色やボーダーを設定することもできます */
        /* background-color: rgba(255, 255, 0, 0.3); */
        /* border: 1px solid red; */
    }
    /* ここまで広告を囲むdiv要素のスマホ向け調整 */

    /* スマホ：順位欄 */
.karaoke-table td:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    vertical-align: middle;
    padding: 12px 10px;
}

/* 「順位」を左側に表示 */
.karaoke-table td:first-child::before {
    content: attr(data-label);
    display: block;
    flex: 1;
    text-align: left;
}

/* 順位番号 */
.karaoke-table td:first-child .rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0 10px 0 auto;
}

/* 矢印 */
.karaoke-table td:first-child .rank-change {
    display: inline-block;
    flex: 0 0 auto;
    position: static;
    float: none;
    margin: 0;
    text-align: center;
    line-height: 1;
    font-size: 1.2rem;
	}
}

/********************************
  順位変動マーク
********************************/
.rank-badge {
    display: inline-block;
}

.rank-change {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
}

.karaoke-table td:first-child .rank-change {
    position: static;
    float: none;
}

/* PC・タブレット */
@media screen and (min-width: 721px) {
    .karaoke-table td:first-child {
        text-align: left !important;
        vertical-align: top;
        padding: 12px 10px !important;
    }

    .karaoke-table td:first-child .rank-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0 0 10px 0 !important;
        padding: 0;
        box-sizing: border-box;
        border-radius: 50%;
        line-height: 1;
    }

    .karaoke-table td:first-child .rank-change {
        display: block;
        margin: 0 !important;
        padding-left: 14px;
        text-align: left !important;
    }
}

/* スマホ */
@media screen and (max-width: 720px) {
    .karaoke-table td:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        vertical-align: middle;
        padding: 12px 10px;
    }

    .karaoke-table td:first-child::before {
        content: attr(data-label);
        display: block;
        flex: 1;
        text-align: left;
    }

    .karaoke-table td:first-child .rank-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        margin: 0 10px 0 auto;
    }

    .karaoke-table td:first-child .rank-change {
        display: inline-block;
        flex: 0 0 auto;
        position: static;
        float: none;
        margin: 0;
        text-align: center;
        line-height: 1;
        font-size: 1.2rem;
    }
}

.rank-up {
    color: #e53935;
}

.rank-down {
    color: #1e88e5;
}

.rank-stay {
    color: #888;
}

.rank-new {
    color: #ff6f00;
    font-size: 10px;
}