@charset "utf-8";


/* 背景アニメーション */
@keyframes geometry {
	0% {
		background-position: 0% 42%
	}
	50% {
		background-position: 100% 59%
	}
	100% {
		background-position: 0% 42%
	}
}
@keyframes zoom {
   0% {
      transform: scale(1.5);
   }
   100% {
      transform: scale(1);
   }
}
.canvas {
	position: absolute; /*親のブロックを基準にして相対位置に配置する*/
	top: 0;
	right: 0;
	z-index: -1; /*重ね順を-1に　※1以上だとほかのコンテンツの上に被さってしまいます*/
}

/*
/////////////////////////////////////////////////////////////////////////////////////////////////////

	SP

-----------------------------------------------------------------------------------------------------
*/
@media screen and (max-width: 768px) {
	/* header */
	header {
		padding: 1rem;
		background: rgba(255, 255, 255, 0.8);
		position: absolute;
		top: 0;
		z-index: 99;
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 80px;
	}
	header img {
		width: auto;
		height: 50px;
	}
	header .contact a {
		display: block;
		text-align: center;
		vertical-align: middle;
		text-decoration: none;
		padding: 0.6rem 1rem;
		color: #fff;
		background-size: 180% auto;
		background-image: linear-gradient(to right, #22E1FF 0%, #1267A6 100%);
		transition: all .3s ease-out;
		font-size: 1rem;
	}
	header .contact a:hover {
		background-position: right center;
		color: #fff;
	}
	header .contact a::after {
		font-family: 'Font Awesome 6 Free';
		content: "\f138";
		font-weight: 900;
		margin-left: 0.5rem;
		font-size: 1.2rem;
	}
	/* main .hero */
	.hero {
		background-image: url("../images/top/main_bg01.jpg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.hero section {
		display: flex;
		flex-direction: column-reverse;
		width: 80%;
		margin: 5rem auto 0;
		text-align: center;
	}
	.hero h2 {
		color: #fff;
		font-size: 1.4rem;
		font-weight: 700;
		text-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
		line-height: 1.4;
	}
	.hero h2 span {
		font-size: 3rem;
		font-weight: 700;
		font-family: "Roboto Condensed";
	}
	.hero h2 span:before {
		content: "\A";
		white-space: pre;
	}
	.hero section img {
		width: 100%;
		height: auto;
	}
	/* ログインボタン */
	.hero .btn {
		font-weight: 700;
		display: inline-block;
		user-select: none;
		text-align: center;
		vertical-align: middle;
		text-decoration: none;
		letter-spacing: 0.1em;
		font-size: 1.4rem;
		margin-top: 2rem;
		padding: 1rem 4rem;
		transition: all 0.3s;
		border-radius: 30vh;
		color: #E46C2D;
		background: #fff;
		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
	}
	.hero .btn::after {
		font-family: 'Font Awesome 6 Free';
		content: "\f105";
		font-weight: 900;
		margin-left: 0.5rem;
		font-size: 1.2rem;
	}
	.hero .btn:hover {
		background-image: linear-gradient(-90deg, #FF006E, #FFD500);
		transition: .3s;
		background-size: 200%;
		color: #fff;
	}
}
/*
/////////////////////////////////////////////////////////////////////////////////////////////////////

	PC

-----------------------------------------------------------------------------------------------------
*/
@media screen and (min-width: 769px) {
	/* header */
	header {
		padding: 1.5rem 2rem;
		background: rgba(255, 255, 255, 0.8);
		position: absolute;
		top: 0;
		z-index: 99;
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 100px;
	}
	header img {
		width: auto;
		height: 60px;
	}
	header .contact a {
		display: block;
		text-align: center;
		vertical-align: middle;
		text-decoration: none;
		padding: 0.8rem 3rem;
		color: #fff;
		background-size: 180% auto;
		background-image: linear-gradient(to right, #22E1FF 0%, #1267A6 100%);
		transition: all .3s ease-out;
		font-size: 1rem;
	}
	header .contact a:hover {
		background-position: right center;
		color: #fff;
	}
	header .contact a::after {
		font-family: 'Font Awesome 6 Free';
		content: "\f138";
		font-weight: 900;
		margin-left: 0.5rem;
		font-size: 1.2rem;
	}
	/* main .hero */
	.hero {
		width: 100%;
		height: 100vh;
		background: linear-gradient(270deg, #1061a3, #24bccc, #34acd0);
		background-size: 600% 600%;
		animation: geometry 15s ease infinite;
		margin: 0;
		padding: 0;
		position: relative;
	}
	.hero section {
		position: absolute;
		top: 35%;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
	}
	.hero .catch {
		margin-right: 10%;
	}
	.hero .pict {
		width: 40%;
	}
	.hero .pict img {
		width: 100%;
		height: auto;
		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
	}
	.hero h2 {
		color: #fff;
		font-size: 1.4rem;
		font-weight: 700;
		margin-bottom: 2rem;
		text-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
		line-height: 1.4;
	}
	.hero h2 span {
		font-size: 4rem;
		font-weight: 700;
		font-family: "Roboto Condensed";
	}
	.hero h2 span:before {
		content: "\A";
		white-space: pre;
	}
	.hero {
		background-attachment: fixed;
		background-image: url("../images/top/main_bg01.jpg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}
	.hero::before {
   content: '';
   display: block;
   width: 100%;
   height: 100%;
   background-image: url("../images/top/main_bg01.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   -webkit-animation: zoom 10s 1;
   animation: zoom 20s 1;
   animation-fill-mode: forwards;
}
	/* ログインボタン */
	.hero .btn {
		font-weight: 700;
		display: inline-block;
		user-select: none;
		text-align: center;
		vertical-align: middle;
		text-decoration: none;
		letter-spacing: 0.1em;
		font-size: 1.2rem;
		position: relative;
		padding: 1rem 5rem;
		transition: all 0.3s;
		border-radius: 30vh;
		color: #E46C2D;
		background: #fff;
		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
	}
	.hero .btn::after {
		font-family: 'Font Awesome 6 Free';
		content: "\f105";
		font-weight: 900;
		margin-left: 0.5rem;
		font-size: 1.2rem;
	}
	.hero .btn:hover {
		background-image: linear-gradient(-90deg, #FF006E, #FFD500);
		transition: .3s;
		background-size: 200%;
		color: #fff;
	}
}