body {
	background: #000;
	font-family: "m-plus-2c", sans-serif;
	font-weight: 400;
	position: relative;
    left: 0;
    overflow-x: hidden;
	-webkit-text-size-adjust: 100%; /* iphone横向き 文字拡大防止 */
}
img {
	display: block;
	width: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
a {
	text-decoration: none;
	color: #000;
	transition: all .3s;
}
a:hover {
	filter: brightness(1.1);
}
p {
	font-size: min(1.3vw,16px);
	line-height: 1.6;
}

/*最新のsafari用*/
::-webkit-full-page-media, :future, :root .AAA {
	
}
/*古いsafari用*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .AAA {
		
	}
}

:root {
    --green: #009944;
    --blue: #0068b7;
    --red: #e60012;
	--yellow: #ffd800;
	--l_yellow: #fff100;
	--orange: #ed6c00;
}
/*==================================================================================
ヘッダー
==================================================================================*/
header {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
}
header::after {
	content: "";
	display: block;
	width: 100%;
	height: 14vw;
	background: linear-gradient(to bottom, transparent 0%, #000 90%);
	position: absolute;
	bottom: 0;
	left: 0;
}
header div[class^="img0"] {
    width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
header .img01 {
	animation: main_img01 1s;
}
@keyframes main_img01 {
	0% {opacity: 0; transform: translateX(-2vw);}
	60%,100% {opacity: 1; transform: translateX(0);}
}
header .img02 {
	animation: main_img02 1s;
}
@keyframes main_img02 {
	0%,10% {opacity: 0; transform: translateX(2vw);}
	70%,100% {opacity: 1; transform: translateX(0);}
}
header .img03 {
	animation: main_img03 1s;
}
@keyframes main_img03 {
	0%,20% {opacity: 0; transform: translateY(2vw);}
	80%,100% {opacity: 1; transform: translateY(0);}
}
header .txt {
	width: 22%;
	position: absolute;
	top: 20%;
	left: 0;
	animation: main_txt 1s;
}
@keyframes main_txt {
	0%,60% {opacity: 0; transform: scale(3);}
	90% {opacity: 1; transform: scale(.95);}
	100% {opacity: 1; transform: scale(1);}
}


/*==================================================================================
共通
==================================================================================*/
/* レイアウト */
section {
	padding: 3vw 0 0!important;
	position: relative;
}
.container {
	width: 100%;
    box-sizing: border-box;
	max-width: 1200px;
	padding: 0 60px;
	margin: auto;
}
.max960 {
	max-width: 960px;
	margin: auto;
}
.row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.row.align_center {
	align-items: center;
}
.row.align_end {
	align-items: flex-end;
}
.row.just_center {
	justify-content: center;
}
.row.just_start {
	justify-content: flex-start;
}
.col3 {
	width: 30%;
}
.col3.max {
	width: 32%;
}

.wrap {
	display: inline-block;
}

.mb_10 {
	margin-bottom: 10px;
}
.mb_20 {
	margin-bottom: 20px;
}
.mb_30 {
	margin-bottom: 30px;
}
.mb_60 {
	margin-bottom: 60px;
}
.mb_120 {
	margin-bottom: 120px;
}

/* フォント */
.font_14 {
	font-size: min(1.2vw,14px);
}
.font_16 {
	font-size: min(1.3vw,16px);
}
.font_20 {
	font-size: min(1.6vw,20px);
}
.font_24 {
	font-size: min(2vw,24px);
}
.font_30 {
	font-size: min(2.4vw,30px);
}
.font_40 {
	font-size: min(3.4vw,40px);
}
.font_50 {
	font-size: min(4vw,50px);
}
.font_60 {
	font-size: min(4.8vw,60px);
}
.font_80 {
	font-size: min(6vw,80px);
}
.txt_center {
	text-align: center;
}
.medium {
	font-weight: 500;
}
.bold {
	font-weight: 700;
}
.black {
	font-weight: 900;
}
.white {
	color: #fff;
}
.green {
    color: var(--green);
}
.blue {
    color: var(--blue);
}
.red {
    color: var(--red);
}
.yellow {
	color: var(--l_yellow);
}
.orange {
	color: var(--orange);
}
.line1 {
	line-height: 1;
}
.line1_2 {
	line-height: 1.2;
}
.line1_4 {
	line-height: 1.4;
}
.txt_mask {
	display: block;
	background: url("../img/txt_bg.png") center bottom / cover no-repeat;
	background-clip: text;
	-webkit-background-clip: text;
}
.txt_mask.red {
	background-image: url("../img/txt_bg3.png");
}
.txt_mask * {
	color: transparent;
}
.indent {
    text-indent: -1em;
    padding-left: 1em;
}
.highlight {
	display: inline-block;
	background: linear-gradient(to bottom, transparent 0%, transparent 60%, rgb(255,241,0,0.4) 60%, rgb(255,241,0,0.4) 100%);
	line-height: 1.2;
}

.btn {
    display: inline-block;
	padding: 1em 3em;
	border-radius: 30px;
    border: none;
	background: #fff;
	white-space: nowrap;
	position: relative;
    transition: all .3s;
}
.btn.disa {
	filter: grayscale(1);
	pointer-events: none;
	box-shadow: none!important;
}
.btn::after {
	content: "";
	display: block;
	border: .3em transparent solid;
	border-left: .5em #000 solid;
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
}

/* アニメーション -----------*/
.yay {
    opacity: 0;
    transform: translateY(2px);
    transition: all 1s;
}
.yay.fadeinup {
    transform: translateY(20px);
}
.yay.fadeinup.second.on {
    animation: yay_up_2nd 1s;
}
@keyframes yay_up_2nd {
	0% {opacity: 0; transform: translateY(20px);}
	20% {opacity: 0; transform: translateY(20px);}
	100% {opacity: 1; transform: translateY(0);}
}
.yay.fadeinup.third.on {
    animation: yay_up_3rd 1s;
}
@keyframes yay_up_3rd {
	0% {opacity: 0; transform: translateY(20px);}
	40% {opacity: 0; transform: translateY(20px);}
	100% {opacity: 1; transform: translateY(0);}
}
.yay.fadeinup.forth.on {
    animation: yay_up_4th 1.2s;
}
@keyframes yay_up_4th {
	0% {opacity: 0; transform: translateY(20px);}
	42.85% {opacity: 0; transform: translateY(20px);}
	100% {opacity: 1; transform: translateY(0);}
}
/* 右から */
.yay.fadeinright {
    transform: translateX(30%);
}
.yay.fadeinright.second.on {
    animation: yay_right_2nd 1s;
}
@keyframes yay_right_2nd {
	0% {opacity: 0; transform: translateX(30%);}
	20% {opacity: 0; transform: translateX(30%);}
	100% {opacity: 1; transform: translateX(0);}
}
.yay.fadeinright.third.on {
    animation: yay_right_3rd 1s;
}
@keyframes yay_right_3rd {
	0% {opacity: 0; transform: translateX(30%);}
	40% {opacity: 0; transform: translateX(30%);}
	100% {opacity: 1; transform: translateX(0);}
}
.yay.fadeinright.six.on {
    animation: yay_right_6th 1.6s;
}
@keyframes yay_right_6th {
	0% {opacity: 0; transform: translateX(30%);}
	62.5% {opacity: 0; transform: translateX(30%);}
	100% {opacity: 1; transform: translateX(0);}
}

.yay.on {
    transform: translateY(0);
    opacity: 1;
}

/*==================================================================================
INDEX
==================================================================================*/
section#main {
	margin-top: min(-10vh, -12vw);
	padding: 0!important;
}
section#main .nav {
	width: 100%;
	border-top: 1px rgba(255,255,255,0.2) solid;
	border-bottom: 1px rgba(255,255,255,0.2) solid;
	background: linear-gradient(to bottom, rgba(59,30,135,0.50) 0%, rgba(8,0,89,0.50) 50%, rgba(59,30,135,0.50) 100%);
	box-shadow: 0 0 20px rgba(59,30,135,0.70), 0 0 20px rgba(59,30,135,0.70), 0 0 20px rgba(59,30,135,0.70);
	position: relative;
}
section#main .nav.yay.on {
	animation: nav 1s;
}
@keyframes nav {
	0%,60% {opacity: 0;}
	80%,100% {opacity: 1;}
}
section#main .nav ul li a {
	display: block;
	box-sizing: border-box;
	margin: auto;
	padding: 1px 0;
	position: relative;
}
section#main .nav.yay.on ul li:nth-child(1) a {
	animation: nav_a01 2s;
}
@keyframes nav_a01 {
	0%,30% {opacity: 0; transform: translateX(20%);}
	60%,100% {opacity: 1; transform: translateX(0);}
}
section#main .nav.yay.on ul li:nth-child(2) a {
	animation: nav_a02 2s;
}
@keyframes nav_a02 {
	0%,35% {opacity: 0; transform: translateX(20%);}
	65%,100% {opacity: 1; transform: translateX(0);}
}
section#main .nav.yay.on ul li:nth-child(3) a {
	animation: nav_a03 2s;
}
@keyframes nav_a03 {
	0%,40% {opacity: 0; transform: translateX(20%);}
	70%,100% {opacity: 1; transform: translateX(0);}
}
section#main .nav ul li a::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px #fff solid;
	transform: skewX(-20deg);
	background: linear-gradient(to bottom, #8fc31f 0%, #00502c 100%);
	box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px #00502c, 0 0 15px #00502c, 0 0 15px #00502c;
	position: absolute;
	top: 0;
	left: 0;
}
section#main .nav ul li:nth-child(2) a::before {
	background: linear-gradient(to bottom, #00a4e0 0%, #005bac 100%);
	box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px #00a4e0, 0 0 15px #00a4e0, 0 0 15px #00a4e0;
}
section#main .nav ul li:nth-child(3) a::before {
	background: linear-gradient(to bottom, #e60012 0%, #7c191e 100%);
	box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px #e60012, 0 0 15px #e60012, 0 0 15px #e60012;
}
section#main .nav ul li a::after {
	content: "";
	display: block;
	border: 4px transparent solid;
	border-left: 8px #fff solid;
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	transition: all .3s;
}
section#main .nav ul li a:hover {
	filter: brightness(1.3);
}
section#main .nav ul li a:hover::before {
	border: 1px var(--yellow) solid;
}
section#main .nav ul li:nth-child(1) a:hover::before,
section#main .nav ul li:nth-child(2) a:hover::before,
section#main .nav ul li:nth-child(3) a:hover::before {
	box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px var(--yellow), 0 0 15px var(--yellow);
}
section#main .nav ul li a:hover::after {
	border-left-color: var(--yellow);
}
section#main .nav ul li a img:first-child {
	width: 65%;
	max-width: 240px;
	position: absolute;
	top: -58%;
	left: 50%;
	transform: translateX(-50%);
	transition: brightness .3s, hue-rotate .3s;
}
section#main .nav ul li a:hover img:first-child {
	filter: brightness(0%) invert(100%) sepia(100%) saturate(1670%) hue-rotate(325deg) brightness(60%) contrast(100%);
}
section#main .nav ul li a img:last-child {
	width: 60%;
	max-width: 160px;
	margin: auto;
	position: relative;
}
/* 実況解説 */
section#main .live_cmnt {
	padding: 30px 0;
	border: 1px rgba(255,255,255,0.2) solid;
	background: linear-gradient(to bottom, rgba(59,30,135,0.30) 0%, rgba(8,0,89,0.30) 50%, rgba(59,30,135,0.30) 100%);
	box-shadow: 0 0 20px rgba(59,30,135,0.30), 0 0 20px rgba(59,30,135,0.30), 0 0 20px rgba(59,30,135,0.30);/**/
}
section#main .comment {
	width: calc(100% - 40px);
	box-sizing: border-box;
	padding: 20px 60px 20px 40px;
	background: linear-gradient(to bottom, rgba(59,30,135,0.30) 0%, rgba(8,0,89,0.20) 50%, rgba(59,30,135,0.30) 100%);
	clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
}
.txt_mask .split > span {
	display: inline-block;
	opacity: 0;
	background: url("../img/txt_bg.png") center bottom / cover no-repeat;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
.txt_mask.animated .split > span {
	animation: splitFade .1s forwards;
	animation-delay: var(--delay);
}
@keyframes splitFade {
	to {opacity: 1;}
}
section#main .live {
	padding: 0 40px;
}
section#main .racer {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 20%;
	height: 45px;
	box-sizing: border-box;
	padding: 0 0 0 1.2%;
	border: 1px rgba(255, 255, 255, 0.5) solid;
	border-right: none;
    background: linear-gradient(to bottom, #6e9f04 0%, #013920 100%);
	position: relative;
	transform: skewX(-15deg);
	z-index: 2;
}
section#main .tokyo .racer {
    background: linear-gradient(to bottom, #026d94 0%, #02325e 100%);
}
section#main .osaka .racer {
    background: linear-gradient(to bottom, #9e030f 0%, #3c0104 100%);
}
section#main .racer .place,
section#main .racer .icon {
	display: inline-block;
	width: auto;
	height: calc(100% + 2px);
    margin-right: -25%;
	transform: translateY(-1px) skewX(15deg);
	filter: drop-shadow(5px 0 10px rgba(0,0,0,0.5));
}
section#main .osaka .racer .icon {
	margin-right: -30%;
}
section#main .racer .icon img {
	width: auto;
    height: 100%;
}
section#main .racer .place {
	width: 55%;
	height: auto;
	margin: 4% -20% 0 0;
}
section#main .score {
	width: 80%;
	box-sizing: border-box;
	padding-right: 8%;
	background: rgba(0,0,0,0.7);
	transform: skewX(-15deg);
    position: relative;
}
section#main .score .bar {
	display: inline-flex;
	align-items: center;
	min-width: 200px;
	height: 30px;
	box-sizing: border-box;
	padding: 0 80px 0 8%;
	border: 1px rgba(255, 255, 255, 0.3) solid;
	background: linear-gradient(to bottom, #aeff00 0%, #00502c 100%);
	box-shadow: 0 -1px 5px rgba(255,255,255,0.3), 0 -1px 5px #aeff00;
	position: relative;
}
section#main .score .bar.animated {
	animation: live_score 1s;
    opacity: 1;
}
@keyframes live_score {
	0% {opacity: 0; width: 200px;}
	100% {opacity: 1; width: content;}
}
section#main .tokyo .score .bar {
	background: linear-gradient(to bottom, #00bfff 0%, #005bac 100%);
	box-shadow: 0 -1px 5px rgba(255,255,255,0.3), 0 -1px 5px #00bfff;
}
section#main .osaka .score .bar {
	background: linear-gradient(to bottom, #ff0000 0%, #520c10 100%);
	box-shadow: 0 -1px 5px rgba(255,255,255,0.3), 0 -1px 5px #ff0000;
}
section#main .score .bar::after {
	content: "";
	display: block;
	width: 150px;
	height: 50px;
	background: url("../img/boat_fukuoka.png") center center / contain no-repeat;
	position: absolute;
	top: 50%;
	right: -90px;
	transform: translateY(-50%) skewX(15deg) rotate(0);
    filter: drop-shadow(-5px 0 10px rgba(0,0,0,1.0));
    /*animation: score_boat 2s linear infinite;*/
}
@keyframes score_boat {
    0% {transform: translateY(-50%) skewX(15deg) rotate(0);}
    33.33% {transform: translateY(-50%) skewX(15deg) rotate(-8deg);}
    66.66% {transform: translateY(-50%) skewX(15deg) rotate(5deg);}
    100% {transform: translateY(-50%) skewX(15deg) rotate(0);}
}
section#main .tokyo .score .bar::after {
	background-image: url("../img/boat_tokyo.png");
}
section#main .osaka .score .bar::after {
	background-image: url("../img/boat_osaka.png");
}
section#main .score .rank {
	display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 3em;
    height: 1.4em;
    background: rgba(255,255,255,0.75);
    color: #000;
    position: relative;
    top: -1.8em;
    left: 1%;
}
section#main .score .rank.first {
	background: rgb(255,248,146,.75);
}
section#main .score .rank::after {
    content: "";
    display: block;
    border: 4px transparent solid;
    border-top: 8px rgba(255, 255, 255, 0.8) solid;
    position: absolute;
    bottom: -12px;
    left: 42%;
}
section#main .score .rank.first::after {
    border-top-color: rgb(255,248,146,.75);
}
.bg {
    position: relative;
}
.bg::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/bg01.png") left top / 70% no-repeat, url("../img/bg02.png") right center / 70% no-repeat, url("../img/bg03.png") left bottom / 70% no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
}
.bg section {
    background: rgba(0,0,0,0.5);
}
/* 三都市対抗戦のルール ---------------------------------------------------------------*/
section#about .rule {
    padding: 20px 20px 10%;
    background: url("../img/about_bg.png") center bottom / cover no-repeat;
}
section#about .rule h3.txt_mask {
    background-image: url("../img/txt_bg2.png");
    line-height: 1.1;
    opacity: .5;
    transform: rotate(-18deg);
    position: absolute;
    top: 20px;
    left: 1%;
}
section#about .rule .cont {
    padding-left: 20%;
    align-items: flex-start;
}
section#about .rule .cont h4 {
    display: inline-block;
    width: 165px;
    box-sizing: border-box;
    padding: .1em 0;
    border-radius: 30px;
    background: var(--green);
    color: #fff;
    line-height: 1.6;
}
section#about .rule .cont h4.blue {
    background: var(--blue);
}
section#about .rule .cont h4.red {
    background: var(--red);
}
section#about .rule .cont .txt {
    width: calc(100% - 180px);
}
section#about .rule .cont h4.red + .txt p {
    text-indent: -1em;
    padding-left: 1em;
}
section#about .rule .cont h4.red + .txt p::first-letter {
    color: var(--red);
}

/* スケジュール ---------------------------------------------------------------------*/
#schedule ul li {
    padding: 15px 0 10px;
    background: url("../img/line_dot.png") left top / 15px repeat-x;
	position: relative;
}
#schedule ul li:last-child {
    padding: 15px 0 15px;
    background: url("../img/line_dot.png") left top / 15px repeat-x, url("../img/line_dot.png") left bottom / 15px repeat-x;
}
#schedule ul li h3 {
    margin-right: 30px;
    transform: skewX(-10deg);
    text-shadow: 0 3px #FFF, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
#schedule ul li .days {
	width: 58%;
	margin-right: 3%;
}
#schedule ul li .btn {
	padding: .8em 3em .8em 2em;
	border: 1px rgba(255,255,255,0.5) solid;
	color: #fff;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
#schedule ul li:nth-child(1) .btn {
	background: linear-gradient(to bottom, #aeff00 0%, #00502c 100%);
	box-shadow: 0 -1px 5px rgba(255,255,255,0.3), 0 -1px 5px #aeff00;
}
#schedule ul li:nth-child(2) .btn {
	background: linear-gradient(to bottom, #00bfff 0%, #005bac 100%);
	box-shadow: 0 -1px 5px rgba(255,255,255,0.3), 0 -1px 5px #00bfff;
}
#schedule ul li:nth-child(3) .btn {
	background: linear-gradient(to bottom, #ff0000 0%, #520c10 100%);
	box-shadow: 0 -1px 5px rgba(255,255,255,0.3), 0 -1px 5px #ff0000;
}
#schedule ul li .btn::after {
	border-left-color: #fff;
}

/* トークショー ---------------------------------------------------------------------*/
section#talk ul li {
    width: 32%;
    position: relative;
}
section#talk ul.row li span {
    display: inline-block;
    padding: .3em .5em;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    bottom: 3%;
    left: 30.5%;
}
section#talk ul.schedule {
	border-top: 1px #fff solid;
}
section#talk ul.schedule li {
	width: 100%;
	padding: 20px 0;
	border-bottom: 1px #fff solid;
}
section#talk .day {
    width: 50%;
    max-width: 540px;
    margin-right: 5%;
}

/* キャンペーン ---------------------------------------------------------------------*/
section#campaign {
    padding-bottom: 15vh!important;
}
section#campaign a {
    display: block;
	width: 100%;
    box-sizing: border-box;
    padding: 30px;
    border: 6px #fff solid;
    border-radius: 30px;
    background: var(--red);
	position: relative;
}
section#campaign a::after {
	content: "";
	display: block;
	border: 8px transparent solid;
	border-left: 16px #fff solid;
	position: absolute;
	right: 20px;
	bottom: 20px;
	transition: all .3s;
}
section#campaign a:hover {
	border-color: var(--yellow);
	filter: brightness(1.5);
	box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 15px var(--yellow), 0 0 15px var(--yellow);
}
section#campaign a:hover::after {
	border-left-color: var(--yellow);
}
section#campaign h2 {
    line-height: .9;
}
section#campaign h2 span:last-child {
    font-size: .83em;
}
section#campaign img {
    width: 18%;
	position: absolute;
	top: -10%;
	right: 1%;
}

/*==================================================================================
下層共通
==================================================================================*/
header.second {
	width: 100%;
    padding: 20px 0 0;
}
header.second::after {
    display: none;
}
header.second .logo {
    display: block;
    max-width: 460px;
    margin: 0 auto 50px;
}
header.second .bg {
	border-bottom: 1px rgba(255,255,255,0.2) solid;
	background: linear-gradient(to bottom, rgba(59,30,135,0.50) 0%, rgba(8,0,89,0.50) 50%, rgba(59,30,135,0.50) 100%);
}
header.second .bg::before {
	display: none;
}
header.second ul li {
	position: relative;
}
/*header.second ul li::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border: 1px #fff solid;
	transform: skewX(-20deg);
	background: linear-gradient(to bottom, #8fc31f 0%, #00502c 100%);
	box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px #00502c, 0 0 15px #00502c, 0 0 15px #00502c;
	position: absolute;
	top: 0;
	left: 0;
}
header.second ul li:nth-child(2)::before {
	background: linear-gradient(to bottom, #00a4e0 0%, #005bac 100%);
	box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px #00a4e0, 0 0 15px #00a4e0, 0 0 15px #00a4e0;
}
header.second ul li:nth-child(3)::before {
	background: linear-gradient(to bottom, #e60012 0%, #7c191e 100%);
	box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px #e60012, 0 0 15px #e60012, 0 0 15px #e60012;
}
header.second ul li img {
    display: inline-block;
	width: 50%;
	margin: auto;
    position: relative;
}
header.second ul li img:last-child {
	width: 30%;
	margin: 0 auto 8% 10px;
}*/
header.second ul li a {
	display: block;
	box-sizing: border-box;
	margin: auto;
	padding: 1px 0;
	position: relative;
}
header.second ul li a::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px #fff solid;
	transform: skewX(-20deg);
	background: linear-gradient(to bottom, #8fc31f 0%, #00502c 100%);
	box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px #00502c, 0 0 15px #00502c, 0 0 15px #00502c;
	position: absolute;
	top: 0;
	left: 0;
}
header.second ul li:nth-child(2) a::before {
	background: linear-gradient(to bottom, #00a4e0 0%, #005bac 100%);
	box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px #00a4e0, 0 0 15px #00a4e0, 0 0 15px #00a4e0;
}
header.second ul li:nth-child(3) a::before {
	background: linear-gradient(to bottom, #e60012 0%, #7c191e 100%);
	box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px #e60012, 0 0 15px #e60012, 0 0 15px #e60012;
}
header.second ul li a::after {
	content: "";
	display: block;
	border: 4px transparent solid;
	border-left: 8px #fff solid;
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	transition: all .3s;
}
header.second ul li a:hover {
	filter: brightness(1.3);
}
header.second ul li a:hover::before {
	border: 1px var(--yellow) solid;
}
header.second ul li:nth-child(1) a:hover::before,
header.second ul li:nth-child(2) a:hover::before,
header.second ul li:nth-child(3) a:hover::before {
	box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px var(--yellow), 0 0 15px var(--yellow);
}
header.second ul li a:hover::after {
	border-left-color: var(--yellow);
}
header.second ul li a img:first-child {
	width: 40%;
	max-width: 110px;
	position: absolute;
	top: -50%;
	left: 50%;
	transform: translateX(-50%);
	transition: brightness .3s, hue-rotate .3s;
}
header.second ul li:nth-child(2) a img:first-child {
	transform: translateX(-30%);
}
header.second ul li:nth-child(3) a img:first-child {
	transform: translateX(-30%);
}
header.second ul li a:hover img:first-child {
	filter: brightness(0%) invert(100%) sepia(100%) saturate(1670%) hue-rotate(325deg) brightness(60%) contrast(100%);
}
header.second ul li a img:last-child {
	width: 60%;
	max-width: 160px;
	margin: auto;
	position: relative;
}
main.second {
    min-height: 78vh;
    background: #000;
    position: relative;
}
main.second::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/bg01.png") left top / 70% no-repeat, url("../img/bg02.png") right center / 70% no-repeat, url("../img/bg03.png") left bottom / 70% no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .2;
}
section#cp_top .ttl {
    padding: 20px 30px;
    background: var(--red);
	position: relative;
}
section#cp_top p.txt {
    position: relative;
}
section#cp_top p.txt img {
	width: 20%;
	position: absolute;
	right: -8%;
	bottom: 50%;
}
section#cp_top.teleboat p.txt img {
    bottom: -50%;
}
main.second .inner {
	padding: 0 30px;
}
main.second .boad {
	padding: 30px;
	border: 1px rgba(255,255,255,0.2) solid;
	background: linear-gradient(to bottom, rgba(59,30,135,0.30) 0%, rgba(8,0,89,0.30) 50%, rgba(59,30,135,0.30) 100%);
	box-shadow: 0 0 20px rgba(59,30,135,0.30), 0 0 20px rgba(59,30,135,0.30), 0 0 20px rgba(59,30,135,0.30);/**/
}
section#cp_about ul {
    padding: 30px 0;
    background: url("../img/line_dot.png") left top / 15px repeat-x, url("../img/line_dot.png") left bottom / 15px repeat-x;
}
section#cp_about .bg {
    padding: 20px;
    background: rgba(255,255,255,0.1);
}
section#cp_about .bg::before {
    display: none;
}
section#cp_about [class^="rank_"] span.tag {
    display: inline-block;
	margin-right: .5em;
	padding: .2em .6em;
	background: rgb(255,216,0,0.3);
	line-height: 1;
	transform: skewX(-5deg);
}
section#cp_about .rank_b span.tag {
	background: rgb(255,255,255,0.3);
}
section#cp_about .rank_c span.tag {
	background: rgb(255,109,0,0.3);
}
section#cp_about table {
	width: 100%;
	border-top: 1px rgba(255,255,255,0.2) solid;
}
section#cp_about table tr {
	border-bottom: 1px rgba(255,255,255,0.1) solid;
}
section#cp_about table tr:first-child {
	background: rgb(255,242,173,0.1);
}
section#cp_about table tr:nth-child(n+2):nth-child(-n+5) {
	background: rgba(255,255,255,0.1);
}
section#cp_about table tr:nth-child(n+6):nth-child(-n+8) {
	background: rgb(255,206,172,0.1);
}
section#cp_about table th {
	width: 12%;
	box-sizing: border-box;
	padding: 20px 0;
	border-right: 1px rgba(255,255,255,0.1) dashed;
	vertical-align: top;
}
section#cp_about table [class^="rank_"] {
    display: inline-block;
	padding: .2em .6em;
	background: rgb(255,216,0,0.3);
	line-height: 1;
	transform: skewX(-5deg);
	position: relative;
	z-index: 2;
}
section#cp_about table .rank_b {
	background: rgb(255,255,255,0.3);
}
section#cp_about table .rank_c {
	background: rgb(255,109,0,0.3);
}
section#cp_about table td {
	box-sizing: border-box;
	padding: 10px 20px;
}
section#cp_about table td .img {
	width: 15%;
	margin-right: 4%;
}
section#cp_about table td p.ttl {
	width: 56%;
	margin-right: 2%;
}
section#cp_about table td .how {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4em;
	height: 4em;
	border-radius: 50%;
	background: rgba(255,255,255,0.7);
	color: #000;
	margin-right: 2%;
}
section#cp_about table td p.place {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4em;
	height: 4em;
	border-radius: 50%;
	color: #fff;
}
section#cp_about table td p.place.green {
	background: rgba(0,153,68,0.50);
}
section#cp_about table td p.place.blue {
	background: rgba(0,104,183,0.50);
}
section#cp_about table td p.place.red {
	background: rgba(230,0,18,0.50);
}
/* 応募締切 ------------------------------------------------*/
section#deadline .boad {
    background: linear-gradient(to bottom, rgb(135 30 30 / 30%) 0%, rgb(89 0 0 / 30%) 50%, rgb(135 30 30 / 30%) 100%);
    box-shadow: 0 0 20px rgb(135 30 30 / 30%), 0 0 20px rgb(135 30 30 / 30%), 0 0 20px rgb(135 30 30 / 30%);
}
section#deadline .boad .ttl {
	padding: .8em 1.5em;
	border-radius: 50px;
	background: var(--red);
	margin-right: 3%;
}
section#deadline .blue,
.deadline .blue {
	color: #a7e3f9;
}
section#deadline p {
	transform: skewX(-8deg);
}
section#deadline .youbi,
.deadline .youbi {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 1.5em;
	height: 1.5em;
	margin: 0 .1em;
	border-radius: 50%;
	background: #fff;
	color: #000;
	position: relative;
	top: -.2em;
}
section#deadline .youbi.blue,
.deadline .youbi.blue {
	background: #a7e3f9;
}
#schedule ul li .deadline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 20%;
	box-sizing: border-box;
	padding: .8em .8em .3em;
	border: 1px rgba(255,255,255,0.2) solid;
    background: linear-gradient(to bottom, rgb(135 30 30 / 30%) 0%, rgb(89 0 0 / 30%) 50%, rgb(135 30 30 / 30%) 100%);
    box-shadow: 0 0 20px rgb(135 30 30 / 30%), 0 0 20px rgb(135 30 30 / 30%), 0 0 20px rgb(135 30 30 / 30%);
}
#schedule ul li .deadline p {
	width: 100%;
	transform: skewX(-8deg);
}
#schedule ul li .deadline .ttl {
	display: block;
	margin-bottom: .2em;
	padding: .4em .6em;
	border-radius: 30px;
	background: var(--red);
	color: #fff;
	text-align: center;
	transform: skewX(8deg);
}

/*==================================================================================
レース展望
==================================================================================*/
.outlook header.second ul li a {
	filter: grayscale(.5) opacity(.9);
}
.outlook header.second ul li.on a {
	filter: grayscale(0);
	pointer-events: none;
}
.outlook header.second ul li a:hover {
	filter: brightness(1.3);
}
.outlook header.second ul li.on a::before {
	border: 1px var(--yellow) solid;
	box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px var(--yellow), 0 0 15px var(--yellow);
}
.outlook header.second ul li.on a::after {
	display: none;
}
.outlook header.second ul li.on a img:first-child {
	filter: brightness(0%) invert(100%) sepia(100%) saturate(1670%) hue-rotate(325deg) brightness(60%) contrast(100%);
}
.outlook main {
    margin-top: 3vw;
    background: url("../img/outlook_bg_head.png") center top / 95vw no-repeat, url("../img/outlook_bg_foot.png") center bottom / 95vw no-repeat;
}
section#outlook {
    padding: 3vw 0 10vw!important;
}
section#outlook h1 {
    padding: min(8vw,120px) 0 3vw;
	position: relative;
}
section#outlook h1 img.logo {
    width: 25%;
	position: absolute;
	top: min(2vw,40px);
	left: 50%;
	transform: translateX(-50%);
}
section#outlook h1 img.icon {
    width: 10vw;
	max-width: 140px;
	position: absolute;
	top: min(2vw,40px);
	right: 0;
}
section#outlook h1 img.icon.osaka {
	top: min(3vw,60px);
}
section#outlook .bg_border {
    position: relative;
}
section#outlook .bg_border::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/outlook_bg2.png") center top 5.6vw / 95vw repeat-y;
    position: absolute;
    bottom: 0;
    left: 0;
}
section#outlook .container {
    padding: 0 80px;
    position: relative;
    z-index: 2;
}
section#outlook h2 {
    padding: 4% 0 0 23%;
    background: url("../img/outlook_border.jpg") center top / 15% repeat-x;
    position: relative;
}
section#outlook h2 span {
    display: inline-block;
    height: 100%;
    padding: 1.6em .8em 0;
    background: url("../img/outlook_h2.png") center top / contain no-repeat;
    position: absolute;
    top: 0;
    left: 0;
}
section#outlook .racer {
    padding-left: 20%;
    position: relative;
}
section#outlook .racer img {
    width: 25%;
    position: absolute;
    left: -10%;
    bottom: 0;
}
section#outlook .para .col3:nth-child(1) img {
	filter: drop-shadow(0 0 20px #8fc31f);
}
section#outlook .para .col3:nth-child(2) img {
	filter: drop-shadow(0 0 20px #00a4e0);
}
section#outlook .para .col3:nth-child(3) img {
	filter: drop-shadow(0 0 20px #e60012);
}
section#outlook table {
    width: 100%;
    border: 2px #000 solid;
    background: #fff;
}
section#outlook table tr {
    border-bottom: 2px #000 solid;
}
section#outlook table tr:nth-child(odd) {
    background: #fff462;
}
section#outlook table th {
    padding: .2em;
    border-right: 2px #000 solid;
    background: var(--orange);
    color: #fff;
}
section#outlook table td {
    padding: .2em .4em;
    border-right: 2px #000 solid;
}
section#outlook table th:last-child,
section#outlook table td:last-child {
    border-right: 0;
}
section#outlook .btn.orange {
    width: 100%;
    box-sizing: border-box;
    padding: .5em;
    background: var(--orange);
    color: #fff;
    text-align: center;
}
section#outlook .btn.orange::after {
    border-left-color: #fff;
}

/*==================================================================================
フッター
==================================================================================*/
footer {
    display: flex;
    align-content: center;
    height: 5vh;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}
footer::before {
    content: "";
    display: block;
    width: 110%;
    height: 100%;
    background: linear-gradient(to right, var(--green) 0%, var(--green) 33%, var(--blue) 33%, var(--blue) 66%, var(--red) 66%, var(--red) 100%);
    opacity: .5;
    position: absolute;
    top: 0;
    left: -5%;
    transform: skewX(-20deg);
}
footer p {
    position: relative;
}
.outlook footer {
    height: auto;
    padding: 8vh 0 14vh!important;
}
.outlook footer::before {
    height: 5vh;
    top: auto;
    bottom: 0;
}
.outlook footer p {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1.4vh;
}


.tb {display: none;}
.pc {display: inline;}
.sp {display: none;}

@media screen and (max-width : 960px) {
	.pc {display: none;}
	.tb {display: inline;}
	
	p { font-size: min(2vw,14px); }	
    /*==================================================================================
    ヘッダー
    ==================================================================================*/
    header .txt {
    	width: 30%;
    }
	/*==================================================================================
	共通
	==================================================================================*/
	/* レイアウト */
    section {
    	padding: 3vw 0 0!important;
    	position: relative;
    }
    .container {
    	max-width: 840px;
    	padding: 0 20px;
    }
    .col3 {
        width: 32%;
    }
	.mb_10 {
		margin-bottom: 8px;
	}
	.mb_20 {
		margin-bottom: 15px;
	}
	.mb_30 {
		margin-bottom: 20px;
	}
	.mb_60 {
		margin-bottom: 40px;
	}
	.mb_120 {
		margin-bottom: 80px;
	}

	/* フォント */
    .font_14 {
    	font-size: min(2vw,12px);
    }
    .font_16 {
        font-size: min(2vw,14px);
    }
    .font_20 {
    	font-size: min(2vw,14px);
    }
    .font_24 {
    	font-size: min(2.4vw,18px);
    }
    .font_30 {
    	font-size: min(3vw,20px);
    }
    .font_40 {
    	font-size: min(3.8vw,26px);
    }
    .font_50 {
    	font-size: min(3.8vw,26px);
    }
    .font_60 {
    	font-size: min(5vw,34px);
    }
    .font_80 {
    	font-size: min(5vw,60px);
    }
    /*==================================================================================
    INDEX
    ==================================================================================*/
    section#main {
    	margin-top: -26vw;
    }
    section#main .nav ul li a::before {
    	transform: skewX(-10deg);
    }
    section#main .nav ul li a::after {
    	border: 3px transparent solid;
    	border-left: 5px #fff solid;
    	right: 5%;
    }
    /* 実況解説 */
    section#main .live_cmnt {
    	padding: 10px 0;
    }
    section#main .comment {
    	width: calc(100% - 10px);
    	padding: 10px 30px 10px 20px;
    	clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
    }
    section#main .live {
    	padding: 0 20px;
    }
    section#main .fukuoka,
    section#main .tokyo,
    section#main .osaka {
        margin-bottom: 20px;
    }
    section#main .racer {
        justify-content: flex-start;
    	width: 130px;
    	height: 30px;
    	padding: 0 0 0 8px;
        border: none;
        background: none!important;
    	transform: skewX(-10deg);
    }
    section#main .racer .place,
    section#main .racer .icon {
        height: 100%;
    	transform: skewX(10deg);
    }
    section#main .racer .place {
    	width: 45%;
    	height: auto;
    	margin: 2px 0 0 0;
        order: 2;
    }
    section#main .racer .icon {
        display: flex;
        justify-content: flex-end;
    	width: 55px;
        margin-right: 0;
        overflow: hidden;
    }
    section#main .osaka .racer .icon {
        justify-content: center;
        margin-right: 0;
    }
    section#main .score {
    	width: calc(100% - 20px);
        padding-right: 0;
        font-size: 16px;
    	transform: skewX(-10deg);
    }
    section#main .score .bar {
        max-width: 90%;
    	min-width: 100px;
    	height: 30px;
    	padding: 0 30px 0 8px;
        box-shadow: none;
    }
    @keyframes live_score {
    	0% {opacity: 0; width: 100px;}
    	100% {opacity: 1; width: content;}
    }
    section#main .tokyo .score .bar,
    section#main .osaka .score .bar {
        box-shadow: none;
    }
    section#main .score .bar::after {
    	width: 70px;
    	height: 25px;
        top: 70%;
    	right: -45px;
    	transform: translateY(-50%) skewX(10deg) rotate(-15deg);
    }
    section#main .score .rank::after {
        border: 3px transparent solid;
        border-top: 6px rgba(255, 255, 255, 0.8) solid;
        bottom: -9px;
    }
    section#main .score .rank {
        top: -1.2em;
    }
    .bg::before {
        background-size: 100%;
    }
    /* 三都市対抗戦のルール ---------------------------------------------------------------*/
    section#about .rule {
        padding: 20px 15px 15%;
    }
    section#about .rule h3.txt_mask {
        margin-bottom: 15px;
        transform: rotate(0);
        position: relative;
        top: 0;
        left: 0;
    }
    section#about .rule .cont {
        padding-left: 0;
    }
    section#about .rule .cont h4 {
        width: 150px;
        margin-bottom: 5px;
    }
    section#about .rule .cont .txt {
        width: 100%;
        margin-bottom: 10px;
    }
    /* スケジュール ---------------------------------------------------------------------*/
    #schedule ul li {
        background-size: 10px;
    }
    #schedule ul li:last-child {
        background-size: 10px;
    }
    /*#schedule ul li p {
        width: 82%;
    }*/
    #schedule ul li .days {
        width: 78%;
		margin-right: 0;
		margin-bottom: 20px;
    }
	#schedule ul li .btn {
		position: relative;
		top: 0;
		right: 0;
		transform: none;
		margin: 0 0 0 auto;
	}
    /* キャンペーン ---------------------------------------------------------------------*/
    section#campaign {
        padding-bottom: 10vh!important;
    }
    section#campaign a {
		padding: 20px;
        border: 4px #fff solid;
        border-radius: 20px;
    }
	section#campaign a::after {
		border: 5px transparent solid;
		border-left: 10px #fff solid;
		right: 10px;
		bottom: 15px;
	}
    /*==================================================================================
    下層共通
    ==================================================================================*/
    header.second {
        padding: 20px 0 5vw;
    }
    header.second .logo {
        width: 50%;
        max-width: 300px;
        margin: 0 auto 5vw;
    }
    /*header.second ul li::before {
    	transform: skewX(-15deg);
    }
    header.second ul li img {
        display: block;
    	width: 60%;
    }
    header.second ul li img:last-child {
    	width: 50%;
    	margin: 0;
        position: absolute;
        left: 50%;
        bottom: -70%;
        transform: translateX(-50%);
    }*/
    header.second ul li a::before {
    	transform: skewX(-10deg);
    }
    header.second ul li a::after {
    	border: 3px transparent solid;
    	border-left: 5px #fff solid;
    	right: 5%;
    }
    main.second::before {
        background-position: left top 15%, right center, left bottom;
    }
    section#cp_top .ttl {
        padding: 20px;
    }
	section#cp_top p.txt {
        margin-bottom: -10%;
	}
	section#cp_top p.txt img {
		width: 30%;
		position: relative;
		bottom: auto;
        right: 0;
		margin: 0 0 0 auto;
	}
	section#cp_top.teleboat p.txt img {
		margin: 10px 0 0 auto;
		right: 0;
	}
    main.second .inner {
    	padding: 0 20px;
    }
    main.second .boad {
    	padding: 30px 20px;
    }
    section#cp_about ul {
        padding: 20px 0;
        background-size: 10px;
    }
	section#cp_about .bg {
	    padding: 10px;
	}
	section#cp_about table th {
		padding: 10px 0;
	}
	section#cp_about table td {
		padding: 10px 20px 10px 10px;
	}
	section#cp_about table td .row.just_start {
	    justify-content: space-between;
	}
	section#cp_about table td .img {
	    width: 20%;
		margin-right: 0;
	}
	section#cp_about table td p.ttl {
		width: 52%;
	}
	section#cp_about table td .how {
		margin-right: 0;
	}
	/* 応募締切 ------------------------------------------------*/
	section#deadline .boad {
		padding-top: 1em;
    	padding-bottom: 1em;
	}
	section#deadline .boad .ttl {
		padding: .4em 1em;
		margin-right: .5em;
		position: relative;
		top: -.2em;
	}
	section#deadline .boad .font_60 {
		font-size: min(6vw,60px);
	}
	#schedule ul li .deadline {
		width: calc(100% - (min(3.8vw,26px) * 3) + 30px);
		margin-left: calc((min(3.8vw,26px) * 3) + 30px);
		padding: .5em .5em .3em .8em;
	}
	#schedule ul li .deadline p {
		font-size: min(3.8vw,26px);
	}
	#schedule ul li .deadline p .font_50 {
		font-size: min(6vw,60px);
	}
	#schedule ul li .deadline .ttl {
		display: inline-block;
		margin-bottom: 0;
		margin-right: .5em;
		padding: .4em 1em;
		font-size: min(3vw,20px);
		position: relative;
		top: -.2em;
	}
    /*==================================================================================
    レース展望
    ==================================================================================*/
    .outlook main {
        background-size: 97vw;
    }
    section#outlook {
        padding: 3vw 0 max(10vw,100px)!important;
    }
    section#outlook .bg_border::before {
        background-size: 97vw;
    }
    section#outlook .container {
        padding: 0 7vw;
    }
    section#outlook h2 {
        padding: 4% 0 0 25%;
    }
    section#outlook h2 span {
        padding: 1.2em .6em 0;
        background-position: center bottom;
        background-size: cover;
    }
    section#outlook .col3 {
        width: 30%;
    }
    section#outlook table {
        font-size: min(2vw,14px);
    }
    /*==================================================================================
    フッター
    ==================================================================================*/
    footer::before {
        transform: skewX(-10deg);
    }
}


@media screen and (max-width : 460px) {
	.tb {display: none;}
	.sp {display: inline;}
    p {font-size: 12px;}
	/*==================================================================================
	共通
	==================================================================================*/
    section {
    	padding: 3vh 0 0!important;
    }
	/* フォント */
    .font_14 {
    	font-size: 12px;
    }
    .font_16 {
        font-size: 12px;
    }
    .font_20 {
    	font-size: 12px;
    }
    .font_24 {
    	font-size: 16px;
    }
    .font_30 {
    	font-size: 20px;
    }
    .font_40 {
    	font-size: 24px;
    }
    .font_50 {
    	font-size: 24px;
    }
    .font_60 {
    	font-size: 30px;
    }
    .font_80 {
    	font-size: 40px;
    }
    /*==================================================================================
    INDEX
    ==================================================================================*/
	section#main .nav ul li:nth-child(1) a:hover::before,
	section#main .nav ul li:nth-child(2) a:hover::before,
	section#main .nav ul li:nth-child(3) a:hover::before {
		box-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 5px rgba(255,255,255,0.5), 0 0 10px var(--yellow), 0 0 10px var(--yellow);
	}
	section#main .nav ul li a img:first-child {
		width: 90%;
	}
    /* 実況解説 */
    section#main .comment .font_50 {
    	font-size: 20px;
    }
    section#main .score .bar {
        max-width: 86%;
    }
    section#main .score .rank {
    	left: 3%;
    }
    /* 三都市対抗戦のルール ---------------------------------------------------------------*/
    section#about .font_50 {
        font-size: 34px;
    }
    /* スケジュール ---------------------------------------------------------------------*/
    #schedule ul li {
		padding: 15px 0;
        background-size: 6px;
    }
    #schedule ul li:last-child {
        background-size: 6px;
    }
    #schedule ul li h3 {
        margin-bottom: 15px;
    }
    #schedule ul li .days {
        width: 100%;
    }
    /* トークショー ---------------------------------------------------------------------*/
	section#talk ul.schedule li {
		padding: 15px 0;
	}
    section#talk .day {
        width: 100%;
        margin-right: 0;
		margin-bottom: 15px;
    }
    /* キャンペーン ---------------------------------------------------------------------*/
    section#campaign {
        padding-bottom: 35vh!important;
    }
	section#campaign a {
		padding: 15px 15px 35px 15px;
	}
	section#campaign a::after {
		border: 8px transparent solid;
		border-left: 14px #fff solid;
		right: 15px;
	}
    section#campaign img {
		width: 35%;
        top: -9%;
        right: -6%;
    }
    /*==================================================================================
    下層共通
    ==================================================================================*/
    header.second {
        padding: 20px 0;
    }
	header.second ul li:nth-child(1) a:hover::before,
	header.second ul li:nth-child(2) a:hover::before,
	header.second ul li:nth-child(3) a:hover::before {
		box-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 5px rgba(255,255,255,0.5), 0 0 10px var(--yellow), 0 0 10px var(--yellow);
	}
    section#cp_top .ttl {
        padding: 15px;
    }
	section#cp_top p.txt img {
		width: 40%;
		margin: 10px 0 0 auto;
	}
    main.second .inner {
    	padding: 0;
    }
	section#cp_about [class^="rank_"] span.tag {
	    font-size: 16px;
	}
	section#cp_about table th {
		display: block;
		width: 100%;
		padding: 0;
		border-right: 0;
		text-align: left;
	}
	section#cp_about table [class^="rank_"] {
		display: block;
		transform: none;
	}
	section#cp_about table td {
		display: block;
		width: 100%;
		padding: 15px 10px;
		position: relative;
	}
	section#cp_about table td .row.align_center {
		display: block;
	}
	section#cp_about table td .img {
		width: calc(40% - 6px);
		margin-right: 6px;
		float: left;
	}
	section#cp_about table td p.ttl {
		width: 100%;
		margin-bottom: 10px;
		padding: 6px 0 0;
		font-size: 14px;
	}
	section#cp_about table td .how {
		width: 5em;
		height: 2.5em;
		border-radius: 2em;
	}
	section#cp_about table td p.place {
		width: 5em;
		height: 2.5em;
		border-radius: 2em;
		position: absolute;
		bottom: 15px;
		left: calc((40% - 6px) + 75px);
	}
	/* 応募締切 ------------------------------------------------*/
	section#deadline {
		padding-top: 0!important;
	}
	section#deadline .boad {
		padding: .8em .5em .6em;
	}
	section#deadline .boad .ttl {
		padding: .4em .6em;
	}
	section#deadline .boad .ttl .font_50 {
		font-size: 16px;
	}
	section#deadline .boad p {
		font-size: 16px;
	}
	section#deadline .boad .font_60 {
		font-size: 36px;
	}
	section#deadline .boad .font_30 {
		font-size: 16px;
	}
	#schedule ul li .deadline {
		width: 100%;
		margin-left: 0;
		padding: .5em .5em .3em;
	}
	#schedule ul li .deadline p {
		font-size: 16px;
	}
	#schedule ul li .deadline p .font_50 {
		font-size: 36px;
	}
	#schedule ul li .deadline p .font_24 {
		font-size: 16px;
	}
	#schedule ul li .deadline .ttl {
		padding: .4em .6em;
		font-size: 16px;
		top: -.3em;
	}
    /*==================================================================================
    レース展望
    ==================================================================================*/
	.outlook header.second ul li.on a::before {
		box-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 5px rgba(255,255,255,0.5), 0 0 10px var(--yellow), 0 0 10px var(--yellow);
	}
    section#outlook {
        padding: 3vw 0 max(10vw,60px)!important;
    }
    section#outlook .bg_border::before {
        height: 102%;
    }
    section#outlook h1 {
        padding: 14vw 0 4vw;
    }
	section#outlook h1 img.logo {
	    width: 35%;
		top: 4vw;
	}
	section#outlook h1 img.icon {
	    width: 15vw;
		right: -1vw;
	}
    section#outlook h2 {
        margin-bottom: 20px;
        padding: 0;
        font-size: 18px;
    }
    section#outlook h2 span {
        margin-bottom: 10px;
        padding: .4em .4em 1.2em;
        font-size: 14px;
        position: relative;
    }
    section#outlook h2 + p {
        margin-bottom: 40px;
        font-size: 12px;
    }
    section#outlook .col3 {
        width: 100%;
        max-width: 240px;
        margin: 0 auto 30px;
    }
	section#outlook .para .col3 {
		max-width: 90%;
        margin: 0 auto 20px;
	}
    section#outlook table {
        font-size: 12px;
    }
    section#outlook table th {
        padding: .2em;
        vertical-align: middle;
    }
    section#outlook table td {
        padding: .2em;
    }
    section#outlook table td:first-child {
        white-space: nowrap;
    }
    section#outlook .btn.orange {
        font-size: 16px;
        line-height: 1.2;
    }
}