@charset "UTF-8";

#window {
	width: 100%;
	height: 50vh;
}


#catch-copy {
	opacity: 0;
	transition: 0.5s;
	position: relative;
	top: 0.5em;
}




#profile-icon {
	width: 20%;
	height: 20%;
	/*スマホ版
	width: 50%;
    height: 50%;
	*/
}

.sp #profile-icon {
	width: 50%;
    height: 50%;
}




.gradient-button-svg {
	display: inline-block;
	padding: 10px 20px;
	width: 80%;
	/* 横幅を固定 */
	max-width: calc(var(--font-size-xl)*10);
	border-radius: 20px;
	background: linear-gradient(120deg, #2c2c2e 50%, #4e2c2c 100%);
	font-size: calc(var(--font-size-xl));
	text-align: center;
	text-decoration: none;
	color: transparent;
	/* テキスト色を透明に */
	position: relative;
	overflow: hidden;
	border: 4px dashed #1a526c;
	/* 破線のフチを太く設定 */
	font-family: 'KurobaraGothic', serif;
	/* 黒薔薇フォントを使用 */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s, box-shadow 0.2s;
}

.gradient-button-svg:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.2);
}

.gradient-button-svg:active {
	transform: translateY(0);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.gradient-button-svg span {
	background: linear-gradient(to right, #e0e0e0, #b0b0b0);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-flex;
	/* 子要素を横並びに */
	align-items: center;
	/* 縦方向で中央揃え */
	vertical-align: middle;
}

.icon-svg {
	display: inline-block;
	width: calc(var(--font-size-xl));
	/* SVGの幅を指定 */
	height: calc(var(--font-size-xl));
	/* SVGの高さを指定 */
	background-size: contain;
	/* 背景画像のサイズを要素に合わせる */
	background-repeat: no-repeat;
	/* 背景画像を繰り返さない */
	background-position: center;
	/* 背景画像を中央に配置 */
	filter: invert(98%) sepia(0%) saturate(5706%) hue-rotate(51deg) brightness(120%) contrast(76%);
	margin-right: 8px;
	/* アイコンとテキストの間にスペースを追加 */
}