@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700;900&display=swap');


:root {
	--keycolor: #004093;
	--subcolor: #ffdc00;
	--font-default: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
	--font-mincho: "游明朝体", "Yu Mincho", YuMincho, 'Hiragino Mincho Pro', serif;
	--device_width: 420px;
	--container-pd-LR-sp: 15px;
	--container-pd-LR: 25px;
}

html, body
{
	margin: 0;
	padding: 0;
}
img
{
	vertical-align: bottom;
}

body
{
	background-color: #000000;

	font-family: var(--font-default);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.8;
	font-feature-settings: "palt";
	letter-spacing: 0.06em;
	position: relative;
}

.wrapper
{
	display: flex;
    flex-direction: column;
    min-height: 100svh;
}
.-bg
{
	display: none;
	
	@media only screen and (min-width: 768px)
	{

		display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
		
		& .-content-visual
		{
			background-image: url("bg_first.webp");
			background-position:center;
			background-repeat: no-repeat;
			background-size: cover;
            display: block;
			position: relative;
            top: 0;
            left: 0;
            height: 100%;
			width: calc(100% - var(--device_width));
			
			& .-logo
			{
				width: 500px;
				height: auto;
				max-width: 80%;
				text-align: center;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				
				& img
				{
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}
		}
	}
}
.layout
{
    background-color: #ffffff;
	border-left: 1px solid #212121;
	width: 100%;
	overflow-x: hidden;
	
	@media only screen and (min-width: 768px)
	{
		margin: 0 0 0 calc(100% - var(--device_width));
		width: var(--device_width);
		z-index: 1;
	}
}
.-container
{
	flex-grow: 1;
	margin: 0 auto;
    position: relative;
    width: 100%;
	padding: 0 var(--container-pd-LR-sp);
	
	@media only screen and (min-width: 768px)
	{
		padding: 0 var(--container-pd-LR);
	}
}
.sec-first
{
    background-color: #000000;
    color: #ffffff;
    padding-bottom: 50px;
	
	& .-view
	{
		background-image: url("bg_first.webp");
		background-position: top center;
		background-repeat: no-repeat;
		background-size: 100% auto;
		height: 790px;
		max-height: 100svh;
		position: relative;
		padding-top: 30px;
		margin-bottom: 30px;
		
		& .-catch
		{
			text-align: center;
			
			& .-subtitle
			{
                font-size: 1.2rem;
				font-weight: 700;
				margin: 0 0 18px;
			}
			
			& .-open
			{

				margin: 0;
				line-height: 1.2;
				
				& .-en
				{
					display: block;
					font-size: 2rem;
					font-family: helvetica-neue-lt-pro-cond, sans-serif;
					font-weight: 900;
				}
				
				& .-ja
				{
					display: block;
					font-size: 7.4rem;
					font-weight: 900;
				}
			}
		}
		
		& .-title
		{
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 75%;
            margin: 0;
		}
	}
	
	.-jihf
	{
		text-align: center;
		
		& img
		{
			width: 90px;
		}
	}
	
	.-overview
	{
		margin: 50px 0 0;
		text-align: justify;
	}
	
	@media only screen and (min-width: 768px)
	{
		& .-view
		{
			min-height: 700px;
			max-height: 100vh;
		}
	}
}



.sec-teams
{
	& .-title
	{
		text-align: center;
		font-size: 2.1rem;
		line-height: 1.4;
		font-style: italic;
		margin: 40px 0;
	}
	
	& .-teams
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	& .-team
	{
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		height: 540px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 30px;
		
		& a
		{
			text-decoration: none;
		}
		
		& .-name
		{
			color: #ffffff;
			font-size: 2.1rem;
			font-weight: 700;
			margin-bottom: 40px;
			line-height: 1;
			font-style: italic;
		}

		&.-wilds
		{
			background-image: url("bg_tokyo_widlds.webp");
			
			& .-logo
			{
				& img
				{
					width: 279px
				}
			}
		}
		&.-orques
		{
			background-image: url("bg_nagoya_orques.webp");
			
			& .-logo
			{
				& img
				{
					width: 320px
				}
			}
		}
		&.-bluerise
		{
			background-image: url("bg_shiga_bluerise.webp");
			
			& .-logo
			{
				& img
				{
					width: 337px
				}
			}
		}
	}
}


.sec-schedule
{
	background-color: #477efa;
	position: relative;
    padding: 40px 0 30px;
	overflow: hidden;
	
	& .-title
	{
		width: 106%;
        text-align: center;
        margin: 0 0 10px -3%;
		
		& img
		{
	        width: 100%;
		}
	}
	
	& .-date
	{
		font-family: var(--font-mincho);
		margin: 0;
        text-align: center;
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.3;
		
		& span
		{
			font-size: 1.6rem;
		}
	}
	
	& .-firstmatch
	{
		background-image: url("vs.webp");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		height: 200px;
		margin: 40px 0 60px;
		position: relative;
		overflow: hidden;
		
		& .-orques, .-bluerise
		{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
		& .-orques
		{
			width: 162px;
			height: 163px;
			left: calc(100% - 103px);
		}
		
		& .-bluerise
		{
			right: calc(100% - 103px);
			width: 122px;
			height: 167px;
		}
	}
	
	& .-title_h3
	{
        text-align: center;
        margin: 0 0 60px;
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 1.3;
		
		& span
		{
			font-family: helvetica-neue-lt-pro-cond, sans-serif;
			font-weight: 700;
			font-size: 2rem;
		}
	}
	
	& .-schedule
	{
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 0.8rem;
        color: #ffffff;
        letter-spacing: 0.01em;
        text-align: center;
		
		& li
		{
			margin-bottom: 24px;	
		}
	}
}


.sec-contact
{
	padding: 60px 0;
	
	& .-title
	{
		text-align: center;
		font-size: 2.1rem;
		font-weight: 900;
		line-height: 1.4;
		font-style: italic;
		margin: 0 0 30px;
		line-height: 1;
	}
	
	& .form-group {
		margin-bottom: 25px;
	}

	& label {
		display: block;
		margin-bottom: 8px;
		font-weight: bold;
		color: #555;
	}

	& .required {
		color: #e74c3c;
		font-size: 12px;
		margin-left: 5px;
	}

	& input[type="text"],
	input[type="email"],
	input[type="tel"],
	textarea {
		width: 100%;
		padding: 12px;
		border: 2px solid #ddd;
		border-radius: 4px;
		font-size: 16px;
		transition: border-color 0.3s ease;
	}

	& input[type="text"]:focus,
	input[type="email"]:focus,
	input[type="tel"]:focus,
	textarea:focus {
		outline: none;
		border-color: #3498db;
	}

	& textarea {
		height: 120px;
		resize: vertical;
	}

	& .error {
		color: #e74c3c;
		font-size: 14px;
		margin-top: 5px;
		display: block;
	}

	& .success-message {
		background: #d4edda;
		color: #155724;
		padding: 20px;
		border-radius: 4px;
		margin-bottom: 20px;
		border: 1px solid #c3e6cb;
		text-align: center;
		display: none;
	}

	& .error-message {
		background: #f8d7da;
		color: #721c24;
		padding: 15px;
		border-radius: 4px;
		margin-bottom: 20px;
		display: none;
	}

	& .submit-btn {
		background: #3498db;
		color: white;
		padding: 15px 40px;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		cursor: pointer;
		width: 100%;
		transition: background-color 0.3s ease;
	}

	& .submit-btn:hover {
		background: #2980b9;
	}

	& .submit-btn:disabled {
		background: #bdc3c7;
		cursor: not-allowed;
	}

	/* ハニーポット（ロボット対策） */
	& .honeypot {
		position: absolute;
		left: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}
	& .input-error {
		border-color: #e74c3c !important;
	}

	@media (max-width: 768px) {
		& .form-container {
			padding: 20px;
		}
	}

	& .loading {
		display: none;
		text-align: center;
		margin-top: 10px;
		color: #666;
	}

	/* フェードアニメーション */
	& .fade-in {
		animation: fadeIn 0.5s ease-in;
	}

	@media only screen and (min-width: 768px)
	{

		& .-title
		{
			font-weight: 700;
		}
	}

}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}


.footer
{
	background-color: #000000;
	margin: 0;
	padding: 24px 0;
	
	& .-copyright
	{
		color: #ffffff;
		font-size: 12px;
		margin: 0;
		text-align: center;
	}
}


.sns
{
    position: fixed;
    right: 10px;
    bottom: 15px;
    z-index: 1;
	
	& ul
	{
		list-style: none;
		margin: 0;
		padding: 0;
		
		& li
		{
			float: left;
			margin-left: 3px;
		}
		
		& a
		{
			border: 1px solid #E9E9E9;
			background-color: rgba(255, 255, 255, 0.9);
			border-radius: 50%;
			display: block;
			width: 40px;
			height: 40px;
			padding: 8px;
			display: flex;
            align-items: center;
            justify-content: center;
			&::hover
			{
				
			}
			
			& img
			{
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
	}
}