@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用）*/
	.wrapper .logo_box{
		width: 50%;
		max-width: 290px;
	}
	.visual_area{
		width: 100vw;
		height: calc(100vh - 170px);
	}
	.countdown{
		width: 300px;
		max-width: 300px;
		min-width: 300px;
		top: calc(50% - 100px);
		left: calc(50% - 150px);
	}
	.time{
		font-size: 50px;
		top: calc(50% - 30px);
		right: calc(50% - 2.25em);
	}
	.grandprix_logo{
		width: 80%;
		max-width: 959px;
	}
	.syoukin{
		width: 70%;
		max-width: 500px;
		height: 30px;
		font-size: 15px;
		background-color: rgba(255,255,255,0.25);
		position: relative;
	}
	.syoukin:before{
		content: "";
		border-top: 30px solid #b2ce54;
		border-right: 30px solid transparent;
		position: absolute;
		width: 0;
		height: 0;
	}
	.syoukin:after{
		content: "";
		border-bottom: 30px solid #b2ce54;
		border-left: 30px solid transparent;
		position: absolute;
		width: 0;
		height: 0;
		top:0;
		right:0;
	}
	.movie{
		width: 100%;
		height: calc(100vw * 0.5625);
		margin: 0 auto 10px;
	}
	.movie_link_box{
		width: 100vw;
		margin: 0 auto 10px;
	}
	.movie_link_box ul li{
		padding: 5px 5px;
	}
        .menu-content ul {
            padding: 10px 10px 0;
        }
        .menu-content ul li {
            width: 100%;
        }
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
	.countdown{
		width: 100%;
		max-width: 350px;
		min-width: 350px;
		top: calc(50% - 100px);
                /*top: calc(30% - 100px);*/
		left: calc(50% - 175px);
		background-image: url("../images/counter_sp.png");
	}
	.time{
		font-size: 50px;
		top: calc(50% - 37px);
		right: calc(50% - 2.5em);
	}
	/*ハンバーガーメニュー----------------------------------------*/
	.hamburger-menu{
		padding:  1% 2% 1% 1%;
		display: block;
		width: 36px;
		height: 36px;
		position: absolute;
		right: 5px;
		top: 0;
		box-sizing:border-box;
	}
	/*アイコン部分*/
	.menu-btn {
		position: relative;
		top: 15px;
		right: 5px;
		display: flex;
		height: 36px;
		width: 36px;
		justify-content: center;
		align-items: center;
		z-index: 90;
	}
	.menu-btn::before{
		top: -15px;
		font-size: 12px;
	}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
		content: '';
		display: block;
		height: 3px;
		width: 100%;
		border-radius: 3px;
		background-color: #ffffff;
		position: absolute;
	}
	.menu-btn span:before {
		bottom: 10px;
	}
	.menu-btn span:after {
		top: 10px;
	}
	#menu-btn-check:checked ~ .menu-btn span {
		background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
	}
	#menu-btn-check:checked ~ .menu-btn span::before {
		bottom: 0;
		transform: rotate(45deg);
		background-color: white;
	}
	#menu-btn-check:checked ~ .menu-btn span::after {
		top: 0;
		transform: rotate(-45deg);
		background-color: white;
	}
	#menu-btn-check:checked ~ .menu-btn{
		position: fixed;
	}
	#menu-btn-check {
		display: none;
	}

	/*ハンバーガーメニュー終了----------------------------------------*/
	
	.movie_link_box ul{
		justify-content: center;
	}
        
        .grandprix_logo{
/*            position: relative;*/
            margin: 20px auto;
        }
        .top_left_menu{
                position: absolute;
                top: calc(50% - 50px);
                width: 100%;
        }
        .menu_item {
            width: 100%;
            height: 60px;
            margin: 10px 0;
        }     
        .en-text {
            font-size: 1rem;
            font-weight: bold;
            padding-top: 10px;
            line-height: 1.2rem;
        }        
        .jp-text {
            font-size: 0.9rem;
            line-height: 1rem;
        }
}
/*横置きの場合の対応*/
@media screen and (max-height: 400px){
	.visual_area{
		height: 500px;
	}
}