@charset "shift_jis";

:root {
	--color-txt:#333;
	--color-txt-wh:#fff;
	--color-red:#d81221;
	--color-yel:#f6d81d;
	--color-mst-yel:#ffde47;
	--color-gre:#0d9758;
	--color-dark-gre:#004e36;
	--color-org:#f27802;
	--color-bg:#fff;
	--color-bg-gre:#00b047;
	--pcWidth:700px;
	--spWidth:calc(90%);
}

/* reset */
a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,
dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,
h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,input,kbd,textarea,
label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,
table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{box-sizing:border-box;margin:0;padding:0;word-wrap:break-word;overflow-wrap:break-word;}
h1,h2,h3,h4,h5,h6{font-size: 1em;}
table{border-collapse: collapse;}
ol,ul{list-style:none;}
img,picture{display: block;max-width: 100%;height: auto;margin: auto;}
a{color: var(--color-mst-yel);text-decoration: none;}
a:hover{filter: brightness(1.1);}
a .fa-chevron-right{padding-left: .8em;}

/* base */
body{
	color: var(--color-txt-wh);background: var(--color-bg-gre);
	font-size: 16px;line-height: 1.6;
	font-family: 'Noto Sans JP', sans-serif;
	width: 100%;position: relative;overflow-x: hidden;
}
main, .header-box, .footer-box, .mainvisual-box{width: var(--spWidth);margin: auto;}
header .logo a{
	display: flex;
	color: var(--color-txt-wh);
	align-items: center;
	padding: 5px 0;
	gap: 0.4em;
	justify-content: center;
}
header .logo img{
	margin:0;
}
.mainvisual{
	background-color: #C7F6A2;
	background-image: url("img/greenback.svg");
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	width: 100%;
	display: flex;
	align-items: center;
}
.mainvisual-box img{
	width: 100%;
	animation: bounceIn 1.5s ease-out; /* アニ撈[ションの適用 */
	margin: 20px 0;
}
  /* Keyframes for the animation */
  @keyframes bounceIn {
	0%, 100% {
	  transform: scale(1); /* 揄期サイズ */
	}
	40% {
	  transform: scale(1.2); /* 大きくなる部分 */
	}
	80% {
	  transform: scale(0.8); /* 挂む部分 */
	}
  }
.ranking{
	font-size: 2em;
	display: block;
	color: var(--color-mst-yel);
}
.unregisterd{
	border: 2px solid var(--color-txt-wh);
	margin-top: 2em;
	padding: 1em;
}
section{
	margin:120px 0;
}
section h2{
	font-size: 2em;
}
section h3{
	font-size: 1.5em;
}
footer{
	background: var(--color-dark-gre);
	text-align: center;
}
footer a{
	color: var(--color-bg);
}
footer .menuLink {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
footer .menuLink li {
	width: 30%; /* Display in 3 columns */
	margin: 2em 0;
	font-size: .9em;
}
footer .menuLink li img{
	padding: 0 10%;
}
footer .pageLink {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-top: 1.5em;
}
footer .pageLink li {
	width: 100%; /* Display in 1 column */
	margin-bottom: 1.5em;
} 
footer .pageLink a {
	padding: 1.5em;
	display: block;
}
.text-center{
	text-align: center;
}
.font-big{
	font-size: 1.5em;
	font-weight: bold;
}

