@charset "UTF-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, input, textarea, legend, article, aside, footer, header, hgroup, menu, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	font-family: inherit;
}

body {
	font-family: 'Noto Sans JP', 'メイリオ','ＭＳＰゴシック','ヒラギノ角ゴ',sans-serif;
}

/*header*/

.header {
	width: 1000px;
	margin: auto;
}

.header-back {
	background-image: url(https://www.falcom.co.jp/mcc2022/resource/header_bg.webp);
	margin-bottom: 10px;
}

.header-flex {
	display: flex;
}

/*footer*/
.footer-back {
	background-image: url(https://www.falcom.co.jp/mcc2022/resource/header_bg.webp);
}

.footer-f {
	display: flex;
	width: 1000px;
	margin: auto;
	padding-top: 25px;
}

.footer-fbr, .footer-fbc, .footer-fbl {
	display: block;
	width: 30%;
	margin: auto;
	text-align: center;
}

.footer-b {
	width: 1000px;
	margin: auto;
	text-align: center;
}

/*main*/
a {
	list-style: none;
	text-decoration: none;
}

.main {
	width: 1000px;
	margin: auto;
}

.main-box {
	margin: 0 30px 50px 30px;
}

.top-box {
	margin-top: 10px;
}

/*button*/
.b-flex {
	display: flex;
	margin: 40px auto 80px auto;
}

.hover {
	position: relative;
	width: 280px;
	height: 30px;
}

.hover .b-box {
	background-color: #a8aaa9;
	text-align:center;
	line-height: 30px;
}

.hover .b-pic {
	position: absolute;
	top: -15px;
	right: 20px;
	opacity: 0;
}

.hover:hover .b-box {
	background-color: #be91a6;
}

.hover:hover .b-pic {
	opacity: 1;
}

.hover2 {
	position: relative;
	margin-right: 43px;
	margin-left: 43px;
}

.hover2 .b-box2 {
	text-align:center;
	line-height:30px;
}

.hover2 .b-pic2 {
	position: absolute;
	top: -20px;
	left: 20px;
	opacity: 0;
}

.hover2:hover .b-pic2{
	opacity: 1;
}

.hover3 {
	position: relative;
}

.hover3 .b-box3 {
	text-align:center;
	line-height: 30px;
}

.hover3 .b-pic2 {
	position: absolute;
	top: -20px;
	left: 20px;
	opacity: 0;
}

.hover3:hover .b-pic2{
	opacity: 1;
}

/*award*/
.a-box, .t-box {
	position: relative;
	text-align: center;
	margin: auto;
}

.g-box {
	display: flex;
}

.g-left {
	display: block;
	width: 40%;
	text-align: center;
	margin: 20px auto 20px auto;
}

.g-right {
	display: block;
	width: 60%;
	margin: 20px auto 20px auto;
}

.twitter-box {
	padding-left: 10px;
	border-left: solid 10px #219c5f;
}

.twitter-i {
	padding-left: 50px;
}

.thankyou {
	margin-bottom: 60px;
}

.comment-box {
	margin: 15px auto 13px auto;
}

.comment-box2 {
	margin: 12px auto 0 auto;
}

/*text*/
.footer-t {
	font-weight: 600;
	color: #2f8f5f;
}

.footer-t:hover {
	color: #f8a11d;
}

.b-textl {
	color: #f6faf7;
}

.hover2 .b-textc {
	display: inline-block;
	width: 280px;
	height: 30px;
	background-color: #219c5f;
	color: #f6faf7;
}

.b-textr {
	display: inline-block;
	width: 280px;
	height: 30px;
	background-color: #219c5f;
	color: #f6faf7;
}

.hover2:hover .b-textc, .hover3:hover .b-textr {
	background-color: #e65757;
}

.a-box p, .t-box p {
	position: absolute;
	top: 2px;
	left: 50px;
	color: #f6faf7;
}

.twitter-t {
	color: #2f8f5f;
}

.t-text {
	margin:15px 0 15px 0;
	padding-left: 20px;
}

/*pic*/
.michey-h {
	width: 230px;
	height: 370px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.michee-h {
	width: 230px;
	height: 370px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.header-pic {
	width: 550px;
	height: auto;
	margin-top: 100px;	
}

.falcom-logo {
	width: 150px;
	height: 33.5px;
	margin: 35px 0 20px 0;
}

.award-bar, .message-bar {
	width: 900px;
	height: 32px;
}

.a-pic {
	width: 80%;
}

/*font*/

.twitter-nf {
	font-size: 18px;
	font-weight: 600;
}

/*デバイス対応(幅0~959px)*/
@media screen and (max-width: 959px) {

	.header, .main {
		width: 100%;
		height: auto;
	}
	
	/*ヘッダー箇所*/
	.header-flex {
		display: flex;
		flex-wrap: wrap;
	}
	
	.title {
		order: 2;
		width: 100%;
		padding: 10px;
	}
	
	.m-left, .m-right {
		width: 50%;
		padding: 0;
	}
	
	.m-left {
		text-align: right;
	}
	
	.michey-h, .michee-h {
		width: 75%;
		height: auto;
		margin-bottom: 0px;
	}

	.heder-pic {
		width: 90%;
		height: auto;
	}

	/*footer*/
	.footer-f {
		display: block;
		width: 100%;
	}
	
	.footer-b {
		width: 100%;
	}
	
	.footer-fbl, .footer-fbc, .footer-fbr {
		width: 100%;
		margin: auto auto 8px auto;
	}
	
	.header-pic {
		width: 90%;
		height: auto;
		margin: 0px 2% 0px 5%;
		
	}
	
	/*ボタン箇所*/
	.b-flex {
		width: 100%;
		margin-bottom: 15%;
	}

	.hover, .hover2, .hover3 {
		width: 100%;
	}

	.b-box2, .b-box3 {
		width: 100%;
		height: auto;
	}

	.hover2 .b-textc {
		width: 100%;
	}

	.b-textr {
		width: 100%;
	}

	.award-bar, .message-bar {
		width: 95%;
	}

	.mic-img {
		width: 90%;
	}

	.hover .b-pic {
		position: absolute;
		top: -20%;
		right: 0%;
		opacity: 0;
	}

	.hover2 .b-pic2 {
		position: absolute;
		top: -20%;
		left: 0%;
		opacity: 0;
	}

	.hover3 .b-pic2 {
		position: absolute;
		top: -20%;
		left: 0%;
		opacity: 0;
	}

	/*作品箇所*/
	.g-box {
		display: block;
	}

	.g-left {
		width: 100%;
	}

	.g-right {
		width: 90%;
	}

	.scr-box {
		display: flex;
	}

	.twitter-n {
		display: block;
		width: 70%;
	}

	.twitter-i {
		display: block;
		width: 30%;
		padding-left: 0px;
	}

	.a-box p, .t-box p {
		position: absolute;
		top: 2px;
		left: 33px;
		color: #f6faf7;
	}

	.thankyou {
		margin-top: 30px;
	}

	/*font*/

	.font {
		font-size: clamp(15px, 3vw, 18px);
	}

	.font2 {
		font-size: clamp(12px, 3vw, 18px);
	}

	.b-textl, .b-textc, .b-textr {
		font-size: clamp(15px, 3vw, 18px);
	}

	.t-text {
		font-size: clamp(15px, 3vw, 18px);
	}

	.twitter-t {
		font-size: clamp(15px, 3vw, 18px);
	}

	.twitter-nf {
		font-size: clamp(15px, 3vw, 18px);
	}

	.footer-t {
		font-size: clamp(12px, 3vw, 16px);
	}

}

	@media screen and (max-width: 710px) {

	/*画像*/

	.hover .b-pic {
		position: absolute;
		top: -20%;
		right: -10%;
		opacity: 0;
	}

	.hover2 .b-pic2 {
		position: absolute;
		top: -20%;
		left: -10%;
		opacity: 0;
	}

	.hover3 .b-pic2 {
		position: absolute;
		top: -20%;
		left: -10%;
		opacity: 0;
	}

}

@media screen and (max-width: 570px) {

	/*画像*/
	.mic-img {
		width: 70%;
	}

	.hover .b-pic {
		position: absolute;
		top: -20%;
		right: -20%;
		opacity: 0;
	}

	.hover2 .b-pic2 {
		position: absolute;
		top: -20%;
		left: -20%;
		opacity: 0;
	}

	.hover3 .b-pic2 {
		position: absolute;
		top: -20%;
		left: -20%;
		opacity: 0;
	}


}

@media screen and (max-width: 480px) {

	/*画像*/
	.hover .b-pic {
		position: absolute;
		top: -20%;
		right: -30%;
		opacity: 0;
	}

	.hover2 .b-pic2 {
		position: absolute;
		top: -20%;
		left: -30%;
		opacity: 0;
	}

	.hover3 .b-pic2 {
		position: absolute;
		top: -20%;
		left: -30%;
		opacity: 0;
	}

}

@media screen and (max-width: 380px) {

	/*画像*/
	.mic-img {
		width: 60%;
	}

	.hover .b-pic {
		position: absolute;
		top: -20%;
		right: -50%;
		opacity: 0;
	}

	.hover2 .b-pic2 {
		position: absolute;
		top: -20%;
		left: -50%;
		opacity: 0;
	}

	.hover3 .b-pic2 {
		position: absolute;
		top: -20%;
		left: -50%;
		opacity: 0;
	}


}