@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-back {
	background-image: url(resource/header_bg.webp);
}

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

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

.main-b {
	width: 100%;
	margin: 10px 0 10px 0;
	text-align: center;
}

.main-b2 {
	width: 100%;
	margin: 10px 0 10px 0;
	text-align: center;
}

.main-f {
	display: flex;
	margin-top: 20px;
}

.main-fbr {
	display: block;
	width: 25%;
}

.main-fbl {
	display: block;
	width: 75%;
}

/*.main-f2 {
	display: flex;
	margin: 10px 0 10px 180px;
}*/

/*.main-f2b {
	margin: 20px 50px 8px 300px;
}*/

/*.main-f2br {
	display: block;
	width: 75%;
	text-align: left;
}*/

/*.main-f2bl {
	display: block;
	width: 100px;
	height: 40px;
	margin: 2px 0 0 30px;
}*/

.main-fbrh {
	display: block;
	width: 75%
}

.main-fbl2 {
	display: block;
	width: 25%;
}

.page-f {
	display: flex;
	margin: 20px 0 30px 0;
}

.Prev {
	display: block;
	width: 140px;
	margin: 0 0 0 100px;
	line-height: 30px;
	border-radius: 8px;
	background-color: #18a55e;
}

.prev:hover, .page-t2:hover, .page-s:hover, .page-s2:hover {
	background-color: #f8a11d;
}

.prev-off {
	display: block;
	margin: 0 10px 0 100px;

}

.prev-off2 {
	display: block;
	margin: 0 10px 0 350px;

}

.next {
	display: block;
	margin-left: 10px;
}

.page-b {
	width: 100%;
}

ul {
	display: flex;
}

li {
	display: block;
}

.page-n {
	margin: auto 20px auto 35px;
	width: 30px;
	height: 30px;
	margin: auto 5px auto 35px;
	line-height: 30px;
	border-radius: 8px;
	color: #fcfafa;
	background-color: #9e9c9c;
}

.page-n2 {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: auto 5px auto 10px;
	line-height: 30px;
	border-radius: 8px;
	background-color: #9e9c9c;
	color: #fcfafa;
}

/*tweet*/
.tweet-b {
	width: 1000px;
	margin: 20px 0 20px 0;
}

.tweet-f {
	display: flex;
}

.tweet-fbr, .tweet-fbc, .tweet-fbl {
	display: block;
	width: 33%;
	margin: 2px 2px 2px 2px;
}

/*footer*/
.footer-back {
	background-image: url(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;
}

/*画像*/
.header-p {
	width: 90%;
	margin-bottom: -5px;
}

.michey-p {
	width: 140px;
	transform-origin: center top;
	animation: anim_mcc 3s linear infinite;
}

.clover-p {
	width: 43px;
	animation: anim_clover 5s linear infinite;
}

.clover-p2 {
	width: 43px;
	margin-top: 130px;
	animation: anim_clover 5s linear infinite;
}

.michee-p {
	width: 140px;
	transform-origin: center top;
	animation: anim_mcc 3s linear infinite;
}

@keyframes anim_mcc {
	0%, 100% {
		transform: rotate(-20deg);
	}
	50% {
		transform: rotate(20deg);
	}
}

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

/*テキスト*/
a {
	list-style: none;
	text-decoration: none;
}

.main-t {
	font-family: 'Mochiy Pop One','メイリオ','ＭＳＰゴシック','ヒラギノ角ゴ',sans-serif;
	font-size: 30px;
	font-weight: 600;
}

/*.main-t2 {
	display: inline-block;
	padding: 2px 10px 2px 10px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 50%;
	background-color: #18a55e;
	line-height: 34px;
	color: #fcfafa;
}*/

/*.main-t3 {
	font-size: 23px;
	font-weight: 600;
	color: #18a55e;
}*/

.main-t4 {
	display: inline-block;
	padding: 10px 20% 10px 20%;
	font-size: 18px;
	font-weight: 600;
	border-radius: 8px;
	background-color: #88c755;
	color: #fcfafa;
}

.main-t4:hover {
	background-color: #f8a11d;
}

.page-t {
	display: inline-block;
	width: 140px;
	line-height: 30px;
	border-radius: 8px;
	background-color: #9e9c9c;
	font-weight: 600;
	color: #fcfafa;
}

.page-t2 {
	display: inline-block;
	width: 140px;
	line-height: 30px;
	border-radius: 8px;
	background-color: #18a55e;
	font-weight: 600;
	color: #fcfafa;
}

.page-t3 {
	margin: 0 0 0 317px;
	font-weight: 600;
	color: #fcfafa;
}

.page-t4 {
	margin: 5px 0 0 317px;
	font-weight: 600;
	color: #fcfafa;
}

.page-t5 {
	margin: 0 0 0 68px;
	font-weight: 600;
	color: #fcfafa;
}

.page-t6 {
	margin: 5px 0 0 68px;
	font-weight: 600;
	color: #fcfafa;
}

.page-s {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	margin: 0 5px 0 10px;
	border-radius: 8px;
	background-color: #18a55e;
	color: #fcfafa;
}

.page-s2 {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	margin: 0 5px 0 10px;
	border-radius: 8px;
	background-color: #18a55e;
	color: #fcfafa;
}

.footer-t {
	font-weight: 600;
	color: #18a55e;
}

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

/*button*/
.b-flex {
	display: flex;
	margin: 40px 27px 60px 47px;
}

.hover {
	position: relative;
	width: 280px;
	height: 30px;
	margin-right: 34px;
	margin-left: 34px;
}

.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;
}

.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;
}

.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;
}

/*デバイス対応(幅0~959px)*/
@media screen and (max-width: 959px) {
	
	.header-b, .main {
		width: 100%;
	}

	/*メイン箇所*/
	.main-f {
		display: block;
		margin: 0 10px 0 10px;
	}

	.main-fbl {
		width: 100%;
		height: auto;
		margin: auto;
	}

	/*.main-f2 {
		width: 90%;
		margin: 15px auto 15px auto;
		height: auto;
	}*/

	/*.main-f2bl {
		width: 100px;
		height: 30px;
		margin: 0 0 0 20px;
		line-height: 30px;

	}*/

	/*.main-f2br {
		width: 80%;
		line-height: 30px;
		margin: 0 auto 0 10px;
		padding: 2px 0 0 0;
	}*/

	/*.main-f2b {
		width: 70%;
		margin: 20px auto 20px auto;
	}*/

	.main-fbr {
		margin: 30px auto 20px auto;
	}

	.main-fbl2 {
		margin: auto;
	}

	.main-fbr2 {
		margin: auto;
	}

	.prev-off {
		width: 140px;
		height: 30px;
		margin: 0 0 0 auto;

	}

	.prev-off2 {
		width: 140px;
		height: 30px;
		margin: 0 0 0 auto;

	}

	.page-t {
		display: inline-block;
		width: 110px;
		line-height: 30px;
		border-radius: 8px;
		background-color: #9e9c9c;
		font-weight: 600;
		color: #fcfafa;
	}

	.page-t2 {
		display: inline-block;
		width: 110px;
		line-height: 30px;
		border-radius: 8px;
		background-color: #18a55e;
		font-weight: 600;
		color: #fcfafa;
	}

	.page-t3 {
		margin: auto;
		padding: 0 150px 0 25px;
		font-weight: 600;
		color: #fcfafa;
	}

	.page-t4 {
		margin: auto;
		padding: 5px 150px 0 25px;
		font-weight: 600;
		color: #fcfafa;
	}

	.page-t5 {
		margin: auto;
		padding: 0 150px 0 25px;
		font-weight: 600;
		color: #fcfafa;
	}

	.page-t6 {
		margin: auto;
		padding: 5px 150px 0 25px;
		font-weight: 600;
		color: #fcfafa;
	}

	.page-n {
		width: 25px;
		height: 25px;
		margin: 0 5px 0 10px;
		line-height: 25px;
		border-radius: 8px;
		color: #fcfafa;
		background-color: #9e9c9c;
	}

	.page-n2 {
		flex-shrink: 0;
		width: 25px;
		height: 25px;
		margin: 0 5px 0 5px;
		line-height: 25px;
		border-radius: 8px;
		color: #fcfafa;
		background-color: #9e9c9c;
	}

	.page-s {
		display: inline-block;
		width: 25px;
		height: 25px;
		line-height: 25px;
		margin: 0 5px 0 5px;
		border-radius: 8px;
		background-color: #18a55e;
		color: #fcfafa;
	}

	.page-s2 {
		display: inline-block;
		width: 25px;
		height: 25px;
		line-height: 25px;
		margin: 0 5px 0 5px;
		border-radius: 8px;
		background-color: #18a55e;
		color: #fcfafa;
	}

	.prev:hover, .page-t2:hover, .page-s:hover, .page-s2:hover {
		background-color: #f8a11d;
	}

	.next {
		width: 140px;
		height: 30px;
		margin: 0 auto 0 10px;
	}

	ul {
		width: 160px;
		margin: 0 auto 20px auto;
	}

	/*tweet*/
	.tweet-b {
		width: 100%;
	}

	.tweet-f {
		display: block;
		text-align: center;
	}

	.tweet-fbl, .tweet-fbc, .tweet-fbr {
		width: 80%;
		margin: auto;
	}

	.twitter-tweet {
		margin: 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;
	}

	/*画像*/
	.michey-p {
		width: 80%;
	}

	.michee-p {
		width: 80%;
	}

	/*フォントサイズ*/
	.main-t {
		font-size: clamp(20px, 3vw, 30px);
	}

	/*.main-t2 {
		font-size: clamp(10px, 3vw, 15px);
	}*/

	/*.main-t3 {
		font-size: clamp(13px, 3vw, 23px);
	}*/

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

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

	/*ボタン箇所*/
	.b-flex {
		width: 90%;
		margin: 40px auto 60px auto;
	}
	
	.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;
	}

}

@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;
	}


}