@charset "utf-8";
	body, h1, h2, p, div, ul, li, span, i, section, main, aside, a {
		margin : 0;
		padding : 0;
	}

/* -- その他 -- */
	body {
		font-size : 62.5%;
		background : #43ba62;
	}
	#all {
		width : 100vw;
		height : 100vh;
		background : #208b55;
		
	}
	h1{
		padding : 50px 10% 0;
	}
	main {
		position : relative;
		z-index : 1;
		width : 85%;
		max-width : 1000px;
		min-width : 750px;
		margin : 0 auto 50px;
	}
	p {
		color : #333;
	}
	a {
		text-decoration : none;
	}
/* -- 指導　転移 -- */
	.all-wrap-open {
		animation: all-wrap-open 2s cubic-bezier(.4, 0, .2, 1);
	}

@keyframes all-wrap-open {
	0% {
		clip-path: circle(0 at 50% 50%);
		-webkit-clip-path: circle(0 at 50% 50%);
	}
  
	100% {
		clip-path: circle(100% at 50% 50%);
		-webkit-clip-path: circle(100% at 50% 50%);
	}
}


	.all-wrap-close {
		animation: all-wrap-close 1s cubic-bezier(.4, 0, .2, 1);
	}

@keyframes all-wrap-close {
	0% {
		clip-path: circle(100% at 50% 50%);
    	-webkit-clip-path: circle(100% at 50% 50%);
	}
  
	100% {
    	clip-path: circle(0 at 50% 50%);
    	-webkit-clip-path: circle(0 at 50% 50%);
	}
}

#svg_close {
	width : 0;
	z-index : 200;
	position : fixed;
	top : 50%;
	left : 50%;
	-webkit-transform : translate(-50%, -50%);
	transform : translate(-50%, -50%);
	
}

/* -- タブ -- */
	ul {
		display : flex;
		list-style : none;
	}
	#tab li {
		background : #ff7b7b;
		color : #fff;
		margin-top : 16px;
		width : 90px;
		height : 16px;
		padding : 12px;
		font-size : 14px;
		font-weight : bold;
		letter-spacing : 0.25em;
		text-align : center;
		transition: margin .2s, height .2s, padding .2s, border-radius 0.3s;
	}
	#tab li:first-child {
		border-radius : 25px 0 0 0;
	}
	#tab li:nth-child(2) {
		background : #f2c50a;
	}
	#tab li:nth-child(3) {
		background : #70a1e8;
	}
	#tab li:nth-child(4) {
		background : #addd52;
	}
	#tab li:last-child {
		background : #c864ed;
		border-radius : 0 25px 0 0;
	}
	#tab li:hover {
		margin : 0;
		height : 16px;
		padding : 20px 12px 20px 12px;
		border-radius : 16px 16px 0 0;
	}
	#tab .liselect:first-child {
		border-radius : 8px 8px 0 0;
	}
	#tab .liselect:last-child {
		border-radius : 8px 8px 0 0;
	}
	#tab .liselect:first-child:hover {
		border-radius : 16px 16px 0 0;
	}
	#tab .liselect:last-child:hover {
		border-radius : 16px 16px 0 0;
	}
	#tab .liselect {
		margin-top : 6px;
		height : 16px;
		padding : 14px 12px 20px 12px;
		border-radius : 8px 8px 0 0;
	}

/* -- 内容 -- */
	#backcolor {
		background : #ff7b7b;
		border-radius : 0 25px 25px 25px ;
	}
	.wrap {
		background : #ff7b7b;
		width : 90%;
		height : 100%;
		border-radius : 25px;
		padding : 5%;
		box-shadow: 0 13px 0 #b75f5f, 0 23px 0 rgba(0,0,0,.2);
	}
	#topimage {
		float : right;
		background : #eee;
		width : 310px;
		height : 310px;
		border : solid 5px #333;
		border-radius : 160px;
		background : url(../images/illust.jpg) center no-repeat;
		background-size : 100%;
	}
	aside {
		width : 320px;
		margin-left : 5%;
		display : none;
	}

/* -- 内容２ -- */
	.h2sub {
		font-size : 1.4em;
		letter-spacing : 0.2em;
		font-weight : bold;
	}
	h2 {
		color : #333;
		font-size : 5em;
		letter-spacing : 0.05em;
		margin-bottom : 8%;
		font-family: 'arial black';
	}
	.content {
		font-size : 1.75em;
		letter-spacing : 0.25em;
		line-height : 2.25em;
		font-weight : bold;
		width : 320px;
		padding-bottom : 8%;
	}
	.button {
		background : #333;
		border : solid 4px #333;
		color : #fff;
		width : 250px;
		height : 20px;
		margin : auto;
		border-radius : 25px;
		padding : 15px;
		font-size : 1.5em;
		letter-spacing : 0.25em;
		font-weight : bold;
		text-align : center;
		box-shadow: 0 6px 0 #777, 0 12px 0 rgba(0,0,0,.2);
		transition : background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
	}
	.button:hover {
		background : #ddd;
		color : #333;
		border : solid 4px #333;
		box-shadow: 0 3px 0 #ddd, 0 6px 0 rgba(0,0,0,.2);
		transform: translateY(3px);
	}
	.button:active {
		background: #fff;
		box-shadow: 0 0 0 #bbb, 0 0 0 rgba(0,0,0,.2);
		transform: translateY(6px);
	}

/* -- 背景 -- */
.circles{
	z-index : 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.circles li{
    position: absolute;
    bottom: -160px;
    display: block;
    list-style: none;
    animation: animate 25s linear infinite;
}
.circles li img{
	opacity : 0.2;
}
.shape{
    background: rgba(255, 255, 255, 0.2);
}
.circles li:nth-child(1){
    left: 10%;
    width: 130px;
    height: 130px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 90%;
    width: 50px;
    height: 50px;
    animation-delay: 3s;
    animation-duration: 15s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 40px;
    height: 40px;
    animation-delay: 7s;
    animation-duration: 20s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
	border-radius: 50%;
    left: 65%;
    width: 40px;
    height: 40px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
	border-radius: 15%;
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
	border-radius: 15%;
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
	border-radius: 15%;
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 5s;
}

.circles li:nth-child(9){
	border-radius: 15%;
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
	border-radius: 50%;
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 10s;
}

.circles li:nth-child(11){
	border-radius: 50%;
    left: 5%;
    width: 70px;
    height: 70px;
    animation-delay: 6s;
    animation-duration: 10s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
    }
}