﻿.view-message{
	--width: 720px;
	justify-content: start !important;
}
	.view-message > *,
	.view-message .content > *{
		width: var(--width);
		box-sizing: border-box;

	}
		.view-message > .menu{
			top: 0;
			padding: 0 var(--size-1);
			width: 100%;
			display: flex;
			justify-content: flex-end;
			height: var(--size-7);
			cursor: pointer;
		}
			.view-message > .menu .button{
				padding: 0 var(--size-2);
				height: inherit;
				display: flex;
				align-items: center;
				font-size: var(--size-4);
				color: var(--color-12);
			}
			.view-message > .menu .button .label{
				padding-left: var(--size-2);
				color: var(--color-12);
			}
		.view-message > .background{
			position: relative;
			top: calc(var(--size-7) * -1);
			width: 100%;
			height: 25vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: end;
			background: var(--bg-color-5);
			z-index: -1;
		}
			.view-message > .background::before{
				content: '';
				position: absolute;
				top: 0; right: 0; 
				left: -120px; bottom: -240px;
				background: url('image/background_clouds.png') no-repeat center bottom;
			}		
		.view-message .logo{
			content: var(--logo);
			bottom: 0;
			width: 340px;
			margin-bottom: 24px;
			z-index: 1;
		}

.view-message .content *{
	font-size: var(--size-3);
	line-height: var(--size-4);	
	color: var(--color-text);
}
	.view-message .content h1{
		margin-bottom: var(--size-5);
		font-size: var(--size-5);
		font-weight: 400;
		color: var(--color-text);
	}		