/* ========== 共通 ========== */
html {
    font-family: 'Noto Serif JP', 'Oswald',"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif, -apple-system,BlinkMacSystemFont, sans-serif;
	font-size: calc(100vw / 32); /*320px時に10px*/
    color:#333333;
    background-color: #ffffff;
    margin: 0 auto;
    padding: 0;
    min-width: 240px;

	scroll-behavior:smooth;
	-webkit-scroll-behavior:smooth;
	overscroll-behavior-y:contain;
	-webkit-overflow-scrolling: touch;
	overflow-y: scroll;

}

body, header, section, footer {
    margin: 0;
    padding: 0;
}
h1,h2,h3,h4,h5 {
    margin: 0;
    padding: 0;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
a {
	text-decoration: underline;
	color: #ff6666;
	-webkit-transition: all 0.5s;
	-webkit-transition-delay: 0;
	transition: all 0.5s;
	transition-delay: 0;
	opacity: 1;
}
a:hover {
	color: #999999;
}
body {
	font-size: 1.4em;
	overflow: hidden;
}
main {
	display: grid;
	place-items: center;
	min-width: 100%;
	min-height: 100lvh;
	background-image: radial-gradient(#444444, #222222 25%, #000000 80%);
}
main ul {
	display: grid;
	max-width: 90lvw;
	max-height: 90lvh;
	grid-template-rows: repeat(3,1fr);
	text-align: center;
	color: #ffffff;
	overflow: hidden;
	font-size: 1em;
	gap: 0.5em;
}
main li {
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
main ul a{
	opacity: 0;
	height: calc(100% - 1em);
	animation: fadein 0.5s ease-in-out forwards 2s;
}
main ul a img{
	object-fit: contain;
}
main ul p{
	opacity: 0;
	font-size: 1em;
	line-height: 1em;
	animation: fadein 0.5s ease-in-out forwards 2.5s;
}


main ul li:nth-of-type(1) a {
	animation-delay: 1.6s;
}
main ul li:nth-of-type(2) a {
	animation-delay: 1.8s;
}
main ul li:nth-of-type(3) a {
	animation-delay: 2.0s;
}
@keyframes fadein {
  0% {
    opacity: 0;
	transform: scale(0.8);
  }
  75% {
  }
  100% {
    opacity: 1;
	transform: scale(1);
  }
}

main ul a img {
	width: auto;
	height: 100%;
	max-width: 200px;
	max-height: 200px;
	aspect-ratio: 1 / 1;
	transition: all 0.25s;
	transition-timing-function: linear(0, 1.2, 1);
}
main ul a img:hover {
	transform: scale(1.1);
}


/* ============================ */
/* ========== PC表示 ========== */
/* ============================ */
@media (min-width: 900px) {

body {
	font-size: 10px;
}
main ul {
	font-size: 30px;
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: 1fr;

}


}

/* ========== safari用 ========== */
@supports (-webkit-touch-callout: none) {

}
@media (min-width: 1080px) {
_::-webkit-full-page-media, _:future, :root
 #main_sub nav a {
	margin-right: 1em;
}
 #main_sub nav a:last-of-type {
	margin-right: 0em;
}
}

/* ========== firefox用 ========== */
@-moz-document url-prefix(){
#about rt {
	margin-bottom: -1em;
}
}