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

/* -- その他 -- */
	body {
		font-size : 62.5%;
		background : #43ba62;
	}
	#all {
		position : fixed;
		width : 100vw;
		height : 100vh;
		background : #208b55;
		
	}
	main {
		position : relative;
		z-index : 1;
		width : 85%;
		max-width : 1000px;
		min-width : 800px;
		margin : 0px auto 0;
	}
	p {
		color : #333;
	}
	a {
		text-decoration : none;
		color : #fff;
	}
	#logo {
		position : absolute;
		bottom : 0;
		left : calc(90% - 200px);
	}
/* -- 指導　転移 -- */
	.all-wrap-open {
		animation: all-wrap-open 2.5s 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%);
	}

	50% {
		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%);
	
}
/* -- タブ -- */
	#top {
		background : #fff;
		color : #000;
		margin-left : calc(100% - 180px);
		margin-bottom : 16px;
		width : 120px;
		height : 16px;
		padding : 12px;
		margin-bottom : 23px;
		font-size : 14px;
		font-weight : bold;
		letter-spacing : 0.25em;
		border-top : solid 0 #c98518;
		text-align : center;
		border-radius : 0 0 12px 12px;
		box-shadow: 0 13px 0 #ddd, 0 23px 0 rgba(0,0,0,.2);
		transition: color .3s, background .3s, box-shadow .3s, margin-bottom 0.3s, border-width 0.3s;
	}
	#top:hover {
		border-width : 6px ;
		background: #eee;
		box-shadow: 0 7px 0 #ddd, 0 14px 0 rgba(0,0,0,.2);
		margin-bottom : 17px;
	}
	#top:active {
		border-width : 10px ;
		background: #eee;
		box-shadow: 0 3px 0 #bbb, 0 6px 0 rgba(0,0,0,.2);
		transform: translateY(0px);
		margin-bottom : 13px;
	}

/* -- 内容 -- */

	#wrap {
		background : #f2c50a;
		width : calc(96% - 14px);
		height : 100%;
		margin-top : 15px;
		padding : 2%;
		border : solid 7px #fff;
		border-radius : 25px;
		box-shadow: 0 13px 0 #ddac0e, 0 23px 0 rgba(0,0,0,.2);
	}
	#h1sub {
		text-align : center;
		font-size : 1.4em;
		letter-spacing : 0.5em;
		font-weight : bold;
	}
	h1 {
		text-align : center;
		color : #333;
		font-size : 4em;
		letter-spacing : 0.05em;
		font-family: 'arial black';
	}

/* -- モーダル -- */

.black_bg {
	display : none;
	z-index : 100;
	position : fixed;
	top : 0;
	left : 0;
	background : rgba(0,0,0,0.5);
	width : 100vw;
	height : 100vh;
}
.text_img {
	display : none;
	position : fixed;
   top: calc(50% - 30px);
   left: 50%;
	max-width : 900px;
	border-radius : 50px;
	background : #fff;
	border : solid 25px #f2c50a;
	width : 50vw;
	box-shadow: 0 13px 0 #ddac0e, 0 23px 0 rgba(0,0,0,.2);
  -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}
h2 {
	padding-top : 7px;
	text-align : center;
	color : #333;
	font-size : 3em;
	letter-spacing : 0.1em;
}
.mor_img {
	text-align : center;
	width : 100%;
}
.mor_tool {
	color : #777;
	text-align :right;
	font-weight : bold;
	letter-spacing : 0.1em;
	font-size : 1em;
	margin-right : 5%;
}
.mor_text {
	font-weight : bold;
	letter-spacing : 0.1em;
	font-size : 1.6em;
	width :90%;
	margin : 0 5% 1.2em;
}

/* -- 画像 -- */
#gallery{
	display : grid;
	grid-template-columns : 1fr 1fr 1fr;
	column-gap : 8vw;
	margin : 0 auto;
	width : 80%;
	height : 70vh;
	min-width : calc(540px + 16vw);
}
section {

	background : #fff;
	margin-top : 5px;
	width : calc(100% - 10px);
	height : calc(80% - 10px);
	overflow : hidden;
	border-radius : 25px;
	border : solid 5px #fff;
	transition : border-color 0.3s;
	
}
section img{
   position: relative;
   top: calc(50% - 30px);
   left: 50%;
  -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}
section p{
	z-index : 11;
	position: relative;
	top :  80%;
	left : 0;
	color : #fff;
	font-weight : bold;
	font-size : 1.2em;
	background :rgba(0,0,0,0.3);
	width : 100%;
	padding : 7px 2em;
}

/* -- 背景 -- */
.circles{
	z-index : -100;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	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;
    }
}