@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* CSS Document */

/*====================================

    root

====================================*/

:root {
    --main-color: #EBE602;
    --sub-color: #000;
    --text-color: #333;
    --z-header: 100;
    --z-nav: 110;
    --z-nav-toggle: 120;
    --z-loading: 9999;
}

/*====================================

    html / body

====================================*/

html {
    scroll-behavior: smooth;
}
body {
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 16px; /* 基本サイズ（PC）。各ページの文字サイズはここを基準に%で指定 */
    line-height: 1.85em;
    font-feature-settings: 'palt';
    margin: 0 auto;
    position: relative;
    color: var(--text-color);
}

/*====================================

    loading

====================================*/

#loading {
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    background: var(--main-color);
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-loading);
    display: grid;
    place-items: center;
}
.spinner {
    background: var(--sub-color);
    border-radius: 100%;
    animation: sk-scaleout 1.0s infinite ease-in-out;
    width: 100px;
    height: 100px;
}
@keyframes sk-scaleout {
    0% {
        transform: scale(0);
    } 100% {
        transform: scale(1.0);
        opacity: 0;
    }
}
.loaded {
    opacity: 0;
    visibility: hidden;
}

/*====================================

	header

====================================*/

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: var(--z-header);
	padding: 10px 30px 10px 10px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
header nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
header nav .logo {
	width: 100px;
}
header nav .menu-left {
	display: flex;
	gap: 1em;
}
header nav .menu-left a {
	display: block;
	position: relative;
	text-decoration: none;
	transition: color .35s ease;
    color: #000;
}
header nav .menu-left a:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 0;
	transition: width 0s ease, background .35s ease;
}
header nav .menu-left a:after {
	content: '';
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	height: 1px;
	width: 0;
	background: #000;
	transition: width .35s ease;
}
header nav .menu-left a:hover:before {
	width: 100%;
	background: #000;
	transition: width .35s ease;
}
header nav .menu-left a:hover:after {
	width: 100%;
	background: transparent;
	transition: all 0s ease;
}
header nav .nav-toggle {
	display: none;
}

/*====================================

	#app_top

====================================*/

#app_top {
	max-width: 1800px;
	width: 100%;
	margin: 0 auto;
}

/*====================================

	footer

====================================*/

footer {
	background: #333;
    padding: 20px 40px;
}
footer .plivacy {
    width: 100%;
    text-align: right;
}
footer .plivacy a {
    color: #fff;
    font-size: 80%;
}
footer small {
	color: #fff;
	width: 100%;
	text-align: center;
	font-size: 80%;
	display: block;
}

/*====================================

    @media（SP）
    ※PCと異なる値のみ記述

====================================*/

@media (max-width: 768px) {
	/* body */
	body {
		font-size: 14px; /* 基本サイズ（SP） */
	}

	/* loading */
	.spinner {
		width: 40px;
		height: 40px;
	}

	/* header */
	header {
		padding: 0;
	}
	header nav {
		padding: 6px 10px;
	}
	header nav .logo {
		width: 50px;
        position: relative;
        z-index: 1000;
	}
	header nav .menu-left {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.5s ease-out;
		z-index: var(--z-nav);
		border: none;
	}
	header nav .menu-left.collapse {
		max-height: 50em;
	}
	header nav .menu-left {
		background: #fff;
		box-shadow: 0 4px 12px rgba(0,0,0,.08);
	}
	header nav .menu-left li:first-child {
		padding-top: 60px;
	}
	header nav .menu-left a {
		background: #fff;
		border-top: 1px solid #eee;
		padding: 14px 20px;
	}
	header nav .menu-left a:before,
	header nav .menu-left a:after {
		display: none;
	}
	header nav .nav-toggle {
		display: block;
		border-radius: 5px;
		height: 38px;
		width: 38px;
		padding: 8px;
		position: relative;
		z-index: var(--z-nav-toggle);
	}
	header nav .nav-toggle span {
		position: relative;
		display: block;
		height: 2px;
		width: 100%;
		margin-top: 4px;
		background-color: #000;
		transition: all .25s;
	}
	header nav .nav-toggle.open span:first-child {
		transform: rotate(45deg) translate(4.4px, 4.4px);
	}
	header nav .nav-toggle.open span:nth-child(2) {
		width: 0%;
		opacity: 0;
	}
	header nav .nav-toggle.open span:last-child {
		transform: rotate(-45deg) translate(4.4px, -4.4px);
	}

	/* footer */
	footer {
		padding: 20px 12px;
	}
	footer .plivacy {
		text-align: right;
		margin-bottom: 4px;
	}
}