@charset "UTF-8";
@import url('https://use.fontawesome.com/releases/v5.13.0/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp');

* {
	box-sizing: border-box;
}

:root {
	/*FontFamily*/
	--icon: 'Font Awesome 5 Free';
	--icon: 'Material Icons';
	--iconSharp: 'Material Icons Sharp';
	--iconOutline: 'Material Icons outlined';
	--oswald: 'Oswald', sans-serif;
	--mplus: 'M PLUS 1p', sans-serif;

	/*FontFamily*/
	/*--icon: 'Font Awesome 5 Free';*/
	--icon: 'Material Icons';
	--iconSharp: 'Material Icons Sharp';
	--iconOutline: 'Material Icons outlined';
	--oswald: 'Oswald', sans-serif;
	--mplus: 'M PLUS 1p', sans-serif;
	/*ColorVariation*/
	--mainColor: #d2691e;
	--mainColorOpacity: #d2691ed8;
	--subColor1: #56d1c7;
	--subColor2: #386450;
	--deepColor: #645538;
	--thinColor: #fdae10;
	--thinColor2: #fdd88e;
	--accentColor: #10fd92;
	--accentThin: #69b291;
	--accentDeep: #183528;
	--text: #0e291e;
	--thinGray: #f9f9fa;
	--boat:#234555;
	--okappari:#2e602d;
	--pair: #af5343;
	
	/*FontSize*/
	--f1: 5rem;
	--f2: 4rem;
	--f3: 3.2rem;
	--f4: 2.4rem;
	--f5: 2rem;
	--f6: 1.6rem;
	--f7: 1.4rem;
	--f8: 1.2rem;
	--f9: 1.0rem;
}
a:hover {
		text-decoration: none!important;
}
.textMainColor {
	color: var(--mainColor)
}

.textAccentColor {
	color: var(--accentColor)
}

.textSubColor1 {
	color: var(--subColor1)
}

.textSubColor2 {
	color: var(--subColor2)
}

.textDeepColor2 {
	color: var(--deepColor2)
}

.bgMainColor {
	background-color: var(--mainColor);
}

.bgAccentColor {
	background-color: var(--accentColor);
}

.bgDeepColor {
	background-color: var(--deepColor);
}

html {
	font-size: 62.5%;

}

body {
	padding-top: 66px;
	font-size: var(--f6);
	color: var(--text);
	width: 100vw;
	min-height: 100dvh;
	position: relative;
	background-color: transparent;
}

/***********************************
FontStyle
***********************************/
.oswald {
	font-family: var(--oswald);
}
/***************************************
WireFrame
***************************************/
header {
	width: 100%;
	height: 66px;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 5px 0 0;
	background-color: white;
	z-index: 9900;
}
header::after {
	width: 0;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	background-color: var(--mainColor);
	animation: 0.7s headerAnimation ease 1s;
	animation-fill-mode: both;
}
@keyframes headerAnimation {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}


header .headerInner {
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex:1;
}
header h1 {
	margin: 0;
	padding: 10px 0 15px;
	position: relative;
	text-align: center;
}

header h1 img {
	width: 120px;
	height: auto;
}

header nav {
	background-color: var(--mainColor);
}

article {
	margin: 0;
}

footer {
	margin: 20px 0 0 0;
	padding: 10px 0 80px;
	background-color: var(--thinColor);
	text-align: center;
}

header nav {
	width: 96%;
	margin: 0 auto;
}
nav.fixedNav {
	width: 100%;
	height: 80px;
	padding-bottom: 20px; /* バッファ */
	position: fixed;
	left: 0;
	bottom: 0;
	background-color: var(--mainColor);
	z-index: 9999;
	box-shadow: 0px -3px 6px #3d3d3da6;
}

header nav ul,
nav.fixedNav ul {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

header nav ul li,
nav.fixedNav ul li {
	flex: 1;
	max-height: 100px;
	aspect-ratio: 1/1;
	font-size: var(--f7);
	text-align: center;
	line-height: 1.3;
	align-self: self-end;
	overflow: hidden;
}

header nav ul li a,
nav.fixedNav ul li a {
	display: block;
	padding-top: 32px;
	height: 100%;
	position: relative;
	color: white;
}

header nav ul li a::before,
nav.fixedNav ul li a::before {
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 25px;
	font-family: 'Material Symbols Outlined';
	color: rgb(255, 255, 255);
}

header nav ul li.home a::before,
nav.fixedNav ul li.home a::before {
	content: "home";
}

header nav ul li.portal a::before,
nav.fixedNav ul li.portal a::before {
	content: "set_meal";
}
header nav ul li.result a::before,
nav.fixedNav ul li.result a::before {
	content: "bar_chart";
}

header nav ul li.policy a::before,
nav.fixedNav ul li.policy a::before {
	content: "policy";
}

header nav ul li.users a::before,
nav.fixedNav ul li.users a::before {
	content: "account_box";
}

/***********************************
Basic　StyleSheet
***********************************/
article h1 {
	padding: 40px 0;
	font-size: var(--f3);
	text-align: center;
}

article h2 {
	margin-bottom: 10px;
	padding: 30px 0 10px;
	font-size: var(--f4);
	border-bottom: 1px solid var(--text);
	color: var(--mainColor);
}

article h3 {
	margin-bottom: 10px;
	padding: 20px 0 5px;
	font-size: var(--f5);
	font-weight: bold;
	color: var(--deepColor);
}

/***************************************
Common
***************************************/
article dl {
	margin: 10px 0;
	padding-left: 2em;
	text-indent: 0;
}

article dl dt {
	text-indent: -16px;
	font-size: var(--f6);
}

article dl dt::before {
	margin-right: 6px;
	content: '●';
	font-size: 10px;
	color: var(--mainColor);
}

article dl dd {
	font-size: var(--f6);
}

ul.marker {
	padding: 10px 5px;
}

ul.marker li {
	padding-left: 1.2em;
	position: relative;
	margin-bottom: 8px;
}

.marker li::before {
	position: absolute;
	top: 5px;
	left: 0;
	content: '●';
	color: var(--mainColor);
	font-size: 10px;
}

/***************************************
form
***************************************/
.alert {
	border: none;
	font-size: var(--f6);
}

.alert .inner {
	display: block;
	padding: 4px;
	color: white;
	background-color: var(--alert);
}

.nameMargin {
	margin-right: 10px;
}

.row {
	position: relative;
}

.form-control {
	font-size: var(--f6);
	transition: 0.6s background-color ease;
}

.form-control.is-valid {
	background-color: rgb(144, 226, 235) !important;
}

.form-control.is-invalid {
	background-color: rgb(241, 147, 178) !important;
}

.form-check-input {
	margin-left: 0;
	margin-right: 14px;
	position: static;
	transform: scale(1.8);
	transform-origin: left center;
}

/***************************************
UI Button
***************************************/
.btn {
	line-height: 1.3;
}

.btnLarge {
	font-size: 2rem;
}

.btnMiddle {
	font-size: 1.6rem;
}

.btnSmall {
	font-size: 1.2rem;
}

.arrow {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}

.arrow::before {
	position: absolute;
	content: '➡';
	font-size: 40px;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	color: rgb(93, 93, 93);
}

.submitArea {
	margin: 20px 0;
	text-align: center;
}

.registration .notice {
	padding: 10px;
	background-color: var(--warning);
}

.registration .notice dt {
	margin-bottom: 10px;
	padding-left: 10px;
	font-size: var(--f6);
}

.registration .notice dd {
	margin-bottom: 4px;
	border-bottom: 1px solid black;
}

/*user-edit*/
select.gender {
	font-size: var(--f6);
}

/***************************************
users registration
***************************************/
.usersConfirm {
	margin: 0;
}

.confirmItem {
	display: flex;
	border-bottom: 1px solid #ddd;
	padding: 12px 0;
}

.confirmItem dt {
	width: 35%;
	font-weight: bold;
}

.confirmItem dd {
	width: 65%;
	margin: 0;
}

/***************************************
Portal Toppage
***************************************/
/*******************
tournamentCard
*******************/
.entryInformation,
.liveInformation {
	margin: 0;
	padding: 20px 0;
}

.entryInformation {
	background-color: var(--mainColor);

}

.liveInformation {
	background-color: var(--accentThin);
	margin-bottom: 0!important;
}

.entryInformation a,
a .liveInformation {
	display: block;
	margin-bottom: 10px;
	color: white;
}

.entryInformation a:hover,
a .liveInformation:hover {
	text-decoration: none;
}

.entryInformation h2 {
	font-size: var(--f2);
	color: white;
	text-align: center;
	font-family: var(--oswald);
}

section.liveInformation h2 {
	padding-bottom: 10px;
	font-size: 6rem;
	color: white;
	text-align: center;
	font-family: var(--oswald);
}

.entryInformation h3,
.liveInformation h3 {
	margin-bottom: 30px;
	font-size: var(--f6);
	color: white;
	text-align: center;
}

section.liveInformation h3 {
	margin-bottom: 20px;
}

.tournamentInformation {
	display: flex;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
	transition: 0.6s all ease;
}

.tournamentInformation:hover {
	background-color: var(--deepColor);
}

.tournamentInformation .innerContents {
	padding: 5px;
	width: 70%;
}

.tournamentInformation .badge {
	position: absolute;
	top: -70px;
	right: 10px;
	font-size: 150px;
	font-family: var(--oswald);
	transform: rotate(-6deg);
	color: rgba(255, 255, 255, 0.29);
	transition: 0.6s all ease;
	display: block;
	min-width: inherit;
	padding: 0;
	font-weight: bold;
	line-height: 1;
	white-space: nowrap;
	text-align: center;
	background-color: initial !important;
	border-radius: 0px;
}

.tournamentInformation:hover .badge {
	transform: rotate(0);
	background-color: initial !important;
}

.tournamentInformation .closing-soon {
	width: 60px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	right: 24%;
	transform: translateY(-50%);
	background-color: var(--accentColor);
}

.tournamentInformation .closing-soon span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--accentDeep);
}

.tournamentInformation .innerContents span {
	display: block;
	font-size: 32px;
	font-weight: normal;
}

.tournamentInformation h4 {
	font-size: 24px;
	font-weight: bold;
}

.tournamentInformation .tournament-date {
	color: white;
	text-align: right;
	font-size: 5rem;
	font-family: var(--oswald);
	font-weight: bold;
	line-height: 1;
}

.tournamentInformation .tournament-date .date-year {
	font-size: 3rem;
	font-weight: normal
}

.goPortal {
	background-color: var(--subColor1);
	text-align: center;
}

.goPortal h2 {
	font-size: 1.6rem !important;
}

.goPortal h2 span {
	display: block;
	font-size: 3rem !important;
	font-weight: bold;
}

.goPortal p.goLink {
	width: fit-content;
	margin: 10px auto;
	padding: 10px;
	border-radius: 5px;
	background-color: var(--mainColor);
	font-size: 2.2rem;
	color: white;
}

.goPortal p.goLink a {
	color: white !important;
}


.portalMainVisual {
	margin: 0 !important;
	width: 100vw;
	height: 50vh;
	height: 50lvh;
	object-fit: cover;
}

.portalh1 {
	padding: 0 !important;
	margin: 0 !important;
}

.portalTop {}

.portalTop h2 {
	padding: 120px 0 80px;
	border-bottom: none;
	position: relative;
	font-size: var(--f4);
	font-weight: bold;
	text-align: center;
}

.portalTop h2::before {
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--mainColor);
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	content: '';
}

.portalTop h2::after {
	position: absolute;
	top: 64px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 28px;
	font-family: 'Material Symbols Outlined';
	color: rgb(255, 255, 255);
}

.portalTop h2.about::after {
	content: "smartphone";
}

.portalTop h2.portalFeatures::after {
	content: "mobile_hand";
}

.portalTop h2.mypage::after {
	content: "account_box";
}

.portalTop h2.conductorWire::after {
	content: "face_6";
}

.portalTop h2.share::after {
	content: "airplay";
}

.portalTop h2.breakingNews::after {
	content: "sentiment_sad";
}

.portalTop h2.family::after {
	content: "mood_heart";
}

.portalTop h3 {
	font-size: var(--f5);

}

.portalTop img {
	margin-bottom: 10px;
}

/*registrationBanner*/
.registrationArea {
	padding: 50% 0 0;
	height: 50vh;
	height: 50lvh;
	position: relative;
	background-image: url(../images/introduction/registraionBanner.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.registrationArea .registInner {
	width: 80%;
	max-width: 600px;
	border: 1px solid white;
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%)rotate(-6deg);
	background-color: #3b3b3bc0;
	color: white;
	font-weight: bold;
	text-align: center;
	box-shadow: 5px 5px 5px #454545b4;
}

.registrationArea .registInner h2 {
	padding: 5px;
	background-color: var(--mainColorOpacity);
	color: white;
	font-size: 2rem;
}

.registrationArea .signMark {
	width: 60px;
	height: 60px;
	margin: 0 auto;
	border-radius: 50%;
	background-color: var(--accentDeep);
}

.registrationArea .signMark img {
	width: 90%;
	height: auto;
}

button.accent {
	border-radius: 15px;
	background-color: var(--accentColor);
	font-size: 1.6rem;
}

.flow {
	padding: 20px 0;
	background-color: var(--subColor1);
}

.flow h2 {
	text-align: center;
}

.flow h3 {
	text-align: center;
}

/***************************************
Mypage Toppage
***************************************/
.mypageInformation {
	padding: 2px 4px;
	border: 1px solid var(--mainColor);
}

.mypageInformation h2 {
	margin-bottom: 20px;
	padding: 10px 0;
	border-bottom: 1px solid var(--deepColor);
	color: var(--mainColor);
	font-family: var(--oswald);
	font-size: var(--f5);
	text-align: center;
}

.mypageInformation h3 {
	font-size: var(--f6);
	font-weight: bold;
}
.sessionArea {
	margin-top: 8px;
}
.sessionArea p {
	font-size: 1.2rem;
}
.sessionArea .name {
	font-size: 1.6rem;
	font-weight: bold;
}

.sessionArea .identity {
	width: fit-content;
	padding: 2px;
	margin-left: 3px;
	display: inline-block;
	border: 1px solid var(--thinColor);
	border-radius: 6px;
	text-align: center;
	font-size: 1.4rem;
}

.sessionArea .identity.success {
	color: var(--success);
}

.sessionArea .identity.alert {
	color: var(--alert);
}

.sessionArea .identity::after {
	display: block;
	font-size: var(--f9);
	text-align: center;
	color: red;
}

.sessionArea .identity.success::after {
	color: var(--success);
	content: '本人確認済';
}

.sessionArea .identity.alert::after {
	color: var(--alert);
	content: '本人確認未完了';
}

/*FlashMessage*/
.flashMessage {
	padding-top: 60px;
}

.alertAnimation {
	position: absolute;
	top: 35px;
	left: 50%;
	transform: translateX(-50%);
	animation: 0.8s alertAnimation ease-in-out;
	animation-fill-mode: both;
}

@keyframes alertAnimation {
	0% {
		transform: translateX(-50%)scale(0);
	}

	92% {
		transform: translateX(-50%)scale(2.2);

	}

	95% {
		transform: translateX(-50%)scale(1.9);

	}

	97% {
		transform: translateX(-50%)scale(2.05);

	}

	98% {
		transform: translateX(-50%)scale(1.95);

	}

	99% {
		transform: translateX(-50%)scale(2.1);

	}

	100% {
		transform: translateX(-50%)scale(2);
	}
}

/***************************************
MyPage / entry
***************************************/
.entryFee {
	padding: 10px;
	font-size: var(--f5);
}

.entryFee #display_fee {
	font-size: var(--f4);
	font-weight: bold;
}

.deadlineDay {
	font-size: var(--f4);
	font-weight: bold;
	text-align: center;
}

/***************************************
BreadCrumb
***************************************/
.breadcrumb {
	margin: 0;
	display: block;
	background-color: var(--thinColor2);
}

.breadcrumb ul {
	margin: 0;
	width: 100%;
}

.breadcrumb ul li {
	display: inline-block;
	margin-right: 6px;
	font-size: var(--f8);
	font-weight: bold;
}

.breadcrumb ul li a {
	font-weight: normal;
}

.breadcrumb ul li::before {
	content: '';
}

.breadcrumb ul li::after {
	content: "keyboard_arrow_right";
	color: #222;
	font-family: 'Material Symbols Outlined';
	font-size: 1.2rem;
	font-weight: normal;
}

.breadcrumb ul li:last-child::after {
	content: '';
}

/***********************************
decoration
***********************************/
.notice {
	font-size: 80%;
	background-color: var(--accentThin);
}

/***********************************
tournamentDetail トーナメント情報
***********************************/
.tournamentDetail {}

.tournamentDetail h1 {
	margin-bottom: 10px;
	font-size: var(--f3);
	text-align: center;
}

.tournamentDetail h2 {
	margin-top: 20px;
	padding: 5px 0;
	border-bottom: 1px solid var(--mainColor);
}

.tournamentDetail h3 {
	margin-top: 20px;
	padding: 5px 0;
	font-weight: bold;
}

.tournamentDetail ul {
	margin: 10px 0;
	padding-left: 2px;
}

.tournamentDetail ul li {
	margin-bottom: 10px;
	padding: 2px 0px;
	border-bottom: 1px dotted #aaa;
}

.tournamentDetail ul li::before {
	margin-right: 4px;
	content: '●';
	color: var(--thinColor);
	font-size: 10px;
}
.tournamentDetail table th,
.tournamentDetail table td {
	line-height: 1.2;
	vertical-align: middle;
}

.tournamentDetail table th {
	background-color: var(--thinColor);
	text-align: center;
	font-weight: bold;
}

.entriesList th:first-of-type,
.entriesList tr td:first-of-type {
	width: 10%;
	text-align: center;
}


.entriesList tr td:first-of-type {
	position: relative;
}

.entriesList tr td:first-of-type::before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 5px;
	height: 100%;
}
.entriesList tr td:nth-of-type(2) {
	width: 30%;
}
.entriesList tr.attributeBoater td:first-of-type::before {
	background-color: var(--mainColor);
}

.entriesList tr.attributeNb td:first-of-type::before {
	background-color: var(--accentColor);
}

.entriesList .attributeBoater {
	background-color: var(--thinColor2);
}

.entriesList .attributeNb {
	background-color: var(--accentThin);
}

.entriesList .nonboater {
	text-align: center;
}

.entriesList span.nonboater {
	color: var(--deepColor);
}
.entriesList tbody tr.canceled {
	background-color: #aaa;
	color: #ddd;
}
/***********************************
Users top
***********************************/
.entryBoxLeft {
	width: 70%;
}

.entryBoxright {
	width: 30%;
}

/***********************************
for SmartPhone
***********************************/
@media screen and (max-width: 767px) {

	/***************************************
	users registration
	***************************************/
	.confirmItem {
		flex-direction: column;
	}

	.confirmItem dt {
		width: 100%;
		margin-bottom: 4px;
	}

	.confirmItem dd {
		width: 100%;
	}

	/***************************************
	users registration
	***************************************/
	.tournamentDetail h1 {
		font-size: var(--f4);
	}

	/***************************************
	app TopPage
	***************************************/
	.tournamentInformation .badge {
		top: -10px;
		font-size: 90px;
	}
}