@charset "utf-8";
/* モバイルメニュー ここから ---------------------------- */
@media (max-width: 767px) { /* sp */
	.navbtn {
		display: block;
		width: 60px;
		height: 60px;
		background-image: url(../images/nav-mobile-open.svg);
		background-repeat: no-repeat;
		background-size: 60px 60px;
		background-position: center center;
		position: fixed;
		top: 0px;
		/*left: 0px;ボタンの位置-左*/
		right: 0px; /*ボタンの位置-右*/
		z-index: 1;
	}
	.navbtn.close {
		background-image: url(../images/nav-mobile-close.svg);
	}
	.header-container {
		height: 60px;
	}
	.header-container .navbtn.close {
		background-color: hsla(0, 100%, 0%, 0.8); /*追加*/
		background-image: url(../images/nav-mobile-close.svg);
		background-size: 60px 60px;
		/*background-position: top left;ボタンの位置-左*/ /*追加*/
		background-position: top right; /*ボタンの位置-右*/ /*追加*/
		width: 100vw;
		height: 100vh;
	}
	.header-nav {
		position: fixed;
		top: 60px;
		width: 100vw;
		z-index: 2;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	.header-nav.collapse {
		display: none;
	}
	.header-nav li a {
		display: block;
		padding: 20px 30px;
		border-top: 1px solid #000;
		background: #000;
		color: #9000ff;
		text-decoration: none;
		font-weight: bold;
	}
	.header-nav li a:hover {
		color: #39ff14;
	}
}
@media (min-width: 768px) { /* pc */
	.navbtn {
		display: none;
	}
	.header-nav {
		display: none;
		flex-direction: row;
		justify-content: center;
		list-style-type: none;
	}
	.header-nav li a {
		margin: 6px 10px 2px 10px;
		padding: 0px 0px 0px 0px;
		border-top: none;
		border-bottom: 4px solid transparent;
		background: none;
		text-decoration: none;
	}
	.header-nav li a:hover {
		border-bottom: 4px solid #73cbd6;
		background: none;
	}
}
/* /モバイルメニュー ここまで ---------------------------- */
/* 共通 --------------------------*/
/* ページ全体に関わるCSSの設定 */
html *, ::before, ::after {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
/* フォント */
html {
	font-size: 14px;
}
@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}
body {
	text-align: center;
	color: #f4e6ff;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400; /* Noto Sans JPのレギュラーウェイトを指定 */
}
h1 {
	font-weight: 500;
}
h2, h3, h4, h5, h6, th, strong {
	font-weight: 600;
}
/* ベースのリンクカラー */
a {
	color: #9000ff;
}
/* レスポンシブイメージと画像下スペース防止 */
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom; /* 画像下のスペースを消す */
}
/* /ページ全体に関わるCSSの設定 */
/* /共通 --------------------------*/
.logo {
	display: grid;
	max-width: 1200px;
	height: auto;
	/*〇*/
	grid-template-columns: 1fr 1fr 1fr;
	margin: 0 auto;
}
.maing img {
	max-width: 100%;
	width: 1200px;
}
.about {
	max-width: 1000px;
	margin: 32px auto;
	padding: 50px 0px;
}
.about p {
	line-height: 1.8;
}
.about-1 {
	margin-bottom: 50px;
	letter-spacing: 0.5em;
}
.about-2 {
	margin-bottom: 100px;
	letter-spacing: 0.1em;
}
.the2 img {
	text-align: center;
	width: 100px;
margin-top: 50px;
}
.work-link {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	margin: 50px auto 100px auto;
}
.work-link img {
	width: 100px;
}
.note {
	
	color: #39ff14;
}
.tentative {
	margin-top: 100px;
	color: #39ff14;
}
.news {
	max-width: 1000px;
	height: 100px;
	border: 1px solid #9000ff;
	margin: 32px auto;
	padding: 10px 50px;
	border-radius: 50px;
	text-align: left;
}
.logofoot img {
	width: 100px;
}
.workfoot {
	margin: 32px
}
.copyright {
	font-size: .75rem;
	margin-bottom: 100px;
}
/***** THE WORK *****/
.work-logo img {
	width: 130px;
	padding: 10px;
}
.work {
	display: grid;
	max-width: 1000px;
	/*〇*/
	grid-template-columns: 1fr 400px 1fr;
	column-gap: 10px;
	row-gap: 30px;
	margin: 0 auto 100px auto;
}
.work-top {
	max-width: 1000px;
	margin: 0px auto 32px auto;
	padding: 10px;
}
.work-top h2 {
	font-size: 2rem;
}

.work-about {
	text-align: left;
}
.work-about h1 {
	color: #9000ff;
}
.work-about strong {
	color: #c880FF
}
.work-00 img {
	width: 300px;
}
.work0 {
	position: relative;
}
.work0 p {
	position: absolute;
	text-align: center;
	color: rgba(144, 0, 255, 0.5);
	font-size: 3rem;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
}
.work1 {
	padding-top: 140px;
	text-align: left;
}
.work1 img {
	width: 100px;
}
.work2 {
	grid-column: 1 / 4;
	grid-row: 2;
}
.work2 img {
	width: 100px;
	margin-bottom: 30px;
}
.work2 p {
	text-align: left;
}
.work2 strong {
	color: #c880FF
}
/***** /THE WORK *****/
/***** 背景 *****/
/* 星空の背景のスタイル */
.stars {
	position: relative;
	width: 100%; /* 星空の横幅 */
	height: 100%; /* 星空の縦幅 */
	background-image: linear-gradient(0deg, #000, #000); /* 星空の背景色 */
	overflow: hidden; /* 星が枠外にはみ出すのを防ぐ */
}
/* 星のスタイル */
.star {
	position: absolute;
	display: block;
	background-color: #fff; /* 星の色 */
	border-radius: 50%; /* 角丸 */
	box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.2); /* 星の影 */
	opacity: 0;
	animation: twinkle 10s infinite;
}
/* 星がキラキラ光るアニメーション */
@keyframes twinkle {
	0% {
		opacity: 0;
	}
	50% {
		transform: scale(1.1);
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(1);
	}
}
/* /背景 */
@media (max-width: 767px) { /* sp */
	.logo img {
		width: 170px;
	}
	.the {
		display: none;
	}
	/***** THE WORK *****/
	/***** /THE WORK *****/
}
@media (min-width: 768px) { /* pc */
	header {
		height: 160px;
	}
	.logo img {
		width: 250px;
		margin: 40px;
	}
	.the {
		text-align: right;
	}
	.the img {
		width: 75px;
	}
	/***** THE WORK *****/
	.work-header {
		height: 100px;
	}
	/***** /THE WORK *****/
}