@charset "UTF-8";

#Topmessage__content{
    margin: 0 auto;
	padding-bottom: clamp(100 * 0.5px, 100 / 960 * 100vw, 100px);
}
#Topmessage__content h1,
#Topmessage__content h2{
    letter-spacing: -0.03em;
	line-height: 1.2;
}


/* ---------- TopmessageHero ---------- */
#Topmessage__content .TopmessageHero{
	max-width:100%;
	margin: 0 auto;
	padding: 3.2rem 0;
	position: relative;
	background-color:#FFF;
}
@media only screen and (min-width: 560px) and (max-width: 959px){
	#Topmessage__content .TopmessageHero{
		padding: 2.5rem 0;
	}
}
@media only screen and (max-width: 559px) {
	#Topmessage__content .TopmessageHero{
		padding: 2rem 0;
	}
}

#Topmessage__content .TopmessageHero .Heading_wrap{
	width:100%;
	margin: 0 auto;
	position: relative;
}

#Topmessage__content .TopmessageHero h1.Hero__heading{
	font-size: 4.8rem;
	line-height: 1.5;
}
	@media only screen and (min-width: 560px) and (max-width: 959px){
		#Topmessage__content .TopmessageHero h1.Hero__heading{
			font-size: 3.8rem;
		}
	}
	@media only screen and (max-width: 559px) {
		#Topmessage__content .TopmessageHero h1.Hero__heading{
			font-size: 2.6rem;
		}
	}

/* ---------- MessageArea ---------- */

#Topmessage__content #MessageArea{
	width: 100%;
	min-height: 1100px;
	background: url(../images/topmessage_img.jpg) no-repeat;
	background-position: center;
	background-size: cover;
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Topmessage__content #MessageArea {
			width: 100%;
			min-height: 1100px;
			
			background: url(../images/topmessage_img.jpg) no-repeat;
			background-position: right 45% top 0%;
			background-size: cover;	
		}
	}

	@media only screen and (max-width: 559px) {
		#Topmessage__content #MessageArea {
				width: 100%;
				background: none;
			}
	}


#Topmessage__content .Message__Image {
	display: none;
}
@media only screen and (max-width: 559px){
	#Topmessage__content .Message__Image {
		display: block;
		width:100%;
	}
	#Topmessage__content .Message__Image img{
		clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
	}
}

	 
#Topmessage__content .GridBox__Text{
	width: 45%;
	padding-top: 10rem;
	padding-bottom: 4rem;
	font-size: 1.6rem;
	text-align: justify;
}
@media only screen and (min-width: 560px) and (max-width: 959px) {
	#Topmessage__content .GridBox__Text {
			width: 50%;
			padding-top: 5rem;
			padding-bottom: 5rem;
			font-size: 1.6rem;
			/* mix-blend-mode: exclusion; */
		}
}

@media only screen and (max-width: 559px) {
	#Topmessage__content .GridBox__Text {
			width: 100%;
			padding-top: 2rem;
		}
}


#Topmessage__content .BoardPrimary__signature {
	margin-top: 3em;
}

#Topmessage__content .Board__name {
	font-size: 3rem;
}

@media only screen and (min-width: 560px) and (max-width: 959px) {
	#Topmessage__content .Board__name {
			font-size: 3rem;
	}
}

@media only screen and (max-width: 559px) {
	#Topmessage__content .Board__name {
			font-size: 2.4rem;}
}