* {
    margin:0;
    padding: 0;
}
img {
    max-width: 100%;
    
    height: auto;
}
body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
/*    background-color: #f5f5f5;*/
/*
    display: flex;
    justify-content: center;
*/
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

header {
    background-color: #FAED00;
    color: #E3007F;
    padding: 20px;
    text-align: center;
    border-radius: 5px 5px 0 0;
    position: relative;
}
header .circle_bg {
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
}
header .circle_bg .inner {
    max-width: calc( 100vw - 40px );
    margin: 5% auto 0;
}
header .circle_bg .inner:after {
    border-radius: 50%;
    background: url(./assets/images/26277928_s.jpg) no-repeat center / cover;
    content: "";
    display: block;
    padding-top: 100%;
    width: calc( 100% - 40px );
}
header .parts {
    position: absolute;
    z-index: 0;
    animation: Anime 2s ease-in-out infinite;
}
@keyframes Anime{
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }

}
header .parts:nth-of-type(1) {
    top: 10%;
    left: 12%;
    animation-delay: 0.2s;
}
header .parts:nth-of-type(2) {
    top: 40%;
    left: 5%;
    animation-delay: 1s;
}
header .parts:nth-of-type(3) {
    top: 70%;
    left: 10%;
    animation-delay: 0.4s;
}
header .parts:nth-of-type(4) {
    top: 8%;
    right: 15%;
    animation-delay: 0.8s;
}
header .parts:nth-of-type(5) {
    top: 25%;
    right: 5%;
    animation-delay: 1s;
}
header .parts:nth-of-type(6) {
    top: 60%;
    right: 9%;
    animation-delay: 0.1s;
}

header h1 {
    margin: 0;
    font-size: 2em;
    position: relative;
    z-index: 1;
}
header p {
    position: relative;
    z-index: 1;
}


main {
    padding: 20px;
    background: linear-gradient(to bottom, #00B1EB 0%, #79BECD 100%);
}
main h2 {
    color: #E3007F;
    font-size: 1.5em;
    margin: 50px 0 20px;
    text-align: center;
    font-size: 180%;
}
main h2:not(.disp) {
    position: fixed;
    top:-100px;
    opacity: 0;
}

table ul {
    list-style-type: none;
}
table ul li {
    margin-left: -1em;
}
table ul li {
    padding-left: 1em;
}

footer {
    background-color: #222a35;
    color: #ffffff;
    text-align: center;
    padding: 20px;
    border-radius: 0 0 5px 5px;
}

button {
    background-color: #E3007F;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 1em;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #ff4081;
}


@media all and ( min-width: 750px ) {
	header .circle_bg .inner {
		max-width: 680px;
	}
	header .circle_bg .inner:after {
	    width: 650px;
	}
}
@media all and ( min-width: 1500px ) {
	header .parts:nth-of-type(1) {
	    top: 10%;
	    left: 20%;
	    animation-delay: 0.2s;
	}
	header .parts:nth-of-type(2) {
	    top: 40%;
	    left: 13%;
	    animation-delay: 1s;
	}
	header .parts:nth-of-type(3) {
	    top: 70%;
	    left: 18%;
	    animation-delay: 0.4s;
	}
	header .parts:nth-of-type(4) {
	    top: 8%;
	    right: 23%;
	    animation-delay: 0.8s;
	}
	header .parts:nth-of-type(5) {
	    top: 25%;
	    right: 13%;
	    animation-delay: 1s;
	}
	header .parts:nth-of-type(6) {
	    top: 60%;
	    right: 17%;
	    animation-delay: 0.1s;
	}
}