@charset "utf-8";
/* CSS Document */

header > i.fas, .nav {
	font-size: 4rem;
}

#go {
	font-size: 3rem;
}

#click {
	font-size: 2rem;
}

.d-scroll-child, .t-scroll-child {
	font-size: 8rem;
}

h1 {
	font-size: 36px;
	font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));
	line-height: 1.3;
}

h2 {
    font-size: 24px;
    font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));
    line-height: 1.3;
}

@media (min-width: 1200px) {
    h1 {
        font-size: 3.6rem;
    }
    h2 {
        font-size: 2.4rem;
    }
}

@media screen and (min-width:769px) {
	#hamberger, #click, header > i.fas {
		display: none;
	}
	header {
		width: 100%;
		height: 7vh;
		box-shadow: 0 3px 3px rgba(0,0,0,.1);
	}
	nav {
		top: 1vh;
		left: auto;
		width: auto;
		right: 0;
	}
	a.nav {
		font-size: 1.6rem;
		padding: 0;
		height: 5vh;
		line-height: 5vh;
		border-left: .5px solid gray;
		display: inline;
	}
	ul.nav {
		padding: 0;
		display: grid;
		grid-template-columns: repeat(6, 100px);
	}
	div.countdown {
		margin-left: 1em;
		top: 0;
		left: 0;
		width: auto;
		height: 7vh;
	}
	h1.countdown {
		line-height: 7vh;
		margin: 0;
		font-size: 1.6rem;
	}
	#a_home {
		display: none;
	}
	ul.nav > li {
		display: inline-grid;
	}
	#selecter {
		z-index: 50;
		position: fixed;
		right: -300px;
		top: 0;
		width: 300px;
		margin: 0;
		visibility: hidden;
		box-shadow: -3px 0 3px rgba(0,0,0,.1);
		transition: right .3s, visibility 0s .3s;
	}
	#selecter.is-open {
		visibility: visible;
		right: 0;
		transition: right .3s, visibility 0s;
	}
	#t-scrollber, #d-scrollber {
		visibility: hidden;
		transition: 0s;
	}
	#selecter.is-open #t-scrollber, #selecter.is-open #d-scrollber {
		visibility: visible;
		transition: 0s .3s;
	}
	#go {
		font-size: 2rem;
	}
	.d-scroll-child, .t-scroll-child {
		font-size: 5rem;
	}
	#selecter-trigger {
		z-index: 50;
		display: inherit;
		position: fixed;
		right: 0;
		top: 20%;
		writing-mode: vertical-rl;
		background-color: orange;
		padding: 10px 0;
		cursor: pointer;
		border-radius: 5px 0 0 5px;
		box-shadow: -3px 0 3px rgba(0,0,0,.1), 0 3px 3px rgba(0,0,0,.1), 0 -3px 3px rgba(0,0,0,.1);
		transition: right .3s;
	}
	#selecter-trigger.is-open {
		right: 300px;
	}
	#go-click {
		display: inline;
		padding-left: 10px;
	}
	#layer {
		position: fixed;
	}
	#home {
		display: inherit;
		width: 100%;
		margin-top: 7vh;
		background-color: deepskyblue;
	}
	#logo {
		object-fit: contain;
		height: 30vh;
		width: 100%;
		padding: 10vh 0;
	}
	#grid {
		width: calc(100% - 40px);
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
		grid-auto-rows: 1fr;
		grid-gap: 20px;
		padding: 20px;
		color: white;
	}
	.title {
		font-weight: 400;
		font-style: normal;
		line-height: 1;
		font-size: 3rem;
		text-align: center;
	}
	section.discription, section.news {
		width: 100%;
		background-color: rgba(0,0,0,0.10);
		text-align: center;
		font-size: 1.6rem;
		overflow: hidden;
	}
	section.discription {
		display: inline-grid;
	}
	section.theme {
		width: 90%;
		padding: 0 5% 2vh 5%;
		background-color: rgba(0,0,0,0.10);
	}
	#theme-caption {
		z-index: 0;
		position: relative;
		top: 2vh;
		line-height: 1;
		font-size: 1rem;
		text-align: center;
	}
	p.theme {
		font-size: 1.5rem;
		text-align: left;
	}
	iframe.news {
		width: 88%;
		border: none;
		height: calc(100% - 9rem);
	}
	section.greeting {
		width: 90%;
		background-color: rgba(0,0,0,0.10);
		padding: 0 5% 2vh 5%;
	}
	#greeting-caption {
		position: relative;
		top: 2vh;
		line-height: 1;
		font-size: 1rem;
		text-align: center;
	}
	h1.greeting {
		font-size: 3rem;
		text-align: center;
	}
	p.greeting {
		font-size: 1.4rem;
		text-align: left;
	}
}