@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Noto+Sans+JP:wght@100..900&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
	color: 111;
}
*{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "webfont", "メイリオ", sans-serif;
	line-height: 1.7em;
}
@media all and (-ms-high-contrast:none) {
	* {
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "webfont", "メイリオ", sans-serif;
	}
}

.lilita {
  font-family: "Lilita One", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.lilita.regular { font-weight: 400; }

.noto {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.noto.thin { font-weight: 100; }
.noto.extralight { font-weight: 200; }
.noto.light { font-weight: 300; }
.noto.regular { font-weight: 400; }
.noto.medium { font-weight: 500; }
.noto.semibold { font-weight: 600; }
.noto.bold { font-weight: 700; }
.noto.extrabold { font-weight: 800; }
.noto.black { font-weight: 900; }

* {
  position:relative;
  box-sizing:border-box;
}


body, html {
	height: 105vh; /*iOSスクロール用*/
	margin: 0;
	
    -ms-overflow-style: none;
    scrollbar-width: none;
	
	background-color: #ffd750;
}
body {
	margin: 0;
	/*background: #1d1d1d;*/
	/*overflow: scroll;*/
}
main{
	margin: 0;
	height: 105vh; /*iOSスクロール用*/
}
html.yoko{
	height: 100%;
	overflow: hidden;
}
html.yoko body{
	height: 100%;
	overflow: hidden;
	top: 0!important;
}
 html.yoko main{
	height: 100%;
	overflow: hidden;
}


.message{
	display: none;
	width: 100%;
	height: 100%;
	background-color: #ffd750;
	position: fixed;
	z-index: -1;
}
html.yoko .message{
	display: block;
	z-index: 9999;
}
.message .main{
	max-height: 100%;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	text-align: center;
	z-index: 500;
}
.messagemessage .main .title-txt1{
	color: #111;
	font-size: 36px;
	line-height: 1;
}
.yoko .yoko .main .title-txt2{
	color: #7d7b73;
	font-size: 30px;
}

.scroll{
	position: fixed;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	z-index: 9800;
	transition: opacity 0.2s;
}
.scroll.active{
	opacity: 1;
}


/* NAV */
@media screen and (min-width: 769px) {
	.nav{
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 50%;
		right: 10px;
		transform: translate(-50%, -50%);
		z-index: 9500;
		width: 40px;
		user-select: none;
	}
	.nav *{
		user-select: none;
	}
	.nav .nav_one{
		position: relative;
		display: flex;
		justify-content: center;
		padding: 0;
		margin: 5px 0;
		width: 40px;
		cursor: pointer;
	}
	.nav .nav_one.active{
		cursor: default;
	}
	.nav .nav_one .txt{
		position: absolute;
		left: -100%;
		right: -100%;
		margin: auto;
		text-align: center;
		top: 50%;
		transform: translateY(-50%);
		opacity: 0;
		font-size: 0;
		transition: opacity 0.2s, font-size 0.2s;
	}
	.nav .nav_one .bg{
		position: relative;
		display: inline-block;
		border-radius: 50%;
		width: 10px;
		height: 10px;
		margin: 0;
		padding: 0;
		vertical-align: bottom;
		transform-origin: center center;
		border: solid 1px #ccc;
		background-color: #ccc;
		transition: border 0.2s, background-color 0.2s, width 0.2s, height 0.2s;
	}
	.nav .nav_one:hover .txt{
		opacity: 1;
		font-size: 16px;
	}
	.nav .nav_one:hover .bg{
		width: 40px;
		height: 40px;
		border: solid 1px #000;
		background-color: transparent;
	}
	.nav .nav_one.active .txt{
		opacity: 1;
		font-size: 16px;
	}
	.nav .nav_one.active .bg{
		width: 40px;
		height: 40px;
		border: solid 1px #000;
		background-color: transparent;
	}
}
@media screen and (max-width: 768px) {
	.nav{
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 50%;
		right: 10px;
		transform: translate(0%, -50%);
		z-index: 9500;
		width: 30px;
		user-select: none;
	}
	.nav *{
		user-select: none;
	}
	.nav .nav_one{
		position: relative;
		display: flex;
		justify-content: center;
		padding: 0;
		margin: 5px 0;
		width: 30px;
		cursor: pointer;
	}
	.nav .nav_one.active{
		cursor: default;
	}
	.nav .nav_one .txt{
		position: absolute;
		left: -100%;
		right: -100%;
		margin: auto;
		text-align: center;
		top: 50%;
		transform: translateY(-50%);
		opacity: 0;
		font-size: 0;
		transition: opacity 0.2s, font-size 0.2s;
	}
	.nav .nav_one .bg{
		position: relative;
		display: inline-block;
		border-radius: 50%;
		width: 10px;
		height: 10px;
		margin: 0;
		padding: 0;
		vertical-align: bottom;
		transform-origin: center center;
		border: solid 1px #ccc;
		background-color: #ccc;
		transition: border 0.2s, background-color 0.2s, width 0.2s, height 0.2s;
	}
	.nav .nav_one.active .txt{
		opacity: 1;
		font-size: 14px;
	}
	.nav .nav_one.active .bg{
		width: 30px;
		height: 30px;
		border: solid 1px #000;
		background-color: transparent;
	}
}
/* NAV */

@media screen and (min-width: 769px) {
	.page{
		z-index: 2000;
	}
	.page-1{
		width: 100%;
		min-height: 100vh;
		position: relative;
		background-color: #ffd750;
		text-align: center;
	}
	.page-1 .top{
		width: 100%;
		text-align: center;
		padding: 50px 0 50px 0;
	}
	.page-1 .image1{
		width: 100%;
		padding: 150px 0 150px 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.page-1 .image1 img, .page-1 .image1 svg{
		width: 50%;
		margin: 0 auto;
		vertical-align: bottom;
	}
    #svg-animation .st0{
        fill:none;
        stroke:#FFFFFF;
        stroke-width:60;
        stroke-linecap:round;
        stroke-linejoin:round;
        stroke-miterlimit:10;
        stroke-dasharray: 1500; /* この行を追加 */
        stroke-dashoffset:1500; /* この行を追加 */
    }
}

@media screen and (max-width: 768px) {
	.page-1{
		width: 100%;
		min-height: 100vh;
		position: relative;
		background-color: #ffd750;
		text-align: center;
	}
	.page-1 .top{
		width: 100%;
		text-align: center;
		padding: 5vw 0 5vw 0;
	}
	.page-1 .top img{
		width: 40vw;
	}
	.page-1 .image1{
		width: 100%;
		position: relative;
		padding: 50% 0 50% 0;
	}
	.page-1 .image1 img, .page-1 .image1 svg{
		width: 70%;
		margin: 0 auto;
		vertical-align: bottom;
	}
    #svg-animation .st0{
        fill:none;
        stroke:#FFFFFF;
        stroke-width:60;
        stroke-linecap:round;
        stroke-linejoin:round;
        stroke-miterlimit:10;
        stroke-dasharray: 1500; /* この行を追加 */
        stroke-dashoffset:1500; /* この行を追加 */
    }
}
.page-2{
	width: 100%;
	padding: 0 0 200px 0;
	position: relative;
	background-color: #ffd750;
	text-align: center;
}
.page-2 span{
	display: block;
	width: 90%;
	margin: 0 auto;
}
@media screen and (max-width: 768px) {
	.page-2{
		width: 100%;
		padding: 0 0 14vw 0;
		position: relative;
		background-color: #ffd750;
		text-align: center;
	}
	.page-2 span{
		display: block;
		width: 90%;
		margin: 0 auto;
	}
}


@media screen and (min-width: 769px) {
	.page-3{
		overflow: hidden;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: #ffd750;
		z-index: 1000;
	}
	.page-3 .main{
		max-height: 100%;
		overflow: hidden;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		position: absolute;
		z-index: 500;
	}
	.page-3 .main .title{
		color: #32c8b4;
		font-size: 170px;
		line-height: 1;
		text-align: center;
	}
	.page-3 .main .title-txt1{
		color: #111;
		font-size: 36px;
		line-height: 1;
		margin: 30px 0 0 0;
		text-align: center;
	}
	.page-3 .main .title-txt2{
		color: #7d7b73;
		font-size: 30px;
		text-align: center;
	}
	.page-3 .main .title-txt3{
		color: #111;
		font-size: 20px;
		margin: 30px 0 0 0;
		text-align: center;
	}
	.page-3 .main .title-txt4{
		color: #111;
		font-size: 20px;
		text-align: center;
	}
	.page-3 .bg{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.page-3 .bg .bgimg1{
		width: min(30%, 400px);
		position: absolute;
		top: 10%;
    	left: 18%;
	}
	.page-3 .bg .bgimg2{
		width: min(25%, 300px);
		position: absolute;
		bottom: 10%;
		right: 20%;
	}
}
@media screen and (max-width: 768px) {
	.page-3{
		overflow: hidden;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: #ffd750;
		z-index: 1000;
	}
	.page-3 .main{
		max-height: 100%;
		overflow: hidden;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		position: absolute;
		z-index: 500;
		width: 100%;
    	text-align: center;
	}
	.page-3 .main .title{
		color: #32c8b4;
		font-size: 10vh;
		line-height: 1;
	}
	.page-3 .main .title-txt1{
		color: #111;
		font-size: 4vh;
		line-height: 1;
		margin: 3vh 0 0 0;
	}
	.page-3 .main .title-txt2{
		color: #7d7b73;
		font-size: 3vh;
		margin: 1vh 0 0 0;
    	line-height: 1.4;
	}
	.page-3 .main .title-txt3{
		color: #111;
		font-size: 2vh;
		margin: 4vh 0 0 0;
	}
	.page-3 .main .title-txt4{
		color: #111;
		font-size: 2vh;
		margin: 1vh 0 0 0;
	}
	.page-3 .bg{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.page-3 .bg .bgimg1{
		width: min(30%, 400px);
		position: absolute;
		top: 10%;
    	left: 20%;
	}
	.page-3 .bg .bgimg2{
		width: min(25%, 300px);
		position: absolute;
		bottom: 10%;
		right: 20%;
	}
}



@media screen and (min-width: 769px) {
	.page-4{
		overflow: hidden;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: #ffd750;
		z-index: 1000;
	}
	.page-4 .main{
		width: 70%;
		max-height: 100%;
		overflow: hidden;
		top: 8%;
		left: 50%;
		transform: translateX(-50%);
		position: absolute;
		z-index: 500;
		text-align: left;
	}
	.page-4 .main .title{
		color: #32c8b4;
		font-size: 120px;
		line-height: 1;
	}
	.page-4 .main .title-txt1{
		color: #111;
		font-size: 36px;
		line-height: 1;
		margin: 30px 0 0 0;
	}
	.page-4 .main .title-txt2{
		color: #7d7b73;
		font-size: 30px;
		margin: 10px 0 0 0;
    	line-height: 1.4;
	}
	.page-4 .main .title-txt3{
		width: 50%;
		color: #111;
		font-size: 16px;
		margin: 40px 0 0 0;
	}
	.page-4 .main .title-txt4{
		width: 50%;
		color: #111;
		font-size: 16px;
		margin: 10px 0 0 0;
	}
	.page-4 .bg{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.page-4 .bg .mainbg{
		width: min(53%, 800px);
		position: absolute;
		bottom: 7%;
		right: 10%;
		z-index: 99;
	}
	.page-4 .bg .bgimg0{
		width: 100%;
		position: relative;
		z-index: 99;
	}
	.page-4 .bg .bgimg1{
		width: min(30%, 250px);
		position: absolute;
		top: -26%;
		right: 17%;
		z-index: 95;
	}
	.page-4 .bg .bgimg2{
		width: min(25%, 150px);
		position: absolute;
		top: -3%;
		left: 7%;
		z-index: 95;
	}
	.page-4 .bg .mainbg::after{
		content: "";
		display: block;
		position: absolute;
		width: 70%;
		height: 76px;
		background-color: #7b7b7b;
		left: 50%;
		bottom: 10%;
		transform: translateX(-50%);
		z-index: 90;
		filter: blur(40px);
		opacity: 0.7;
	}
}
@media screen and (max-width: 768px) {
	.page-4{
		overflow: hidden;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: #ffd750;
		z-index: 1000;
	}
	.page-4 .main{
		width: 81%;
		max-height: 100%;
		overflow: hidden;
		top: 5%;
		left: 5%;
		transform: translateX(0);
		position: absolute;
		z-index: 500;
		text-align: left;
	}
	.page-4 .main .title{
		color: #32c8b4;
		font-size: 8vh;
		line-height: 1;
	}
	.page-4 .main .title-txt1{
		color: #111;
		font-size: 3vh;
		line-height: 1;
		margin: 3vh 0 0 0;
	}
	.page-4 .main .title-txt2{
		color: #7d7b73;
		font-size: 2.6vh;
		margin: 1vh 0 0 0;
    	line-height: 1.4;
	}
	.page-4 .main .title-txt3{
		width: 100%;
		color: #111;
		font-size: 2vh;
		margin: 4vh 0 0 0;
	}
	.page-4 .main .title-txt4{
		width: 100%;
		color: #111;
		font-size: 2vh;
		margin: 1vh 0 0 0;
	}
	.page-4 .bg{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.page-4 .bg .mainbg{
		width: 74%;
		position: absolute;
		bottom: 13vh;
		right: 10%;
		z-index: 99;
	}
	.page-4 .bg .bgimg0{
		width: 100%;
		position: relative;
		z-index: 99;
	}
	.page-4 .bg .bgimg1{
		width: min(30%, 250px);
		position: absolute;
		top: -26%;
		right: 17%;
		z-index: 95;
	}
	.page-4 .bg .bgimg2{
		width: min(25%, 150px);
		position: absolute;
		top: -3%;
		left: 7%;
		z-index: 95;
	}
	.page-4 .bg .mainbg::after{
		content: "";
		display: block;
		position: absolute;
		width: 70%;
		height: 76px;
		background-color: #7b7b7b;
		left: 50%;
		bottom: 10%;
		transform: translateX(-50%);
		z-index: 90;
		filter: blur(40px);
		opacity: 0.7;
	}
}



@media screen and (min-width: 769px) {
	.page-5{
		overflow: hidden;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: #ffd750;
		z-index: 1000;
	}
	.page-5 .main{
		width: 70%;
		max-height: 100%;
		overflow: hidden;
		top: 8%;
		left: 50%;
		transform: translateX(-50%);
		position: absolute;
		z-index: 500;
		text-align: left;
	}
	.page-5 .main .title{
		color: #32c8b4;
		font-size: 120px;
		line-height: 1;
	}
	.page-5 .main .title-txt1{
		color: #111;
		font-size: 36px;
		line-height: 1;
		margin: 30px 0 0 0;
	}
	.page-5 .main .title-txt2{
		color: #7d7b73;
		font-size: 30px;
		margin: 10px 0 0 0;
    	line-height: 1.4;
	}
	.page-5 .main .title-txt3{
		width: 50%;
		color: #111;
		font-size: 16px;
		margin: 40px 0 0 0;
	}
	.page-5 .main .title-txt4{
		width: 50%;
		color: #111;
		font-size: 16px;
		margin: 10px 0 0 0;
	}
	.page-5 .bg{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.page-5 .bg .mainbg{
		width: min(67%, 1000px);
		position: absolute;
		bottom: 7%;
		right: 10%;
		z-index: 99;
	}
	.page-5 .bg .bgimg0{
		width: 100%;
		position: relative;
		z-index: 99;
	}
	.page-5 .bg .bgimg1{
		width: min(15%, 150px);
		position: absolute;
		top: -26px;
		left: 1%;
		z-index: 95;
	}
	.page-5 .bg .bgimg2{
		width: min(24%, 250px);
		position: absolute;
		top: -15%;
		left: 36%;
		z-index: 95;
	}
	.page-5 .bg .bgimg3{
		width: min(10%, 100px);
		position: absolute;
		top: -18%;
		right: 36%;
		z-index: 95;
	}
	.page-5 .bg .bgimg4{
		width: min(15%, 150px);
		position: absolute;
		top: -9%;
		right: 16%;
		z-index: 95;
	}
	.page-5 .bg .mainbg::after{
		content: "";
		display: block;
		position: absolute;
		width: 70%;
		height: 76px;
		background-color: #7b7b7b;
		left: 50%;
		bottom: 10%;
		transform: translateX(-50%);
		z-index: 90;
		filter: blur(40px);
		opacity: 0.7;
	}
}
@media screen and (max-width: 768px) {
	.page-5{
		overflow: hidden;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: #ffd750;
		z-index: 1000;
	}
	.page-5 .main{
		width: 81%;
		max-height: 100%;
		overflow: hidden;
		top: 5%;
		left: 5%;
		transform: translateX(0);
		position: absolute;
		z-index: 500;
		text-align: left;
	}
	.page-5 .main .title{
		color: #32c8b4;
		font-size: 8vh;
		line-height: 1;
	}
	.page-5 .main .title-txt1{
		color: #111;
		font-size: 3vh;
		line-height: 1;
		margin: 3vh 0 0 0;
	}
	.page-5 .main .title-txt2{
		color: #7d7b73;
		font-size: 2.6vh;
		margin: 1vh 0 0 0;
    	line-height: 1.4;
	}
	.page-5 .main .title-txt3{
		width: 100%;
		color: #111;
		font-size: 2vh;
		margin: 4vh 0 0 0;
	}
	.page-5 .main .title-txt4{
		width: 100%;
		color: #111;
		font-size: 2vh;
		margin: 1vh 0 0 0;
	}
	.page-5 .bg{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.page-5 .bg .mainbg{
		width: 74%;
		position: absolute;
		bottom: 13vh;
		right: 10%;
		z-index: 99;
	}
	.page-5 .bg .bgimg0{
		width: 100%;
		position: relative;
		z-index: 99;
	}
	.page-5 .bg .bgimg1{
		width: min(15%, 150px);
		position: absolute;
		top: -26px;
		left: 1%;
		z-index: 95;
	}
	.page-5 .bg .bgimg2{
		width: min(24%, 250px);
		position: absolute;
		top: -15%;
		left: 36%;
		z-index: 95;
	}
	.page-5 .bg .bgimg3{
		width: min(10%, 100px);
		position: absolute;
		top: -18%;
		right: 36%;
		z-index: 95;
	}
	.page-5 .bg .bgimg4{
		width: min(15%, 150px);
		position: absolute;
		top: -9%;
		right: 16%;
		z-index: 95;
	}
	.page-5 .bg .mainbg::after{
		content: "";
		display: block;
		position: absolute;
		width: 70%;
		height: 76px;
		background-color: #7b7b7b;
		left: 50%;
		bottom: 10%;
		transform: translateX(-50%);
		z-index: 90;
		filter: blur(40px);
		opacity: 0.7;
	}
}




@media screen and (min-width: 769px) {
	.page-6{
		overflow: hidden;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: #ffd750;
		z-index: 1000;
	}
	.page-6 .main{
		width: 70%;
		max-height: 100%;
		overflow: hidden;
		top: 8%;
		left: 50%;
		transform: translateX(-50%);
		position: absolute;
		z-index: 500;
		text-align: left;
	}
	.page-6 .main .title{
		color: #32c8b4;
		font-size: 120px;
		line-height: 1;
	}
	.page-6 .main .title-txt1{
		color: #111;
		font-size: 36px;
		line-height: 1;
		margin: 30px 0 0 0;
	}
	.page-6 .main .title-txt2{
		color: #7d7b73;
		font-size: 30px;
		margin: 10px 0 0 0;
    	line-height: 1.4;
	}
	.page-6 .main .title-txt3{
		width: 50%;
		color: #111;
		font-size: 16px;
		margin: 40px 0 0 0;
	}
	.page-6 .main .title-txt4{
		width: 50%;
		color: #111;
		font-size: 16px;
		margin: 10px 0 0 0;
	}
	.page-6 .bg{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.page-6 .bg .mainbg{
		width: min(53%, 800px);
		position: absolute;
		bottom: 7%;
		right: 10%;
		z-index: 99;
	}
	.page-6 .bg .bgimg0{
		width: 100%;
		position: relative;
		z-index: 99;
	}
	.page-6 .bg .bgimg1{
		width: min(20%, 150px);
		position: absolute;
		top: -24%;
		left: 12%;
		z-index: 95;
	}
	.page-6 .bg .bgimg2{
		width: min(39%, 300px);
		position: absolute;
		top: -25%;
		right: 10%;
		z-index: 95;
	}
	.page-6 .bg .mainbg::after{
		content: "";
		display: block;
		position: absolute;
		width: 70%;
		height: 76px;
		background-color: #7b7b7b;
		left: 50%;
		bottom: 10%;
		transform: translateX(-50%);
		z-index: 90;
		filter: blur(40px);
		opacity: 0.7;
	}
}
@media screen and (max-width: 768px) {
	.page-6{
		overflow: hidden;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: #ffd750;
		z-index: 1000;
	}
	.page-6 .main{
		width: 81%;
		max-height: 100%;
		overflow: hidden;
		top: 5%;
		left: 5%;
		transform: translateX(0);
		position: absolute;
		z-index: 500;
		text-align: left;
	}
	.page-6 .main .title{
		color: #32c8b4;
		font-size: 8vh;
		line-height: 1;
	}
	.page-6 .main .title-txt1{
		color: #111;
		font-size: 3vh;
		line-height: 1;
		margin: 3vh 0 0 0;
	}
	.page-6 .main .title-txt2{
		color: #7d7b73;
		font-size: 2.6vh;
		margin: 1vh 0 0 0;
    	line-height: 1.4;
	}
	.page-6 .main .title-txt3{
		width: 100%;
		color: #111;
		font-size: 2vh;
		margin: 4vh 0 0 0;
	}
	.page-6 .main .title-txt4{
		width: 100%;
		color: #111;
		font-size: 2vh;
		margin: 1vh 0 0 0;
	}
	.page-6 .bg{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.page-6 .bg .mainbg{
		width: 74%;
		position: absolute;
		bottom: 13vh;
		right: 10%;
		z-index: 99;
	}
	.page-6 .bg .bgimg0{
		width: 100%;
		position: relative;
		z-index: 99;
	}
	.page-6 .bg .bgimg1{
		width: min(20%, 150px);
		position: absolute;
		top: -24%;
		left: 12%;
		z-index: 95;
	}
	.page-6 .bg .bgimg2{
		width: min(39%, 300px);
		position: absolute;
		top: -25%;
		right: 10%;
		z-index: 95;
	}
	.page-6 .bg .mainbg::after{
		content: "";
		display: block;
		position: absolute;
		width: 70%;
		height: 76px;
		background-color: #7b7b7b;
		left: 50%;
		bottom: 10%;
		transform: translateX(-50%);
		z-index: 90;
		filter: blur(40px);
		opacity: 0.7;
	}
}




@media screen and (min-width: 769px) {
	.page-7{
		overflow: hidden;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: #ffd750;
		z-index: 1000;
	}
	.page-7 .main{
		width: 70%;
		max-height: 100%;
		overflow: hidden;
		top: 8%;
		left: 50%;
		transform: translateX(-50%);
		position: absolute;
		z-index: 500;
		text-align: left;
	}
	.page-7 .main .title{
		color: #32c8b4;
		font-size: 120px;
		line-height: 1;
	}
	.page-7 .main .title-txt1{
		color: #111;
		font-size: 36px;
		line-height: 1;
		margin: 30px 0 0 0;
	}
	.page-7 .main .title-txt2{
		color: #7d7b73;
		font-size: 30px;
		margin: 10px 0 0 0;
    	line-height: 1.4;
	}
	.page-7 .main .title-txt3{
		width: 50%;
		color: #111;
		font-size: 16px;
		margin: 40px 0 0 0;
	}
	.page-7 .main .title-txt4{
		width: 50%;
		color: #111;
		font-size: 16px;
		margin: 10px 0 0 0;
	}
	.page-7 .bg{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.page-7 .bg .mainbg{
		width: min(53%, 800px);
		position: absolute;
		bottom: 7%;
		right: 10%;
		z-index: 99;
	}
	.page-7 .bg .bgimg0{
		width: 100%;
		position: relative;
		z-index: 99;
	}
	.page-7 .bg .bgimg1{
		width: min(31%, 200px);
		position: absolute;
		top: -80px;
		left: 2%;
		z-index: 95;
	}
	.page-7 .bg .bgimg2{
		width: min(24%, 250px);
		position: absolute;
		top: -23%;
		left: 38%;
		z-index: 95;
	}
	.page-7 .bg .bgimg3{
		width: min(24%, 250px);
		position: absolute;
		top: -12%;
		right: 7%;
		z-index: 95;
	}
	.page-7 .bg .mainbg::after{
		content: "";
		display: block;
		position: absolute;
		width: 70%;
		height: 76px;
		background-color: #7b7b7b;
		left: 50%;
		bottom: 10%;
		transform: translateX(-50%);
		z-index: 90;
		filter: blur(40px);
		opacity: 0.7;
	}
}
@media screen and (max-width: 768px) {
	.page-7{
		overflow: hidden;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: #ffd750;
		z-index: 1000;
	}
	.page-7 .main{
		width: 81%;
		max-height: 100%;
		overflow: hidden;
		top: 5%;
		left: 5%;
		transform: translateX(0);
		position: absolute;
		z-index: 500;
		text-align: left;
	}
	.page-7 .main .title{
		color: #32c8b4;
		font-size: 8vh;
		line-height: 1;
	}
	.page-7 .main .title-txt1{
		color: #111;
		font-size: 3vh;
		line-height: 1;
		margin: 3vh 0 0 0;
	}
	.page-7 .main .title-txt2{
		color: #7d7b73;
		font-size: 2.6vh;
		margin: 1vh 0 0 0;
    	line-height: 1.4;
	}
	.page-7 .main .title-txt3{
		width: 100%;
		color: #111;
		font-size: 2vh;
		margin: 4vh 0 0 0;
	}
	.page-7 .main .title-txt4{
		width: 100%;
		color: #111;
		font-size: 2vh;
		margin: 1vh 0 0 0;
	}
	.page-7 .bg{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.page-7 .bg .mainbg{
		width: 74%;
		position: absolute;
		bottom: 13vh;
		right: 10%;
		z-index: 99;
	}
	.page-7 .bg .bgimg0{
		width: 100%;
		position: relative;
		z-index: 99;
	}
	.page-7 .bg .bgimg1{
		width: min(27%, 150px);
		position: absolute;
		top: -26px;
		left: 1%;
		z-index: 95;
	}
	.page-7 .bg .bgimg2{
		width: min(21%, 250px);
		position: absolute;
		top: -22%;
		left: 36%;
		z-index: 95;
	}
	.page-7 .bg .bgimg3{
		width: min(24%, 250px);
		position: absolute;
		top: -12%;
		right: 7%;
		z-index: 95;
	}
	.page-7 .bg .mainbg::after{
		content: "";
		display: block;
		position: absolute;
		width: 70%;
		height: 76px;
		background-color: #7b7b7b;
		left: 50%;
		bottom: 10%;
		transform: translateX(-50%);
		z-index: 90;
		filter: blur(40px);
		opacity: 0.7;
	}
}




@media screen and (min-width: 769px) {
	.page-8{
		overflow: hidden;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: #ffd750;
		z-index: 1000;
	}
	.page-8 .main{
		width: 70%;
		max-height: 100%;
		overflow: hidden;
		top: 8%;
		left: 50%;
		transform: translateX(-50%);
		position: absolute;
		z-index: 500;
		text-align: left;
	}
	.page-8 .main .title{
		color: #32c8b4;
		font-size: 120px;
		line-height: 1;
	}
	.page-8 .main .title-txt1{
		color: #111;
		font-size: 36px;
		line-height: 1;
		margin: 30px 0 0 0;
	}
	.page-8 .main .title-txt2{
		color: #7d7b73;
		font-size: 30px;
		margin: 10px 0 0 0;
    	line-height: 1.4;
	}
	.page-8 .main .title-txt3{
		width: 50%;
		color: #111;
		font-size: 16px;
		margin: 40px 0 0 0;
	}
	.page-8 .main .title-txt4{
		width: 50%;
		color: #111;
		font-size: 16px;
		margin: 10px 0 0 0;
	}
	.page-8 .bg{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.page-8 .bg .mainbg{
		width: min(53%, 800px);
		position: absolute;
		bottom: 7%;
		right: 10%;
		z-index: 99;
	}
	.page-8 .bg .bgimg0{
		width: 100%;
		position: relative;
		z-index: 99;
	}
	.page-8 .bg .bgimg1{
		width: min(27%, 150px);
		position: absolute;
		top: -40px;
		left: 2%;
		z-index: 95;
	}
	.page-8 .bg .bgimg2{
		width: min(24%, 250px);
		position: absolute;
		top: -23%;
		left: 35%;
		z-index: 95;
	}
	.page-8 .bg .bgimg3{
		width: min(24%, 250px);
		position: absolute;
		top: -12%;
		right: 4%;
		z-index: 95;
	}
	.page-8 .bg .mainbg::after{
		content: "";
		display: block;
		position: absolute;
		width: 70%;
		height: 76px;
		background-color: #7b7b7b;
		left: 50%;
		bottom: 10%;
		transform: translateX(-50%);
		z-index: 90;
		filter: blur(40px);
		opacity: 0.7;
	}
}
@media screen and (max-width: 768px) {
	.page-8{
		overflow: hidden;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: #ffd750;
		z-index: 1000;
	}
	.page-8 .main{
		width: 81%;
		max-height: 100%;
		overflow: hidden;
		top: 5%;
		left: 5%;
		transform: translateX(0);
		position: absolute;
		z-index: 500;
		text-align: left;
	}
	.page-8 .main .title{
		color: #32c8b4;
		font-size: 8vh;
		line-height: 1;
	}
	.page-8 .main .title-txt1{
		color: #111;
		font-size: 3vh;
		line-height: 1;
		margin: 3vh 0 0 0;
	}
	.page-8 .main .title-txt2{
		color: #7d7b73;
		font-size: 2.6vh;
		margin: 1vh 0 0 0;
    	line-height: 1.4;
	}
	.page-8 .main .title-txt3{
		width: 100%;
		color: #111;
		font-size: 2vh;
		margin: 4vh 0 0 0;
	}
	.page-8 .main .title-txt4{
		width: 100%;
		color: #111;
		font-size: 2vh;
		margin: 1vh 0 0 0;
	}
	.page-8 .bg{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.page-8 .bg .mainbg{
		width: 74%;
		position: absolute;
		bottom: 13vh;
		right: 10%;
		z-index: 99;
	}
	.page-8 .bg .bgimg0{
		width: 100%;
		position: relative;
		z-index: 99;
	}
	.page-8 .bg .bgimg1{
		width: min(27%, 150px);
		position: absolute;
		top: -26px;
		left: 1%;
		z-index: 95;
	}
	.page-8 .bg .bgimg2{
		width: min(21%, 250px);
		position: absolute;
		top: -22%;
		left: 36%;
		z-index: 95;
	}
	.page-8 .bg .bgimg3{
		width: min(24%, 250px);
		position: absolute;
		top: -12%;
		right: 7%;
		z-index: 95;
	}
	.page-8 .bg .mainbg::after{
		content: "";
		display: block;
		position: absolute;
		width: 70%;
		height: 76px;
		background-color: #7b7b7b;
		left: 50%;
		bottom: 10%;
		transform: translateX(-50%);
		z-index: 90;
		filter: blur(40px);
		opacity: 0.7;
	}
}





@media screen and (min-width: 769px) {
	.page-9{
		overflow: hidden;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: #ffd750;
		z-index: 1000;
	}
	.page-9 .main{
		width: 70%;
		max-height: 100%;
		overflow: hidden;
		top: 8%;
		left: 50%;
		transform: translateX(-50%);
		position: absolute;
		z-index: 500;
		text-align: left;
	}
	.page-9 .main .title{
		color: #32c8b4;
		font-size: 120px;
		line-height: 1;
	}
	.page-9 .main .title-txt1{
		color: #111;
		font-size: 36px;
		line-height: 1;
		margin: 30px 0 0 0;
	}
	.page-9 .main .title-txt2{
		color: #7d7b73;
		font-size: 30px;
		margin: 10px 0 0 0;
    	line-height: 1.4;
	}
	.page-9 .main .title-txt3{
		width: 50%;
		color: #111;
		font-size: 16px;
		margin: 40px 0 0 0;
	}
	.page-9 .main .title-txt4{
		width: 50%;
		color: #111;
		font-size: 16px;
		margin: 10px 0 0 0;
	}
	.page-9 .bg{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.page-9 .bg .mainbg{
		width: min(44%, 600px);
		position: absolute;
		bottom: 7%;
		right: 10%;
		z-index: 99;
	}
	.page-9 .bg .bgimg0{
		width: 100%;
		position: relative;
		z-index: 99;
	}
	.page-9 .bg .bgimg1{
		width: min(42%, 250px);
		position: absolute;
		top: -35%;
		left: 32%;
		z-index: 95;
	}
	.page-9 .bg .mainbg::after{
		content: "";
		display: block;
		position: absolute;
		width: 70%;
		height: 76px;
		background-color: #7b7b7b;
		left: 50%;
		bottom: 10%;
		transform: translateX(-50%);
		z-index: 90;
		filter: blur(40px);
		opacity: 0.7;
	}
}
@media screen and (max-width: 768px) {
	.page-9{
		overflow: hidden;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: #ffd750;
		z-index: 1000;
	}
	.page-9 .main{
		width: 81%;
		max-height: 100%;
		overflow: hidden;
		top: 5%;
		left: 5%;
		transform: translateX(0);
		position: absolute;
		z-index: 500;
		text-align: left;
	}
	.page-9 .main .title{
		color: #32c8b4;
		font-size: 8vh;
		line-height: 1;
	}
	.page-9 .main .title-txt1{
		color: #111;
		font-size: 3vh;
		line-height: 1;
		margin: 3vh 0 0 0;
	}
	.page-9 .main .title-txt2{
		color: #7d7b73;
		font-size: 2.6vh;
		margin: 1vh 0 0 0;
    	line-height: 1.4;
	}
	.page-9 .main .title-txt3{
		width: 100%;
		color: #111;
		font-size: 2vh;
		margin: 4vh 0 0 0;
	}
	.page-9 .main .title-txt4{
		width: 100%;
		color: #111;
		font-size: 2vh;
		margin: 1vh 0 0 0;
	}
	.page-9 .bg{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.page-9 .bg .mainbg{
		width: 74%;
		position: absolute;
		bottom: 13vh;
		right: 10%;
		z-index: 99;
	}
	.page-9 .bg .bgimg0{
		width: 100%;
		position: relative;
		z-index: 99;
	}
	.page-9 .bg .bgimg1{
		width: min(42%, 250px);
		position: absolute;
		top: -35%;
		left: 32%;
		z-index: 95;
	}
	.page-9 .bg .mainbg::after{
		content: "";
		display: block;
		position: absolute;
		width: 70%;
		height: 76px;
		background-color: #7b7b7b;
		left: 50%;
		bottom: 10%;
		transform: translateX(-50%);
		z-index: 90;
		filter: blur(40px);
		opacity: 0.7;
	}
}





@media screen and (min-width: 769px) {
	.page-10{
		overflow: hidden;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: #ffd750;
		z-index: 1000;
	}
	.page-10 .main{
		width: 70%;
		max-height: 100%;
		overflow: hidden;
		top: 8%;
		left: 50%;
		transform: translateX(-50%);
		position: absolute;
		z-index: 500;
		text-align: left;
	}
	.page-10 .main .title{
		color: #32c8b4;
		font-size: 120px;
		line-height: 1;
	}
	.page-10 .main .title-txt1{
		color: #111;
		font-size: 36px;
		line-height: 1;
		margin: 30px 0 0 0;
	}
	.page-10 .main .title-txt2{
		color: #7d7b73;
		font-size: 30px;
		margin: 10px 0 0 0;
    	line-height: 1.4;
	}
	.page-10 .main .title-txt3{
		width: 50%;
		color: #111;
		font-size: 16px;
		margin: 40px 0 0 0;
	}
	.page-10 .main .title-txt4{
		width: 50%;
		color: #111;
		font-size: 16px;
		margin: 10px 0 0 0;
	}
	.page-10 .bg{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.page-10 .bg .mainbg{
		width: min(53%, 800px);
		position: absolute;
		bottom: 7%;
		right: 10%;
		z-index: 99;
	}
	.page-10 .bg .bgimg0{
		width: 100%;
		position: relative;
		z-index: 99;
	}
	.page-10 .bg .bgimg1{
		width: min(30%, 200px);
		position: absolute;
		top: -26%;
		left: 18%;
		z-index: 95;
	}
	.page-10 .bg .bgimg2{
		width: min(39%, 300px);
		position: absolute;
		top: -42%;
		right: 10%;
		z-index: 95;
	}
	.page-10 .bg .mainbg::after{
		content: "";
		display: block;
		position: absolute;
		width: 70%;
		height: 76px;
		background-color: #7b7b7b;
		left: 50%;
		bottom: 10%;
		transform: translateX(-50%);
		z-index: 90;
		filter: blur(40px);
		opacity: 0.7;
	}
}
@media screen and (max-width: 768px) {
	.page-10{
		overflow: hidden;
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		background-color: #ffd750;
		z-index: 1000;
	}
	.page-10 .main{
		width: 81%;
		max-height: 100%;
		overflow: hidden;
		top: 5%;
		left: 5%;
		transform: translateX(0);
		position: absolute;
		z-index: 500;
		text-align: left;
	}
	.page-10 .main .title{
		color: #32c8b4;
		font-size: 8vh;
		line-height: 1;
	}
	.page-10 .main .title-txt1{
		color: #111;
		font-size: 3vh;
		line-height: 1;
		margin: 3vh 0 0 0;
	}
	.page-10 .main .title-txt2{
		color: #7d7b73;
		font-size: 2.6vh;
		margin: 1vh 0 0 0;
    	line-height: 1.4;
	}
	.page-10 .main .title-txt3{
		width: 100%;
		color: #111;
		font-size: 2vh;
		margin: 4vh 0 0 0;
	}
	.page-10 .main .title-txt4{
		width: 100%;
		color: #111;
		font-size: 2vh;
		margin: 1vh 0 0 0;
	}
	.page-10 .bg{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.page-10 .bg .mainbg{
		width: 74%;
		position: absolute;
		bottom: 13vh;
		right: 10%;
		z-index: 99;
	}
	.page-10 .bg .bgimg0{
		width: 100%;
		position: relative;
		z-index: 99;
	}
	.page-10 .bg .bgimg1{
		width: min(30%, 200px);
		position: absolute;
		top: -26%;
		left: 18%;
		z-index: 95;
	}
	.page-10 .bg .bgimg2{
		width: min(39%, 300px);
		position: absolute;
		top: -42%;
		right: 10%;
		z-index: 95;
	}
	.page-10 .bg .mainbg::after{
		content: "";
		display: block;
		position: absolute;
		width: 70%;
		height: 76px;
		background-color: #7b7b7b;
		left: 50%;
		bottom: 14%;
		transform: translateX(-50%);
		z-index: 90;
		filter: blur(40px);
		opacity: 0.7;
	}
}




@media screen and (min-width: 769px) {
	.page-11{
		width: 100%;
		position: relative;

		background-color: #32c8b4;


		-ms-overflow-style: none;
		scrollbar-width: none;

		z-index: 100;
	}
	.page-11 div{
	}

	.page-11 .header{
		width: 100%;
		padding: 400px 0 50px 0;
		background: #FFD750;
	background: linear-gradient(180deg,rgba(255, 215, 80, 1) 0%, rgba(50, 200, 180, 1) 60%);
	}
	.page-11 .header .header-txt1{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 22px;
	}
	.page-11 .header .header-txt2{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 16px;
		margin: 40px 0 0 0;
	}
	.page-11 .line{
		width: 100%;
		height: 200px;
		position: relative;
		margin: 0 0 150px 0;
	}
	.page-11 .line::after{
		content: "";
		width: 1px;
		height: 100%;
		background-color: #111;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.page-11 .image1{
		width: 100%;
		position: relative;
	}
	.page-11 .image1 img{
		width: 100%;
		vertical-align: bottom;
	}
	.page-11 .image2{
		width: 100%;
		text-align: center;
		position: relative;
		height: 80vh;
	}
	.page-11 .image2 img, .page-11 .image2 svg{
		width: 50%;
		margin: 0 auto;
		vertical-align: bottom;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.page-11 .bottom{
		width: 100%;
		text-align: center;
		padding: 50px 0 50px 0;
	}
	.page-11 .bottom span{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 14px;
		margin: 10px 0 0 0;
	}
    #svg-animation2 .st0{
        fill:none;
        stroke:#FFFFFF;
        stroke-width:60;
        stroke-linecap:round;
        stroke-linejoin:round;
        stroke-miterlimit:10;
        stroke-dasharray: 1500; /* この行を追加 */
        stroke-dashoffset:1500; /* この行を追加 */
    }
}
@media screen and (max-width: 768px) {
	.page-11{
		width: 100%;
		position: relative;

		background-color: #32c8b4;


		-ms-overflow-style: none;
		scrollbar-width: none;

		z-index: 100;
	}
	.page-11 div{
	}

	.page-11 .header{
		width: 100%;
		padding: 16vw 0 7vw 0;
		background: #FFD750;
	background: linear-gradient(180deg,rgba(255, 215, 80, 1) 0%, rgba(50, 200, 180, 1) 60%);
	}
	.page-11 .header .header-txt1{
		display: block;
		width: 90%;
		margin: 0 auto;
		text-align: center;
		font-size: 2.4vh;
	}
	.page-11 .header .header-txt2{
		display: block;
		width: 90%;
		text-align: center;
		font-size: 2vh;
		margin: 6vw auto 0 auto;
	}
	.page-11 .line{
		width: 100%;
		height: 100px;
		position: relative;
		margin: 0 0 7vw 0;
	}
	.page-11 .line::after{
		content: "";
		width: 1px;
		height: 100%;
		background-color: #111;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.page-11 .image1{
		width: 100%;
		position: relative;
	}
	.page-11 .image1 img{
		width: 100%;
		vertical-align: bottom;
	}
	.page-11 .image2{
		width: 100%;
		text-align: center;
		position: relative;
		height: 80vh;
	}
	.page-11 .image2 img, .page-11 .image2 svg{
		width: 70%;
		margin: 0 auto;
		vertical-align: bottom;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.page-11 .bottom{
		width: 100%;
		text-align: center;
		padding: 0 0 7vw 0;
	}
	.page-11 .bottom span{
		display: block;
		width: 90%;
		text-align: center;
		font-size: 1.4vh;
		margin: 10px auto 0 auto;
	}
    #svg-animation2 .st0{
        fill:none;
        stroke:#FFFFFF;
        stroke-width:60;
        stroke-linecap:round;
        stroke-linejoin:round;
        stroke-miterlimit:10;
        stroke-dasharray: 1500; /* この行を追加 */
        stroke-dashoffset:1500; /* この行を追加 */
    }
}



.animation1 {
  animation: animation1 4.8s ease-in-out infinite alternate-reverse;
}
@keyframes animation1 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(15px);
    }
}

.animation2 {
  animation: animation2 6.8s ease-in-out infinite alternate-reverse;
}
@keyframes animation2 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(15px);
    }
}

.animation3 {
  animation: animation3 5.8s ease-in-out infinite alternate-reverse;
}
@keyframes animation3 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

.animation4 {
  animation: animation4 3.8s ease-in-out infinite alternate-reverse;
}
@keyframes animation4 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}