@charset "UTF-8";

/* 基本 */
body {
	background-color: #074;
	color: White;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
}

a {
	color: inherit;
	text-decoration: underline;
	box-sizing: border-box;
}

a:hover {
	text-decoration: none;
}

img {
	display: block;
}

form {
	margin: 0;
	padding: 0;
}

figure {
	margin: 0;
	padding: 0;
}

article {
	margin: 2px;
	padding: 2px;
	box-sizing: border-box;
}

p {
	padding: 2px 8px 2px 8px;
}

div {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

span {
	color: Yellow;
	font-weight: bold;
}

.fnt-b {
	font-family: 'Anton', sans-serif;
}

.fnt-n {
	font-family: 'RocknRoll One', sans-serif;
}

/* 横幅と左右の余白 */
.w-cnt {
	width: min(92vw, 1166px);
	margin: auto;
}

/* ボディー */
.main {
	display: grid;
	grid-template-columns: 320px auto;
	grid-template-rows: auto auto;
	grid-template-areas:
		"l-clm r-clm"
		"footer footer";
	justify-items: center;
	background-color: Black;
}

.l-clm {
	grid-area: l-clm;
	margin: 4px;
	padding: 4px;
	display: grid;
	grid-template-columns: auto;
	justify-items: stretch;
	align-content: start;
	gap: 6px;
}

.r-clm {
	grid-area: r-clm;
	margin: 8px;
	padding: 0;
	width: 100%;
	display: grid:
	justify-items: center;
	align-content: start;
}

/* フッター */
.footer {
	grid-area: footer;
	justify-self: stretch;
}

.footer-guide {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	gap: 20px;
	background-color: Black;
}

.footer-count {
	font-size: 12px;
	text-align: center;
	padding: 4px;
}

.footer-guide img {
	display: inline;
}

.footer-cnt {
	background-color: #052;
	box-sizing: border-box;
	border: 2px Solid #8c4;
	border-bottom: 2px Solid Black;
}

.footer-copy {
	padding: 2px;
	font-size: 12px;
	color: White;
	text-align: center;
}

/* コンテンツ */
.cnt {
	background-color: #074;
	margin: 0 8px 0 8px;
	padding: 8px 20px 0px 20px;
}

.mark {
	justify-self: center;
}

.title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: Black;
	margin: 0;
	padding: 0;
}

.mb-title {
	position: sticky;
	top: 0;
}

.btns-share {
	display: flex;
}

.btns-share div {
}

.sp-btns {
	display: grid;
	grid-template-columns: repeat(3, 32px);
	justify-items: end;
	font-size: 20px;
}

.sp-btns a {
	text-decoration: none;
	border: 0;
}

.navbtn .fa-bars {
	display: revert;
}

.navbtn .fa-times {
	display: none;
}

.nav {
	position: fixed;
	inset: 0 -100% 0 100%;
	z-index: 100;
	background-color: #040d;
	transition: transform 0.3s;
	display: grid;
	grid-template-columns: auto;
	justify-content: space-around;
	align-items: center;
	color: #cfc;
	font-size: 20px;
}

.nav a {
	color: White;
}
.nav .about-us {
	grid-column: 1;
}

.nav span {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: normal;
	font-size: 0.7em;
	color: inherit;
	margin-left: 10px;
}

.nav a {
	display: block;
	text-decoration: none;
	border: 0;
}

.opnnav .navbtn {
	z-index: 110;
}

.opnnav .navbtn .fa-bars {
	display: none;
}

.opnnav .navbtn .fa-times {
	display: revert;
}

.opnnav .nav {
	transform: translate(-100%, 0);
}

.opnnav body {
	position: fixed;
	overflow: hidden;
}

.site-name {
	color:#cfc;
	margin: 0;
	padding: 0;
	font-size: 0.8em;
}

.eyecatch-mb {
	display: grid;
	justify-items: center;
}

.info-mb {
	font-size: 0.8em;
}

.info {
	font-size: 0.9em;
}

.news-mb {
}

.news {
	padding-top: 12px;
}

.news .subt {
	font-size: 20px;
}

.news-list {
	color: Yellow;
	font-size: 0.9em;
}

.rank-mini {
	color: #040;
	background-color: #afa;
	padding: 4px 8px 8px 8px;
	display: grid;
	grid-template-columns: auto;
	justify-items: stretch;
	background-image: url(img/matchbg.gif);
	background-repeat: no-repeat;
	background-position-x: 110%;
	background-position-y: -10%;
}

.rank-mini .sts {
	font-size: 0.9em;
}

.rank-mini .sts2 {
	display: inline;
	margin-left: 16px;
}

.rank-tbl {
	justify-self: center;
	background-color: White;
	margin-top: 4px;
	text-align: right;
}

.rank-tbl th {
	background-color: Yellow;
	text-align: center;
}

.rank-tbl td {
	padding: 0 6px 0 6px;
	box-sizing: border-box;
	border-bottom: 1px dotted #040;
}

.rank-tbl .tm-name {
	text-align: left;
}

.rank-tbl .my-rank {
	color: White;
	background-color: #074;
}

.twi-wnd {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-around;
	font-size: 0.9em;
	height: 330px;
}

.match {
	display: grid;
	grid-template-areas:
		"ymd"
		"cup"
		"vsteam"
		"place"
		"result";
	grid-template-columns: auto;
	grid-template-rows: repeat(5, auto);
	align-items: center;
	box-sizing: border-box;
	border-radius: 4px;
	margin: 2px;
	padding: 0px 8px 4px 8px;
}

.resunew-mb .match {
	color: #040;
	background-color: #afa;
	background-image: url(img/matchbg.gif);
	background-repeat: no-repeat;
	background-position-x: 120%;
	background-position-y: 39%;
}

.schenew-mb .match {
	background-color: #074;
}

.resunew {
	padding-top: 12px;
	padding-bottom: 2px;
}

.schenew {
	padding-top: 12px;
	padding-bottom: 2px;
}

.resunew .fnt-b {
	font-size: 20px;
}

.schenew .fnt-b {
	font-size: 20px;
}

.resunew .match {
	grid-template-areas:
		"ymd cup result"
		"vsteam place result";
	grid-template-columns: 260px auto 190px;
	grid-template-rows: repeat(2, auto);
	color: #040;
	background-color: #afa;
	background-image: url(img/matchbg.gif);
	background-repeat: no-repeat;
	background-position-x: 100%;
	background-position-y: 39%;
}

.schenew .match {
	grid-template-areas:
		"ymd cup"
		"vsteam place";
	grid-template-columns: 260px auto;
	grid-template-rows: repeat(2, auto);
	background-color: Black;
}

.match .ymd {
	grid-area: ymd;
	font-size: 1.1em;
}

.match .hm {
	display: inline;
	margin-left: 10px;
}

.resu .hm {
	display: none;
}

.match .cup {
	grid-area: cup;
	font-size: 0.8em;
}

.match .vsteam {
	grid-area: vsteam;
	font-size: 1.2em;
}

.match .place {
	grid-area: place;
	font-size: 0.8em;
}

.match .result {
	grid-area: result;
	font-size: 1.3em;
}

.match .pnt {
	font-family: 'RocknRoll One', sans-serif;
	font-weight: bold;
}

.nomatch {
	color: Yellow;
	font-weight: bold;
	padding-left: 20px;
}

.sub-menu-mb {
	display: flex;
	justify-content: space-around;
	padding: 0px 20px 0px 20px;
}

.all-result {
	display: flex;
	justify-content: end;
}

.ofc-links {
	display: flex;
	justify-content: end;
}

.ofc-links a {
	margin: 0px 16px 0px 16px;
}

.ofc-links-mb {
	display: flex;
	justify-content: center;
	padding: 0px 20px 0px 20px;
	margin-bottom: 4px;
	font-size: 0.9em;
	white-space: nowrap;
}

.ofc-links-mb .links {
	display: grid;
	grid-template-columns: auto;
}

.ofc-links-mb a {
	margin-left: 16px;
}

.menu {
	background-color: #074;
	margin-top: 12px;
	padding: 4px 8px 8px 8px;
	font-size: 20px;
	color: #cfc;
}

.menu span {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: normal;
	font-size: 0.7em;
	color: inherit;
	margin: 0 8px 0 8px;
}

.def-btn {
	display: block;
	margin: 1px;
	padding: 1px 14px 1px 14px;
	box-sizing: border-box;
	border-radius: 4px;
	border: 2px Solid #040;
	text-decoration: none;
	color: White;
	background-color: #074;
	text-align: left;
}
.def-btn:hover {
	filter: brightness(70%) contrast(150%);
}

.menuban {
	display: grid;
	justify-items: center;
	font-size: 0.8em;
	white-space: nowrap;
}

.is-patata {
	font-size: 0.9em;
}

.is-patata p {
	padding: 0;
}

.muffler {
	justify-self: center;
}

.cooper {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-around;
	align-items: center;
	font-size: 0.8em;
	margin-top: 8px;
	white-space: nowrap;
}

.cooper img {
	display: inline;
	vertical-align: middle;
}

.topcatch {
	display: grid;
	justify-items: center;
}

@media (min-width: 768px) {
	.mb { display: none; }
}

@media (max-width: 768px) {
	body {
		text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		-moz-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
	a {
		text-decoration: none;
		border-bottom: 1px Solid;
	}
	.w-cnt { width: 94vw; }
	.main {
		grid-template-columns: auto;
		grid-template-areas:
			"l-clm"
			"footer";
	}
	.pc { display: none; }
}

@media (orientation: portrait) and (max-width: 768px) {
	.nav {
		grid-template-columns: auto;
	}
	.rank-tbl .tm-name {
		font-size: 0.8em;
	}
	.match {
	}
	.cooper {
		grid-template-columns: auto;
	}
}

@media (orientation: landscape) and (max-width: 768px) {
	.nav {
		grid-template-columns: auto auto;
	}
	.match {
		grid-template-areas:
			"ymd cup"
			"vsteam place"
			"result result";
		grid-template-columns: 260px auto;
		grid-template-rows: repeat(3, auto);
	}
	.resunew-mb .match {
		background-position-x: 100%;
	}
	.ofc-links-mb .links {
		grid-template-columns: auto auto auto;
	}
}